Merge pull request #1626 from NoRedInk/bat/helpfully-disabled

Add helpfully disabled links

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/RadioButton.elm

@@ -21,22 +21,19 @@ 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(..))
 import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
 import Nri.Ui.Heading.V3 as Heading
-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
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V3 as Tooltip
-import Routes
 import Task
 
 
@@ -63,17 +60,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 =
@@ -189,7 +176,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 ]
         ]
     , div []

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