NoRedInk / noredink-ui / Nri.Ui.Html.Attributes.V2

Patch changes:

- adds `nriDescription` and `testId` helpers
- adds `maybe` helper

Extras for working with Html.Attributes.

This is the new version of Nri.Ui.Html.Attributes.Extra.

none : Html.Styled.Attribute msg

Represents an attribute with no semantic meaning, useful for conditionals.

This is implemented such that whenever Html.Attributes.Extra.none is encountered by VirtualDom it will set a meaningless property on the element object itself to null:

domNode['Html.Attributes.Extra.none'] = null

It's totally safe and lets us clean up conditional and maybe attributes

includeIf : Basics.Bool -> Html.Styled.Attribute msg -> Html.Styled.Attribute msg

conditionally include an attribute. Useful for CSS classes generated with UniqueClass!

maybe : (v -> Html.Styled.Attribute msg) -> Maybe v -> Html.Styled.Attribute msg

Transform a maybe value to an attribute or attach none

targetBlank : List (Html.Styled.Attribute msg)

Use this list of attributes instead of applying Attributes.target "_blank" directly. This prevents an exploits like "tabnabbing", among other things.

See these resources:

nriDescription : String -> Html.Styled.Attribute msg

nriDescriptionSelector : String -> List Css.Style -> Css.Global.Snippet

Note: this does not handle html escaping the description before building the query

testId : String -> Html.Styled.Attribute msg

See Cypress best practices: https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements

safeIdWithPrefix : String -> String -> String

Prepends a prefix to the result of safeId.

safeId : String -> String

Creates a lowercased string that is safe to use for HTML IDs. Removes all groups of unsafe characters and replaces each group with a dash. prepends "id-" to the result to ensure that the ID starts with a letter. (necessary for CSS selectors including getElementById) See code pen for examples: https://codepen.io/ap-nri/pen/OJENQLY