NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-15 08:52:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

IconHelpers -> IconExamples

Browse Source
This commit is contained in:
Tessa Kelly 2019-10-01 09:04:33 -07:00
parent a514f3e132
commit 25e9c42cde
3 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styleguide-app/Examples/AssignmentIcon.elm
View File

@ -6,7 +6,7 @@ module Examples.AssignmentIcon exposing (example)
-}
import Examples.IconHelpers exposing (viewIconSection)
import Examples.IconExamples as IconExamples
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon
import Nri.Ui.Colors.V1 as Colors
@ -20,7 +20,7 @@ example =
{ name = "Nri.Ui.AssignmentIcon.V1"
, category = Icons
, content =
[ (viewIconSection "Assignment Icons" << List.map (Tuple.mapSecond Svg.toHtml))
[ (IconExamples.view "Assignment Icons" << List.map (Tuple.mapSecond Svg.toHtml))
[ ( "diagnostic", AssignmentIcon.diagnostic )
, ( "practice", AssignmentIcon.practice )
, ( "quiz", AssignmentIcon.quiz )

34
styleguide-app/Examples/Icon.elm
View File

@ -9,7 +9,7 @@ module Examples.Icon exposing (example)
import Assets exposing (Assets, assets)
import Css
import Css.Global
import Examples.IconHelpers exposing (viewIconSection)
import Examples.IconExamples as IconExamples
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes exposing (css)
import ModuleExample exposing (Category(..), ModuleExample)
@ -23,30 +23,30 @@ example =
{ name = "Nri.Ui.Icon.V5"
, category = Icons
, content =
[ viewIconSection "Mastery Icons"
[ IconExamples.view "Mastery Icons"
[ 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"
, IconExamples.view "Stars and Flags"
[ 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" }
]
, viewIconSection "Assignment Types"
, IconExamples.view "Assignment Types"
[ 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"
, IconExamples.view "Student Assignment Actions"
[ deprecatedIcon { icon = Icon.assignmentStartButtonPrimary, background = Colors.frost, alt = "Start primary" }
, deprecatedIcon { icon = Icon.assignmentStartButtonSecondary, background = Colors.frost, alt = "Start secondary" }
]
, viewIconSection "Teacher Assignment Actions"
, IconExamples.view "Teacher Assignment Actions"
[ 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" }
@ -55,48 +55,48 @@ example =
, deprecatedIcon { icon = Icon.openClose, background = Colors.frost, alt = "OpenClose" }
, deprecatedIcon { icon = Icon.download, background = Colors.frost, alt = "Download" }
]
, viewIconSection "Edit"
, IconExamples.view "Edit"
[ deprecatedIcon { icon = Icon.edit, background = Colors.frost, alt = "Edit" }
, deprecatedIcon { icon = Icon.editWriting, background = Colors.frost, alt = "EditWriting" }
]
, viewIconSection "Humans"
, IconExamples.view "Humans"
[ 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"
, IconExamples.view "Social Media"
[ 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"
, IconExamples.view "Arrows and Carets"
[ deprecatedIcon { icon = Icon.arrowDown, background = Colors.frost, alt = "ArrowDown" }
, deprecatedIcon { icon = Icon.sortArrow, background = Colors.frost, alt = "SortArrow" }
]
, viewIconSection "Checkmarks"
, IconExamples.view "Checkmarks"
[ deprecatedIcon { icon = Icon.checkMarkSvg, background = Colors.frost, alt = "CheckMarkSvg" }
]
, viewIconSection "Xs"
, IconExamples.view "Xs"
[ deprecatedIcon { icon = Icon.xSvg, background = Colors.frost, alt = "XSvg" }
]
, viewIconSection "Bangs"
, IconExamples.view "Bangs"
[ deprecatedIcon { icon = Icon.exclamation, background = Colors.frost, alt = "Exclamation" }
, deprecatedIcon { icon = Icon.attention, background = Colors.blue, alt = "Attention" }
]
, viewIconSection "Bulbs and Tips"
, IconExamples.view "Bulbs and Tips"
[ 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"
, IconExamples.view "Locks and keys"
[ deprecatedIcon { icon = Icon.key, background = Colors.frost, alt = "Key" }
, deprecatedIcon { icon = Icon.lock, background = Colors.frost, alt = "Lock" }
]
, viewIconSection "Time"
, IconExamples.view "Time"
[ deprecatedIcon { icon = Icon.calendar, background = Colors.frost, alt = "Calendar" }
, deprecatedIcon { icon = Icon.clock, background = Colors.frost, alt = "Clock" }
]
, viewIconSection "Uncategorized (SVGs)"
, IconExamples.view "Uncategorized (SVGs)"
[ 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" }

6
styleguide-app/Examples/IconHelpers.elm → styleguide-app/Examples/IconExamples.elm
View File

@ -1,4 +1,4 @@
module Examples.IconHelpers exposing (viewIconSection)
module Examples.IconExamples exposing (view)
import Css
import Html.Styled as Html exposing (Html)
@ -8,11 +8,11 @@ import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Text.V4 as Text
viewIconSection :
view :
String
-> List ( String, Html msg )
-> Html msg
viewIconSection headerText icons =
view headerText icons =
Html.section [ css [ Css.marginTop (Css.px 16) ] ]
[ Heading.h2 [] [ Html.text headerText ]
, Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]