diff --git a/component-catalog/src/Examples/Accordion.elm b/component-catalog/src/Examples/Accordion.elm index eaf4ce3b..2f73b584 100644 --- a/component-catalog/src/Examples/Accordion.elm +++ b/component-catalog/src/Examples/Accordion.elm @@ -21,6 +21,7 @@ import Debug.Control as Control exposing (Control) import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) +import Guidance import Html.Styled.Attributes as Attributes exposing (css, src) import KeyboardSupport exposing (Key(..)) import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..)) @@ -71,11 +72,11 @@ example = ] ] , about = - [ Text.smallBody - [ Text.html - [ ul [ css [ paddingLeft (px 16), margin zero ] ] - [ li [] [ text "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " ] - , li [] + [ ul [ css [ paddingLeft (px 16), margin zero ] ] + [ li [] [ Text.smallBody [ Text.plaintext "The Accordion component is designed to be used when you have either a list or a tree of expandables. It may also be used when there's only one expandable. " ] ] + , li [] + [ Text.smallBody + [ Text.html [ text "Devs should watch the entirety of " , ClickableText.link "Tessa's Accordion demo" [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kLjOvS0PX5y-YYas6VmtUf5eEb1ViqNKKB-01gCELXG5tMjINEdop6dXrmfCyfC1A3Xj9kTUK8eIDe0.LO5NQR0X3udwz13x?canPlayFromShare=true&from=share_recording_detail&startTime=1681398154000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2F6R2Tk0FkzAYJ-44Q4Qs2Dx2RPR1GCXOCcaQsEai6vbtkO8oo9Ke8-_goIVwPDn9I.VVXdtb2PlpuTEqGs%3FstartTime%3D1681398154000" @@ -85,6 +86,7 @@ example = ] ] ] + , li [] [ Guidance.communicateState moduleName ] ] ] , view = view diff --git a/component-catalog/src/Examples/Balloon.elm b/component-catalog/src/Examples/Balloon.elm index 13b5ea9b..6367fd4d 100644 --- a/component-catalog/src/Examples/Balloon.elm +++ b/component-catalog/src/Examples/Balloon.elm @@ -51,7 +51,7 @@ example = , Balloon.plaintext "This is a balloon." ] ] - , about = Guidance.useATACGuide moduleName + , about = [ Guidance.useATACGuide moduleName ] , view = view } diff --git a/component-catalog/src/Examples/Checkbox.elm b/component-catalog/src/Examples/Checkbox.elm index b6cb0e79..ea28cd2e 100644 --- a/component-catalog/src/Examples/Checkbox.elm +++ b/component-catalog/src/Examples/Checkbox.elm @@ -53,7 +53,11 @@ example = , update = update , subscriptions = \_ -> Sub.none , preview = preview - , about = [ Guidance.helpfullyDisabled moduleName ] + , about = + [ Guidance.communicateState moduleName + , Guidance.helpfullyDisabled moduleName + , Guidance.message moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/ClickableSvg.elm b/component-catalog/src/Examples/ClickableSvg.elm index b5c816a5..f6ec2a41 100644 --- a/component-catalog/src/Examples/ClickableSvg.elm +++ b/component-catalog/src/Examples/ClickableSvg.elm @@ -16,6 +16,7 @@ import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import EventExtras import Example exposing (Example) +import Guidance import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import Nri.Ui.ClickableSvg.V2 as ClickableSvg @@ -59,7 +60,7 @@ example = , ClickableSvg.custom [ Key.tabbable False ] ] ] - , about = [] + , about = [ Guidance.helpfullyDisabled moduleName ] , view = \ellieLinkConfig state -> [ ControlView.view diff --git a/component-catalog/src/Examples/ClickableText.elm b/component-catalog/src/Examples/ClickableText.elm index 9a49b678..4baad538 100644 --- a/component-catalog/src/Examples/ClickableText.elm +++ b/component-catalog/src/Examples/ClickableText.elm @@ -16,6 +16,7 @@ import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) +import Guidance import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.ClickableText.V4 as ClickableText @@ -56,7 +57,7 @@ example = , ClickableText.custom [ Key.tabbable False ] ] ] - , about = [] + , about = [ Guidance.helpfullyDisabled moduleName ] , view = \ellieLinkConfig state -> [ viewExamples ellieLinkConfig state ] , categories = [ Buttons ] , keyboardSupport = [] diff --git a/component-catalog/src/Examples/Colors.elm b/component-catalog/src/Examples/Colors.elm index a75b10c6..ac07be04 100644 --- a/component-catalog/src/Examples/Colors.elm +++ b/component-catalog/src/Examples/Colors.elm @@ -15,10 +15,12 @@ import Css import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes as Attributes exposing (css) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.Extra exposing (fromCssColor) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading +import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Text.V6 as Text import SolidColor exposing (luminance) @@ -52,10 +54,24 @@ example = , ( "mustard", Colors.mustard ) ] |> List.map viewPreviewSwatch - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ Html.text "Please refer to " + , ClickableText.link "the guides for designing with sufficient contrast and high contrast mode in mind" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Accessibility-testing-Color-contrast--CJat4EsY~XD~lUuIBYIXpbKNAg-sDEDETuS9rqQbdEs7nybl" + , ClickableText.appearsInline + ] + , Html.text "." + ] + ] + ] , view = \ellieLinkConfig _ -> - [ Heading.h2 [ Heading.plaintext "General Colors" ] + [ Heading.h2 + [ Heading.plaintext "General Colors" + , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ] + ] , viewGroupedColors colorGroupings , Heading.h2 [ Heading.plaintext "Background Highlight Colors" ] , Text.mediumBody [ Text.plaintext "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ] diff --git a/component-catalog/src/Examples/FocusRing.elm b/component-catalog/src/Examples/FocusRing.elm index 666c9591..5f7d3697 100644 --- a/component-catalog/src/Examples/FocusRing.elm +++ b/component-catalog/src/Examples/FocusRing.elm @@ -21,6 +21,7 @@ import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.FocusRing.V1 as FocusRing import Nri.Ui.Heading.V3 as Heading +import Nri.Ui.Message.V4 as Message import Nri.Ui.RadioButton.V4 as RadioButton import Nri.Ui.SegmentedControl.V14 as SegmentedControl import Nri.Ui.Spacing.V1 as Spacing @@ -29,7 +30,9 @@ import Nri.Ui.Switch.V3 as Switch import Nri.Ui.Table.V7 as Table import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon +import Routes import Task +import UsageExamples.FocusLoop {-| -} @@ -49,9 +52,46 @@ example = , about = [ Text.smallBody [ Text.html - [ text "Custom high-contrast focus ring styles. Learn more about this component in " - , ClickableText.link "Custom Focus Rings on the NoRedInk blog" - [ ClickableText.linkExternal "https://blog.noredink.com/post/703458632758689792/custom-focus-rings" + [ text "Custom high-contrast focus ring styles" + ] + ] + , Text.smallBody + [ Text.html + [ ul [] + [ li [] + [ text "Learn more about this component in " + , ClickableText.link "Custom Focus Rings on the NoRedInk blog" + [ ClickableText.linkExternal "https://blog.noredink.com/post/703458632758689792/custom-focus-rings" + , ClickableText.appearsInline + ] + , text " and in " + , ClickableText.link "Tessa's focus ring demo" + [ ClickableText.linkExternal "https://www.dropbox.com/scl/fi/e5o8zqbx65iri706661u8/video1232435053.mp4?rlkey=e3rfqz5cgtvmqh1ydotacf51z&dl=0" + , ClickableText.appearsInline + ] + , text "." + ] + , li [] + [ text "Learn more about keyboard expectations by reviewing each component's \"Keyboard support\" section, " + , ClickableText.link "our keyboard testing guide" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Accessibility-testing-Keyboard-visible-focus--CJenBQ8zDWXPPTmGglbqHNUVAg-aVALEVzmwDAdwB1um7A57" + , ClickableText.appearsInline + ] + , text " and " + , ClickableText.link "the keyboard accessibility section of the Help Center" + [ ClickableText.linkExternal "https://noredink.zendesk.com/hc/en-us/sections/7976713221915-Keyboard-accessibility" + , ClickableText.appearsInline + ] + , text "." + ] + ] + ] + ] + , Message.view + [ Message.html + [ text "Looking for a way to loop keyboard focus through a list of elements? Check out " + , ClickableText.link "Focus Loop" + [ ClickableText.href (Routes.usageExampleHref UsageExamples.FocusLoop.example) , ClickableText.appearsInline ] , text "." diff --git a/component-catalog/src/Examples/Header.elm b/component-catalog/src/Examples/Header.elm index dfd8ec0a..aceb3e52 100644 --- a/component-catalog/src/Examples/Header.elm +++ b/component-catalog/src/Examples/Header.elm @@ -25,6 +25,7 @@ import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Select.V9 as Select import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Svg.V1 as Svg +import Nri.Ui.Text.V6 as Text import Nri.Ui.UiIcon.V1 as UiIcon @@ -49,7 +50,18 @@ example = , update = update , subscriptions = \_ -> Sub.none , preview = [ viewPreview ] - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ text "Learn more about this component in " + , ClickableText.link "Tessa's demo" + [ ClickableText.linkExternal "https://noredink.slack.com/archives/CDMGJ8PFA/p1684424409046369" + , ClickableText.appearsInline + ] + , text "." + ] + ] + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Heading.elm b/component-catalog/src/Examples/Heading.elm index 36f9d83d..30d2f1b8 100644 --- a/component-catalog/src/Examples/Heading.elm +++ b/component-catalog/src/Examples/Heading.elm @@ -14,8 +14,11 @@ import Debug.Control as Control exposing (Control) import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import Example exposing (Example) +import Html.Styled exposing (..) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Spacing.V1 as Spacing +import Nri.Ui.Text.V6 as Text import ViewHelpers exposing (viewExamples) @@ -45,7 +48,18 @@ example = , Heading.h3 [ Heading.plaintext "h3" ] , Heading.h4 [ Heading.plaintext "h4" ] ] - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ text "Please refer to the " + , ClickableText.link "headings testing guide" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Accessibility-testing-Headings--CJezbs8vSmyIxcqChSGyEj7CAg-6l0cMj4e1kArUIb7fgNsH" + , ClickableText.appearsInline + ] + , text " to understand expectations and user impact of proper heading structure." + ] + ] + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Highlighter.elm b/component-catalog/src/Examples/Highlighter.elm index 2b208910..dad4c073 100644 --- a/component-catalog/src/Examples/Highlighter.elm +++ b/component-catalog/src/Examples/Highlighter.elm @@ -20,6 +20,7 @@ import Html.Styled.Attributes exposing (css) import List.Extra import Maybe.Extra import Nri.Ui.Button.V10 as Button +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading @@ -68,7 +69,23 @@ example = } ] ] - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ text "Learn more about this component from " + , ClickableText.link "Tessa's demo" + [ ClickableText.linkExternal "https://www.dropbox.com/s/tchb0t9lgdyzw01/2022-11-10%20-%20Tessa%20Kelly%20-%20Nri.Ui.Highlighter.V1.mp4?dl=0&unfurl=slack_gen" + , ClickableText.appearsInline + ] + , text " and " + , ClickableText.link "the highlighter doc" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Highlighter-component-documentation-mmPuvnWVKcxpb7r3FjkZn" + , ClickableText.appearsInline + ] + , text ", which covers use of the component throughout the NoRedInk app." + ] + ] + ] , view = \ellieLinkConfig state -> [ ControlView.view diff --git a/component-catalog/src/Examples/Loading.elm b/component-catalog/src/Examples/Loading.elm index d69ac09c..17aca650 100644 --- a/component-catalog/src/Examples/Loading.elm +++ b/component-catalog/src/Examples/Loading.elm @@ -101,7 +101,7 @@ example = ] |> Svg.toHtml ] - , about = Guidance.useATACGuide moduleName + , about = [ Guidance.useATACGuide moduleName ] , view = \ellieLinkConfig { showLoadingFadeIn, showLoading, showSpinners } -> [ Heading.h2 diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index b53ad9e2..b8bcfb3f 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -22,6 +22,7 @@ import Example exposing (Example) import Examples.Button import Examples.ClickableSvg import Examples.ClickableText +import Guidance import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) import Nri.Ui.Button.V10 as Button @@ -81,7 +82,7 @@ example = , { keys = [ Esc ], result = "Closes the menu" } ] , preview = [ preview ] - , about = [] + , about = [ Guidance.communicateState moduleName ] , view = view } diff --git a/component-catalog/src/Examples/Message.elm b/component-catalog/src/Examples/Message.elm index 99947e83..08a78cc8 100644 --- a/component-catalog/src/Examples/Message.elm +++ b/component-catalog/src/Examples/Message.elm @@ -162,7 +162,10 @@ example = , Message.view [ Message.success, Message.plaintext "Tiny success" ] , Message.view [ Message.error, Message.plaintext "Tiny error" ] ] - , about = Guidance.useATACGuide moduleName + , about = + [ Guidance.useATACGuide moduleName + , Guidance.message moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Modal.elm b/component-catalog/src/Examples/Modal.elm index b411b719..00523304 100644 --- a/component-catalog/src/Examples/Modal.elm +++ b/component-catalog/src/Examples/Modal.elm @@ -184,10 +184,10 @@ example = ] ] , about = - Guidance.useATACGuide moduleName - ++ [ Text.smallBody - [ Text.markdown "Use `Button.modal` and/or `ClickableText.modal` within the `Modal` footer." ] - ] + [ 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/Examples/Page.elm b/component-catalog/src/Examples/Page.elm index 9abc0adf..d5fbf99b 100644 --- a/component-catalog/src/Examples/Page.elm +++ b/component-catalog/src/Examples/Page.elm @@ -16,11 +16,13 @@ import Example exposing (Example) import Guidance import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V3 as Heading import Nri.Ui.Page.V3 as Page exposing (DefaultPage, RecoveryText(..)) import Nri.Ui.Spacing.V1 as Spacing +import Nri.Ui.Text.V6 as Text {-| -} @@ -90,7 +92,19 @@ example = [ Html.text "There was a problem!" ] ] ] - , about = Guidance.useATACGuide moduleName + , about = + [ Guidance.useATACGuide moduleName + , Text.smallBody + [ Text.html + [ Html.text "Learn more about this component from " + , ClickableText.link "Tessa's demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/kcM9T-aBbiqQXM2dTKMHES0mq0_mvWqjhzR4LGxpqYp4VNTThZgieu1n2GGzpPtDnVXVBh2KWMQXCfkC.zoJcGlH62xvazLoE?canPlayFromShare=true&from=share_recording_detail&continueMode=true&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FKmNvId1mTxpKy42H4lwh5YF5AbSeFNAkpxHW4mVWT8QDKtWOuZoJWTCgHj5MIF2R.Tk4mPcps3J5apO3t%3F_x_zm_rtaid%3DXNTISNTGTUOGUBnkd9Mz4g.1689865208330.e2d5810537a2878e50e4a85b887b8e00%26_x_zm_rhtaid%3D39" + , ClickableText.appearsInline + ] + , Html.text "." + ] + ] + ] , view = \ellieLinkConfig model -> let diff --git a/component-catalog/src/Examples/Pagination.elm b/component-catalog/src/Examples/Pagination.elm index 7bfca5e3..e1308907 100644 --- a/component-catalog/src/Examples/Pagination.elm +++ b/component-catalog/src/Examples/Pagination.elm @@ -12,6 +12,7 @@ import Css import Debug.Control as Control exposing (Control) import Debug.Control.View as ControlView import Example exposing (Example) +import Guidance import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.Colors.V1 as Colors @@ -57,7 +58,7 @@ example = , previewFakeLink "Next" [] ] ] - , about = [] + , about = [ Guidance.communicateState moduleName ] , view = \ellieLinkConfig model -> let diff --git a/component-catalog/src/Examples/RadioButton.elm b/component-catalog/src/Examples/RadioButton.elm index de0c27cf..842ffb97 100644 --- a/component-catalog/src/Examples/RadioButton.elm +++ b/component-catalog/src/Examples/RadioButton.elm @@ -66,7 +66,11 @@ example = , update = update , subscriptions = subscriptions , preview = preview - , about = [ Guidance.helpfullyDisabled moduleName, Guidance.useRadioButtonDotless ] + , about = + [ Guidance.helpfullyDisabled moduleName + , Guidance.message moduleName + , Guidance.useRadioButtonDotless + ] , view = view , categories = [ Inputs ] , keyboardSupport = diff --git a/component-catalog/src/Examples/SegmentedControl.elm b/component-catalog/src/Examples/SegmentedControl.elm index 1060eda3..9dc241dd 100644 --- a/component-catalog/src/Examples/SegmentedControl.elm +++ b/component-catalog/src/Examples/SegmentedControl.elm @@ -20,8 +20,10 @@ import Css import Debug.Control as Control exposing (Control) import Debug.Control.View as ControlView import Example exposing (Example) +import Guidance import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) +import Nri.Ui.ClickableText.V4 as ClickableText import Nri.Ui.Colors.Extra exposing (withAlpha) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts @@ -29,6 +31,7 @@ import Nri.Ui.Heading.V3 as Heading import Nri.Ui.SegmentedControl.V14 as SegmentedControl import Nri.Ui.Spacing.V1 as Spacing import Nri.Ui.Svg.V1 as Svg +import Nri.Ui.Text.V6 as Text import Nri.Ui.Tooltip.V3 as Tooltip import Nri.Ui.UiIcon.V1 as UiIcon import String exposing (toLower) @@ -54,7 +57,19 @@ example = , update = update , subscriptions = \_ -> Sub.none , preview = [ viewPreview ] - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ Html.text "Check out " + , ClickableText.link "Tessa's demo" + [ ClickableText.linkExternal "https://github.com/NoRedInk/NoRedInk/pull/43411" + , ClickableText.appearsInline + ] + , Html.text " to get a better sense of whether to use the tabs or radio buttons pattern under the hood." + ] + ] + , Guidance.communicateState moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Select.elm b/component-catalog/src/Examples/Select.elm index 667fc9bd..36eebecb 100644 --- a/component-catalog/src/Examples/Select.elm +++ b/component-catalog/src/Examples/Select.elm @@ -53,9 +53,10 @@ example = ] ] , about = - Guidance.useATACGuide moduleName - ++ [ Guidance.helpfullyDisabled moduleName - ] + [ Guidance.useATACGuide moduleName + , Guidance.message moduleName + , Guidance.helpfullyDisabled moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Spacing.elm b/component-catalog/src/Examples/Spacing.elm index 0df186de..4bc776e0 100644 --- a/component-catalog/src/Examples/Spacing.elm +++ b/component-catalog/src/Examples/Spacing.elm @@ -15,12 +15,14 @@ import EllieLink import Example exposing (Example) 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.Container.V2 as Container import Nri.Ui.Fonts.V1 as Fonts 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 Svg.Styled import Svg.Styled.Attributes @@ -46,7 +48,18 @@ example = , update = update , subscriptions = \_ -> Sub.none , preview = preview - , about = [] + , about = + [ Text.smallBody + [ Text.html + [ text "Learn more about this component from " + , ClickableText.link "Tessa's demo" + [ ClickableText.linkExternal "https://www.dropbox.com/s/l1ihppb2tjohcxr/2023-03-09%20-%20Tessa%20Kelly%20-%20Spacing.mp4?dl=0" + , ClickableText.appearsInline + ] + , text "." + ] + ] + ] , view = view } diff --git a/component-catalog/src/Examples/Tabs.elm b/component-catalog/src/Examples/Tabs.elm index 47bc6e9c..628862db 100644 --- a/component-catalog/src/Examples/Tabs.elm +++ b/component-catalog/src/Examples/Tabs.elm @@ -18,6 +18,7 @@ import Debug.Control as Control exposing (Control) import Debug.Control.Extra exposing (values) import Debug.Control.View as ControlView import Example exposing (Example) +import Guidance import Html.Styled as Html import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) @@ -103,7 +104,7 @@ example = [ Text.caption [ Text.plaintext "Tab 1 content" ] ] ] ] - , about = [] + , about = [ Guidance.communicateState moduleName ] , view = \ellieLinkConfig model -> let diff --git a/component-catalog/src/Examples/TabsMinimal.elm b/component-catalog/src/Examples/TabsMinimal.elm index e2fce15b..6aa14c4b 100644 --- a/component-catalog/src/Examples/TabsMinimal.elm +++ b/component-catalog/src/Examples/TabsMinimal.elm @@ -17,6 +17,7 @@ import Css import Debug.Control as Control exposing (Control) import Debug.Control.View as ControlView import Example exposing (Example) +import Guidance import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) import KeyboardSupport exposing (Key(..)) @@ -84,7 +85,7 @@ example = [ Text.caption [ Text.plaintext "Tab 1 content" ] ] ] ] - , about = [] + , about = [ Guidance.communicateState moduleName ] , view = \ellieLinkConfig model -> let diff --git a/component-catalog/src/Examples/TextArea.elm b/component-catalog/src/Examples/TextArea.elm index a681b012..3af11b09 100644 --- a/component-catalog/src/Examples/TextArea.elm +++ b/component-catalog/src/Examples/TextArea.elm @@ -67,7 +67,10 @@ example = [ Html.text "Label" ] ] ] - , about = Guidance.useATACGuide moduleName + , about = + [ Guidance.useATACGuide moduleName + , Guidance.message moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/TextInput.elm b/component-catalog/src/Examples/TextInput.elm index 78180bec..5041341b 100644 --- a/component-catalog/src/Examples/TextInput.elm +++ b/component-catalog/src/Examples/TextInput.elm @@ -58,7 +58,10 @@ example = , TextInput.custom [ Key.tabbable False ] ] ] - , about = Guidance.useATACGuide moduleName + , about = + [ Guidance.useATACGuide moduleName + , Guidance.message moduleName + ] , view = \ellieLinkConfig state -> let diff --git a/component-catalog/src/Examples/Tooltip.elm b/component-catalog/src/Examples/Tooltip.elm index cded460d..1459f08e 100644 --- a/component-catalog/src/Examples/Tooltip.elm +++ b/component-catalog/src/Examples/Tooltip.elm @@ -238,7 +238,9 @@ Use when all of the following are true: """ , description = """ -Tooltip.helpfullyDisabled provides information about ***why*** the tooltip trigger is disabled. +Tooltip.helpfullyDisabled provides information about ***why*** the tooltip trigger is disabled. Learn more about the [helpfully disabled pattern in the docs](https://paper.dropbox.com/doc/Helpfully-disabled-components--CI8Ma_KHKL1CcCWpWG~p_RTwAg-2RUPgKnBsBNI7ScGDHS73) and watch [Charbel's demo on the Helpfully Disabled pattern](https://noredink.zoom.us/rec/play/fwV3mqsxjvF_95N2au0vAN2PmnH2IHZx2yCoAQ76gvZ0fLlrkNcFIuVL6i7ze7y1ivSxq0f6e2EXE-RJ.kHMKX9CBHI1kFM50?canPlayFromShare=true&from=share_recording_detail&continueMode=true&componentName=rec-play&originRequestUrl=https://noredink.zoom.us/rec/share/YvgK0427ADw42fY2edJ_tmkwwvPxz505Kpfhkz5DqF1_eh8sgj7wVfwBQ5FmieM8.P9YlMkM_XY_Kamm6&autoplay=true&startTime=1696520905000&_x_zm_rtaid=VeLjvOzDToKMf1R0XllC7A.1707171050117.67806369f8182aa5b282c10165d75544&_x_zm_rhtaid=323). + + Example: - A tooltip might appear on a disabled button to inform the user that the button will become enabled once they've filled out a required form. diff --git a/component-catalog/src/Guidance.elm b/component-catalog/src/Guidance.elm index 9c319c7d..edb123ba 100644 --- a/component-catalog/src/Guidance.elm +++ b/component-catalog/src/Guidance.elm @@ -8,31 +8,21 @@ import Nri.Ui.Text.V6 as Text import Routes -useATACGuide : String -> List (Html msg) -useATACGuide moduleName = - [ Text.smallBody +communicateState : String -> Html msg +communicateState moduleName = + 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" - [ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1651037-assistive-technology-notification-design-development-guide" + [ text "As long as this component’s semantics follow accessibility guidelines and best practices, this component’s state and other meaningful attributes should be communicated automatically to screen readers & similar assistive technology without the need to send special announcements to the " + , ClickableText.link "ATAC" + [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Assistive-Technology-Announcement-Center-ATAC-bOnmcnzOj631NRls1IBe3" , ClickableText.appearsInline ] - , text (" to see if your use case fits any listed in the guide. If it does, please follow the guide to learn how to properly implement " ++ moduleName ++ ".") - ] - ] - ] - - -useRadioButtonDotless : Html msg -useRadioButtonDotless = - Message.view - [ Message.html - [ text "Looking for a group of buttons where only one button is selectable at a time? Check out " - , ClickableText.link "RadioButtonDotless" - [ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example) + , text ". " + , ClickableText.link "Learn more about how state is communicated automatically" + [ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1692512-communicating-state" , ClickableText.appearsInline ] - , text "." + , text ". " ] ] @@ -54,3 +44,54 @@ helpfullyDisabled moduleName = , text " on the Helpfully Disabled pattern." ] ] + + +message : String -> Html msg +message moduleName = + Text.smallBody + [ Text.html + [ text "Watch " + , ClickableText.link "Tessa’s demo" + [ ClickableText.linkExternal "https://noredink.zoom.us/rec/play/04Yg5m66aiM4gzzeOUFxWDkCin0Z6_zXwb5Jq3R7xqSgSIqWZTL_xNCDmnUpromV4bupQrx92JMjlKTi.ubiUciVbg1C4Y5eN?canPlayFromShare=true&from=share_recording_detail&startTime=1686841407000&componentName=rec-play&originRequestUrl=https%3A%2F%2Fnoredink.zoom.us%2Frec%2Fshare%2FBN88Pbq50Maz2A3oZgSC0cSzKPwFFPBxzCKJs3rxi_MlcuWYCyUNLIEIMybujrIN.qjwOXXxEAyVdoED4%3FstartTime%3D1686841407000%26_x_zm_rtaid%3DexJoa-qAQhSpO_3ZAnlvOg.1686929322690.d6880919fcdc54dce47ba87f206842e0%26_x_zm_rhtaid%3D822" + , ClickableText.appearsInline + ] + , text " to learn more about the Message component and message helpers like " + , inlineCode "errorMessage" + , text " and " + , inlineCode "guidance" + , text " on form elements." + ] + ] + + +useATACGuide : String -> Html msg +useATACGuide moduleName = + 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" + [ ClickableText.linkExternal "https://noredinkaccessibility.screenstepslive.com/a/1651037-assistive-technology-notification-design-development-guide" + , ClickableText.appearsInline + ] + , text (" to see if your use case fits any listed in the guide. If it does, please follow the guide to learn how to properly implement " ++ moduleName ++ ".") + ] + ] + + +useRadioButtonDotless : Html msg +useRadioButtonDotless = + Message.view + [ Message.html + [ text "Looking for a group of buttons where only one button is selectable at a time? Check out " + , ClickableText.link "RadioButtonDotless" + [ ClickableText.href (Routes.exampleHref RadioButtonDotlessExample.example) + , ClickableText.appearsInline + ] + , text "." + ] + ] + + +inlineCode : String -> Html msg +inlineCode text_ = + code [] [ text text_ ]