Merge pull request #154 from artsy/fix-orientation

Correct orientation interaction docs and add usage examples to ssr demo
artsy · Sep 2, 2020 · b828429 · b828429
2 parents aaff8f4 + 14c497c
commit b828429
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -348,8 +348,8 @@ const ExampleAppMedia = createMedia({
   interactions: {
     hover: "(hover: hover)",
     notHover: "(hover: none)",
-    landscape: "(orientation: landscape)",
-    portrait: "(orientation: portrait)",
+    landscape: "not all and (orientation: landscape)",
+    portrait: "not all and (orientation: portrait)",
   },
 })
 

diff --git a/examples/ssr-rendering/src/App.tsx b/examples/ssr-rendering/src/App.tsx
@@ -4,6 +4,16 @@ import { Media, MediaContextProvider } from "./Media"
 export const App = () => {
   return (
     <MediaContextProvider>
+      <Media interaction="hover">
+        media has hover interaction capabilities
+      </Media>
+      <Media interaction="notHover">
+        media lacks hover interaction capabilities
+      </Media>
+
+      <Media interaction="landscape">landscape</Media>
+      <Media interaction="portrait">portrait</Media>
+
       <Media at="sm">Hello mobile!</Media>
       <Media greaterThan="sm">Hello desktop!</Media>
     </MediaContextProvider>

diff --git a/examples/ssr-rendering/src/Media.tsx b/examples/ssr-rendering/src/Media.tsx
@@ -1,6 +1,12 @@
 import { createMedia } from "@artsy/fresnel"
 
 const ExampleAppMedia = createMedia({
+  interactions: {
+    landscape: "not all and (orientation: landscape)",
+    portrait: "not all and (orientation: portrait)",
+    hover: "(hover: hover)",
+    notHover: "(hover: none)",
+  },
   breakpoints: {
     sm: 0,
     md: 768,