Generalize the button

src/Nri/Ui/Button/V9.elm

@@ -97,6 +97,7 @@ import Nri.Ui.AssetPath as AssetPath exposing (Asset)
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
+import Nri.Ui.Html.Attributes.V2 as AttributesExtra
 import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 import Svg
 import Svg.Attributes
@@ -110,7 +111,7 @@ styledName suffix =
 {-| -}
 type ButtonOrLink msg
     = ButtonOrLink
-        { onClick : msg
+        { onClick : Maybe msg
         , url : String
         , linkType : Link
         , size : ButtonSize
@@ -124,10 +125,10 @@ type ButtonOrLink msg
 
 
 {-| -}
-build : ButtonOrLink ()
+build : ButtonOrLink msg
 build =
     ButtonOrLink
-        { onClick = ()
+        { onClick = Nothing
         , url = "#"
         , linkType = Default
         , size = Medium
@@ -141,10 +142,10 @@ build =
 
 
 {-| -}
-onClick : msg -> ButtonOrLink () -> ButtonOrLink msg
+onClick : msg -> ButtonOrLink msg -> ButtonOrLink msg
 onClick msg (ButtonOrLink config) =
     ButtonOrLink
-        { onClick = msg
+        { onClick = Just msg
         , url = config.url
         , linkType = config.linkType
         , size = config.size
@@ -153,12 +154,12 @@ onClick msg (ButtonOrLink config) =
         , label = config.label
         , state = config.state
         , icon = config.icon
-        , customAttributes = []
+        , customAttributes = config.customAttributes
         }
 
 
 {-| -}
-href : String -> ButtonOrLink () -> ButtonOrLink ()
+href : String -> ButtonOrLink msg -> ButtonOrLink msg
 href url (ButtonOrLink config) =
     ButtonOrLink
         { onClick = config.onClick
@@ -170,7 +171,7 @@ href url (ButtonOrLink config) =
         , label = config.label
         , state = config.state
         , icon = config.icon
-        , customAttributes = []
+        , customAttributes = config.customAttributes
         }
 
 
@@ -247,7 +248,9 @@ renderLink (ButtonOrLink config) =
 
         SinglePageApp ->
             linkBase "linkSpa"
-                (EventExtras.onClickPreventDefaultForLinkWithHref config.onClick
+                ((Maybe.map EventExtras.onClickPreventDefaultForLinkWithHref config.onClick
+                    |> Maybe.withDefault AttributesExtra.none
+                 )
                     :: config.customAttributes
                 )
 
@@ -260,8 +263,14 @@ renderLink (ButtonOrLink config) =
         WithTracking ->
             linkBase
                 "linkWithTracking"
-                (Events.preventDefaultOn "click"
+                ((Maybe.map
-                    (Json.Decode.succeed ( config.onClick, True ))
+                    (\msg ->
+                        Events.preventDefaultOn "click"
+                            (Json.Decode.succeed ( msg, True ))
+                    )
+                    config.onClick
+                    |> Maybe.withDefault AttributesExtra.none
+                 )
                     :: config.customAttributes
                 )
 
@@ -273,7 +282,8 @@ renderLink (ButtonOrLink config) =
             linkBase "linkExternalWithTracking"
                 (List.append
                     [ Attributes.target "_blank"
-                    , EventExtras.onClickForLinkWithHref config.onClick
+                    , Maybe.map EventExtras.onClickForLinkWithHref config.onClick
+                        |> Maybe.withDefault AttributesExtra.none
                     ]
                     config.customAttributes
                 )
@@ -286,7 +296,7 @@ withCustomAttributes customAttributes (ButtonOrLink config) =
 
 
 {-| -}
-withLabel : String -> ButtonOrLink () -> ButtonOrLink ()
+withLabel : String -> ButtonOrLink msg -> ButtonOrLink msg
 withLabel label (ButtonOrLink config) =
     ButtonOrLink { config | label = label }
 
@@ -493,7 +503,9 @@ renderButton (ButtonOrLink config) =
     Nri.Ui.styled Html.button
         (styledName "customButton")
         [ buttonStyles config.size config.width buttonStyle_ ]
-        (Events.onClick config.onClick
+        ((Maybe.map Events.onClick config.onClick
+            |> Maybe.withDefault AttributesExtra.none
+         )
             :: Attributes.disabled isDisabled
             :: Attributes.type_ "button"
             :: config.customAttributes

styleguide-app/Examples/Button.elm

@@ -20,8 +20,8 @@ import Nri.Ui.Text.V3 as Text
 
 
 {-| -}
-type State
+type State parentMsg
-    = State (Control Model)
+    = State (Control (Model parentMsg))
 
 
 {-| -}
@@ -32,8 +32,8 @@ type ButtonType
 
 {-| -}
 example :
-    (String -> ModuleMessages Msg parentMsg)
+    (String -> ModuleMessages (Msg parentMsg) parentMsg)
-    -> State
+    -> State parentMsg
     -> ModuleExample parentMsg
 example unnamedMessages state =
     let
@@ -47,13 +47,13 @@ example unnamedMessages state =
 
 
 {-| -}
-type Msg
+type Msg parentMsg
-    = SetState State
+    = SetState (State parentMsg)
     | NoOp
 
 
 {-| -}
-update : Msg -> State -> ( State, Cmd Msg )
+update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) )
 update msg state =
     case msg of
         SetState newState ->
@@ -67,21 +67,27 @@ update msg state =
 -- INTERNAL
 
 
-type alias Model =
+type alias Model msg =
     { label : String
     , icon : Maybe Svg
-    , width : ButtonOrLink () -> ButtonOrLink ()
     , buttonType : ButtonType
-    , state : ButtonOrLink () -> ButtonOrLink ()
+    , width : ButtonOrLink msg -> ButtonOrLink msg
+    , state : ButtonOrLink msg -> ButtonOrLink msg
     }
 
 
 {-| -}
-init : { r | performance : String, lock : String } -> State
+init : { r | performance : String, lock : String } -> State msg
 init assets =
     Control.record Model
         |> Control.field "label" (Control.string "Label")
         |> Control.field "icon" (iconChoice assets)
+        |> Control.field "button type"
+            (Control.choice
+                ( "button", Control.value Button )
+                [ ( "link", Control.value Link )
+                ]
+            )
         |> Control.field "width"
             (Control.choice
                 ( "exactWidth 120", Control.value (Button.exactWidth 120) )
@@ -90,12 +96,6 @@ init assets =
                 , ( "fillContainerWidth", Control.value Button.fillContainerWidth )
                 ]
             )
-        |> Control.field "button type"
-            (Control.choice
-                ( "button", Control.value Button )
-                [ ( "link", Control.value Link )
-                ]
-            )
         |> Control.field "state (button only)"
             (Control.choice
                 ( "enabled", Control.value Button.enabled )
@@ -131,8 +131,8 @@ iconChoice assets =
 
 
 viewButtonExamples :
-    ModuleMessages Msg parentMsg
+    ModuleMessages (Msg parentMsg) parentMsg
-    -> State
+    -> State parentMsg
     -> Html parentMsg
 viewButtonExamples messages (State control) =
     let
@@ -159,8 +159,8 @@ viewButtonExamples messages (State control) =
 
 
 buttons :
-    ModuleMessages Msg parentMsg
+    ModuleMessages (Msg parentMsg) parentMsg
-    -> Model
+    -> Model parentMsg
     -> Html parentMsg
 buttons messages model =
     let
@@ -232,7 +232,7 @@ buttons messages model =
         |> table []
 
 
-toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg
+toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg
 toggleButtons messages =
     div []
         [ Headings.h3 [ text "Button toggle" ]

styleguide-app/NriModules.elm

@@ -30,7 +30,7 @@ import Url exposing (Url)
 
 
 type alias ModuleStates =
-    { buttonExampleState : Examples.Button.State
+    { buttonExampleState : Examples.Button.State Msg
     , bannerAlertExampleState : Examples.BannerAlert.State
     , clickableTextExampleState : Examples.ClickableText.State
     , checkboxExampleState : Examples.Checkbox.State
@@ -69,7 +69,7 @@ init =
 
 
 type Msg
-    = ButtonExampleMsg Examples.Button.Msg
+    = ButtonExampleMsg (Examples.Button.Msg Msg)
     | BannerAlertExampleMsg Examples.BannerAlert.Msg
     | ClickableTextExampleMsg Examples.ClickableText.Msg
     | CheckboxExampleMsg Examples.Checkbox.Msg