NoRedInk / noredink-ui / Nri.Ui.Message.V4

Changes from V3:

Patch changes:

Changes from V2:

- adds helpers: `custom`,`css`,`icon`,`testId`,`id`

View

somethingWentWrong : String -> Accessibility.Styled.Html msg

Shows an appropriate error message for when something unhandled happened.

view maybeDetailedErrorMessage =
    viewMaybe Message.somethingWentWrong maybeDetailedErrorMessage

view : List (Attribute msg) -> Accessibility.Styled.Html msg

view =
    Message.view
        [ Message.tip
        , Message.markdown "Don't tip too much, or your waitress will **fall over**!"
        ]


type Attribute msg

Construct an Attribute using a helper like onDismiss or alert.

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

custom : List (Accessibility.Styled.Attribute Basics.Never) -> 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 styles change. Instead, please use the css helper.

testId : String -> Attribute msg

id : String -> Attribute msg

CSS

hideIconForMobile : Attribute msg

hideIconFor : Css.Media.MediaQuery -> Attribute msg

css : List Css.Style -> Attribute msg

notMobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

mobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

quizEngineMobileCss : List Css.Style -> Attribute msg

Equivalent to:

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

Size

tiny : Attribute msg

Shows a tiny alert message. We commonly use these for validation errors and small hints to users.

Message.view [ Message.tiny ]

This is the default size for a Message.

large : Attribute msg

Shows a large alert or callout message. We commonly use these for highlighted tips, instructions, or asides in page copy.

Message.view [ Message.large ]

banner : Attribute msg

Shows a banner alert message. This is even more prominent than Message.large. We commonly use these for flash messages at the top of pages.

Message.view [ Message.banner ]

Content

paragraph : String -> Attribute msg

Provide a plain-text string that will be put into a paragraph tag, with the default margin removed.

plaintext : String -> Attribute msg

Provide a plain-text string.

markdown : String -> Attribute msg

Provide a string that will be rendered as markdown.

html : List (Accessibility.Styled.Html msg) -> Attribute msg

Provide a list of custom HTML.

httpError : Http.Error -> Attribute msg

Provide an HTTP error, which will be translated to user-friendly text.

codeDetails : String -> Attribute msg

Details for Engineers

Will be rendered in a closed details box

Theme

tip : Attribute msg

This is the default theme for a Message.

error : Attribute msg

alert : Attribute msg

success : Attribute msg

customTheme : { color : Css.Color, backgroundColor : Css.Color } -> Attribute msg

Role

alertRole : Attribute msg

Use this attribute when a user's immediate attention on the Message is required.

For example, use this attribute when:

-- Excerpted from Using the alert role MDN docs

statusRole : Attribute msg

Use this attribute when a user's immediate attention on the Message is NOT required.

This means that a status Message has a lower priority than an alert Message.

Actions

onDismiss : msg -> Attribute msg

Adds a dismiss ("X" icon) to a message which will produce the given msg when clicked.