Introduce builder pattern

src/Nri/Ui/Button/V9.elm

@@ -1,5 +1,7 @@
 module Nri.Ui.Button.V9 exposing
-    ( ButtonSize(..), ButtonWidth(..), ButtonStyle(..), ButtonState(..)
+    ( buildButton, buildLink
+    , render
+    , ButtonSize(..), ButtonWidth(..), ButtonStyle(..), ButtonState(..)
     , button
     , delete
     , toggleButton
@@ -33,7 +35,13 @@ weird layout than to block users. Might this be a golden rule? Of course there
 may be exceptions, for example if button content is supplied by an end-user.
 
 
-## Common configs
+##
+
+@docs buildButton, buildLink
+@docs render
+
+
+## Commonly-used attributes
 
 @docs ButtonSize, ButtonWidth, ButtonStyle, ButtonState
 
@@ -75,6 +83,67 @@ import Svg
 import Svg.Attributes
 
 
+{-| -}
+type ButtonOrLink msg
+    = Button
+        { onClick : msg
+        , size : ButtonSize
+        , style : ButtonStyle
+        , width : ButtonWidth
+        }
+        { label : String
+        , state : ButtonState
+        , icon : Maybe Svg
+        }
+    | Link
+        { label : String
+        , icon : Maybe Svg
+        , url : String
+        , size : ButtonSize
+        , style : ButtonStyle
+        , width : ButtonWidth
+        }
+
+
+{-| -}
+buildButton : String -> msg -> ButtonOrLink msg
+buildButton label onClick =
+    Button
+        { onClick = onClick
+        , size = Medium
+        , style = Primary
+        , width = WidthUnbounded
+        }
+        { label = label
+        , state = Enabled
+        , icon = Nothing
+        }
+
+
+{-| -}
+buildLink : String -> String -> ButtonOrLink msg
+buildLink label url =
+    Link
+        { label = label
+        , icon = Nothing
+        , url = url
+        , size = Medium
+        , style = Primary
+        , width = WidthUnbounded
+        }
+
+
+{-| -}
+render : ButtonOrLink msg -> Html msg
+render buttonOrLink =
+    case buttonOrLink of
+        Button config state ->
+            button config state
+
+        Link config ->
+            link config
+
+
 {-| Sizes for buttons and links that have button classes
 -}
 type ButtonSize

styleguide-app/Examples/Button.elm

@@ -45,8 +45,7 @@ example unnamedMessages state =
     in
     { name = "Nri.Ui.Button.V9"
     , category = Buttons
-    , content =
-        [ viewButtonExamples messages state ]
+    , content = [ viewButtonExamples messages state ]
     }
 
 
@@ -133,6 +132,10 @@ viewButtonExamples messages (State control) =
     in
     [ Control.view (State >> SetState >> messages.wrapper) control
         |> fromUnstyled
+    , Button.buildButton model.label (messages.showItWorked "Button clicked!")
+        |> Button.render
+    , Button.buildLink model.label "#"
+        |> Button.render
     , buttons messages model
     , toggleButtons messages
     , Button.delete