NoRedInk/noredink-ui/22.11.0

NOTE: the latest version is 35.9.3

Nri.Ui.QuestionBox.V2

view : List (Attribute msg) -> Html msg
QuestionBox.view
    [ QuestionBox.markdown "**WOW**, great component!"
    ]
type Attribute msg
id : String -> Attribute msg
markdown : String -> Attribute msg
List
{ label : String
, onClick : msg
}
-> Attribute msg
Maybe
{ name : String
, icon : Svg
}
-> Attribute msg

This is the default type of question box. It doesn't have a programmatic or direct visual relationship to any piece of content.

pointingTo : Maybe Element -> Attribute msg

This type of QuestionBox is absolutely positioned & has an arrow pointing to its relatively positioned ancestor.

Typically, you would use this type of QuestionBox type with a Block by way of Block.withHtml.

You will need to pass a measurement, taken using Dom.Browser, in order for the question box to be positioned correctly horizontally so that it doesn't get cut off by the viewport.

containerCss : List Style -> Attribute msg
guidanceId : String -> String

This helper is how we create an id for the guidance speech bubble element based on the QuestionBox.id value. Use this helper to manage focus.

When showing multiple questions in a sequence based on the user's answer, we want to move the user's focus to the guidance so that:

  • Screenreader users are alerted to a new context -- the new question!
  • Keyboard users's focus is somewhere convenient to answer the question (but not on an answer, since we don't want accidental submissions or for the user to hit enter straight and miss the guidance!)

Modules