Merge pull request #1465 from NoRedInk/phx-1022-create-radio-button-d…

…otless [PHX-1022] Create RadioButtonDotless component
NoRedInk · Aug 21, 2023 · 8001614 · 8001614
2 parents aa5afaa + d8caccb
commit 8001614
Show file tree

Hide file tree

Showing 8 changed files with 894 additions and 9 deletions.
diff --git a/component-catalog/src/Examples.elm b/component-catalog/src/Examples.elm
@@ -34,6 +34,7 @@ import Examples.Pennant as Pennant
 import Examples.PremiumCheckbox as PremiumCheckbox
 import Examples.QuestionBox as QuestionBox
 import Examples.RadioButton as RadioButton
+import Examples.RadioButtonDotless as RadioButtonDotless
 import Examples.RingGauge as RingGauge
 import Examples.SegmentedControl as SegmentedControl
 import Examples.Select as Select
@@ -679,6 +680,25 @@ all =
                     RadioButtonState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , RadioButtonDotless.example
+        |> Example.wrapMsg RadioButtonDotlessMsg
+            (\msg ->
+                case msg of
+                    RadioButtonDotlessMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState RadioButtonDotlessState
+            (\msg ->
+                case msg of
+                    RadioButtonDotlessState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -1042,6 +1062,7 @@ type State
     | PremiumCheckboxState PremiumCheckbox.State
     | QuestionBoxState QuestionBox.State
     | RadioButtonState RadioButton.State
+    | RadioButtonDotlessState RadioButtonDotless.State
     | RingGaugeState RingGauge.State
     | SegmentedControlState SegmentedControl.State
     | SelectState Select.State
@@ -1096,6 +1117,7 @@ type Msg
     | PremiumCheckboxMsg PremiumCheckbox.Msg
     | QuestionBoxMsg QuestionBox.Msg
     | RadioButtonMsg RadioButton.Msg
+    | RadioButtonDotlessMsg RadioButtonDotless.Msg
     | RingGaugeMsg RingGauge.Msg
     | SegmentedControlMsg SegmentedControl.Msg
     | SelectMsg Select.Msg

diff --git a/component-catalog/src/Examples/Button.elm b/component-catalog/src/Examples/Button.elm
@@ -16,13 +16,16 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
+import Examples.RadioButtonDotless as RadioButtonDotlessExample
 import Html.Styled exposing (..)
 import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Button.V10 as Button
 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.UiIcon.V1 as UiIcon
+import Routes
 import Set exposing (Set)
 
 
@@ -71,7 +74,15 @@ example =
             , Button.icon UiIcon.link
             ]
         ]
-    , about = []
+    , about =
+        [ let
+            url =
+                Routes.toString <| Routes.Doodad RadioButtonDotlessExample.example
+          in
+          Message.view
+            [ Message.markdown <| "Looking for a group of buttons where only one button is selectable at a time? Check out [RadioButtonDotless](" ++ url ++ ")"
+            ]
+        ]
     , view = \ellieLinkConfig state -> [ viewButtonExamples ellieLinkConfig state ]
     , categories = [ Buttons ]
     , keyboardSupport = []

diff --git a/component-catalog/src/Examples/RadioButton.elm b/component-catalog/src/Examples/RadioButton.elm
@@ -21,17 +21,19 @@ import Debug.Control.Extra as ControlExtra
 import Debug.Control.View as ControlView
 import EllieLink
 import Example exposing (Example)
-import Guidance
+import Examples.RadioButtonDotless as RadioButtonDotlessExample
 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.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.V11 as Modal
 import Nri.Ui.RadioButton.V4 as RadioButton
 import Nri.Ui.Text.V6 as Text
+import Routes
 import Task
 
 
@@ -54,18 +56,32 @@ example =
     , update = update
     , subscriptions = subscriptions
     , preview = preview
-    , about = Guidance.useATACGuide moduleName
+    , about =
+        [ let
+            url =
+                Routes.toString <| Routes.Doodad RadioButtonDotlessExample.example
+          in
+          Message.view
+            [ Message.markdown <| "Looking for radio button that's styled more like a button?<br />Check out [RadioButtonDotless](" ++ url ++ ")"
+            ]
+        ]
     , view = view
     , categories = [ Inputs ]
     , keyboardSupport =
         [ { keys = [ Arrow Left ]
-          , result = "Move the focus & select the radio button to the left"
+          , result = "Move the focus & select the previous radio button "
+          }
+        , { keys = [ Arrow Up ]
+          , result = "Move the focus & select the previous radio button "
           }
         , { keys = [ Arrow Right ]
-          , result = "Move the focus & select the radio button to the right"
+          , result = "Move the focus & select the next radio button"
+          }
+        , { keys = [ Arrow Down ]
+          , result = "Move the focus & select the next radio button"
           }
         , { keys = [ Space ]
-          , result = "Select the current radio button"
+          , result = "Select the current radio button if none are selected"
           }
         ]
     }