update Nri.Ui.ClickableText.V3 to Nri.Ui.ClickableText.V4

component-catalog/src/CommonControls.elm

@@ -39,7 +39,7 @@ import Examples.Colors
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Http
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (PremiumDisplay)
 import Nri.Ui.Svg.V1 exposing (Svg)

component-catalog/src/EllieLink.elm

@@ -3,7 +3,7 @@ module EllieLink exposing (Config, SectionExample, view)
 import Dict exposing (Dict)
 import Html.Styled exposing (..)
 import Http
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Url.Builder
 
 

component-catalog/src/Example.elm

@@ -12,7 +12,7 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Header.V1 as Header

component-catalog/src/Examples/Block.elm

@@ -22,7 +22,7 @@ import Html.Styled.Attributes exposing (css)
 import Markdown
 import Nri.Ui.Block.V6 as Block
 import Nri.Ui.Button.V10 as Button
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing

component-catalog/src/Examples/Carousel.elm

@@ -26,7 +26,7 @@ import Html.Styled.Attributes as Attributes exposing (class, css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Carousel.V2 as Carousel exposing (Role(..))
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.FocusRing.V1 as FocusRing

component-catalog/src/Examples/Checkbox.elm

@@ -19,7 +19,7 @@ import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Checkbox.V7 as Checkbox
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading
@@ -148,7 +148,7 @@ example =
                             [ text "Be sure to read "
                             , ClickableText.link "the terms and conditions"
                                 [ ClickableText.linkExternal "https://en.wikipedia.org/wiki/Terms_of_service"
-                                , ClickableText.caption
+                                , ClickableText.small
                                 , ClickableText.appearsInline
                                 ]
                             , text " before agreeing to follow them."

component-catalog/src/Examples/ClickableText.elm

@@ -18,7 +18,7 @@ import EllieLink
 import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing
 import Nri.Ui.Text.V6 as Text
@@ -39,12 +39,7 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ ClickableText.link "Caption"
-            [ ClickableText.icon UiIcon.link
-            , ClickableText.caption
-            , ClickableText.custom [ Key.tabbable False ]
-            ]
-        , ClickableText.link "Small"
+        [ ClickableText.link "Small"
             [ ClickableText.icon UiIcon.link
             , ClickableText.small
             , ClickableText.custom [ Key.tabbable False ]
@@ -186,7 +181,6 @@ viewExamples ellieLinkConfig (State control) =
         [ Heading.plaintext "Inline ClickableText Examples"
         , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
         ]
-    , Text.caption (inlineExample "Text.caption" ClickableText.caption)
     , Text.smallBody (inlineExample "Text.smallBody" ClickableText.small)
     , Text.mediumBody (inlineExample "Text.mediumBody" ClickableText.medium)
     ]
@@ -228,8 +222,7 @@ inlineExample textSizeName size =
 
 sizes : List ( ClickableText.Attribute msg, String )
 sizes =
-    [ ( ClickableText.caption, "caption" )
-    , ( ClickableText.small, "small" )
+    [ ( ClickableText.small, "small" )
     , ( ClickableText.medium, "medium" )
     , ( ClickableText.large, "large" )
     ]

component-catalog/src/Examples/FocusRing.elm

@@ -17,7 +17,7 @@ import Nri.Ui.Accordion.V4 as Accordion exposing (AccordionEntry(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Checkbox.V7 as Checkbox
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.FocusRing.V1 as FocusRing
 import Nri.Ui.Heading.V3 as Heading

component-catalog/src/Examples/Fonts.elm

@@ -11,7 +11,7 @@ import Css exposing (Style)
 import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Spacing.V1 as Spacing

component-catalog/src/Examples/Header.elm

@@ -17,7 +17,7 @@ import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Header.V1 as Header
@@ -65,7 +65,7 @@ example =
                 , mainType = Just "RootHtml.Html msg"
                 , extraCode =
                     [ "import Nri.Ui.BreadCrumbs.V2 as BreadCrumbs"
-                    , "import Nri.Ui.ClickableText.V3 as ClickableText"
+                    , "import Nri.Ui.ClickableText.V4 as ClickableText"
                     ]
                 , renderExample = Code.unstyledView
                 , toExampleCode =

component-catalog/src/Examples/Menu.elm

@@ -22,7 +22,7 @@ import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.Extra as ColorsExtra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
@@ -146,7 +146,7 @@ view ellieLinkConfig state =
         , extraCode =
             [ "import Nri.Ui.Button.V10 as Button"
             , "import Nri.Ui.ClickableSvg.V2 as ClickableSvg"
-            , "import Nri.Ui.ClickableText.V3 as ClickableText"
+            , "import Nri.Ui.ClickableText.V4 as ClickableText"
             , "import Nri.Ui.Tooltip.V3 as Tooltip"
             , Code.newlines
             , Code.unionType "Msg"

component-catalog/src/Examples/Message.elm

@@ -11,7 +11,7 @@ import Debug.Control.View as ControlView
 import Example exposing (Example)
 import Guidance
 import Http
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Message.V4 as Message
@@ -222,7 +222,7 @@ example =
                 [ Heading.plaintext "Content Type Variations"
                 , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
                 ]
-            , viewContentTable "Message.tiny" Message.tiny ClickableText.caption
+            , viewContentTable "Message.tiny" Message.tiny ClickableText.small
             , viewContentTable "Message.large" Message.large ClickableText.medium
             , viewContentTable "Message.banner" Message.banner ClickableText.large
             ]

component-catalog/src/Examples/Modal.elm

@@ -22,7 +22,7 @@ import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts

component-catalog/src/Examples/Tooltip.elm

@@ -22,7 +22,7 @@ import KeyboardSupport exposing (Key(..))
 import Markdown
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.Svg.V1 as Svg

component-catalog/src/Guidance.elm

@@ -1,7 +1,7 @@
 module Guidance exposing (..)
 
 import Html.Styled exposing (..)
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 
 
 useATACGuide : String -> List (Html msg)

component-catalog/src/UsageExample.elm

@@ -9,7 +9,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
 import Html.Styled.Lazy as Lazy
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.MediaQuery.V1 exposing (mobile)

component-catalog/src/UsageExamples/ClickableCardWithTooltip.elm

@@ -10,7 +10,7 @@ import Category exposing (Category(..))
 import Css
 import Html.Styled exposing (Html)
 import Html.Styled.Events as Events
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V3 as Tooltip

elm.json

@@ -25,6 +25,7 @@
         "Nri.Ui.Checkbox.V7",
         "Nri.Ui.ClickableSvg.V2",
         "Nri.Ui.ClickableText.V3",
+        "Nri.Ui.ClickableText.V4",
         "Nri.Ui.Container.V2",
         "Nri.Ui.Colors.Extra",
         "Nri.Ui.Colors.V1",

src/Nri/Ui/ClickableText/V3.elm

@@ -18,9 +18,6 @@ module Nri.Ui.ClickableText.V3 exposing
 
   - Remove the -v2- from dataDescriptor to avoid version specific
   - Use dataDescriptor for clickable-text-label
-  - replaces the `disabled` attribute with `aria-disabled="true"`
-  - removes click handler from disabled buttons
-  - prevents default behavior for disabled submit buttons by setting `type="button"`
 
 
 # Post-release patches
@@ -37,6 +34,9 @@ module Nri.Ui.ClickableText.V3 exposing
   - adds `submit` and `opensModal`
   - adds `disabled`
   - adds `caption` size that matches up with Text.caption's font size
+  - replaces the `disabled` attribute with `aria-disabled="true"`
+  - removes click handler from disabled buttons
+  - prevents default behavior for disabled submit buttons by setting `type="button"`
 
 
 # Changes from V2

src/Nri/Ui/ClickableText/V4.elm

@@ -0,0 +1,622 @@
+module Nri.Ui.ClickableText.V4 exposing
+    ( button
+    , link
+    , Attribute
+    , small, medium, large, modal
+    , appearsInline
+    , onClick, submit, opensModal
+    , href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
+    , disabled
+    , icon, rightIcon
+    , hideIconForMobile, hideIconFor
+    , custom, nriDescription, testId, id
+    , hideTextForMobile, hideTextFor
+    , css, notMobileCss, mobileCss, quizEngineMobileCss, rightIconCss
+    )
+
+{-|
+
+
+# Changes from V3
+
+  - removes the `caption` attribute
+  - removes `Css.display Css.inlineBlock`
+  - inherits font family and weight from parent
+  - adjusts font sizes
+  - uses `Css.display Css.inlineFlex` only on buttons
+  - removes `"-v2"` from data descriptor
+  - uses dataDescriptor for `"clickable-text-label"`
+
+
+# About:
+
+ClickableText looks different from Nri.Ui.Button in that it displays without margin or padding.
+ClickableText has the suave, traditional look of a "link"!
+
+For accessibility purposes, buttons that perform an action on the current page should be HTML `<button>`
+elements and are created here with `*Button` functions. Buttons that take the user to a new page should be
+HTML `<a>` elements and are created here with `*Link` functions.
+
+
+# `<button>` creators
+
+@docs button
+
+
+# `<a>` creators
+
+@docs link
+
+
+# Attributes
+
+@docs Attribute
+
+
+## Sizing
+
+@docs small, medium, large, modal
+
+
+## Appearance
+
+@docs appearsInline
+
+
+## Behavior
+
+@docs onClick, submit, opensModal
+@docs href, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking
+@docs disabled
+
+
+## Icons
+
+@docs icon, rightIcon
+@docs hideIconForMobile, hideIconFor
+
+
+## Customization
+
+@docs custom, nriDescription, testId, id
+
+
+### CSS
+
+@docs hideTextForMobile, hideTextFor
+@docs css, notMobileCss, mobileCss, quizEngineMobileCss, rightIconCss
+
+-}
+
+import Accessibility.Styled.Style exposing (invisibleStyle)
+import ClickableAttributes exposing (ClickableAttributes)
+import Css exposing (Style)
+import Css.Global
+import Css.Media exposing (MediaQuery)
+import Html.Styled as Html exposing (..)
+import Html.Styled.Attributes as Attributes
+import Nri.Ui
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.FocusRing.V1 as FocusRing
+import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
+import Nri.Ui.MediaQuery.V1 as MediaQuery
+import Nri.Ui.Svg.V1 as Svg exposing (Svg)
+
+
+label : String -> Attribute msg
+label label_ =
+    set (\attributes -> { attributes | label = label_ })
+
+
+{-| -}
+small : Attribute msg
+small =
+    set (\attributes -> { attributes | size = Small })
+
+
+{-| -}
+medium : Attribute msg
+medium =
+    set (\attributes -> { attributes | size = Medium })
+
+
+{-| -}
+large : Attribute msg
+large =
+    set (\attributes -> { attributes | size = Large })
+
+
+{-| For use in Modal footers (adds `large` and `Css.marginTop (Css.px 15)`)
+-}
+modal : Attribute msg
+modal =
+    set
+        (\attributes ->
+            { attributes
+                | size = Large
+                , customStyles = List.append attributes.customStyles [ Css.marginTop (Css.px 15) ]
+            }
+        )
+
+
+type Size
+    = Small
+    | Medium
+    | Large
+
+
+type Kind
+    = Button
+    | Link
+
+
+{-| -}
+icon : Svg -> Attribute msg
+icon icon_ =
+    set (\attributes -> { attributes | icon = Just icon_ })
+
+
+{-| -}
+rightIcon : Svg -> Attribute msg
+rightIcon icon_ =
+    set (\attributes -> { attributes | rightIcon = Just icon_ })
+
+
+{-| Use this helper to add custom attributes.
+
+Do NOT use this helper to add css styles, as they may not be applied the way
+you want/expect if underlying Button styles change.
+Instead, please use the `css` helper.
+
+-}
+custom : List (Html.Attribute msg) -> Attribute msg
+custom attributes =
+    set
+        (\config ->
+            { config
+                | customAttributes = List.append config.customAttributes attributes
+            }
+        )
+
+
+{-| -}
+nriDescription : String -> Attribute msg
+nriDescription description =
+    custom [ ExtraAttributes.nriDescription description ]
+
+
+{-| -}
+testId : String -> Attribute msg
+testId id_ =
+    custom [ ExtraAttributes.testId id_ ]
+
+
+{-| -}
+id : String -> Attribute msg
+id id_ =
+    custom [ Attributes.id id_ ]
+
+
+{-| Hide the left-side icon for the mobile breakpoint.
+-}
+hideIconForMobile : Attribute msg
+hideIconForMobile =
+    hideIconFor MediaQuery.mobile
+
+
+{-| Hide the left-side icon for an arbitrary media query.
+-}
+hideIconFor : MediaQuery -> Attribute msg
+hideIconFor mediaQuery =
+    set
+        (\config ->
+            { config
+                | iconStyles =
+                    List.append config.iconStyles
+                        [ Css.Media.withMedia [ mediaQuery ]
+                            [ Css.display Css.none
+                            ]
+                        ]
+            }
+        )
+
+
+{-| -}
+hideTextForMobile : Attribute msg
+hideTextForMobile =
+    hideTextFor MediaQuery.mobile
+
+
+{-| -}
+hideTextFor : MediaQuery -> Attribute msg
+hideTextFor mediaQuery =
+    css
+        [ Css.Media.withMedia [ mediaQuery ]
+            [ Css.borderStyle Css.none |> Css.important
+            , Css.Global.descendants
+                [ ExtraAttributes.nriDescriptionSelector (dataDescriptor "label")
+                    [ invisibleStyle
+                    ]
+                ]
+            ]
+        ]
+
+
+{-| -}
+css : List Style -> Attribute msg
+css styles =
+    set
+        (\config ->
+            { config
+                | customStyles = List.append config.customStyles styles
+            }
+        )
+
+
+{-| Equivalent to:
+
+    ClickableText.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]
+
+-}
+notMobileCss : List Style -> Attribute msg
+notMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.notMobile ] styles ]
+
+
+{-| Equivalent to:
+
+    ClickableText.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]
+
+-}
+mobileCss : List Style -> Attribute msg
+mobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.mobile ] styles ]
+
+
+{-| Equivalent to:
+
+    ClickableText.css
+        [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]
+
+-}
+quizEngineMobileCss : List Style -> Attribute msg
+quizEngineMobileCss styles =
+    css [ Css.Media.withMedia [ MediaQuery.quizEngineMobile ] styles ]
+
+
+
+-- LINKING, CLICKING, and TRACKING BEHAVIOR
+
+
+{-| -}
+onClick : msg -> Attribute msg
+onClick msg =
+    set (ClickableAttributes.onClick msg)
+
+
+{-| By default, buttons have type "button". Use this attribute to change the button type to "submit".
+
+Note: this attribute is not supported by links.
+
+-}
+submit : Attribute msg
+submit =
+    set ClickableAttributes.submit
+
+
+{-| Use this attribute when interacting with the button will launch a modal.
+-}
+opensModal : Attribute msg
+opensModal =
+    set ClickableAttributes.opensModal
+
+
+{-| -}
+href : String -> Attribute msg
+href url =
+    set (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 =
+    set (ClickableAttributes.linkSpa url)
+
+
+{-| -}
+linkWithMethod : { method : String, url : String } -> Attribute msg
+linkWithMethod config =
+    set (ClickableAttributes.linkWithMethod config)
+
+
+{-| -}
+linkWithTracking : { track : msg, url : String } -> Attribute msg
+linkWithTracking config =
+    set (ClickableAttributes.linkWithTracking config)
+
+
+{-| -}
+linkExternal : String -> Attribute msg
+linkExternal url =
+    set (ClickableAttributes.linkExternal url)
+
+
+{-| -}
+linkExternalWithTracking : { track : msg, url : String } -> Attribute msg
+linkExternalWithTracking config =
+    set (ClickableAttributes.linkExternalWithTracking config)
+
+
+{-| Shows inactive styling.
+
+If a button, this attribute will disable it as you'd expect.
+
+If a link, this attribute will follow the pattern laid out in [Scott O'Hara's disabled links](https://www.scottohara.me/blog/2021/05/28/disabled-links.html) article,
+and essentially make the anchor a disabled placeholder.
+
+_Caveat!_
+
+The Component Catalog example will NOT work correctly because of <https://github.com/elm/browser/issues/34>, which describes a problem where "a tags without href generate a navigation event".
+
+In most cases, if you're not using Browser.application, disabled links should work just fine.
+
+-}
+disabled : Bool -> Attribute msg
+disabled value =
+    set (\attributes -> { attributes | disabled = value })
+
+
+{-| Specifies whether it should have inline appearance.
+-}
+appearsInline : Attribute msg
+appearsInline =
+    css
+        [ Css.borderBottom3 (Css.px 1) Css.solid Colors.azure
+        , Css.Global.withAttribute "aria-disabled=true" [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
+        , Css.disabled [ Css.borderBottom3 (Css.px 1) Css.solid Colors.gray45 ]
+        ]
+
+
+{-| Specifies custom styles for the rightIcon
+-}
+rightIconCss : List Css.Style -> Attribute msg
+rightIconCss styles =
+    set
+        (\config ->
+            { config
+                | rightIconStyles =
+                    List.append config.rightIconStyles styles
+            }
+        )
+
+
+{-| Creates a `<button>` element
+-}
+button :
+    String
+    -> List (Attribute msg)
+    -> Html msg
+button label_ attributes =
+    let
+        config =
+            (label label_ :: attributes)
+                |> List.foldl (\(Attribute attribute) b -> attribute b) defaults
+    in
+    Nri.Ui.styled Html.button
+        (dataDescriptor "button")
+        (clickableTextSharedStyles config.disabled ++ clickableTextButtonStyles ++ config.customStyles)
+        (ClickableAttributes.toButtonAttributes config.clickableAttributes
+            { disabled = config.disabled }
+            ++ config.customAttributes
+        )
+        [ viewContent config Button ]
+
+
+{-| Creates a `<a>` element
+-}
+link :
+    String
+    -> List (Attribute msg)
+    -> Html msg
+link label_ attributes =
+    let
+        config =
+            (label label_ :: attributes)
+                |> List.foldl (\(Attribute attribute) l -> attribute l) defaults
+
+        ( name, clickableAttributes ) =
+            ClickableAttributes.toLinkAttributes
+                { routeToString = identity
+                , isDisabled = config.disabled
+                }
+                config.clickableAttributes
+    in
+    Nri.Ui.styled Html.a
+        (dataDescriptor name)
+        (clickableTextSharedStyles config.disabled ++ clickableTextLinkStyles ++ config.customStyles)
+        (clickableAttributes ++ config.customAttributes)
+        [ viewContent config Link ]
+
+
+viewContent :
+    { a
+        | label : String
+        , size : Size
+        , icon : Maybe Svg
+        , rightIcon : Maybe Svg
+        , iconStyles : List Style
+        , rightIconStyles : List Style
+    }
+    -> Kind
+    -> Html msg
+viewContent config kind =
+    let
+        fontSize =
+            sizeToPx config.size
+
+        viewIcon styles icon_ =
+            icon_
+                |> Svg.withWidth fontSize
+                |> Svg.withHeight fontSize
+                |> Svg.withCss styles
+                |> Svg.toHtml
+
+        iconSize =
+            case config.size of
+                Small ->
+                    Css.px 3
+
+                Medium ->
+                    Css.px 3
+
+                Large ->
+                    Css.px 4
+
+        iconAndTextContainer =
+            span
+                [ Attributes.css
+                    (Css.fontSize fontSize
+                        :: (case kind of
+                                Button ->
+                                    [ Css.display Css.inlineFlex
+                                    , Css.alignItems Css.center
+                                    ]
+
+                                Link ->
+                                    []
+                           )
+                    )
+                ]
+                >> List.singleton
+    in
+    span [ Attributes.css [ Css.fontSize fontSize ] ]
+        (case ( config.icon, config.rightIcon ) of
+            ( Just leftIcon, Just rightIcon_ ) ->
+                iconAndTextContainer
+                    [ viewIcon (Css.marginRight iconSize :: config.iconStyles) leftIcon
+                    , span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
+                    , viewIcon (Css.marginLeft iconSize :: config.rightIconStyles) rightIcon_
+                    ]
+
+            ( Just leftIcon, Nothing ) ->
+                iconAndTextContainer
+                    [ viewIcon (Css.marginRight iconSize :: config.iconStyles) leftIcon
+                    , span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
+                    ]
+
+            ( Nothing, Just rightIcon_ ) ->
+                iconAndTextContainer
+                    [ span [ ExtraAttributes.nriDescription (dataDescriptor "label") ] [ text config.label ]
+                    , viewIcon (Css.marginLeft iconSize :: config.rightIconStyles) rightIcon_
+                    ]
+
+            ( Nothing, Nothing ) ->
+                [ text config.label ]
+        )
+
+
+clickableTextSharedStyles : Bool -> List Css.Style
+clickableTextSharedStyles isDisabled =
+    let
+        baseStyles =
+            [ Css.fontFamily Css.inherit
+            , Css.fontWeight Css.inherit
+            ]
+    in
+    if isDisabled then
+        Css.cursor Css.notAllowed
+            :: Css.color Colors.gray45
+            :: baseStyles
+
+    else
+        Css.cursor Css.pointer
+            :: Css.color Colors.azure
+            :: Css.hover [ Css.color Colors.azureDark ]
+            :: baseStyles
+
+
+clickableTextLinkStyles : List Css.Style
+clickableTextLinkStyles =
+    [ Css.textDecoration Css.none
+    ]
+
+
+clickableTextButtonStyles : List Css.Style
+clickableTextButtonStyles =
+    [ Css.margin Css.zero
+    , Css.padding Css.zero
+    , Css.borderStyle Css.none
+    , Css.backgroundColor Css.transparent
+    , Css.textAlign Css.left
+    ]
+
+
+sizeToPx : Size -> Css.Px
+sizeToPx size =
+    case size of
+        Small ->
+            Css.px 13
+
+        Medium ->
+            Css.px 15
+
+        Large ->
+            Css.px 18
+
+
+dataDescriptor : String -> String
+dataDescriptor descriptor =
+    "clickable-text-" ++ descriptor
+
+
+
+--  Internals
+
+
+type alias ClickableTextAttributes msg =
+    { clickableAttributes : ClickableAttributes String msg
+    , label : String
+    , size : Size
+    , icon : Maybe Svg
+    , iconStyles : List Style
+    , rightIcon : Maybe Svg
+    , rightIconStyles : List Style
+    , customAttributes : List (Html.Attribute msg)
+    , customStyles : List Style
+    , disabled : Bool
+    }
+
+
+defaults : ClickableTextAttributes msg
+defaults =
+    { clickableAttributes = ClickableAttributes.init
+    , size = Medium
+    , label = ""
+    , icon = Nothing
+    , iconStyles = []
+    , rightIcon = Nothing
+    , rightIconStyles = []
+    , customAttributes = [ Attributes.class FocusRing.customClass ]
+    , customStyles = [ Css.pseudoClass "focus-visible" (Css.borderRadius (Css.px 4) :: FocusRing.tightStyles) ]
+    , disabled = False
+    }
+
+
+{-| -}
+type Attribute msg
+    = Attribute (ClickableTextAttributes msg -> ClickableTextAttributes msg)
+
+
+set :
+    (ClickableTextAttributes msg -> ClickableTextAttributes msg)
+    -> Attribute msg
+set with =
+    Attribute (\config -> with config)

src/Nri/Ui/Menu/V4.elm

@@ -67,7 +67,7 @@ import Json.Decode
 import Nri.Ui.AnimatedIcon.V1 as AnimatedIcon
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1
 import Nri.Ui.Html.Attributes.V2 as AttributesExtra

src/Nri/Ui/Pagination/V1.elm

@@ -14,7 +14,7 @@ import Css
 import Css.Transitions as Transitions
 import Html.Styled.Attributes exposing (css)
 import List.Extra
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.V3 exposing (viewIf)
 

src/Nri/Ui/SideNav/V4.elm

@@ -69,7 +69,7 @@ import Maybe.Extra
 import Nri.Ui
 import Nri.Ui.AnimatedIcon.V1 as AnimatedIcon
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (PremiumDisplay)
 import Nri.Ui.FocusRing.V1 as FocusRing

src/Nri/Ui/SideNav/V5.elm

@@ -63,7 +63,7 @@ import Maybe.Extra
 import Nri.Ui
 import Nri.Ui.AnimatedIcon.V1 as AnimatedIcon
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Data.PremiumDisplay as PremiumDisplay exposing (PremiumDisplay)
 import Nri.Ui.FocusRing.V1 as FocusRing

src/Nri/Ui/TextInput/V7.elm

@@ -66,7 +66,7 @@ import InputLabelInternal
 import Iso8601
 import Keyboard.Event
 import Nri.Ui.ClickableSvg.V2 as ClickableSvg
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Html.Attributes.V2 as Extra
 import Nri.Ui.InputStyles.V4 as InputStyles exposing (defaultMarginTop)

tests/Spec/Nri/Ui/ClickableText.elm

@@ -5,7 +5,7 @@ import Accessibility.Role as Role
 import Html.Attributes as Attributes
 import Html.Styled exposing (..)
 import Nri.Test.MouseHelpers.V1 as MouseHelpers
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.UiIcon.V1 as UiIcon
 import ProgramTest exposing (..)
 import Spec.Helpers exposing (expectFailure)
@@ -17,7 +17,7 @@ import Test.Html.Selector as Selector exposing (..)
 
 spec : Test
 spec =
-    describe "Nri.Ui.ClickableText.V3"
+    describe "Nri.Ui.ClickableText.V4"
         [ describe "elements" elementTests
         , describe "attributes" attributeTests
         , describe "icon accessibility" iconAccessibilityTests

tests/Spec/Nri/Ui/Menu.elm

@@ -4,7 +4,7 @@ import Html.Attributes as Attributes
 import Html.Styled as HtmlStyled
 import Json.Encode as Encode
 import Nri.Test.KeyboardHelpers.V1 as KeyboardHelpers
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Menu.V4 as Menu
 import Nri.Ui.Tooltip.V3 as Tooltip
 import ProgramTest exposing (ProgramTest, ensureViewHas, ensureViewHasNot)

tests/Spec/Nri/Ui/Tooltip.elm

@@ -7,7 +7,7 @@ import Html.Attributes
 import Html.Styled as HtmlStyled
 import Html.Styled.Attributes as Attrs
 import Nri.Test.KeyboardHelpers.V1 as KeyboardHelpers
-import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.ClickableText.V4 as ClickableText
 import Nri.Ui.Tooltip.V3 as Tooltip
 import ProgramTest exposing (ProgramTest, ensureViewHas, ensureViewHasNot)
 import Spec.Helpers exposing (nriDescription)

tests/elm-verify-examples.json

@@ -21,6 +21,7 @@
         "Nri.Ui.Checkbox.V7",
         "Nri.Ui.ClickableSvg.V2",
         "Nri.Ui.ClickableText.V3",
+        "Nri.Ui.ClickableText.V4",
         "Nri.Ui.Container.V2",
         "Nri.Ui.Colors.Extra",
         "Nri.Ui.Colors.V1",