NoRedInk/noredink-ui/12.16.1

NOTE: the latest version is 35.9.3

Nri.Ui.ClickableText.V3

Post-release patches

  • uses ClickableAttributes
  • adds css helper
  • removes underline on hover and recolors to azureDark
  • removes bottom border
  • adds nriDescription, testId, and id helpers

Changes from V2

  • Changes API to be attributes-based rather than config-based
  • Makes a hole for custom attributes (like ids and styles)

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

button : String -> List (Attribute msg) -> Html msg

Creates a <button> element

<a> creators

Attributes

type Attribute msg

Sizing

Behavior

onClick : msg -> Attribute msg
href : String -> Attribute msg
linkSpa : String -> Attribute msg

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.

linkExternal : String -> Attribute msg
{ method : String
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg
{ track : msg
, url : String
}
-> Attribute msg
icon : Svg -> Attribute msg
custom : List (Attribute msg) -> Attribute msg

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.

css : List Style -> Attribute msg
nriDescription : String -> Attribute msg
testId : String -> Attribute msg
id : String -> Attribute msg