Adds query selectors to the clickable text example

src/Nri/Ui/ClickableText/V3.elm

@@ -6,7 +6,8 @@ module Nri.Ui.ClickableText.V3 exposing
     , onClick
     , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
     , icon
-    , custom, css, nriDescription, testId, id
+    , custom, nriDescription, testId, id
+    , css, notMobileCss, mobileCss, quizEngineMobileCss
     )
 
 {-|
@@ -63,19 +64,29 @@ HTML `<a>` elements and are created here with `*Link` functions.
 @docs onClick
 @docs href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
 
+
+## Customization
+
 @docs icon
-@docs custom, css, nriDescription, testId, id
+@docs custom, nriDescription, testId, id
+
+
+### CSS
+
+@docs css, notMobileCss, mobileCss, quizEngineMobileCss
 
 -}
 
 import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Style)
+import Css.Media
 import Html.Styled as Html exposing (..)
 import Html.Styled.Attributes as Attributes
 import Nri.Ui
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
 import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+import Nri.Ui.MediaQuery.V1 as MediaQuery
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 
 
@@ -173,6 +184,39 @@ css styles =
         )
 
 
+{-| Equivalent to:
+
+    ClickableText.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:
+
+    ClickableText.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:
+
+    ClickableText.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
+
+-}
+quizEngineMobileCss : List Style -> Attribute msg
+quizEngineMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
+
+
 
 -- LINKING, CLICKING, and TRACKING BEHAVIOR
 

styleguide-app/CommonControls.elm

@@ -1,4 +1,13 @@
-module CommonControls exposing (css, disabledListItem, exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation, uiIcon)
+module CommonControls exposing
+    ( css, mobileCss, quizEngineMobileCss, notMobileCss
+    , disabledListItem, exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation, uiIcon
+    )
+
+{-|
+
+@docs css, mobileCss, quizEngineMobileCss, notMobileCss
+
+-}
 
 import Css
 import Debug.Control as Control exposing (Control)
@@ -125,19 +134,52 @@ disabledListItem moduleName f =
 
 
 css :
-    { moduleName : String
-    , helperName : String
-    , use : List Css.Style -> b
-    , default : String
-    }
+    { moduleName : String, use : List Css.Style -> b, default : String }
     -> Control (List ( String, b ))
     -> Control (List ( String, b ))
-css { moduleName, helperName, use, default } =
+css =
+    css_ "css"
+
+
+mobileCss :
+    { moduleName : String, use : List Css.Style -> b, default : String }
+    -> Control (List ( String, b ))
+    -> Control (List ( String, b ))
+mobileCss =
+    css_ "mobileCss"
+
+
+quizEngineMobileCss :
+    { moduleName : String, use : List Css.Style -> b, default : String }
+    -> Control (List ( String, b ))
+    -> Control (List ( String, b ))
+quizEngineMobileCss =
+    css_ "quizEngineMobileCss"
+
+
+notMobileCss :
+    { moduleName : String, use : List Css.Style -> b, default : String }
+    -> Control (List ( String, b ))
+    -> Control (List ( String, b ))
+notMobileCss =
+    css_ "notMobileCss"
+
+
+css_ :
+    String
+    ->
+        { moduleName : String
+        , use : List Css.Style -> b
+        , default : String
+        }
+    -> Control (List ( String, b ))
+    -> Control (List ( String, b ))
+css_ helperName { moduleName, use, default } =
     ControlExtra.optionalListItem helperName
         (Control.map
-            (\( cssString, css_ ) ->
+            (\( cssString, cssValue ) ->
                 ( moduleName ++ "." ++ helperName ++ " " ++ cssString
-                , use css_
+                , use cssValue
                 )
             )
             (ControlExtra.css default)

styleguide-app/Examples/ClickableSvg.elm

@@ -278,25 +278,21 @@ initSettings =
                     )
                 |> CommonControls.css
                     { moduleName = "ClickableSvg"
-                    , helperName = "css"
                     , use = ClickableSvg.css
                     , default = "border: 2px solid red;"
                     }
-                |> CommonControls.css
+                |> CommonControls.mobileCss
                     { moduleName = "ClickableSvg"
-                    , helperName = "mobileCss"
                     , use = ClickableSvg.mobileCss
                     , default = "padding: 10px;"
                     }
-                |> CommonControls.css
+                |> CommonControls.quizEngineMobileCss
                     { moduleName = "ClickableSvg"
-                    , helperName = "quizEngineMobileCss"
                     , use = ClickableSvg.quizEngineMobileCss
                     , default = ""
                     }
-                |> CommonControls.css
+                |> CommonControls.notMobileCss
                     { moduleName = "ClickableSvg"
-                    , helperName = "notMobileCss"
                     , use = ClickableSvg.notMobileCss
                     , default = ""
                     }

styleguide-app/Examples/ClickableText.elm

@@ -73,6 +73,26 @@ init =
                         )
                         CommonControls.uiIcon
                     )
+                |> CommonControls.css
+                    { moduleName = "ClickableText"
+                    , use = ClickableText.css
+                    , default = "border: 2px solid red;"
+                    }
+                |> CommonControls.mobileCss
+                    { moduleName = "ClickableText"
+                    , use = ClickableText.mobileCss
+                    , default = "padding: 10px;"
+                    }
+                |> CommonControls.quizEngineMobileCss
+                    { moduleName = "ClickableText"
+                    , use = ClickableText.quizEngineMobileCss
+                    , default = ""
+                    }
+                |> CommonControls.notMobileCss
+                    { moduleName = "ClickableText"
+                    , use = ClickableText.notMobileCss
+                    , default = ""
+                    }
             )
         |> State