mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-16 01:13:08 +03:00
🎨 dry up the icon examples helpers
This commit is contained in:
Tessa Kelly
parent
c971530a76
commit
555f876d05
@ -13,7 +13,7 @@ import Html.Styled as Html exposing (Html)
|
||||
import Html.Styled.Attributes exposing (css, style, title)
|
||||
import ModuleExample exposing (Category(..), ModuleExample)
|
||||
import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon
|
||||
import Nri.Ui.Colors.V1 exposing (..)
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import Nri.Ui.Icon.V5 as Icon
|
||||
import Nri.Ui.Text.V4 as Text
|
||||
@ -26,18 +26,18 @@ example =
|
||||
, category = Icons
|
||||
, content =
|
||||
[ viewIconSection "Mastery Icons"
|
||||
[ { icon = Icon.gardening, background = Dark, alt = "Gardening" }
|
||||
, { icon = Icon.highFive, background = Dark, alt = "HighFive" }
|
||||
, { icon = Icon.okay, background = Dark, alt = "Okay" }
|
||||
, { icon = Icon.thumbsUp, background = Dark, alt = "ThumbsUp" }
|
||||
, { icon = Icon.masteryBadge, background = Light, alt = "Badge " }
|
||||
[ deprecatedIcon { icon = Icon.gardening, background = Colors.blue, alt = "Gardening" }
|
||||
, deprecatedIcon { icon = Icon.highFive, background = Colors.blue, alt = "HighFive" }
|
||||
, deprecatedIcon { icon = Icon.okay, background = Colors.blue, alt = "Okay" }
|
||||
, deprecatedIcon { icon = Icon.thumbsUp, background = Colors.blue, alt = "ThumbsUp" }
|
||||
, deprecatedIcon { icon = Icon.masteryBadge, background = Colors.frost, alt = "Badge " }
|
||||
]
|
||||
, viewIconSection "Stars and Flags"
|
||||
[ { icon = Icon.starred, background = Light, alt = "Starred" }
|
||||
, { icon = Icon.notStarred, background = Light, alt = "NotStarred" }
|
||||
, { icon = Icon.flag, background = Light, alt = "Flag" }
|
||||
[ deprecatedIcon { icon = Icon.starred, background = Colors.frost, alt = "Starred" }
|
||||
, deprecatedIcon { icon = Icon.notStarred, background = Colors.frost, alt = "NotStarred" }
|
||||
, deprecatedIcon { icon = Icon.flag, background = Colors.frost, alt = "Flag" }
|
||||
]
|
||||
, viewAssignmentIconSection "Nri.Ui.AssignmentIcon.V1."
|
||||
, viewIconSection "Nri.Ui.AssignmentIcon.V1."
|
||||
[ ( "diagnostic", AssignmentIcon.diagnostic )
|
||||
, ( "practice", AssignmentIcon.practice )
|
||||
, ( "quiz", AssignmentIcon.quiz )
|
||||
@ -47,88 +47,112 @@ example =
|
||||
, ( "selfReview", AssignmentIcon.selfReview )
|
||||
]
|
||||
, viewIconSection "Assignment Types"
|
||||
[ { icon = Icon.submitting, background = Light, alt = "Submitting" }
|
||||
, { icon = Icon.rating, background = Light, alt = "Rating" }
|
||||
, { icon = Icon.revising, background = Light, alt = "Revising" }
|
||||
, { icon = Icon.assignmentTypeWritingCycle, background = Light, alt = "WritingCycle" }
|
||||
, { icon = Icon.writingAssignment, background = Light, alt = "WritingAssignment" }
|
||||
[ deprecatedIcon { icon = Icon.submitting, background = Colors.frost, alt = "Submitting" }
|
||||
, deprecatedIcon { icon = Icon.rating, background = Colors.frost, alt = "Rating" }
|
||||
, deprecatedIcon { icon = Icon.revising, background = Colors.frost, alt = "Revising" }
|
||||
, deprecatedIcon { icon = Icon.assignmentTypeWritingCycle, background = Colors.frost, alt = "WritingCycle" }
|
||||
, deprecatedIcon { icon = Icon.writingAssignment, background = Colors.frost, alt = "WritingAssignment" }
|
||||
]
|
||||
, viewIconSection "Student Assignment Actions"
|
||||
[ { icon = Icon.assignmentStartButtonPrimary, background = Light, alt = "Start primary" }
|
||||
, { icon = Icon.assignmentStartButtonSecondary, background = Light, alt = "Start secondary" }
|
||||
[ deprecatedIcon { icon = Icon.assignmentStartButtonPrimary, background = Colors.frost, alt = "Start primary" }
|
||||
, deprecatedIcon { icon = Icon.assignmentStartButtonSecondary, background = Colors.frost, alt = "Start secondary" }
|
||||
]
|
||||
, viewIconSection "Teacher Assignment Actions"
|
||||
[ { icon = Icon.unarchive, background = Light, alt = "Unarchive" }
|
||||
, { icon = Icon.share, background = Light, alt = "Share" }
|
||||
, { icon = Icon.seeMore, background = Light, alt = "See More" }
|
||||
, { icon = Icon.preview, background = Light, alt = "Preview" }
|
||||
, { icon = Icon.performance, background = Light, alt = "Performance" }
|
||||
, { icon = Icon.openClose, background = Light, alt = "OpenClose" }
|
||||
, { icon = Icon.download, background = Light, alt = "Download" }
|
||||
[ deprecatedIcon { icon = Icon.unarchive, background = Colors.frost, alt = "Unarchive" }
|
||||
, deprecatedIcon { icon = Icon.share, background = Colors.frost, alt = "Share" }
|
||||
, deprecatedIcon { icon = Icon.seeMore, background = Colors.frost, alt = "See More" }
|
||||
, deprecatedIcon { icon = Icon.preview, background = Colors.frost, alt = "Preview" }
|
||||
, deprecatedIcon { icon = Icon.performance, background = Colors.frost, alt = "Performance" }
|
||||
, deprecatedIcon { icon = Icon.openClose, background = Colors.frost, alt = "OpenClose" }
|
||||
, deprecatedIcon { icon = Icon.download, background = Colors.frost, alt = "Download" }
|
||||
]
|
||||
, viewIconSection "Edit"
|
||||
[ { icon = Icon.edit, background = Light, alt = "Edit" }
|
||||
, { icon = Icon.editWriting, background = Light, alt = "EditWriting" }
|
||||
[ deprecatedIcon { icon = Icon.edit, background = Colors.frost, alt = "Edit" }
|
||||
, deprecatedIcon { icon = Icon.editWriting, background = Colors.frost, alt = "EditWriting" }
|
||||
]
|
||||
, viewIconSection "Humans"
|
||||
[ { icon = Icon.class, background = Light, alt = "Class" }
|
||||
, { icon = Icon.leaderboard, background = Light, alt = "Leaderboard" }
|
||||
, { icon = Icon.personBlue, background = Light, alt = "PersonBlue" }
|
||||
[ deprecatedIcon { icon = Icon.class, background = Colors.frost, alt = "Class" }
|
||||
, deprecatedIcon { icon = Icon.leaderboard, background = Colors.frost, alt = "Leaderboard" }
|
||||
, deprecatedIcon { icon = Icon.personBlue, background = Colors.frost, alt = "PersonBlue" }
|
||||
]
|
||||
, viewIconSection "Social Media"
|
||||
[ { icon = Icon.facebook, background = Light, alt = "Facebook" }
|
||||
, { icon = Icon.twitter, background = Light, alt = "Twitter" }
|
||||
, { icon = Icon.clever, background = Light, alt = "Clever" }
|
||||
[ deprecatedIcon { icon = Icon.facebook, background = Colors.frost, alt = "Facebook" }
|
||||
, deprecatedIcon { icon = Icon.twitter, background = Colors.frost, alt = "Twitter" }
|
||||
, deprecatedIcon { icon = Icon.clever, background = Colors.frost, alt = "Clever" }
|
||||
]
|
||||
, viewIconSection "Arrows and Carets"
|
||||
[ { icon = Icon.arrowDown, background = Light, alt = "ArrowDown" }
|
||||
, { icon = Icon.sortArrow, background = Light, alt = "SortArrow" }
|
||||
[ deprecatedIcon { icon = Icon.arrowDown, background = Colors.frost, alt = "ArrowDown" }
|
||||
, deprecatedIcon { icon = Icon.sortArrow, background = Colors.frost, alt = "SortArrow" }
|
||||
]
|
||||
, viewIconSection "Checkmarks"
|
||||
[ { icon = Icon.checkMarkSvg, background = Light, alt = "CheckMarkSvg" }
|
||||
[ deprecatedIcon { icon = Icon.checkMarkSvg, background = Colors.frost, alt = "CheckMarkSvg" }
|
||||
]
|
||||
, viewIconSection "Xs"
|
||||
[ { icon = Icon.xSvg, background = Light, alt = "XSvg" }
|
||||
[ deprecatedIcon { icon = Icon.xSvg, background = Colors.frost, alt = "XSvg" }
|
||||
]
|
||||
, viewIconSection "Bangs"
|
||||
[ { icon = Icon.exclamation, background = Light, alt = "Exclamation" }
|
||||
, { icon = Icon.attention, background = Dark, alt = "Attention" }
|
||||
[ deprecatedIcon { icon = Icon.exclamation, background = Colors.frost, alt = "Exclamation" }
|
||||
, deprecatedIcon { icon = Icon.attention, background = Colors.blue, alt = "Attention" }
|
||||
]
|
||||
, viewIconSection "Bulbs and Tips"
|
||||
[ { icon = Icon.bulb, background = Light, alt = "Bulb" }
|
||||
, { icon = Icon.lightBulb, background = Light, alt = "LightBulb" }
|
||||
, { icon = Icon.helpSvg, background = Light, alt = "Help" }
|
||||
[ deprecatedIcon { icon = Icon.bulb, background = Colors.frost, alt = "Bulb" }
|
||||
, deprecatedIcon { icon = Icon.lightBulb, background = Colors.frost, alt = "LightBulb" }
|
||||
, deprecatedIcon { icon = Icon.helpSvg, background = Colors.frost, alt = "Help" }
|
||||
]
|
||||
, viewIconSection "Locks and keys"
|
||||
[ { icon = Icon.key, background = Light, alt = "Key" }
|
||||
, { icon = Icon.lock, background = Light, alt = "Lock" }
|
||||
[ deprecatedIcon { icon = Icon.key, background = Colors.frost, alt = "Key" }
|
||||
, deprecatedIcon { icon = Icon.lock, background = Colors.frost, alt = "Lock" }
|
||||
]
|
||||
, viewIconSection "Time"
|
||||
[ { icon = Icon.calendar, background = Light, alt = "Calendar" }
|
||||
, { icon = Icon.clock, background = Light, alt = "Clock" }
|
||||
[ deprecatedIcon { icon = Icon.calendar, background = Colors.frost, alt = "Calendar" }
|
||||
, deprecatedIcon { icon = Icon.clock, background = Colors.frost, alt = "Clock" }
|
||||
]
|
||||
, viewIconSection "Uncategorized (SVGs)"
|
||||
[ { icon = Icon.activity, background = Light, alt = "Activity" }
|
||||
, { icon = Icon.compassSvg, background = Light, alt = "CompassSvg" }
|
||||
, { icon = Icon.document, background = Light, alt = "Document" }
|
||||
, { icon = Icon.flipper, background = Light, alt = "Flipper" }
|
||||
, { icon = Icon.footsteps, background = Light, alt = "Footsteps" }
|
||||
, { icon = Icon.gear, background = Light, alt = "Gear" }
|
||||
, { icon = Icon.pen, background = Light, alt = "Pen" }
|
||||
, { icon = Icon.newspaper, background = Light, alt = "Newspaper" }
|
||||
, { icon = Icon.sort, background = Light, alt = "Sort" }
|
||||
, { icon = Icon.speedometer, background = Light, alt = "Speedometer" }
|
||||
, { icon = Icon.skip, background = Light, alt = "Skip" }
|
||||
, { icon = Icon.equalitySign, background = Light, alt = "EqualitySign" }
|
||||
, { icon = Icon.logo, background = Light, alt = "Logo" }
|
||||
[ deprecatedIcon { icon = Icon.activity, background = Colors.frost, alt = "Activity" }
|
||||
, deprecatedIcon { icon = Icon.compassSvg, background = Colors.frost, alt = "CompassSvg" }
|
||||
, deprecatedIcon { icon = Icon.document, background = Colors.frost, alt = "Document" }
|
||||
, deprecatedIcon { icon = Icon.flipper, background = Colors.frost, alt = "Flipper" }
|
||||
, deprecatedIcon { icon = Icon.footsteps, background = Colors.frost, alt = "Footsteps" }
|
||||
, deprecatedIcon { icon = Icon.gear, background = Colors.frost, alt = "Gear" }
|
||||
, deprecatedIcon { icon = Icon.pen, background = Colors.frost, alt = "Pen" }
|
||||
, deprecatedIcon { icon = Icon.newspaper, background = Colors.frost, alt = "Newspaper" }
|
||||
, deprecatedIcon { icon = Icon.sort, background = Colors.frost, alt = "Sort" }
|
||||
, deprecatedIcon { icon = Icon.speedometer, background = Colors.frost, alt = "Speedometer" }
|
||||
, deprecatedIcon { icon = Icon.skip, background = Colors.frost, alt = "Skip" }
|
||||
, deprecatedIcon { icon = Icon.equalitySign, background = Colors.frost, alt = "EqualitySign" }
|
||||
, deprecatedIcon { icon = Icon.logo, background = Colors.frost, alt = "Logo" }
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
deprecatedIcon : { alt : String, background : Css.Color, icon : Assets -> Icon.IconType } -> ( String, Html msg )
|
||||
deprecatedIcon { alt, background, icon } =
|
||||
( alt
|
||||
, Html.div
|
||||
[ css
|
||||
[ Css.backgroundColor background
|
||||
, Css.height (Css.px 80)
|
||||
, Css.width (Css.px 80)
|
||||
, Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
, Css.Global.descendants
|
||||
[ Css.Global.img
|
||||
[ Css.maxWidth (Css.pct 100)
|
||||
, Css.maxHeight (Css.pct 100)
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
[ Icon.icon { alt = alt, icon = icon assets }
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
viewIconSection :
|
||||
String
|
||||
-> List { alt : String, background : Background, icon : Assets -> Icon.IconType }
|
||||
-> List ( String, Html msg )
|
||||
-> Html msg
|
||||
viewIconSection headerText icons =
|
||||
Html.section []
|
||||
@ -138,75 +162,13 @@ viewIconSection headerText icons =
|
||||
]
|
||||
|
||||
|
||||
type Background
|
||||
= Light
|
||||
| Dark
|
||||
|
||||
|
||||
toColor : Background -> Css.Color
|
||||
toColor background =
|
||||
case background of
|
||||
Dark ->
|
||||
blue
|
||||
|
||||
Light ->
|
||||
frost
|
||||
|
||||
|
||||
viewIcon : { alt : String, background : Background, icon : Assets -> Icon.IconType } -> Html msg
|
||||
viewIcon { alt, background, icon } =
|
||||
viewIcon : ( String, Html msg ) -> Html msg
|
||||
viewIcon ( name, assignmentIcon ) =
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.margin (Css.px 10)
|
||||
, Css.width (Css.px 160)
|
||||
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
||||
, Css.displayFlex
|
||||
, Css.flexDirection Css.column
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.flexStart
|
||||
]
|
||||
]
|
||||
[ Html.div
|
||||
[ css
|
||||
[ Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
, Css.backgroundColor (toColor background)
|
||||
, Css.height (Css.px 80)
|
||||
, Css.width (Css.px 80)
|
||||
, Css.margin (Css.px 10)
|
||||
, Css.color green
|
||||
, Css.Global.descendants
|
||||
[ Css.Global.img
|
||||
[ Css.maxWidth (Css.pct 100)
|
||||
, Css.maxHeight (Css.pct 100)
|
||||
]
|
||||
]
|
||||
]
|
||||
, title alt
|
||||
]
|
||||
[ Icon.icon { alt = alt, icon = icon assets }
|
||||
]
|
||||
, Text.mediumBody [ Html.text alt ]
|
||||
]
|
||||
|
||||
|
||||
viewAssignmentIconSection : String -> List ( String, Html msg ) -> Html msg
|
||||
viewAssignmentIconSection headerText icons =
|
||||
Html.section []
|
||||
[ Heading.h2 [] [ Html.text headerText ]
|
||||
, Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
|
||||
(List.map viewAssignmentIcon icons)
|
||||
]
|
||||
|
||||
|
||||
viewAssignmentIcon : ( String, Html msg ) -> Html msg
|
||||
viewAssignmentIcon ( name, assignmentIcon ) =
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.margin (Css.px 10)
|
||||
, Css.width (Css.px 160)
|
||||
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
||||
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) Colors.navy
|
||||
, Css.displayFlex
|
||||
, Css.flexDirection Css.column
|
||||
, Css.alignItems Css.center
|
||||
@ -218,7 +180,7 @@ viewAssignmentIcon ( name, assignmentIcon ) =
|
||||
[ Css.height (Css.px 80)
|
||||
, Css.width (Css.px 80)
|
||||
, Css.margin (Css.px 10)
|
||||
, Css.color green
|
||||
, Css.color Colors.green
|
||||
]
|
||||
]
|
||||
[ assignmentIcon
|
||||
|
||||
Loading…
Reference in New Issue
Block a user