Merge remote-tracking branch 'origin/master' into tessa/improve-radio-button

component-catalog/src/Debug/Control.elm

@@ -32,6 +32,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Checkbox.V7 as Checkbox
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 exposing (safeIdWithPrefix)
 import Nri.Ui.Select.V9 as Select
 import Nri.Ui.TextArea.V5 as TextArea
@@ -457,6 +458,7 @@ view_ msg (Control c) currentLabel =
                         [ css
                             [ fontSize (rem 1)
                             , color Colors.navy
+                            , Fonts.baseFont
                             ]
                         ]
                         [ Html.text currentLabel ]

component-catalog/src/Debug/Control/View.elm

@@ -7,20 +7,17 @@ module Debug.Control.View exposing (view)
 -}
 
 import Css exposing (..)
-import Css.Global
 import Css.Media exposing (withMedia)
 import Debug.Control as Control exposing (Control)
 import EllieLink
 import Example
-import ExampleSection
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Heading.V3 as Heading
-import Nri.Ui.Html.V3 exposing (viewIf)
-import Nri.Ui.MediaQuery.V1 exposing (mobile)
+import Nri.Ui.MediaQuery.V1 exposing (mobile, notMobile)
 import Nri.Ui.Spacing.V1 as Spacing
-import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -41,88 +38,133 @@ view config =
         value =
             Control.currentValue config.settings
 
-        ellieLink =
+        ellieLink example =
             EllieLink.view config.ellieLinkConfig
