NoRedInk/noredink-ui/12.22.0

NOTE: the latest version is 35.9.3

Nri.Ui.Icon.V5

Changes from V4

  • Removes old icons

Icon types

Mastery Icons

gardening : { r | startingOffBadge_png : Asset } -> IconType
highFive : { r | level3Badge_png : Asset } -> IconType
okay : { r | level2Badge_png : Asset } -> IconType
thumbsUp : { r | level1Badge_png : Asset } -> IconType
masteryBadge : { r | masteryBadge : String } -> IconType

Stars and Flags

starred : { r | commentStarred_png : Asset } -> IconType
notStarred : { r | commentNotStarred_png : Asset } -> IconType
flag : { r | iconFlag_png : Asset } -> IconType

Assignment Types

assignmentTypeDiagnostic : { r | diagnostic : String } -> IconType
assignmentTypePractice : { r | practice : String } -> IconType
assignmentTypeQuiz : { r | quiz : String } -> IconType
assignmentTypeQuickWrite : { r | quickWrite : String } -> IconType
assignmentTypeGuidedDraft : { r | guidedDraft : String } -> IconType
assignmentTypePeerReview : { r | peerReview : String } -> IconType
assignmentTypeSelfReview : { r | selfReview : String } -> IconType
submitting : { r | submitting : String } -> IconType
rating : { r | rating : String } -> IconType
revising : { r | revising : String } -> IconType
guidedWrite : { r | icons_guidedWrite_svg : Asset } -> IconType
assignmentTypeWritingCycle : { r | writingcycle : String } -> IconType
writingAssignment : { r | writingAssignment : String } -> IconType

Student Assignment Actions

assignmentStartButtonPrimary : { r | assignmentStartButtonPrimary_svg : Asset } -> IconType
assignmentStartButtonSecondary : { r | assignmentStartButtonSecondary_svg : Asset } -> IconType

Teacher Assignment Actions

unarchive : { r | unarchiveBlue2x_png : Asset } -> IconType
share : { r | share : String } -> IconType
seeMore : { r | seemore : String } -> IconType
preview : { r | preview : String } -> IconType
performance : { r | performance : String } -> IconType
openClose : { r | openClose : String } -> IconType
download : { r | download : String } -> IconType

Edit

edit : { r | edit : String } -> IconType
editWriting : { r | editWriting : String } -> IconType

Humans

class : { r | class : String } -> IconType
leaderboard : { r | leaderboard : String } -> IconType
personBlue : { r | personBlue_svg : Asset } -> IconType

Social Media

facebook : { r | facebookBlue_svg : Asset } -> IconType
twitter : { r | twitterBlue_svg : Asset } -> IconType
clever : { r | clever : String } -> IconType

Arrows and Carets

arrowDown : { r | arrowDown : String } -> IconType
sortArrow : { r | sortArrow : String } -> IconType

Checkmarks

checkMarkSvg : { r | checkmark : String } -> IconType

Xs

xSvg : { r | x : String } -> IconType

Bangs

exclamation : { r | exclamation : String } -> IconType
attention : { r | attention_svg : Asset } -> IconType

Bulbs and Tips

bulb : { r | bulb : String } -> IconType
lightBulb : { r | hint_png : Asset } -> IconType
helpSvg : { r | help : String } -> IconType

Locks and keys

key : { r | key : String } -> IconType
lock : { r | lock : String } -> IconType

Time

calendar : { r | calendar : String } -> IconType
clock : { r | clock : String } -> IconType

Uncategorized (SVGs)

activity : { r | activity : String } -> IconType
compassSvg : { r | compass : String } -> IconType
document : { r | document : String } -> IconType
flipper : { r | flipper : String } -> IconType
footsteps : { r | footsteps : String } -> IconType
gear : { r | gear : String } -> IconType
pen : { r | pen : Asset } -> IconType
newspaper : { r | newspaper : String } -> IconType
sort : { r | sort : String } -> IconType
speedometer : { r | speedometer : String } -> IconType
equalitySign : { r | icons_equals_svg : Asset } -> IconType

Using Icons

= Small
| Medium

Used for determining sizes on Icon.buttons and Icon.links

An icon that can be rendered using the functions provided by this module.

decorativeIcon : IconType -> Html msg

Use this icon for purely decorative content that would be distracting rather than helpful on a screenreader.

{ alt : String
, icon : IconType
}
-> Html msg

Buttons

type alias IconButtonModel msg =
{ alt : String
, msg : msg
, icon : IconType
, disabled : Bool
, size : IconSize
}
button : IconButtonModel msg -> Html msg

Create an accessible icon button with an onClick handler Uses our default icon styles (25 x 25 px, azure)

type alias IconLinkModel =
{ alt : String
, url : String
, icon : IconType
, disabled : Bool
, size : IconSize
}
linkExternal : IconLinkModel -> Html msg

Create an icon that links to an external site Uses our default icon styles (25 x 25 px, azure)

type alias IconLinkSpaModel route =
{ alt : String
, icon : IconType
, disabled : Bool
, size : IconSize
, route : route
}
linkSpa : (route -> String) -> (route -> msg) -> IconLinkSpaModel route -> Html msg

Use this link for routing within a single page app.

This will make a normal <a> tag, but change the onClick behavior to avoid reloading the page.