Merge remote-tracking branch 'origin/master' into restore-used-modules

src/ClickableAttributes.elm

@@ -0,0 +1,166 @@
+module ClickableAttributes exposing
+    ( ClickableAttributes
+    , href
+    , init
+    , linkExternal
+    , linkExternalWithTracking
+    , linkSpa
+    , linkWithMethod
+    , linkWithTracking
+    , onClick
+    , toButtonAttributes
+    , toLinkAttributes
+    )
+
+{-| -}
+
+import AttributeExtras exposing (targetBlank)
+import EventExtras.Styled as EventExtras
+import Html.Styled exposing (Attribute)
+import Html.Styled.Attributes as Attributes
+import Html.Styled.Events as Events
+import Json.Decode
+
+
+{-| -}
+type alias ClickableAttributes msg =
+    { linkType : Link
+    , url : String
+    , onClick : Maybe msg
+    }
+
+
+type Link
+    = Default
+    | WithTracking
+    | SinglePageApp
+    | WithMethod String
+    | External
+    | ExternalWithTracking
+
+
+{-| -}
+init : ClickableAttributes msg
+init =
+    { linkType = Default
+    , url = "#"
+    , onClick = Nothing
+    }
+
+
+{-| -}
+onClick : msg -> ClickableAttributes msg -> ClickableAttributes msg
+onClick msg clickableAttributes =
+    { clickableAttributes | onClick = Just msg }
+
+
+{-| -}
+href : String -> ClickableAttributes msg -> ClickableAttributes msg
+href url clickableAttributes =
+    { clickableAttributes | url = url }
+
+
+{-| -}
+linkSpa : String -> ClickableAttributes msg -> ClickableAttributes msg
+linkSpa url clickableAttributes =
+    { clickableAttributes | linkType = SinglePageApp, url = url }
+
+
+{-| -}
+linkWithMethod : { method : String, url : String } -> ClickableAttributes msg -> ClickableAttributes msg
+linkWithMethod { method, url } clickableAttributes =
+    { clickableAttributes | linkType = WithMethod method, url = url }
+
+
+{-| -}
+linkWithTracking : { track : msg, url : String } -> ClickableAttributes msg -> ClickableAttributes msg
+linkWithTracking { track, url } _ =
+    { linkType = WithTracking, url = url, onClick = Just track }
+
+
+{-| -}
+linkExternal : String -> ClickableAttributes msg -> ClickableAttributes msg
+linkExternal url clickableAttributes =
+    { clickableAttributes | linkType = External, url = url }
+
+
+{-| -}
+linkExternalWithTracking : { track : msg, url : String } -> ClickableAttributes msg -> ClickableAttributes msg
+linkExternalWithTracking { track, url } _ =
+    { linkType = ExternalWithTracking, url = url, onClick = Just track }
+
+
+{-| -}
+toButtonAttributes : ClickableAttributes msg -> List (Attribute msg)
+toButtonAttributes clickableAttributes =
+    case clickableAttributes.onClick of
+        Just handler ->
+            [ Events.onClick handler ]
+
+        Nothing ->
+            []
+
+
+{-| -}
+toLinkAttributes : ClickableAttributes msg -> ( String, List (Attribute msg) )
+toLinkAttributes clickableAttributes =
+    case clickableAttributes.linkType of
+        Default ->
+            ( "link"
+            , [ Attributes.href clickableAttributes.url
+              , Attributes.target "_self"
+              ]
+            )
+
+        SinglePageApp ->
+            ( "linkSpa"
+            , case clickableAttributes.onClick of
+                Just handler ->
+                    [ Attributes.href clickableAttributes.url
+                    , EventExtras.onClickPreventDefaultForLinkWithHref handler
+                    ]
+
+                Nothing ->
+                    [ Attributes.href clickableAttributes.url ]
+            )
+
+        WithMethod method ->
+            ( "linkWithMethod"
+            , [ Attributes.href clickableAttributes.url
+              , Attributes.attribute "data-method" method
+              ]
+            )
+
+        WithTracking ->
+            ( "linkWithTracking"
+            , case clickableAttributes.onClick of
+                Just track ->
+                    [ Attributes.href clickableAttributes.url
+                    , Events.preventDefaultOn "click"
+                        (Json.Decode.succeed ( track, True ))
+                    ]
+
+                Nothing ->
+                    [ Attributes.href clickableAttributes.url ]
+            )
+
+        External ->
+            ( "linkExternal"
+            , Attributes.href clickableAttributes.url
+                :: targetBlank
+            )
+
+        ExternalWithTracking ->
+            ( "linkExternalWithTracking"
+            , case clickableAttributes.onClick of
+                Just handler ->
+                    [ Attributes.href clickableAttributes.url
+                    , Events.onClick handler
+                    , Events.on "auxclick" (Json.Decode.succeed handler)
+                    ]
+                        ++ targetBlank
+
+                Nothing ->
+                    Attributes.href clickableAttributes.url
+                        :: targetBlank
+            )

