diff --git a/component-catalog/src/Examples/Block.elm b/component-catalog/src/Examples/Block.elm index 4c2ad460..881e2422 100644 --- a/component-catalog/src/Examples/Block.elm +++ b/component-catalog/src/Examples/Block.elm @@ -87,18 +87,22 @@ example = [ li [] [ ClickableText.link "Display Elements and Scaffolding Container: additional things to know" [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Display-Elements-and-Scaffolding-Container-additional-things-to-know--BwRhBMKyXFFSWz~1mljN29bcAg-6vszpNDLoYIiMyg7Wv66s" + , ClickableText.appearsInline ] , text ", which identifies a number of interesting edge cases and known trade-offs." ] , li [] [ ClickableText.link "Tessa's blog post" [ ClickableText.linkExternal "https://blog.noredink.com/post/710448547697426432/word-labels]" + , ClickableText.appearsInline ] , text " explaining the initial constraints and approach." ] , li [] [ ClickableText.link "Tessa's demo on early versions of Block and Question Block" - [ ClickableText.linkExternal "https://www.dropbox.com/preview/NRI%20Engineering/Demos/2022-12-22%20-%20Tessa%20-%20QuestionBox%20and%20Block.mp4?role=work" ] + [ ClickableText.linkExternal "https://www.dropbox.com/preview/NRI%20Engineering/Demos/2022-12-22%20-%20Tessa%20-%20QuestionBox%20and%20Block.mp4?role=work" + , ClickableText.appearsInline + ] ] ] ] diff --git a/component-catalog/src/Examples/ClickableText.elm b/component-catalog/src/Examples/ClickableText.elm index 45af2074..4baad538 100644 --- a/component-catalog/src/Examples/ClickableText.elm +++ b/component-catalog/src/Examples/ClickableText.elm @@ -10,7 +10,7 @@ import Accessibility.Styled.Key as Key import Category exposing (Category(..)) import Code import CommonControls -import Css exposing (middle, verticalAlign) +import Css import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView @@ -20,9 +20,9 @@ import Guidance import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.ClickableText.V4 as ClickableText -import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Spacing.V1 as Spacing +import Nri.Ui.Table.V7 as Table import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon @@ -78,31 +78,32 @@ type State init : State init = Control.record Settings + |> Control.field "type" + (Control.choice + [ ( "button", Control.value Button ) + , ( "link", Control.value Link ) + , ( "linkExternal", Control.value LinkExternal ) + ] + ) |> Control.field "label" (Control.string "Clickable Text") |> Control.field "" (Control.list |> ControlExtra.listItems "Icons" (Control.list - |> CommonControls.icon moduleName ClickableText.icon + |> CommonControls.iconNotCheckedByDefault moduleName ClickableText.icon |> CommonControls.rightIcon moduleName ClickableText.rightIcon - |> ControlExtra.optionalBoolListItem "hideIconForMobile" - ( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile ) ) |> ControlExtra.listItems "State & Type" (Control.list - |> ControlExtra.optionalBoolListItem "disabled" - ( "ClickableText.disabled True", ClickableText.disabled True ) |> ControlExtra.optionalBoolListItem "submit (button only)" ( "ClickableText.submit", ClickableText.submit ) |> ControlExtra.optionalBoolListItem "opensModal (button only)" ( "ClickableText.opensModal", ClickableText.opensModal ) + |> ControlExtra.optionalBoolListItem "disabled" + ( "ClickableText.disabled True", ClickableText.disabled True ) ) - |> ControlExtra.listItems "CSS & Extra style options" + |> ControlExtra.listItems "CSS" (Control.list - |> ControlExtra.optionalBoolListItem "appearsInline" - ( "ClickableText.appearsInline", ClickableText.appearsInline ) - |> ControlExtra.optionalBoolListItem "hideTextForMobile" - ( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile ) |> CommonControls.css { moduleName = moduleName , use = ClickableText.css @@ -120,16 +121,39 @@ init = , use = ClickableText.notMobileCss } ) + |> ControlExtra.listItems "Compact mobile options" + (Control.list + |> ControlExtra.optionalBoolListItem "hideIconForMobile" + ( "ClickableText.hideIconForMobile", ClickableText.hideIconForMobile ) + |> ControlExtra.optionalBoolListItem "hideTextForMobile" + ( "ClickableText.hideTextForMobile", ClickableText.hideTextForMobile ) + ) + |> ControlExtra.optionalListItem "Size and display options" + (CommonControls.choice moduleName + [ ( "appearsInline", ClickableText.appearsInline ) + , ( "small", ClickableText.small ) + , ( "medium", ClickableText.medium ) + , ( "large", ClickableText.large ) + , ( "modal", ClickableText.modal ) + ] + ) ) |> State type alias Settings msg = - { label : String + { type_ : Type + , label : String , attributes : List ( String, ClickableText.Attribute msg ) } +type Type + = Button + | Link + | LinkExternal + + {-| -} type Msg = SetState (Control (Settings Msg)) @@ -163,37 +187,150 @@ viewExamples ellieLinkConfig (State control) = , version = version , update = SetState , settings = control - , mainType = Just "RootHtml.Html msg" - , extraCode = [] + , mainType = Just "RootHtml.Html Msg" + , extraCode = + [ Code.newlines + , Code.unionType "Msg" [ "DoAThing" ] + ] , renderExample = Code.unstyledView , toExampleCode = \{ label, attributes } -> let - toCode fName = + toCode fName extraAttrs = Code.fromModule moduleName fName ++ " " ++ Code.string label - ++ Code.listMultiline (List.map Tuple.first attributes) 1 + ++ Code.listMultiline + (extraAttrs ++ List.map Tuple.first attributes) + 1 in - [ { sectionName = "Button" - , code = toCode "button" - } - , { sectionName = "Link" - , code = toCode "link" - } - ] + case settings.type_ of + Button -> + [ { sectionName = "Button" + , code = + toCode "button" + [ Code.fromModule moduleName "onClick " + ++ "DoAThing" + ] + } + ] + + Link -> + [ { sectionName = "Link" + , code = + toCode "link" + [ Code.fromModule moduleName "href " + ++ Code.string "/" + ] + } + ] + + LinkExternal -> + [ { sectionName = "Link" + , code = + toCode "link" + [ Code.fromModule moduleName "linkExternal " + ++ Code.string "https://www.google.com" + ] + } + ] } , Heading.h2 - [ Heading.plaintext "Customizable Examples" + [ Heading.plaintext "Customizable Example" , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] - , buttons settings + , div + [ css + [ Css.displayFlex + , Css.justifyContent Css.center + , Css.alignItems Css.center + , Css.minHeight (Css.px 150) + ] + ] + [ case settings.type_ of + Button -> + ClickableText.button settings.label + (ClickableText.onClick (ShowItWorked moduleName "customizable example") + :: List.map Tuple.second settings.attributes + ) + + Link -> + ClickableText.link settings.label + (ClickableText.href "/" + :: List.map Tuple.second settings.attributes + ) + + LinkExternal -> + ClickableText.link settings.label + (ClickableText.linkExternal "https://www.google.com" + :: List.map Tuple.second settings.attributes + ) + ] + , Heading.h2 + [ Heading.plaintext "Set Sizes Examples" + , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] + ] + , sizeExamples settings , Heading.h2 [ Heading.plaintext "Inline ClickableText Examples" , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] ] - , Text.smallBody (inlineExample "Text.smallBody") - , Text.mediumBody (inlineExample "Text.mediumBody") + , Text.caption [ Text.markdown "Be sure to add the `appearsInline` property if the `ClickableText` appears inline. Otherwise, your styles will not match up nicely. You should not add an explicit size." ] + , Table.view [] + [ Table.custom + { header = text "Displayed" + , view = \( view, name ) -> view (inlineExample name) + , width = Css.pct 70 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ] + , sort = Nothing + } + , Table.custom + { header = text "Pattern" + , view = + \( _, textName ) -> + code [ css [ Css.fontSize (Css.px 12) ] ] + [ text + (Code.fromModule "Text" + textName + ++ Code.listMultiline + [ Code.fromModule "Text" "html" + ++ Code.listMultiline + [ "…" + , Code.fromModule moduleName + "link " + ++ Code.string "internal links" + ++ Code.listMultiline + [ Code.fromModule moduleName "appearsInline" + , Code.fromModule moduleName "href " ++ Code.string "/" + ] + 3 + , "…" + ] + 2 + ] + 1 + ) + ] + , width = Css.px 10 + , cellStyles = + always + [ Css.padding2 (Css.px 14) (Css.px 7) + , Css.verticalAlign Css.top + , Css.whiteSpace Css.preWrap + ] + , sort = Nothing + } + ] + [ ( Text.caption, "caption" ) + , ( Text.smallBody, "smallBody" ) + , ( Text.smallBodyGray, "smallBodyGray" ) + , ( Text.mediumBody, "mediumBody" ) + , ( Text.mediumBodyGray, "mediumBodyGray" ) + , ( Text.ugSmallBody, "ugSmallBody" ) + , ( Text.ugMediumBody, "ugMediumBody" ) + ] + |> List.singleton + |> div [ css [ Css.overflow Css.auto ] ] ] |> div [] @@ -249,46 +386,72 @@ sizes = ] -buttons : Settings Msg -> Html Msg -buttons settings = - let - sizeRow label render = - row label (List.map render sizes) - in - table [] - [ tr [] (td [] [] :: List.map (\( size, sizeLabel ) -> th [] [ text sizeLabel ]) sizes) - , sizeRow ".link" - (\( size, sizeLabel ) -> - ClickableText.link settings.label - (size :: List.map Tuple.second settings.attributes) - |> exampleCell - ) - , sizeRow ".button" - (\( size, sizeLabel ) -> - ClickableText.button settings.label - (size - :: ClickableText.onClick (ShowItWorked moduleName sizeLabel) - :: List.map Tuple.second settings.attributes - ) - |> exampleCell - ) +sizeExamples : Settings Msg -> Html Msg +sizeExamples settings = + Table.view [] + [ Table.custom + { header = text "Size" + , view = + \{ sizeName } -> + code [ css [ Css.fontSize (Css.px 12) ] ] + [ text (Code.fromModule "ClickableText" sizeName) + ] + , width = Css.px 10 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ] + , sort = Nothing + } + , Table.custom + { header = text "Button" + , view = \{ size } -> sizeExamplesFor ClickableText.button [ size ] + , width = Css.px 10 + , cellStyles = + always + [ Css.padding2 (Css.px 14) (Css.px 7) + , Css.verticalAlign Css.top + ] + , sort = Nothing + } + , Table.custom + { header = text "Link" + , view = \{ size } -> sizeExamplesFor ClickableText.link [ size ] + , width = Css.px 10 + , cellStyles = + always + [ Css.padding2 (Css.px 14) (Css.px 7) + , Css.verticalAlign Css.top + ] + , sort = Nothing + } + , Table.custom + { header = text "External link" + , view = \{ size } -> sizeExamplesFor ClickableText.link [ size, ClickableText.linkExternal "https://www.google.com" ] + , width = Css.px 10 + , cellStyles = + always + [ Css.padding2 (Css.px 14) (Css.px 7) + , Css.verticalAlign Css.top + ] + , sort = Nothing + } ] + (List.map (\( size, sizeName ) -> { size = size, sizeName = sizeName }) sizes) |> List.singleton |> div [ css [ Css.overflow Css.auto ] ] -row : String -> List (Html msg) -> Html msg -row label tds = - tr [] (th [] [ td [] [ text label ] ] :: tds) - - -exampleCell : Html msg -> Html msg -exampleCell view = - td - [ css - [ verticalAlign middle - , Css.width (Css.px 200) - , Css.borderTop3 (Css.px 1) Css.solid Colors.gray85 +sizeExamplesFor : (String -> List (ClickableText.Attribute msg) -> Html msg) -> List (ClickableText.Attribute msg) -> Html msg +sizeExamplesFor render attrs = + ul [ css [ Css.margin Css.zero ] ] + [ li [] [ render "No icons" attrs ] + , li [] [ render "Left icon" (attrs ++ [ ClickableText.icon UiIcon.arrowLeft ]) ] + , li [] [ render "Right icon" (attrs ++ [ ClickableText.rightIcon UiIcon.arrowRight ]) ] + , li [] + [ render "Disabled w/icons" + (attrs + ++ [ ClickableText.icon UiIcon.arrowLeft + , ClickableText.rightIcon UiIcon.arrowRight + , ClickableText.disabled True + ] + ) ] ] - [ view ] diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index 5a67be10..b8bcfb3f 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -197,8 +197,7 @@ view ellieLinkConfig state = (Code.newlineWithIndent 2 ++ (Code.fromModule "ClickableText" "button " ++ Code.string "Button") ++ Code.listMultiline - [ Code.fromModule "ClickableText" "medium" - , Code.fromModule "ClickableText" "custom" ++ " attributes" + [ Code.fromModule "ClickableText" "custom" ++ " attributes" ] 3 ) @@ -234,8 +233,7 @@ view ellieLinkConfig state = [ Menu.entry "customizable-example" <| \attrs -> ClickableText.button "Button" - [ ClickableText.medium - , ClickableText.onClick (ConsoleLog "Interactive example") + [ ClickableText.onClick (ConsoleLog "Interactive example") , ClickableText.custom attrs ] ] @@ -281,7 +279,6 @@ view ellieLinkConfig state = \attrs -> ClickableText.button "Hello" [ ClickableText.onClick (ConsoleLog "Hello") - , ClickableText.medium , ClickableText.custom attrs ] , Menu.group "Menu group" @@ -289,7 +286,6 @@ view ellieLinkConfig state = \attrs -> ClickableText.button "Gift" [ ClickableText.onClick (ConsoleLog "Gift") - , ClickableText.medium , ClickableText.custom attrs , ClickableText.icon UiIcon.gift ] @@ -297,7 +293,6 @@ view ellieLinkConfig state = \attrs -> ClickableText.button "Nope!" [ ClickableText.onClick (ConsoleLog "Nope!") - , ClickableText.medium , ClickableText.custom attrs , ClickableText.icon UiIcon.null ] @@ -305,7 +300,6 @@ view ellieLinkConfig state = \attrs -> ClickableText.button "Skip" [ ClickableText.onClick (ConsoleLog "Skip") - , ClickableText.medium , ClickableText.custom attrs ] ] @@ -313,7 +307,6 @@ view ellieLinkConfig state = \attrs -> ClickableText.button "Performance" [ ClickableText.onClick (ConsoleLog "Performance") - , ClickableText.medium , ClickableText.custom attrs ] ] diff --git a/component-catalog/src/Examples/Message.elm b/component-catalog/src/Examples/Message.elm index e4a5ab57..08a78cc8 100644 --- a/component-catalog/src/Examples/Message.elm +++ b/component-catalog/src/Examples/Message.elm @@ -292,20 +292,21 @@ contentTypes : } contentTypes = [ { contentType = "paragraph" - , content = Message.paragraph "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](google.com)." + , content = Message.paragraph "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)." } , { contentType = "plaintext" - , content = Message.plaintext "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](google.com)." + , content = Message.plaintext "*Hello, there!* Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)." } , { contentType = "markdown" - , content = Message.markdown "Hello, there! Hope you're doing well. Use the following link to go to [a fake destination](google.com)." + , content = Message.markdown "Hello, there! Hope you're doing well. Use the following link to go to [a fake destination](https://www.google.com)." } , { contentType = "html" , content = Message.html [ text "Hello, there! Hope you're doing well. Use the following link to go to " , ClickableText.link "a fake destination" - [ ClickableText.href "google.com" + [ ClickableText.href "https://www.google.com" + , ClickableText.appearsInline ] , text "." ] diff --git a/component-catalog/src/Examples/Modal.elm b/component-catalog/src/Examples/Modal.elm index 01f77f29..00523304 100644 --- a/component-catalog/src/Examples/Modal.elm +++ b/component-catalog/src/Examples/Modal.elm @@ -77,8 +77,7 @@ initViewSettings = |> Control.field "Content" (Control.stringTextarea <| String.join "\n\n" - [ "Generally, you'll want to pair the Modal.warning theme with the Button.danger theme and the Modal.info theme with the Button.primary theme." - , "Muffin liquorice powder liquorice jujubes biscuit cookie candy canes lemon drops. Liquorice powder carrot cake dragée icing tootsie roll apple pie lemon drops lemon drops. Jujubes danish bear claw cotton candy. Dragée apple pie tiramisu. Sugar plum dessert pastry marzipan chocolate cake dragée sesame snaps. Marshmallow gingerbread lemon drops. Brownie chocolate fruitcake pastry. Powder jelly beans jujubes. Croissant macaroon dessert cookie candy canes jelly jujubes. Muffin liquorice ice cream wafer donut danish soufflé dragée chocolate bar. Candy croissant candy wafer toffee lemon drops croissant danish sugar plum. Cookie cake candy canes. Pastry powder muffin soufflé tootsie roll sweet cookie tiramisu." + [ "Muffin liquorice powder liquorice jujubes biscuit cookie candy canes lemon drops. Liquorice powder carrot cake dragée icing tootsie roll apple pie lemon drops lemon drops. Jujubes danish bear claw cotton candy. Dragée apple pie tiramisu. Sugar plum dessert pastry marzipan chocolate cake dragée sesame snaps. Marshmallow gingerbread lemon drops. Brownie chocolate fruitcake pastry. Powder jelly beans jujubes. Croissant macaroon dessert cookie candy canes jelly jujubes. Muffin liquorice ice cream wafer donut danish soufflé dragée chocolate bar. Candy croissant candy wafer toffee lemon drops croissant danish sugar plum. Cookie cake candy canes. Pastry powder muffin soufflé tootsie roll sweet cookie tiramisu." , "Candy cake danish gingerbread. Caramels toffee cupcake toffee sweet. Gummi bears candy cheesecake sweet. Pie gingerbread sugar plum halvah muffin icing marzipan wafer icing. Candy fruitcake gummies icing marzipan. Halvah jelly beans candy candy canes biscuit bonbon sesame snaps. Biscuit carrot cake croissant cake chocolate lollipop candy biscuit croissant. Topping jujubes apple pie croissant chocolate cake. Liquorice cookie dragée gummies cotton candy fruitcake lemon drops candy canes. Apple pie lemon drops gummies cake chocolate bar cake jelly-o tiramisu. Chocolate bar icing pudding marshmallow cake soufflé soufflé muffin. Powder lemon drops biscuit sugar plum cupcake carrot cake powder cake dragée. Bear claw gummi bears liquorice sweet roll." ] ) @@ -184,7 +183,11 @@ example = ] ] ] - , about = [ Guidance.useATACGuide moduleName ] + , about = + [ Guidance.useATACGuide moduleName + , Text.smallBody + [ Text.markdown "Use `Button.modal` and/or `ClickableText.modal` within the `Modal` footer." ] + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Guidance.elm b/component-catalog/src/Guidance.elm index 93b90591..edb123ba 100644 --- a/component-catalog/src/Guidance.elm +++ b/component-catalog/src/Guidance.elm @@ -66,7 +66,7 @@ message moduleName = useATACGuide : String -> Html msg useATACGuide moduleName = - Text.mediumBody + Text.smallBody [ Text.html [ text ("To ensure your use of " ++ moduleName ++ " is accessible to assistive technology, please review the ") , ClickableText.link "Assistive technology notification design & development guide" diff --git a/elm.json b/elm.json index a772b9d3..2f4c2999 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "NoRedInk/noredink-ui", "summary": "UI Widgets we use at NRI", "license": "BSD-3-Clause", - "version": "27.12.0", + "version": "27.12.1", "exposed-modules": [ "Browser.Events.Extra", "Nri.Test.KeyboardHelpers.V1", @@ -130,4 +130,4 @@ "elm-explorations/test": "2.0.0 <= v < 3.0.0", "tesk9/accessible-html": "5.0.0 <= v < 6.0.0" } -} +} \ No newline at end of file diff --git a/src/Nri/Ui/ClickableText/V4.elm b/src/Nri/Ui/ClickableText/V4.elm index 3c0c379c..7607c59a 100644 --- a/src/Nri/Ui/ClickableText/V4.elm +++ b/src/Nri/Ui/ClickableText/V4.elm @@ -14,7 +14,9 @@ module Nri.Ui.ClickableText.V4 exposing , css, notMobileCss, mobileCss, quizEngineMobileCss, rightIconCss ) -{-| +{-| Patch changes + + - switchs `Medium` size to the default # Changes from V3 @@ -117,7 +119,8 @@ small = set (\attributes -> { attributes | size = Small }) -{-| -} +{-| `Medium` is the default size. +-} medium : Attribute msg medium = set (\attributes -> { attributes | size = Medium }) @@ -387,15 +390,22 @@ disabled value = -} appearsInline : Attribute msg appearsInline = - css - [ Css.borderBottom3 (Css.px 1) Css.solid Colors.azure - , Css.Global.withAttribute "aria-disabled=true" [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ] - , Css.disabled [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ] - , Css.display Css.inline - , Css.fontFamily Css.inherit - , Css.fontWeight Css.inherit - , Css.fontSize Css.inherit - ] + set + (\config -> + { config + | customStyles = + List.append config.customStyles + [ Css.borderBottom3 (Css.px 1) Css.solid Colors.azure + , Css.Global.withAttribute "aria-disabled=true" [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ] + , Css.disabled [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ] + , Css.display Css.inline + , Css.fontFamily Css.inherit + , Css.fontWeight Css.inherit + , Css.fontSize Css.inherit + ] + , size = Inherited + } + ) {-| Specifies custom styles for the rightIcon @@ -695,7 +705,7 @@ type alias ClickableTextAttributes msg = defaults : ClickableTextAttributes msg defaults = { clickableAttributes = ClickableAttributes.init - , size = Inherited + , size = Medium , label = "" , icon = Nothing , iconStyles = []