NoRedInk / noredink-ui / Nri.Ui.ClickableSvg.V2

Patch changes:

- adds `nriDescription`, `testId`, and `id` helpers
- adds `iconForMobile`, `iconForQuizEngineMobile`, `iconForNarrowMobile`
- adds `submit` and `opensModal`
- 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"`

Create a button or link

button : String -> Nri.Ui.Svg.V1.Svg -> List (Attribute msg) -> Html.Styled.Html msg

link : String -> Nri.Ui.Svg.V1.Svg -> List (Attribute msg) -> Html.Styled.Html msg


type Attribute msg

Behavior

onClick : msg -> Attribute msg

submit : Attribute 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.

opensModal : Attribute msg

Use this attribute when interacting with the button will launch a modal.

href : String -> Attribute msg

linkSpa : String -> Attribute msg

Use this link for routing within a single page app.

This will make a normal 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

linkWithMethod : { method : String, url : String } -> Attribute msg

linkWithTracking : { track : msg, url : String } -> Attribute msg

linkExternalWithTracking : { track : msg, url : String } -> Attribute msg

Sizing

exactSize : Basics.Int -> Attribute msg

Set the size in px for the element's width and height.

Equivalent to:

[ exactWidth inPx
, exactHeight inPx
]

exactWidth : Basics.Int -> Attribute msg

Define a size in px for the element's total width.

exactHeight : Basics.Int -> Attribute msg

Define a size in px for the element's total height.

State

disabled : Basics.Bool -> Attribute msg

Icons

rightIcon : Nri.Ui.Svg.V1.Svg -> Attribute msg

iconForMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg

iconForQuizEngineMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg

iconForNarrowMobile : Nri.Ui.Svg.V1.Svg -> Attribute msg

Customization

withBorder : Attribute msg

Display a border around the icon.

primary : Attribute msg

white/transparent icon on an azure background.

secondary : Attribute msg

This is the default: a blue icon on a transparent background, or a blue icon on a white/glacier icon with a blue border.

tertiary : Attribute msg

Used to de-emphasize elements when not hovered.

quaternary : Attribute msg

Used to de-emphasize elements when not hovered.

danger : Attribute msg

White/transparent icon on a red background.

dangerSecondary : Attribute msg

Red icon on a white/transparent background.

custom : List (Html.Styled.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.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

id : String -> Attribute msg

CSS

css : List Css.Style -> Attribute msg

notMobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableSvg.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableSvg.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Css.Style -> Attribute msg

Equivalent to:

ClickableSvg.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

DEPRECATED

In practice, we don't use these sizes. Remove them!

small : Attribute msg

This is the default. This attribute will be removed in the next version of ClickableSvg!

medium : Attribute msg

This attribute will be removed in the next version of ClickableSvg!

large : Attribute msg

This attribute will be removed in the next version of ClickableSvg!