src/Nri/Ui/Button/V10.elm

@@ -15,6 +15,11 @@ module Nri.Ui.Button.V10 exposing
 {-|
 
 
+# Patch changes:
+
+  - uses ClickableAttributes
+
+
 # Changes from V9:
 
   - Explicitly zeroes out all margin
@@ -60,22 +65,18 @@ module Nri.Ui.Button.V10 exposing
 import Accessibility.Styled as Html exposing (Html)
 import Accessibility.Styled.Role as Role
 import Accessibility.Styled.Widget as Widget
-import AttributeExtras exposing (targetBlank)
+import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Style)
 import Css.Global
-import EventExtras.Styled as EventExtras
 import Html.Styled as Styled
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
-import Json.Decode
 import Markdown.Block
 import Markdown.Inline
 import Nri.Ui
-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
@@ -164,25 +165,26 @@ css styles =
 -- LINKING, CLICKING, and TRACKING BEHAVIOR
 
 
+setClickableAttributes :
+    (ClickableAttributes msg -> ClickableAttributes msg)
+    -> Attribute msg
+setClickableAttributes apply =
+    set
+        (\attributes ->
+            { attributes | clickableAttributes = apply attributes.clickableAttributes }
+        )
+
+
 {-| -}
 onClick : msg -> Attribute msg
 onClick msg =
-    set (\attributes -> { attributes | onClick = Just msg })
-
-
-type Link
-    = Default
-    | WithTracking
-    | SinglePageApp
-    | WithMethod String
-    | External
-    | ExternalWithTracking
+    setClickableAttributes (ClickableAttributes.onClick msg)
 
 
 {-| -}
 href : String -> Attribute msg
 href url =
-    set (\attributes -> { attributes | url = url })
+    setClickableAttributes (ClickableAttributes.href url)
 
 
 {-| Use this link for routing within a single page app.
@@ -194,71 +196,31 @@ See <https://github.com/elm-lang/html/issues/110> for details on this implementa
 -}
 linkSpa : String -> Attribute msg
 linkSpa url =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = SinglePageApp
-                , url = url
-            }
-        )
+    setClickableAttributes (ClickableAttributes.linkSpa url)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to
-some url, and it's an HTTP request (Rails includes JS to make this use the given HTTP method)
--}
+{-| -}
 linkWithMethod : { method : String, url : String } -> Attribute msg
-linkWithMethod { method, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = WithMethod method
-                , url = url
-            }
-        )
+linkWithMethod config =
+    setClickableAttributes (ClickableAttributes.linkWithMethod config)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url.
-This should only take in messages that result in a Msg that triggers Analytics.trackAndRedirect.
-For buttons that trigger other effects on the page, please use Nri.Button.button instead.
--}
+{-| -}
 linkWithTracking : { track : msg, url : String } -> Attribute msg
-linkWithTracking { track, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = WithTracking
-                , url = url
-                , onClick = Just track
-            }
-        )
+linkWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkWithTracking config)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to
-some url and have it open to an external site
--}
+{-| -}
 linkExternal : String -> Attribute msg
 linkExternal url =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = External
