Adds mobile css helpers

src/Nri/Ui/ClickableSvg/V2.elm

@@ -7,7 +7,8 @@ module Nri.Ui.ClickableSvg.V2 exposing
     , disabled
     , withBorder
     , primary, secondary, danger, dangerSecondary
-    , custom, css, nriDescription, testId, id
+    , custom, nriDescription, testId, id
+    , css, notMobileCss, mobileCss, quizEngineMobileCss
     , small, medium, large
     )
 
@@ -46,7 +47,12 @@ module Nri.Ui.ClickableSvg.V2 exposing
 @docs withBorder
 @docs primary, secondary, danger, dangerSecondary
 
-@docs custom, css, nriDescription, testId, id
+@docs custom, nriDescription, testId, id
+
+
+### CSS
+
+@docs css, notMobileCss, mobileCss, quizEngineMobileCss
 
 
 ### DEPRECATED
@@ -60,10 +66,12 @@ In practice, we don't use these sizes. Remove them!
 import Accessibility.Styled.Widget as Widget
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Color, Style)
+import Css.Media
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 
 
@@ -359,6 +367,39 @@ css styles =
         )
 
 
+{-| Equivalent to:
+
+    ClickableSvg.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
+
+-}
+notMobileCss : List Style -> Attribute msg
+notMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.notMobile ] styles ]
+
+
+{-| Equivalent to:
+
+    ClickableSvg.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
+
+-}
+mobileCss : List Style -> Attribute msg
+mobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.mobile ] styles ]
+
+
+{-| Equivalent to:
+
+    ClickableSvg.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
+
+-}
+quizEngineMobileCss : List Style -> Attribute msg
+quizEngineMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
+
+
 
 -- INTERNALS