Merge pull request #915 from NoRedInk/bat/container-media-query-helpers

Adds breakpoint css helpers to Container

src/Nri/Ui/Container/V2.elm

@@ -1,6 +1,8 @@
 module Nri.Ui.Container.V2 exposing
     ( view, Attribute
-    , paddingPx, custom, css, testId, id
+    , custom, testId, id
+    , css, notMobileCss, mobileCss, quizEngineMobileCss
+    , paddingPx
     , plaintext, markdown, html
     , gray, default, disabled, invalid, pillow, buttony
     )
@@ -14,6 +16,7 @@ module Nri.Ui.Container.V2 exposing
 ## Patch changes
 
   - use `Shadows`
+  - add notMobileCss, mobileCss, quizEngineMobileCss
 
 
 ## Changes from V1
@@ -36,7 +39,10 @@ module Nri.Ui.Container.V2 exposing
 ## View
 
 @docs view, Attribute
-@docs paddingPx, custom, css, testId, id
+@docs custom, testId, id
+
+@docs css, notMobileCss, mobileCss, quizEngineMobileCss
+@docs paddingPx
 
 
 ## Content
@@ -58,7 +64,7 @@ import Markdown
 import Nri.Ui
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
-import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Nri.Ui.Shadows.V1 as Shadows
 
 
@@ -120,6 +126,45 @@ css css_ =
     Attribute <| \config -> { config | css = config.css ++ css_ }
 
 
+{-| Set styles that will only apply if the viewport is wider than NRI's mobile breakpoint.
+
+Equivalent to:
+
+    Container.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
+
+-}
+notMobileCss : List Style -> Attribute msg
+notMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.notMobile ] styles ]
+
+
+{-| Set styles that will only apply if the viewport is narrower than NRI's mobile breakpoint.
+
+Equivalent to:
+
+    Container.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
+
+-}
+mobileCss : List Style -> Attribute msg
+mobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.mobile ] styles ]
+
+
+{-| Set styles that will only apply if the viewport is narrower than NRI's quiz-engine-specific mobile breakpoint.
+
+Equivalent to:
+
+    Container.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
+
+-}
+quizEngineMobileCss : List Style -> Attribute msg
+quizEngineMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
+
+
 {-| -}
 view : List (Attribute msg) -> Html msg
 view attributes =
@@ -244,7 +289,7 @@ pillowStyles =
     , border3 (px 1) solid Colors.gray92
     , Shadows.medium
     , backgroundColor Colors.white
-    , withMedia [ mobile ]
+    , withMedia [ MediaQuery.mobile ]
         [ borderRadius (px 8)
         , padding (px 20)
         ]
@@ -269,7 +314,7 @@ buttonyStyles =
     , border3 (px 1) solid Colors.gray85
     , borderBottom3 (px 4) solid Colors.gray85
     , backgroundColor Colors.white
-    , withMedia [ mobile ]
+    , withMedia [ MediaQuery.mobile ]
         [ borderRadius (px 8)
         ]
     ]

styleguide-app/Examples/Container.elm

@@ -157,7 +157,10 @@ init =
     { control =
         ControlExtra.list
             |> ControlExtra.optionalListItem "paddingPx" controlPaddingPx
-            |> CommonControls.css { moduleName = "Container", use = Container.css }
+            |> CommonControls.css { moduleName = moduleName, use = Container.css }
+            |> CommonControls.mobileCss { moduleName = moduleName, use = Container.mobileCss }
+            |> CommonControls.quizEngineMobileCss { moduleName = moduleName, use = Container.quizEngineMobileCss }
+            |> CommonControls.notMobileCss { moduleName = moduleName, use = Container.notMobileCss }
             |> ControlExtra.listItem "content" controlContent
     }