-                , url = url
-            }
-        )
+    setClickableAttributes (ClickableAttributes.linkExternal url)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url and have it open to an external site.
--}
+{-| -}
 linkExternalWithTracking : { track : msg, url : String } -> Attribute msg
-linkExternalWithTracking { track, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = ExternalWithTracking
-                , url = url
-                , onClick = Just track
-            }
-        )
+linkExternalWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkExternalWithTracking config)
 
 
 
@@ -450,9 +412,7 @@ set with =
 build : ButtonOrLink msg
 build =
     ButtonOrLink
-        { onClick = Nothing
-        , url = "#"
-        , linkType = Default
+        { clickableAttributes = ClickableAttributes.init
         , size = Medium
         , style = primaryColors
         , width = WidthUnbounded
@@ -469,9 +429,7 @@ type ButtonOrLink msg
 
 
 type alias ButtonOrLinkAttributes msg =
-    { onClick : Maybe msg
-    , url : String
-    , linkType : Link
+    { clickableAttributes : ClickableAttributes msg
     , size : ButtonSize
     , style : ColorPalette
     , width : ButtonWidth
@@ -512,10 +470,8 @@ renderButton ((ButtonOrLink config) as button_) =
     Nri.Ui.styled Html.button
         (styledName "customButton")
         [ buttonStyles config.size config.width buttonStyle_ config.customStyles ]
-        ((Maybe.map Events.onClick config.onClick
-            |> Maybe.withDefault AttributesExtra.none
-         )
-            :: Attributes.disabled isDisabled
+        (ClickableAttributes.toButtonAttributes config.clickableAttributes
+            ++ Attributes.disabled isDisabled
             :: Attributes.type_ "button"
             :: config.customAttributes
         )
@@ -528,65 +484,14 @@ renderLink ((ButtonOrLink config) as link_) =
         colorPalette =
             getColorPalette link_
 
-        linkBase linkFunctionName extraAttrs =
-            Nri.Ui.styled Styled.a
-                (styledName linkFunctionName)
-                [ buttonStyles config.size config.width colorPalette config.customStyles ]
-                (Attributes.href config.url :: extraAttrs)
-                [ viewLabel config.icon config.label ]
+        ( linkFunctionName, attributes ) =
+            ClickableAttributes.toLinkAttributes config.clickableAttributes
     in
-    case config.linkType of
-        Default ->
-            linkBase "link"
-                (Attributes.target "_self" :: config.customAttributes)
-
-        SinglePageApp ->
-            linkBase "linkSpa"
-                ((Maybe.map EventExtras.onClickPreventDefaultForLinkWithHref config.onClick
-                    |> Maybe.withDefault AttributesExtra.none
-                 )
-                    :: config.customAttributes
-                )
-
-        WithMethod method ->
-            linkBase "linkWithMethod"
-                (Attributes.attribute "data-method" method
-                    :: config.customAttributes
-                )
-
-        WithTracking ->
-            linkBase
-                "linkWithTracking"
-                ((Maybe.map
-                    (\msg ->
-                        Events.preventDefaultOn "click"
-                            (Json.Decode.succeed ( msg, True ))
-                    )
-                    config.onClick
-                    |> Maybe.withDefault AttributesExtra.none
-                 )
-                    :: config.customAttributes
-                )
-
-        External ->
-            linkBase "linkExternal"
-                (targetBlank ++ config.customAttributes)
-
-        ExternalWithTracking ->
-            linkBase "linkExternalWithTracking"
-                (List.concat
-                    [ targetBlank
-                    , config.onClick
-                        |> Maybe.map
-                            (\onClickMsg ->
-                                [ Events.onClick onClickMsg
-                                , Events.on "auxclick" (Json.Decode.succeed onClickMsg)
-                                ]
-                            )
-                        |> Maybe.withDefault []
-                    , config.customAttributes
-                    ]
-                )
+    Nri.Ui.styled Styled.a
+        (styledName linkFunctionName)
+        [ buttonStyles config.size config.width colorPalette config.customStyles ]
+        (attributes ++ config.customAttributes)
+        [ viewLabel config.icon config.label ]
 
 
 

src/Nri/Ui/ClickableSvg/V1.elm

@@ -11,6 +11,11 @@ module Nri.Ui.ClickableSvg.V1 exposing
 {-|
 
 
+# Post-release patches
+
+  - uses ClickableAttributes
+
+
 # Create a button or link
 
 @docs button, link
@@ -40,15 +45,11 @@ module Nri.Ui.ClickableSvg.V1 exposing
 -}
 
 import Accessibility.Styled.Widget as Widget
-import AttributeExtras exposing (targetBlank)
+import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Style)
-import EventExtras.Styled as EventExtras
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
-import Html.Styled.Events as Events
-import Json.Decode
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Html.Attributes.V2 as AttributesExtra
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 
 
@@ -77,16 +78,26 @@ link name icon attributes =
 -- LINKING, CLICKING, and TRACKING BEHAVIOR
 
 
+setClickableAttributes :
+    (ClickableAttributes msg -> ClickableAttributes msg)
+    -> Attribute msg
+setClickableAttributes apply =
+    set
+        (\attributes ->
+            { attributes | clickableAttributes = apply attributes.clickableAttributes }
+        )
+
+
 {-| -}
 onClick : msg -> Attribute msg
 onClick msg =
-    set (\attributes -> { attributes | onClick = Just msg })
+    setClickableAttributes (ClickableAttributes.onClick msg)
 
 
 {-| -}
 href : String -> Attribute msg
 href url =
-    set (\attributes -> { attributes | url = url })
+    setClickableAttributes (ClickableAttributes.href url)
 
 
 {-| Use this link for routing within a single page app.
@@ -98,71 +109,31 @@ See <https://github.com/elm-lang/html/issues/110> for details on this implementa
 -}
 linkSpa : String -> Attribute msg
 linkSpa url =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = SinglePageApp
-                , url = url
-            }
-        )
+    setClickableAttributes (ClickableAttributes.linkSpa url)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to
-some url, and it's an HTTP request (Rails includes JS to make this use the given HTTP method)
--}
+{-| -}
 linkWithMethod : { method : String, url : String } -> Attribute msg
-linkWithMethod { method, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = WithMethod method
-                , url = url
-            }
-        )
+linkWithMethod config =
+    setClickableAttributes (ClickableAttributes.linkWithMethod config)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url.
-This should only take in messages that result in a Msg that triggers Analytics.trackAndRedirect.
-For buttons that trigger other effects on the page, please use Nri.Button.button instead.
--}
+{-| -}
 linkWithTracking : { track : msg, url : String } -> Attribute msg