+                { fullModuleName = Example.fullName config
+                , name = config.name
+                , sectionName = example.sectionName
+                , mainType = config.mainType
+                , extraCode = config.extraCode
+                , renderExample = config.renderExample
+                , code = example.code
+                }
 
         exampleCodes =
             config.toExampleCode value
     in
     div
         [ css
-            [ displayFlex
-            , alignItems stretch
-            , Css.flexWrap Css.wrap
-            , Css.property "gap" "10px"
-            , withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
-            , Spacing.pageTopWhitespace
+            [ marginTop Spacing.verticalSpacerPx
+            , displayFlex
+            , withMedia [ mobile ] [ flexDirection column ]
             ]
         ]
-        [ viewSection "Settings"
-            [ div
-                [ css
-                    [ Css.Global.descendants
-                        [ Css.Global.everything [ Fonts.baseFont ]
-                        ]
+        [ Container.view
+            [ Container.html
+                [ Heading.h2 [ Heading.plaintext "Settings" ]
+                , Control.view config.update config.settings
+                ]
+            , Container.css
+                [ withMedia [ mobile ]
+                    [ borderBottomLeftRadius zero
+                    , borderBottomRightRadius zero
+                    ]
+                , withMedia [ notMobile ]
+                    [ flexBasis (pct 50)
+                    , flexGrow zero
+                    , flexShrink zero
+                    , paddingRight (px 30)
+                    , borderTopRightRadius zero
+                    , borderBottomRightRadius zero
+                    ]
+                ]
+            ]
+        , Container.view
+            [ Container.html
+                (case exampleCodes of
+                    singular :: [] ->
+                        [ div
+                            [ css
+                                [ displayFlex
+                                , flexWrap wrap
+                                , property "gap" "5px"
+                                , justifyContent spaceBetween
+                                ]
+                            ]
+                            [ codeSampleHeading
+                            , ellieLink singular
+                            ]
+                        , viewCode singular.code
+                        ]
+
+                    _ ->
+                        codeSampleHeading
+                            :: List.map (\example -> viewCodeDetails (ellieLink example) example)
+                                exampleCodes
+                )
+            , Container.css
+                [ padding (px 20)
+                , flexGrow (num 1)
+                , backgroundColor Colors.gray20
+                , withMedia [ mobile ]
+                    [ borderTopLeftRadius zero
+                    , borderTopRightRadius zero
+                    ]
+                , withMedia [ notMobile ]
+                    [ borderTopLeftRadius zero
+                    , borderBottomLeftRadius zero
                     ]
                 ]
-                [ Control.view config.update config.settings ]
             ]
-        , viewIf
-            (\_ -> viewExampleCode ellieLink config exampleCodes)
-            (not (List.isEmpty exampleCodes))
         ]
 
 
-viewExampleCode :
-    (EllieLink.SectionExample -> Html msg)
-    ->
-        { component
-            | name : String
-            , version : Int
-            , mainType : Maybe String
-            , extraCode : List String
-            , renderExample : String -> String
-        }
-    -> List { sectionName : String, code : String }
-    -> Html msg
-viewExampleCode ellieLink component values =
-    viewSection "Code Sample" <|
-        Text.smallBodyGray
-            [ Text.plaintext "😎 Configure the \"Settings\" on this page to update the code sample, then paste it into your editor!"
+codeSampleHeading : Html msg
+codeSampleHeading =
+    Heading.h2
+        [ Heading.plaintext "Code Sample"
+        , Heading.css [ color Colors.white ]
+        ]
+
+
+viewCodeDetails : Html msg -> { sectionName : String, code : String } -> Html msg
+viewCodeDetails ellieLink example =
+    details
+        [ css
+            [ paddingTop (px 5)
+            , paddingBottom (px 5)
+            , borderBottom3 (px 1) solid Colors.gray45
+            , firstOfType [ marginTop (px 10) ]
+            , lastChild [ borderWidth zero, paddingBottom zero ]
             ]
-            :: List.concatMap
-                (\example ->
-                    [ details
-                        []
-                        [ summary []
-                            [ Heading.h3
-                                [ Heading.css [ Css.display Css.inline ]
-                                , Heading.plaintext example.sectionName
-                                ]
-                            ]
-                        , ellieLink
-                            { fullModuleName = Example.fullName component
-                            , name = component.name
-                            , sectionName = example.sectionName
-                            , mainType = component.mainType
-                            , extraCode = component.extraCode
-                            , renderExample = component.renderExample
-                            , code = example.code
-                            }
-                        , code
-                            [ css
-                                [ display block
-                                , whiteSpace preWrap
-                                , Css.marginTop (px 8)
-                                ]
-                            ]
-                            [ text example.code ]
-                        ]
-                    ]
-                )
-                values
+        ]
+        [ summary [ css [ color Colors.yellow ] ]
+            [ Heading.h3
+                [ Heading.css [ display inline, color Colors.yellow ]
+                , Heading.plaintext example.sectionName
+                ]
+            ]
+        , div
+            [ css
+                [ displayFlex
+                , flexWrap wrap
+                , property "gap" "5px"
+                , alignItems flexStart
+                , justifyContent spaceBetween
+                ]
+            ]
+            [ viewCode example.code, ellieLink ]
+        ]
 
 
-viewSection : String -> List (Html msg) -> Html msg
-viewSection name =
-    ExampleSection.sectionWithCss name [ flex (int 1) ] (div [])
+viewCode : String -> Html msg
+viewCode code_ =
+    code
+        [ css
+            [ display block
+            , whiteSpace preWrap
+            , marginTop (px 8)
+            , color Colors.yellow
+            ]
+        ]
+        [ text code_ ]

component-catalog/src/EllieLink.elm

@@ -1,9 +1,10 @@
 module EllieLink exposing (Config, SectionExample, view)
 
+import Accessibility.Styled.Aria as Aria
 import Dict exposing (Dict)
 import Html.Styled exposing (..)
 import Http
-import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.Button.V10 as Button
 import Url.Builder
 
 
@@ -25,9 +26,15 @@ type alias SectionExample =
 
 view : Config -> SectionExample -> Html msg
 view config example =
-    ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")
-        [ ClickableText.linkExternal (generateEllieLink config example)
-        , ClickableText.small
+    let
+        linkName =
+            "Open in Ellie"
+    in
+    Button.link linkName
+        [ Button.linkExternal (generateEllieLink config example)
+        , Button.tertiary
+        , Button.small
+        , Button.custom [ Aria.label (example.sectionName ++ " " ++ linkName) ]
         ]
 
 

component-catalog/src/Example.elm

@@ -6,6 +6,7 @@ module Example exposing (Example, extraLinks, fromRouteName, fullName, preview,
 import Accessibility.Styled.Aria as Aria
 import Category exposing (Category)
 import Css
+import Css.Global
 import Css.Media exposing (withMedia)
 import EllieLink
 import EventExtras
@@ -193,7 +194,16 @@ view_ ellieLinkConfig example state =
 
 viewAbout : List (Html Never) -> Html msg
 viewAbout about =
-    Html.div [] about
+    Html.div
+        [ Attributes.css
+            [ Css.margin2 (Css.px 10) Css.zero
+            , Css.Global.descendants
+                [ Css.Global.code
+                    [ Css.fontSize (Css.px 13.5) ]
+                ]
+            ]
+        ]
+        about
         |> Html.map never
 
 

component-catalog/src/Examples/Accordion.elm

@@ -71,15 +71,19 @@ example =
             ]
         ]
     , about =
-        [ 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 []
-                [ 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"
-                    , ClickableText.appearsInline
+        [ 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 []
+                        [ 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"
+                            , ClickableText.appearsInline
+                            ]
+                        , text " before using. Discussion of how to attach styles correctly begins at 5:10."
+                        ]
                     ]
-                , text " before using. Discussion of how to attach styles correctly begins at 5:10."
                 ]
             ]
         ]

component-catalog/src/Examples/Block.elm

@@ -80,7 +80,7 @@ example =
             |> p [ css [ Fonts.baseFont, Css.fontSize (Css.px 12), Css.margin Css.zero ] ]
         ]
     , about =
-        [ Text.mediumBody
+        [ Text.smallBody
             [ Text.html
                 [ text "You might also know the Block element as a “Display Element”. Learn more about this component in: "
                 , ul []

component-catalog/src/Examples/BreadCrumbs.elm

@@ -74,10 +74,10 @@ example =
             ]
         ]
     , about =
-        [ Text.mediumBody [ Text.markdown "`BreadCrumbs` orient users and provide convenient links to go \"up\" to parent pages." ]
-        , Text.mediumBody [ Text.markdown "Typically, you'll use `Header.view` (rather than `BreadCrumbs.view`) to render primary/`h1`-level `BreadCrumbs`. You may use `BreadCrumbs.viewSecondary` to render `h2`-level `BreadCrumbs`." ]
-        , Text.mediumBody [ Text.markdown "You should use `BreadCrumbs.headerId` to move focus to the current `h1` or `h2` and `BreadCrumbs.toPageTitle` to dynamically change the title when the page context changes." ]
-        , Text.mediumBody
+        [ Text.smallBody [ Text.markdown "`BreadCrumbs` orient users and provide convenient links to go \"up\" to parent pages." ]
+        , Text.smallBody [ Text.markdown "Typically, you'll use `Header.view` (rather than `BreadCrumbs.view`) to render primary/`h1`-level `BreadCrumbs`. You may use `BreadCrumbs.viewSecondary` to render `h2`-level `BreadCrumbs`." ]
+        , Text.smallBody [ Text.markdown "You should use `BreadCrumbs.headerId` to move focus to the current `h1` or `h2` and `BreadCrumbs.toPageTitle` to dynamically change the title when the page context changes." ]
+        , Text.smallBody
             [ Text.html
                 [ text "This and more is explained in depth in Tessa's "
                 , ClickableText.link "BreadCrumbs component demo"

component-catalog/src/Examples/Button.elm

@@ -16,18 +16,15 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
-import Examples.RadioButtonDotless as RadioButtonDotlessExample
+import Guidance
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
-import Nri.Ui.Message.V4 as Message
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Tooltip.V3 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Routes
 import Set exposing (Set)
 
 
@@ -77,15 +74,8 @@ example =
             ]
         ]
     , about =
-        [ 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
-                    ]
-                ]
-            ]
+        [ Guidance.helpfullyDisabled moduleName
+        , Guidance.useRadioButtonDotless
         ]
     , view = \ellieLinkConfig state -> [ viewButtonExamples ellieLinkConfig state ]
     , categories = [ Buttons ]

component-catalog/src/Examples/Checkbox.elm

@@ -15,6 +15,7 @@ import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import Example exposing (Example)
+import Guidance
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
@@ -52,7 +53,7 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview = preview
-    , about = []
+    , about = [ Guidance.helpfullyDisabled moduleName ]
     , view =
         \ellieLinkConfig state ->
             let
@@ -156,7 +157,7 @@ example =
                   }
                 ]
             , Heading.h2
-                [ Heading.plaintext "Tooltip Example"
+                [ Heading.plaintext "Helpfully Disabled Example"
                 , Heading.css [ Css.marginTop (Css.px 30) ]
                 ]
             , Tooltip.view

component-catalog/src/Examples/FocusRing.elm

@@ -47,7 +47,7 @@ example =
         , example_ FocusRing.tightStyles
         ]
     , about =
-        [ Text.mediumBody
+        [ 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"

component-catalog/src/Examples/Fonts.elm

@@ -46,7 +46,7 @@ example =
         ]
             |> List.map viewPreview
     , about =
-        [ Text.mediumBody
+        [ Text.smallBody
             [ Text.html
                 [ Html.text "Learn more about kid-friendly and accessible fonts starting at 24:40 in "
                 , ClickableText.link "Kids Websites: Where Fun and Accessibility Come to Play"

component-catalog/src/Examples/RadioButton.elm

@@ -21,7 +21,7 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
-import Examples.RadioButtonDotless as RadioButtonDotlessExample
+import Guidance
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
@@ -32,7 +32,6 @@ import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (..)
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Html.Attributes.V2 exposing (safeIdWithPrefix)
-import Nri.Ui.Message.V4 as Message
 import Nri.Ui.Modal.V12 as Modal
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.Spacing.V1 as Spacing
@@ -41,7 +40,6 @@ import Nri.Ui.Table.V7 as Table
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V3 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Routes
 import Task
 
 
@@ -68,17 +66,7 @@ example =
     , update = update
     , subscriptions = subscriptions
     , preview = preview
-    , about =
-        [ 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
-                    ]
-                ]
-            ]
-        ]
+    , about = [ Guidance.helpfullyDisabled moduleName, Guidance.useRadioButtonDotless ]
     , view = view
     , categories = [ Inputs ]
     , keyboardSupport =
@@ -390,7 +378,7 @@ view ellieLinkConfig state =
         [ Modal.closeButton ]
         state.modal
     , Heading.h2
-        [ Heading.plaintext "Tooltip Example"
+        [ Heading.plaintext "Helpfully Disabled Example"
         , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
         ]
     , Tuple.second container

component-catalog/src/Examples/RadioButtonDotless.elm

@@ -162,7 +162,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , preview = preview
     , about =
-        [ Text.mediumBodyGray [ Text.markdown "This component behaves like a `RadioButton`, but has the look and feel of a normal `Button`.  It is a good choice to use for \"multiple choice\" style questions as it separates the act of choosing an answer and submitting the answer - preventing frustrating mistakes." ]
+        [ Text.smallBody [ Text.markdown "This component behaves like a `RadioButton`, but has the look and feel of a normal `Button`.  It is a good choice to use for \"multiple choice\" style questions as it separates the act of choosing an answer and submitting the answer - preventing frustrating mistakes." ]
         ]
     , view = view
     , categories = [ Inputs ]

component-catalog/src/Examples/Select.elm

@@ -52,7 +52,10 @@ example =
             , Select.custom [ Key.tabbable False ]
             ]
         ]
-    , about = Guidance.useATACGuide moduleName
+    , about =
+        Guidance.useATACGuide moduleName
+            ++ [ Guidance.helpfullyDisabled moduleName
+               ]
     , view =
         \ellieLinkConfig state ->
             let

component-catalog/src/Examples/Switch.elm

@@ -14,6 +14,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 KeyboardSupport exposing (Key(..))
 import Nri.Ui.Heading.V3 as Heading
@@ -54,7 +55,7 @@ example =
             , Switch.custom [ Key.tabbable False ]
             ]
         ]
-    , about = []
+    , about = [ Guidance.helpfullyDisabled moduleName ]
     , view =
         \ellieLinkConfig state ->
             let
@@ -168,7 +169,7 @@ example =
                   }
                 ]
             , Heading.h2
-                [ Heading.plaintext "Tooltip example"
+                [ Heading.plaintext "Helpfully Disabled Example"
                 , Heading.css
                     [ Css.marginTop Spacing.verticalSpacerPx
                     , Css.marginBottom (Css.px 10)

component-catalog/src/Guidance.elm

@@ -1,8 +1,11 @@
 module Guidance exposing (..)
 
+import Examples.RadioButtonDotless as RadioButtonDotlessExample
 import Html.Styled exposing (..)
 import Nri.Ui.ClickableText.V4 as ClickableText
+import Nri.Ui.Message.V4 as Message
 import Nri.Ui.Text.V6 as Text
+import Routes
 
 
 useATACGuide : String -> List (Html msg)
@@ -12,8 +15,42 @@ useATACGuide moduleName =
             [ 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 "."
+            ]
+        ]
+
+
+helpfullyDisabled : String -> Html msg
+helpfullyDisabled moduleName =
+    Text.smallBody
+        [ Text.html
+            [ text ("Is your " ++ moduleName ++ " sometimes disabled? Be sure to ")
+            , ClickableText.link "read the docs"
+                [ ClickableText.linkExternal "https://paper.dropbox.com/doc/Helpfully-disabled-components--CI8Ma_KHKL1CcCWpWG~p_RTwAg-2RUPgKnBsBNI7ScGDHS73"
+                , ClickableText.appearsInline
+                ]
+            , text " and "
+            , ClickableText.link "watch Charbel's demo"
+                [ ClickableText.linkExternal "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"
+                , ClickableText.appearsInline
+                ]
+            , text " on the Helpfully Disabled pattern."
+            ]
+        ]