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

Make a hole for threading a show-text bool through

Browse Source
This commit is contained in:
Tessa Kelly 2022-03-21 13:23:58 -07:00
parent feb2b540bf
commit 417577cb84
6 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon
{-| -}
type alias State =
()
{ showIconName : Bool }
{-| -}
@ -29,7 +29,7 @@ example =
, version = 2
, categories = [ Icons ]
, keyboardSupport = []
, state = ()
, state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =
@ -48,43 +48,47 @@ example =
, AssignmentIcon.writing
]
, view =
\_ ->
[ IconExamples.view "Diagnostic"
\{ showIconName } ->
let
viewExampleSection =
IconExamples.view showIconName
in
[ viewExampleSection "Diagnostic"
[ ( "diagnostic", AssignmentIcon.diagnostic )
, ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled )
, ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled )
]
, IconExamples.view "Practice"
, viewExampleSection "Practice" <|
[ ( "practice", AssignmentIcon.practice )
, ( "practiceCircled", AssignmentIcon.practiceCircled )
]
, IconExamples.view "Quiz"
, viewExampleSection "Quiz" <|
[ ( "quiz", AssignmentIcon.quiz )
, ( "quizCircled", AssignmentIcon.quizCircled )
, ( "passageQuizCircled", AssignmentIcon.passageQuizCircled )
]
, IconExamples.view "Writing"
, viewExampleSection "Writing" <|
[ ( "quickWrite", AssignmentIcon.quickWrite )
, ( "guidedDraft", AssignmentIcon.guidedDraft )
, ( "peerReview", AssignmentIcon.peerReview )
, ( "selfReview", AssignmentIcon.selfReview )
]
, IconExamples.view "Writing II"
, viewExampleSection "Writing II" <|
[ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled )
, ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled )
, ( "peerReviewCircled", AssignmentIcon.peerReviewCircled )
, ( "selfReviewCircled", AssignmentIcon.selfReviewCircled )
]
, IconExamples.view "Stages"
, viewExampleSection "Stages" <|
[ ( "submitting", AssignmentIcon.submitting )
, ( "rating", AssignmentIcon.rating )
, ( "revising", AssignmentIcon.revising )
]
, IconExamples.view "Start"
, viewExampleSection "Start" <|
[ ( "startPrimary", AssignmentIcon.startPrimary )
, ( "startSecondary", AssignmentIcon.startSecondary )
]
, IconExamples.view "Activities"
, viewExampleSection "Activities" <|
[ ( "assessment", AssignmentIcon.assessment )
, ( "standards", AssignmentIcon.standards )
, ( "writing", AssignmentIcon.writing )

26
styleguide-app/Examples/IconExamples.elm
View File

@ -27,8 +27,9 @@ preview icons =
]
view : String -> List ( String, Svg.Svg ) -> Html msg
view headerText icons =
{-| -}
view : Bool -> String -> List ( String, Svg.Svg ) -> Html msg
view showIconName headerText icons =
let
defaultStyles =
[ Css.height (Css.px 25)
@ -37,12 +38,14 @@ view headerText icons =
, Css.color Colors.gray45
]
in
viewWithCustomStyles headerText
viewWithCustomStyles showIconName
headerText
(List.map (\( name, svg ) -> ( name, svg, defaultStyles )) icons)
viewWithCustomStyles : String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg
viewWithCustomStyles headerText icons =
{-| -}
viewWithCustomStyles : Bool -> String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg
viewWithCustomStyles showIconName headerText icons =
Html.section
[ css
[ Css.displayFlex
@ -67,12 +70,12 @@ viewWithCustomStyles headerText icons =
, Css.property "gap" "10px"
]
]
(List.map viewIcon icons)
(List.map (viewIcon showIconName) icons)
]
viewIcon : ( String, Svg.Svg, List Css.Style ) -> Html msg
viewIcon ( name, icon, style ) =
viewIcon : Bool -> ( String, Svg.Svg, List Css.Style ) -> Html msg
viewIcon showIconName ( name, icon, style ) =
Html.div
[ css
[ Css.displayFlex
@ -96,6 +99,11 @@ viewIcon ( name, icon, style ) =
|> Svg.toHtml
, Text.smallBody
[ Text.plaintext name
, Text.css [ Css.display Css.none ]
, Text.css <|
if showIconName then
[]
else
[ Css.display Css.none ]
]
]

20
styleguide-app/Examples/Logo.elm
View File

@ -19,7 +19,7 @@ import Nri.Ui.Svg.V1 as Svg
{-| -}
type alias State =
()
{ showIconName : Bool }
{-| -}
@ -34,7 +34,7 @@ example =
, version = 1
, categories = [ Icons ]
, keyboardSupport = []
, state = ()
, state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =
@ -46,8 +46,12 @@ example =
, Logo.googleG
]
, view =
\_ ->
[ IconExamples.viewWithCustomStyles "NRI"
\{ showIconName } ->
let
viewExampleSection =
IconExamples.viewWithCustomStyles showIconName
in
[ viewExampleSection "NRI"
[ ( "noredink"
, Logo.noredink
, [ Css.height (Css.px 25)
@ -56,11 +60,11 @@ example =
]
)
]
, IconExamples.viewWithCustomStyles "Social Media"
, viewExampleSection "Social Media"
[ ( "facebook", Logo.facebook, defaults )
, ( "twitter", Logo.twitter, defaults )
]
, IconExamples.viewWithCustomStyles "Clever"
, viewExampleSection "Clever"
[ ( "clever"
, Logo.clever
, [ Css.height (Css.px 25)
@ -78,14 +82,14 @@ example =
]
)
]
, IconExamples.viewWithCustomStyles "Google"
, viewExampleSection "Google"
[ ( "googleClassroom"
, Logo.googleClassroom
, defaults
)
, ( "googleG", Logo.googleG, defaults )
]
, IconExamples.viewWithCustomStyles "LMS"
, viewExampleSection "LMS"
[ ( "canvas"
, Logo.canvas
, [ Css.height (Css.px 25)

9
styleguide-app/Examples/Pennant.elm
View File

@ -15,7 +15,7 @@ import Nri.Ui.Pennant.V2 as Pennant
{-| -}
type alias State =
()
{ showIconName : Bool }
{-| -}
@ -30,7 +30,7 @@ example =
, version = 2
, categories = [ Icons ]
, keyboardSupport = []
, state = ()
, state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =
@ -40,8 +40,9 @@ example =
, Pennant.disabledPremiumFlag
]
, view =
\_ ->
[ IconExamples.viewWithCustomStyles "Premium Pennants"
\{ showIconName } ->
[ IconExamples.viewWithCustomStyles showIconName
"Premium Pennants"
[ ( "premiumFlag"
, Pennant.premiumFlag
, [ Css.width (Css.px 80) ]

2
styleguide-app/Examples/Sprite.elm
View File

@ -36,7 +36,7 @@ example =
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview = IconExamples.preview (List.map Tuple.second sprites)
, view = \_ -> [ IconExamples.view "Rich Text Formatting" sprites ]
, view = \_ -> [ IconExamples.view False "Rich Text Formatting" sprites ]
}

56
styleguide-app/Examples/UiIcon.elm
View File

@ -14,7 +14,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon
{-| -}
type alias State =
()
{ showIconName : Bool }
{-| -}
@ -29,7 +29,7 @@ example =
, version = 1
, categories = List.singleton Icons
, keyboardSupport = []
, state = ()
, state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview =
@ -48,8 +48,12 @@ example =
, UiIcon.equals
]
, view =
\_ ->
[ IconExamples.view "Interface"
\{ showIconName } ->
let
viewExampleSection =
IconExamples.view showIconName
in
[ viewExampleSection "Interface"
[ ( "seeMore", UiIcon.seeMore )
, ( "openClose", UiIcon.openClose )
, ( "download", UiIcon.download )
@ -57,47 +61,47 @@ example =
, ( "gear", UiIcon.gear )
, ( "sortArrow", UiIcon.sortArrow )
]
, IconExamples.view "Archive & Unarchive"
, viewExampleSection "Archive & Unarchive"
[ ( "archive", UiIcon.archive )
, ( "unarchive", UiIcon.unarchive )
]
, IconExamples.view "Media"
, viewExampleSection "Media"
[ ( "playInCircle", UiIcon.playInCircle )
, ( "pauseInCircle", UiIcon.pauseInCircle )
, ( "stopInCircle", UiIcon.stopInCircle )
, ( "skip", UiIcon.skip )
]
, IconExamples.view "Actions"
, viewExampleSection "Actions"
[ ( "share", UiIcon.share )
, ( "preview", UiIcon.preview )
, ( "activity", UiIcon.activity )
, ( "copyToClipboard", UiIcon.copyToClipboard )
, ( "gift", UiIcon.gift )
]
, IconExamples.view "Guidance"
, viewExampleSection "Guidance"
[ ( "footsteps", UiIcon.footsteps )
, ( "bulb", UiIcon.bulb )
, ( "help", UiIcon.help )
, ( "checklist", UiIcon.checklist )
]
, IconExamples.view "Science & Measurement"
, viewExampleSection "Science & Measurement"
[ ( "compass", UiIcon.compass )
, ( "speedometer", UiIcon.speedometer )
, ( "performance", UiIcon.performance )
, ( "microscope", UiIcon.microscope )
, ( "scale", UiIcon.scale )
]
, IconExamples.view "Humans & Class"
, viewExampleSection "Humans & Class"
[ ( "person", UiIcon.person )
, ( "couple", UiIcon.couple )
, ( "class", UiIcon.class )
, ( "leaderboard", UiIcon.leaderboard )
]
, IconExamples.view "Time"
, viewExampleSection "Time"
[ ( "calendar", UiIcon.calendar )
, ( "clock", UiIcon.clock )
]
, IconExamples.view "Texts"
, viewExampleSection "Texts"
[ ( "missingDocument", UiIcon.missingDocument )
, ( "document", UiIcon.document )
, ( "documents", UiIcon.documents )
@ -105,16 +109,16 @@ example =
, ( "openBook", UiIcon.openBook )
, ( "openBooks", UiIcon.openBooks )
]
, IconExamples.view "Communication"
, viewExampleSection "Communication"
[ ( "speechBalloon", UiIcon.speechBalloon )
, ( "mail", UiIcon.mail )
]
, IconExamples.view "Writing Utensils"
, viewExampleSection "Writing Utensils"
[ ( "edit", UiIcon.edit )
, ( "pen", UiIcon.pen )
, ( "highlighter", UiIcon.highlighter )
]
, IconExamples.view "Arrows"
, viewExampleSection "Arrows"
[ ( "arrowTop", UiIcon.arrowTop )
, ( "arrowRight", UiIcon.arrowRight )
, ( "arrowDown", UiIcon.arrowDown )
@ -122,43 +126,43 @@ example =
, ( "arrowPointingRight", UiIcon.arrowPointingRight )
, ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick )
]
, IconExamples.view "Sticky things"
, viewExampleSection "Sticky things"
[ ( "checkmark", UiIcon.checkmark )
, ( "checkmarkInCircle", UiIcon.checkmarkInCircle )
, ( "x", UiIcon.x )
, ( "attention", UiIcon.attention )
, ( "exclamation", UiIcon.exclamation )
]
, IconExamples.view "Math"
, viewExampleSection "Math"
[ ( "equals", UiIcon.equals )
, ( "plus", UiIcon.plus )
, ( "null", UiIcon.null )
]
, IconExamples.view "Notifs"
, viewExampleSection "Notifs"
[ ( "flag", UiIcon.flag )
, ( "star", UiIcon.star )
, ( "starFilled", UiIcon.starFilled )
, ( "starOutline", UiIcon.starOutline )
]
, IconExamples.view "Badges & Celebration"
, viewExampleSection "Badges & Celebration"
[ ( "badge", UiIcon.badge )
, ( "tada", UiIcon.tada )
]
, IconExamples.view "Lock & Key"
, viewExampleSection "Lock & Key"
[ ( "key", UiIcon.key )
, ( "lock", UiIcon.lock )
, ( "premiumLock", UiIcon.premiumLock )
]
, IconExamples.view "Tips & Tricks"
, viewExampleSection "Tips & Tricks"
[ ( "hat", UiIcon.hat )
, ( "keychain", UiIcon.keychain )
]
, IconExamples.view "Growth"
, viewExampleSection "Growth"
[ ( "sprout", UiIcon.sprout )
, ( "sapling", UiIcon.sapling )
, ( "tree", UiIcon.tree )
]
, IconExamples.view "Rich Text Formatting"
, viewExampleSection "Rich Text Formatting"
[ ( "bold", UiIcon.bold )
, ( "italic", UiIcon.italic )
, ( "underline", UiIcon.underline )
@ -167,15 +171,15 @@ example =
, ( "undo", UiIcon.undo )
, ( "redo", UiIcon.redo )
]
, IconExamples.view "Punctuation"
, viewExampleSection "Punctuation"
[ ( "openQuotationMark", UiIcon.openQuotationMark )
, ( "closeQuotationMark", UiIcon.closeQuotationMark )
]
, IconExamples.view "Navigation"
, viewExampleSection "Navigation"
[ ( "home", UiIcon.home )
, ( "library", UiIcon.library )
]
, IconExamples.view "Search"
, viewExampleSection "Search"
[ ( "search", UiIcon.search )
, ( "searchInCircle", UiIcon.searchInCicle )
]