Adds disabled/enabled helper

src/Nri/Ui/RadioButton/V3.elm

@@ -15,6 +15,7 @@ module Nri.Ui.RadioButton.V3 exposing
 
   - list based API instead of record based
   - add disclosure to show rich content when the radio is selected
+  - when the radio button is disabled don't attach onSelect listener
 
 @docs view, Attribute
 @docs disabled, enabled

styleguide-app/Examples/RadioButton.elm

@@ -96,92 +96,56 @@ viewRadioButtons selectionSettings selectedValue =
     div []
         [ RadioButton.view
             (selectionToString Dogs)
-            [ RadioButton.enabled
-            , RadioButton.value Dogs
-            , RadioButton.name "pets"
-            , RadioButton.selectedValue selectedValue
-            , RadioButton.onSelect Select
-            , RadioButton.valueToString selectionToString
-            , RadioButton.describedBy
-                [ "dogs-description" ]
-            , RadioButton.block
-            ]
+            ([ RadioButton.value Dogs
+             , RadioButton.name "pets"
+             , RadioButton.selectedValue selectedValue
+             , RadioButton.onSelect Select
+             , RadioButton.valueToString selectionToString
+             , RadioButton.describedBy [ "dogs-description" ]
+             , RadioButton.block
+             ]
+                ++ List.map Tuple.second selectionSettings.dogs
+            )
         , RadioButton.view
             (selectionToString Cats)
-            [ RadioButton.enabled
-            , RadioButton.value Cats
-            , RadioButton.name "pets"
-            , RadioButton.selectedValue selectedValue
-            , RadioButton.onSelect Select
-            , RadioButton.valueToString selectionToString
-            , if selectedValue == Just Cats then
+            ([ RadioButton.value Cats
+             , RadioButton.name "pets"
+             , RadioButton.selectedValue selectedValue
+             , RadioButton.onSelect Select
+             , RadioButton.valueToString selectionToString
+             , if selectedValue == Just Cats then
                 RadioButton.batch
                     [ RadioButton.describedBy [ "cats-description" ]
                     , RadioButton.hiddenLabel
                     ]
 
-              else
+               else
                 RadioButton.none
-            , RadioButton.disclosure
+             , RadioButton.disclosure
                 [ span
                     [ Attributes.id "cats-description" ]
                     [ Text.smallBody [ Text.plaintext "Cats kind of do their own thing" ] ]
                 ]
-            , RadioButton.block
-            ]
+             , RadioButton.block
+             ]
+                ++ List.map Tuple.second selectionSettings.cats
+            )
         , RadioButton.view
             (selectionToString Robots)
-            [ RadioButton.premium
+            ([ RadioButton.premium
                 { teacherPremiumLevel = PremiumLevel.Premium
                 , contentPremiumLevel = PremiumLevel.PremiumWithWriting
                 }
-            , RadioButton.value Robots
-            , RadioButton.name "pets"
-            , RadioButton.selectedValue selectedValue
-            , RadioButton.onSelect Select
-            , RadioButton.valueToString selectionToString
-            , RadioButton.showPennant <| OpenModal ""
-            , RadioButton.block
-            ]
-        , RadioButton.view
-            (selectionToString Robots)
-            [ RadioButton.premium
-                { teacherPremiumLevel = PremiumLevel.Premium
-                , contentPremiumLevel = PremiumLevel.PremiumWithWriting
-                }
-            , RadioButton.value Robots
-            , RadioButton.name "pets"
-            , RadioButton.selectedValue selectedValue
-            , RadioButton.onSelect Select
-            , RadioButton.valueToString selectionToString
-            , RadioButton.showPennant <| OpenModal "pets-robots"
-            , RadioButton.inline
-            ]
-        , RadioButton.view
-            (selectionToString Robots)
-            [ RadioButton.premium
-                { teacherPremiumLevel = PremiumLevel.PremiumWithWriting
-                , contentPremiumLevel = PremiumLevel.Premium
-                }
-            , RadioButton.value Robots
-            , RadioButton.name "pets"
-            , RadioButton.selectedValue selectedValue
-            , RadioButton.onSelect Select
-            , RadioButton.valueToString selectionToString
-            , RadioButton.inline
-            , RadioButton.showPennant <| OpenModal "pets-robots"
-            , if selectedValue == Just Robots then
-                RadioButton.hiddenLabel
-
-              else
-                RadioButton.none
-            , RadioButton.disclosure
-                [ Text.smallBody
-                    [ Text.plaintext "With apologies to Karel Čapek"
-                    , Text.css [ Css.display Css.inlineBlock ]
-                    ]
-                ]
-            ]
+             , RadioButton.value Robots
+             , RadioButton.name "pets"
+             , RadioButton.selectedValue selectedValue
+             , RadioButton.onSelect Select
+             , RadioButton.valueToString selectionToString
+             , RadioButton.showPennant <| OpenModal ""
+             , RadioButton.block
+             ]
+                ++ List.map Tuple.second selectionSettings.robots
+            )
         , p
             [ Attributes.id "dogs-description" ]
             [ text "Dogs are gregarious" ]
@@ -242,6 +206,20 @@ initSelectionSettings =
 controlAttributes : Control (List ( String, RadioButton.Attribute Selection Msg ))
 controlAttributes =
     ControlExtra.list
+        |> ControlExtra.listItem "disabled" disabledOrEnabled
+
+
+disabledOrEnabled : Control ( String, RadioButton.Attribute Selection Msg )
+disabledOrEnabled =
+    Control.map
+        (\isDisabled ->
+            if isDisabled then
+                ( "RadioButton.disabled", RadioButton.disabled )
+
+            else
+                ( "RadioButton.enabled", RadioButton.enabled )
+        )
+        (Control.bool False)
 
 
 type Msg