NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-09-21 04:07:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1639 from NoRedInk/bat/demos

Browse Source 
Add demos & other reference to About sections of components
This commit is contained in:
Tessa 2024-02-14 10:09:14 -07:00 committed by GitHub
commit 6b70d0d8ab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
26 changed files with 267 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
component-catalog/src/Examples/Accordion.elm
View File

@ -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

2
component-catalog/src/Examples/Balloon.elm
View File

@ -51,7 +51,7 @@ example =
, Balloon.plaintext "This is a balloon."
]
]
, about = Guidance.useATACGuide moduleName
, about = [ Guidance.useATACGuide moduleName ]
, view = view
}

6
component-catalog/src/Examples/Checkbox.elm
View File

@ -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

3
component-catalog/src/Examples/ClickableSvg.elm
View File

@ -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

3
component-catalog/src/Examples/ClickableText.elm
View File

@ -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 = []

20
component-catalog/src/Examples/Colors.elm
View File

@ -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." ]

46
component-catalog/src/Examples/FocusRing.elm
View File

@ -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 "."

14
component-catalog/src/Examples/Header.elm
View File

@ -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

16
component-catalog/src/Examples/Heading.elm
View File

@ -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

19
component-catalog/src/Examples/Highlighter.elm
View File

@ -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

2
component-catalog/src/Examples/Loading.elm
View File

@ -101,7 +101,7 @@ example =
]
|> Svg.toHtml
]
, about = Guidance.useATACGuide moduleName
, about = [ Guidance.useATACGuide moduleName ]
, view =
\ellieLinkConfig { showLoadingFadeIn, showLoading, showSpinners } ->
[ Heading.h2

3
component-catalog/src/Examples/Menu.elm
View File

@ -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
}

5
component-catalog/src/Examples/Message.elm
View File

@ -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

8
component-catalog/src/Examples/Modal.elm
View File

@ -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

16
component-catalog/src/Examples/Page.elm
View File

@ -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

3
component-catalog/src/Examples/Pagination.elm
View File

@ -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

6
component-catalog/src/Examples/RadioButton.elm
View File

@ -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 =

17
component-catalog/src/Examples/SegmentedControl.elm
View File

@ -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

7
component-catalog/src/Examples/Select.elm
View File

@ -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

15
component-catalog/src/Examples/Spacing.elm
View File

@ -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
}

3
component-catalog/src/Examples/Tabs.elm
View File

@ -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

3
component-catalog/src/Examples/TabsMinimal.elm
View File

@ -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

5
component-catalog/src/Examples/TextArea.elm
View File

@ -67,7 +67,10 @@ example =
[ Html.text "Label" ]
]
]
, about = Guidance.useATACGuide moduleName
, about =
[ Guidance.useATACGuide moduleName
, Guidance.message moduleName
]
, view =
\ellieLinkConfig state ->
let

5
component-catalog/src/Examples/TextInput.elm
View File

@ -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

4
component-catalog/src/Examples/Tooltip.elm
View File

@ -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.

81
component-catalog/src/Guidance.elm
View File

@ -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_ ]