-linkWithTracking { track, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = WithTracking
-                , url = url
-                , onClick = Just track
-            }
-        )
+linkWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkWithTracking config)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to
-some url and have it open to an external site
--}
+{-| -}
 linkExternal : String -> Attribute msg
 linkExternal url =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = External
-                , url = url
-            }
-        )
+    setClickableAttributes (ClickableAttributes.linkExternal url)
 
 
-{-| Wrap some text so it looks like a button, but actually is wrapped in an anchor to some url and have it open to an external site.
--}
+{-| -}
 linkExternalWithTracking : { track : msg, url : String } -> Attribute msg
-linkExternalWithTracking { track, url } =
-    set
-        (\attributes ->
-            { attributes
-                | linkType = ExternalWithTracking
-                , url = url
-                , onClick = Just track
-            }
-        )
+linkExternalWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkExternalWithTracking config)
 
 
 
@@ -247,9 +218,7 @@ set with =
 build : String -> Svg -> ButtonOrLink msg
 build label icon =
     ButtonOrLink
-        { onClick = Nothing
-        , url = "#"
-        , linkType = Default
+        { clickableAttributes = ClickableAttributes.init
         , label = label
         , icon = icon
         , height = Css.px 17
@@ -265,9 +234,7 @@ type ButtonOrLink msg
 
 
 type alias ButtonOrLinkAttributes msg =
-    { onClick : Maybe msg
-    , url : String
-    , linkType : Link
+    { clickableAttributes : ClickableAttributes msg
     , label : String
     , icon : Svg
     , height : Css.Px
@@ -285,10 +252,9 @@ renderButton ((ButtonOrLink config) as button_) =
          , Attributes.type_ "button"
          , Attributes.css (buttonOrLinkStyles config ++ config.customStyles)
          , Attributes.disabled config.disabled
-         , Maybe.map Events.onClick config.onClick
-            |> Maybe.withDefault AttributesExtra.none
          , Widget.label config.label
          ]
+            ++ ClickableAttributes.toButtonAttributes config.clickableAttributes
             ++ config.customAttributes
         )
         [ config.icon
@@ -310,66 +276,28 @@ type Link
 renderLink : ButtonOrLink msg -> Html msg
 renderLink ((ButtonOrLink config) as link_) =
     let
-        linkBase linkFunctionName extraAttrs =
-            Html.a
-                ([ Attributes.class ("Nri-Ui-Clickable-Svg-" ++ linkFunctionName)
-                 , if not config.disabled then
-                    Attributes.href config.url
-
-                   else
-                    AttributesExtra.none
-                 , Attributes.css (buttonOrLinkStyles config ++ config.customStyles)
-                 , Widget.disabled config.disabled
-                 , Widget.label config.label
-                 ]
-                    ++ extraAttrs
-                    ++ config.customAttributes
-                )
-                [ config.icon
-                    |> Svg.withWidth config.width
-                    |> Svg.withHeight config.height
-                    |> Svg.toHtml
-                ]
+        ( linkFunctionName, extraAttrs ) =
+            ClickableAttributes.toLinkAttributes config.clickableAttributes
     in
-    case config.linkType of
-        Default ->
-            linkBase "link" [ Attributes.target "_self" ]
+    Html.a
+        ([ Attributes.class ("Nri-Ui-Clickable-Svg-" ++ linkFunctionName)
+         , Attributes.css (buttonOrLinkStyles config ++ config.customStyles)
+         , Widget.disabled config.disabled
+         , Widget.label config.label
+         ]
+            ++ (if not config.disabled then
+                    extraAttrs
 
-        SinglePageApp ->
-            linkBase "linkSpa"
-                (config.onClick
-                    |> Maybe.map (\msg -> [ EventExtras.onClickPreventDefaultForLinkWithHref msg ])
-                    |> Maybe.withDefault []
-                )
-
-        WithMethod method ->
-            linkBase "linkWithMethod" [ Attributes.attribute "data-method" method ]
-
-        WithTracking ->
-            linkBase
-                "linkWithTracking"
-                (config.onClick
-                    |> Maybe.map (\msg -> [ Events.preventDefaultOn "click" (Json.Decode.succeed ( msg, True )) ])
-                    |> Maybe.withDefault []
-                )
-
-        External ->
-            linkBase "linkExternal" targetBlank
-
-        ExternalWithTracking ->
-            linkBase "linkExternalWithTracking"
-                (List.concat
-                    [ targetBlank
-                    , config.onClick
-                        |> Maybe.map
-                            (\onClickMsg ->
-                                [ Events.onClick onClickMsg
-                                , Events.on "auxclick" (Json.Decode.succeed onClickMsg)
-                                ]
-                            )
-                        |> Maybe.withDefault []
-                    ]
-                )
+                else
+                    []
+               )
+            ++ config.customAttributes
+        )
+        [ config.icon
+            |> Svg.withWidth config.width
+            |> Svg.withHeight config.height
+            |> Svg.toHtml
+        ]
 
 
 buttonOrLinkStyles : ButtonOrLinkAttributes msg -> List Style

src/Nri/Ui/ClickableText/V3.elm

@@ -3,7 +3,8 @@ module Nri.Ui.ClickableText.V3 exposing
     , link
     , Attribute
     , small, medium, large
-    , href, onClick
+    , onClick
+    , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
     , icon
     , custom, css
     )
@@ -13,6 +14,7 @@ module Nri.Ui.ClickableText.V3 exposing
 
 # Post-release patches
 
+  - uses ClickableAttributes
   - adds `css` helper
   - add bottom border on hover instead of text decoration
 
@@ -46,21 +48,30 @@ HTML `<a>` elements and are created here with `*Link` functions.
 # Attributes
 
 @docs Attribute
+
+
+## Sizing
+
 @docs small, medium, large
-@docs href, onClick
+
+
+## Behavior
+
+@docs onClick
+@docs href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
+
 @docs icon
 @docs custom, css
 
 -}
 
+import ClickableAttributes exposing (ClickableAttributes)
 import Css exposing (Style)
 import Html.Styled as Html exposing (..)
 import Html.Styled.Attributes as Attributes
-import Html.Styled.Events as Events
 import Nri.Ui
 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)
 
 
