NoRedInk/noredink-ui/6.29.0

NOTE: the latest version is 35.9.3

Unavailable. Nobody can download this version any more, with elm or with the Lamdera compiler: Software Heritage not asked yet (this run's --swh-calls were used up); no fork with tag 6.29.0 found (15 same-name repos checked); no cached copy. Use another version.

Details

Nri.Ui.Text.V3

Changes from V2:

  • Normalizes how margin is applied (see "Understanding spacing", below).

Understanding spacing

  • All text styles have a specific line-height. This is set so that when text in the given style is long enough to wrap, the spacing between wrapped lines looks good.
  • No text styles have padding.
  • Heading styles do not have margin. It is up to the caller to add appropriate margin to the layout.
  • Paragraph styles only have bottom margin, but with :last-child bottom margin set to zero. This bottom margin is set to look good when multiple paragraphs of the same style follow one another.
    • If you want content after the paragraph and don't want the margin, put the paragraph in a div so that it will be the last-child, which will get rid of the bottom margin.
  • User-authored content blocks preserve line breaks and do not have margin.

Heading styles

Please use Nri.Ui.Heading.V2 instead of these in new code. If you're here to make a new Text version, please remove them.

heading : List (Html msg) -> Html msg

This is a Page Heading.

subHeading : List (Html msg) -> Html msg

This is a subhead.

smallHeading : List (Html msg) -> Html msg

This is a small Page Heading.

tagline : List (Html msg) -> Html msg

This is a tagline for a page heading.

Paragraph styles

caption : List (Html msg) -> Html msg

This is a little note or caption.

mediumBody : List (Html msg) -> Html msg

This is some medium body copy.

smallBody : List (Html msg) -> Html msg

This is some small body copy.

smallBodyGray : List (Html msg) -> Html msg

This is some small body copy but it's gray.

User-authored content blocks:

ugMediumBody : List (Html msg) -> Html msg

User-generated text.

ugSmallBody : List (Html msg) -> Html msg

User-generated text.

Modifying strings to display nicely:

noWidow : String -> String

Eliminate widows (single words on their own line caused by wrapping) by inserting a non-breaking space if there are at least two words.