From 654f5feaeb781a10939069a48feaacda482418b9 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Fri, 4 Mar 2022 15:12:31 -0800 Subject: [PATCH] Adds query selectors to the clickable text example --- src/Nri/Ui/ClickableText/V3.elm | 48 +++++++++++++++++- styleguide-app/CommonControls.elm | 60 +++++++++++++++++++---- styleguide-app/Examples/ClickableSvg.elm | 10 ++-- styleguide-app/Examples/ClickableText.elm | 20 ++++++++ 4 files changed, 120 insertions(+), 18 deletions(-) diff --git a/src/Nri/Ui/ClickableText/V3.elm b/src/Nri/Ui/ClickableText/V3.elm index 01e71990..70a12802 100644 --- a/src/Nri/Ui/ClickableText/V3.elm +++ b/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 `` 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 diff --git a/styleguide-app/CommonControls.elm b/styleguide-app/CommonControls.elm index a8c00ac4..37aafbc6 100644 --- a/styleguide-app/CommonControls.elm +++ b/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) diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index 402d4158..9b839db3 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/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 = "" } diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index 5d8dfea2..c256c44a 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/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