@@ -127,16 +138,66 @@ css styles =
         )
 
 
+
+-- LINKING, CLICKING, and TRACKING BEHAVIOR
+
+
+setClickableAttributes :
+    (ClickableAttributes msg -> ClickableAttributes msg)
+    -> Attribute msg
+setClickableAttributes apply =
+    set
+        (\attributes ->
+            { attributes | clickableAttributes = apply attributes.clickableAttributes }
+        )
+
+
 {-| -}
 onClick : msg -> Attribute msg
 onClick msg =
-    set (\attributes -> { attributes | onClick = Just msg })
+    setClickableAttributes (ClickableAttributes.onClick msg)
 
 
 {-| -}
 href : String -> Attribute msg
 href url =
-    set (\attributes -> { attributes | url = url })
+    setClickableAttributes (ClickableAttributes.href url)
+
+
+{-| Use this link for routing within a single page app.
+
+This will make a normal <a> tag, but change the Events.onClick behavior to avoid reloading the page.
+
+See <https://github.com/elm-lang/html/issues/110> for details on this implementation.
+
+-}
+linkSpa : String -> Attribute msg
+linkSpa url =
+    setClickableAttributes (ClickableAttributes.linkSpa url)
+
+
+{-| -}
+linkWithMethod : { method : String, url : String } -> Attribute msg
+linkWithMethod config =
+    setClickableAttributes (ClickableAttributes.linkWithMethod config)
+
+
+{-| -}
+linkWithTracking : { track : msg, url : String } -> Attribute msg
+linkWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkWithTracking config)
+
+
+{-| -}
+linkExternal : String -> Attribute msg
+linkExternal url =
+    setClickableAttributes (ClickableAttributes.linkExternal url)
+
+
+{-| -}
+linkExternalWithTracking : { track : msg, url : String } -> Attribute msg
+linkExternalWithTracking config =
+    setClickableAttributes (ClickableAttributes.linkExternalWithTracking config)
 
 
 {-| Creates a `<button>` element
@@ -154,10 +215,8 @@ button label_ attributes =
     Nri.Ui.styled Html.button
         (dataDescriptor "button")
         (clickableTextStyles ++ config.customStyles)
-        ((Maybe.map Events.onClick config.onClick
-            |> Maybe.withDefault AttributesExtra.none
-         )
-            :: config.customAttributes
+        (ClickableAttributes.toButtonAttributes config.clickableAttributes
+            ++ config.customAttributes
         )
         [ viewContent config ]
 
@@ -173,11 +232,14 @@ link label_ attributes =
         config =
             (label label_ :: attributes)
                 |> List.foldl (\(Attribute attribute) l -> attribute l) defaults
+
+        ( name, clickableAttributes ) =
+            ClickableAttributes.toLinkAttributes config.clickableAttributes
     in
     Nri.Ui.styled Html.a
-        (dataDescriptor "link")
+        (dataDescriptor name)
         (clickableTextStyles ++ config.customStyles)
-        (Attributes.href config.url :: config.customAttributes)
+        (clickableAttributes ++ config.customAttributes)
         [ viewContent config ]
 
 
@@ -269,11 +331,10 @@ dataDescriptor descriptor =
 
 
 type alias ClickableTextAttributes msg =
-    { label : String
+    { clickableAttributes : ClickableAttributes msg
+    , label : String
     , size : Size
     , icon : Maybe Svg
-    , onClick : Maybe msg
-    , url : String
     , customAttributes : List (Html.Attribute msg)
     , customStyles : List Style
     }
@@ -281,8 +342,7 @@ type alias ClickableTextAttributes msg =
 
 defaults : ClickableTextAttributes msg
 defaults =
-    { onClick = Nothing
-    , url = "#"
+    { clickableAttributes = ClickableAttributes.init
     , size = Medium
     , label = ""
     , icon = Nothing

src/Nri/Ui/Divider/V2.elm

@@ -1,6 +1,8 @@
 module Nri.Ui.Divider.V2 exposing (view)
 
-{-| <https://staging.noredink.com/style_guide#ui/src/Nri/Divider.elm>
+{-| Patch changes:
+
+  - Title is navy, Muli, fontWeight 600
 
 @docs view
 
@@ -9,12 +11,7 @@ module Nri.Ui.Divider.V2 exposing (view)
 import Css exposing (..)
 import Html.Styled as Html exposing (..)
 import Nri.Ui.Colors.V1 as Colors
-
-
-type alias Config =
-    { lineColor : Css.Color
-    , textColor : Css.Color
-    }
+import Nri.Ui.Fonts.V1 as Fonts
 
 
 {-| -}
@@ -63,5 +60,7 @@ titleStyles =
     batch
         [ margin2 zero (px 5)
         , fontSize (px 12)
-        , color Colors.gray45
+        , color Colors.navy
+        , Fonts.baseFont
+        , fontWeight (int 600)
         ]

styleguide-app/Examples.elm

@@ -12,6 +12,7 @@ import Examples.ClickableSvg as ClickableSvg
 import Examples.ClickableText as ClickableText
 import Examples.Colors as Colors
 import Examples.DisclosureIndicator as DisclosureIndicator
+import Examples.Divider as Divider
 import Examples.Dropdown as Dropdown
 import Examples.Fonts as Fonts
 import Examples.Heading as Heading
@@ -246,6 +247,25 @@ all =
                     DisclosureIndicatorState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , Divider.example
+        |> Example.wrapMsg DividerMsg
+            (\msg ->
+                case msg of
+                    DividerMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState DividerState
+            (\msg ->
+                case msg of
+                    DividerState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -720,6 +740,7 @@ type State
     | ClickableTextState ClickableText.State
     | ColorsState Colors.State
     | DisclosureIndicatorState DisclosureIndicator.State
+    | DividerState Divider.State
     | DropdownState Dropdown.State
     | FontsState Fonts.State
     | HeadingState Heading.State
@@ -758,6 +779,7 @@ type Msg
     | ClickableTextMsg ClickableText.Msg
     | ColorsMsg Colors.Msg
     | DisclosureIndicatorMsg DisclosureIndicator.Msg
+    | DividerMsg Divider.Msg
     | DropdownMsg Dropdown.Msg
     | FontsMsg Fonts.Msg
     | HeadingMsg Heading.Msg

styleguide-app/Examples/Divider.elm

@@ -0,0 +1,36 @@
+module Examples.Divider exposing (Msg, State, example)
+
+{-|
+
+@docs Msg, State, example
+
+-}
+
+import Category exposing (Category(..))
+import Css
+import Example exposing (Example)
+import Html.Styled as Html
+import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Divider.V2 as Divider
+
+
+{-| -}
+type alias State =
+    {}
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Divider.V2"
+    , categories = [ Layout ]
+    , state = {}
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view = \state -> [ Divider.view "Dividing Line" ]
+    }