NoRedInk/noredink-ui/22.6.0

NOTE: the latest version is 35.9.3

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/NoRedInk/noredink-ui.

What we checked: Tag 22.6.0 is still on github.com/NoRedInk/noredink-ui; its commit 7cae53f1af4b is from 2023-03-24 17:13 UTC, before the version was published (2023-03-27 14:55 UTC); elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/NoRedInk/noredink-ui/zipball/22.6.0/

Nri.Ui.Block.V4

view : List (Attribute msg) -> Html msg
Block.view [ Block.plaintext "Hello, world!" ]
type Attribute msg

Content

plaintext : String -> Attribute msg

Provide the main content of the block as a plain-text string. You can also use content for more complex cases, including a blank appearing within an emphasis.

type Content msg
content : List (Content msg) -> Attribute msg

Use content for more complex block views, for instance when a blank appears within an emphasis block. Prefer to use plaintext when possible for better readability.

Block.view
    [ Block.emphasize
    , Block.content (Block.phrase "Hello, " ++  Block.blank :: Block.phrase "!" ) ]
    ]
phrase : String -> List (Content msg)
{ id : String
, word : String
}
-> Content msg

Use this helper with content when you need to attach an id to a particular word inside of an emphasis.

You will only need to use this helper if you're also using content to construct a more complex Block. For a less complex blank Block, don't include content or plaintext in the list of attributes.

blankWithId : String -> Content msg

You will only need to use this helper if you're also using content to construct a more complex Block. For a less complex blank Block, don't include content or plaintext in the list of attributes.

Content customization

Mark content as emphasized.

Labels & positioning

label : String -> Attribute msg
id : String -> Attribute msg

You will need these helpers if you want to prevent label overlaps. (Which is to say -- anytime you have labels!)

labelId : String -> Attribute msg
labelContentId : String -> String
type alias LabelPosition =
{ totalHeight : Float
, arrowHeight : Float
, zIndex : Int
, xOffset : Float
}

Use getLabelPositions to construct this value.

Dict
String
{ label : Element
, labelContent : Element
}
-> Dict String LabelPosition

Determine where to position labels in order to dynamically avoid overlapping content.

- First, we add ids to block with labels with `Block.labelId`.
- Say we added `Block.labelId "example-id"`, then we will use `Browser.Dom.getElement "example-id"` and `Browser.Dom.getElement (Block.labelContentId "example-id")` to construct a record in the shape { label : Dom.Element, labelContent : Dom.Element }. We store this record in a dictionary keyed by ids (e.g., "example-id") with measurements for all other labels.

getLabelPositions will return a dictionary of values (keyed by label ids) whose values can be passed directly to labelPosition for positioning.

labelPosition : Maybe LabelPosition -> Attribute msg

Use getLabelPositions to calculate what these values should be.

Visual customization