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 = type alias State =
() { showIconName : Bool }
{-| -} {-| -}
@ -29,7 +29,7 @@ example =
, version = 2 , version = 2
, categories = [ Icons ] , categories = [ Icons ]
, keyboardSupport = [] , keyboardSupport = []
, state = () , state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none ) , update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none , subscriptions = \_ -> Sub.none
, preview = , preview =
@ -48,43 +48,47 @@ example =
, AssignmentIcon.writing , AssignmentIcon.writing
] ]
, view = , view =
\_ -> \{ showIconName } ->
[ IconExamples.view "Diagnostic" let
viewExampleSection =
IconExamples.view showIconName
in
[ viewExampleSection "Diagnostic"
[ ( "diagnostic", AssignmentIcon.diagnostic ) [ ( "diagnostic", AssignmentIcon.diagnostic )
, ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled ) , ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled )
, ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled ) , ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled )
] ]
, IconExamples.view "Practice" , viewExampleSection "Practice" <|
[ ( "practice", AssignmentIcon.practice ) [ ( "practice", AssignmentIcon.practice )
, ( "practiceCircled", AssignmentIcon.practiceCircled ) , ( "practiceCircled", AssignmentIcon.practiceCircled )
] ]
, IconExamples.view "Quiz" , viewExampleSection "Quiz" <|
[ ( "quiz", AssignmentIcon.quiz ) [ ( "quiz", AssignmentIcon.quiz )
, ( "quizCircled", AssignmentIcon.quizCircled ) , ( "quizCircled", AssignmentIcon.quizCircled )
, ( "passageQuizCircled", AssignmentIcon.passageQuizCircled ) , ( "passageQuizCircled", AssignmentIcon.passageQuizCircled )
] ]
, IconExamples.view "Writing" , viewExampleSection "Writing" <|
[ ( "quickWrite", AssignmentIcon.quickWrite ) [ ( "quickWrite", AssignmentIcon.quickWrite )
, ( "guidedDraft", AssignmentIcon.guidedDraft ) , ( "guidedDraft", AssignmentIcon.guidedDraft )
, ( "peerReview", AssignmentIcon.peerReview ) , ( "peerReview", AssignmentIcon.peerReview )
, ( "selfReview", AssignmentIcon.selfReview ) , ( "selfReview", AssignmentIcon.selfReview )
] ]
, IconExamples.view "Writing II" , viewExampleSection "Writing II" <|
[ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled ) [ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled )
, ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled ) , ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled )
, ( "peerReviewCircled", AssignmentIcon.peerReviewCircled ) , ( "peerReviewCircled", AssignmentIcon.peerReviewCircled )
, ( "selfReviewCircled", AssignmentIcon.selfReviewCircled ) , ( "selfReviewCircled", AssignmentIcon.selfReviewCircled )
] ]
, IconExamples.view "Stages" , viewExampleSection "Stages" <|
[ ( "submitting", AssignmentIcon.submitting ) [ ( "submitting", AssignmentIcon.submitting )
, ( "rating", AssignmentIcon.rating ) , ( "rating", AssignmentIcon.rating )
, ( "revising", AssignmentIcon.revising ) , ( "revising", AssignmentIcon.revising )
] ]
, IconExamples.view "Start" , viewExampleSection "Start" <|
[ ( "startPrimary", AssignmentIcon.startPrimary ) [ ( "startPrimary", AssignmentIcon.startPrimary )
, ( "startSecondary", AssignmentIcon.startSecondary ) , ( "startSecondary", AssignmentIcon.startSecondary )
] ]
, IconExamples.view "Activities" , viewExampleSection "Activities" <|
[ ( "assessment", AssignmentIcon.assessment ) [ ( "assessment", AssignmentIcon.assessment )
, ( "standards", AssignmentIcon.standards ) , ( "standards", AssignmentIcon.standards )
, ( "writing", AssignmentIcon.writing ) , ( "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 let
defaultStyles = defaultStyles =
[ Css.height (Css.px 25) [ Css.height (Css.px 25)
@ -37,12 +38,14 @@ view headerText icons =
, Css.color Colors.gray45 , Css.color Colors.gray45
] ]
in in
viewWithCustomStyles headerText viewWithCustomStyles showIconName
headerText
(List.map (\( name, svg ) -> ( name, svg, defaultStyles )) icons) (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 Html.section
[ css [ css
[ Css.displayFlex [ Css.displayFlex
@ -67,12 +70,12 @@ viewWithCustomStyles headerText icons =
, Css.property "gap" "10px" , Css.property "gap" "10px"
] ]
] ]
(List.map viewIcon icons) (List.map (viewIcon showIconName) icons)
] ]
viewIcon : ( String, Svg.Svg, List Css.Style ) -> Html msg viewIcon : Bool -> ( String, Svg.Svg, List Css.Style ) -> Html msg
viewIcon ( name, icon, style ) = viewIcon showIconName ( name, icon, style ) =
Html.div Html.div
[ css [ css
[ Css.displayFlex [ Css.displayFlex
@ -96,6 +99,11 @@ viewIcon ( name, icon, style ) =
|> Svg.toHtml |> Svg.toHtml
, Text.smallBody , Text.smallBody
[ Text.plaintext name [ 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 = type alias State =
() { showIconName : Bool }
{-| -} {-| -}
@ -34,7 +34,7 @@ example =
, version = 1 , version = 1
, categories = [ Icons ] , categories = [ Icons ]
, keyboardSupport = [] , keyboardSupport = []
, state = () , state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none ) , update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none , subscriptions = \_ -> Sub.none
, preview = , preview =
@ -46,8 +46,12 @@ example =
, Logo.googleG , Logo.googleG
] ]
, view = , view =
\_ -> \{ showIconName } ->
[ IconExamples.viewWithCustomStyles "NRI" let
viewExampleSection =
IconExamples.viewWithCustomStyles showIconName
in
[ viewExampleSection "NRI"
[ ( "noredink" [ ( "noredink"
, Logo.noredink , Logo.noredink
, [ Css.height (Css.px 25) , [ Css.height (Css.px 25)
@ -56,11 +60,11 @@ example =
] ]
) )
] ]
, IconExamples.viewWithCustomStyles "Social Media" , viewExampleSection "Social Media"
[ ( "facebook", Logo.facebook, defaults ) [ ( "facebook", Logo.facebook, defaults )
, ( "twitter", Logo.twitter, defaults ) , ( "twitter", Logo.twitter, defaults )
] ]
, IconExamples.viewWithCustomStyles "Clever" , viewExampleSection "Clever"
[ ( "clever" [ ( "clever"
, Logo.clever , Logo.clever
, [ Css.height (Css.px 25) , [ Css.height (Css.px 25)
@ -78,14 +82,14 @@ example =
] ]
) )
] ]
, IconExamples.viewWithCustomStyles "Google" , viewExampleSection "Google"
[ ( "googleClassroom" [ ( "googleClassroom"
, Logo.googleClassroom , Logo.googleClassroom
, defaults , defaults
) )
, ( "googleG", Logo.googleG, defaults ) , ( "googleG", Logo.googleG, defaults )
] ]
, IconExamples.viewWithCustomStyles "LMS" , viewExampleSection "LMS"
[ ( "canvas" [ ( "canvas"
, Logo.canvas , Logo.canvas
, [ Css.height (Css.px 25) , [ 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 = type alias State =
() { showIconName : Bool }
{-| -} {-| -}
@ -30,7 +30,7 @@ example =
, version = 2 , version = 2
, categories = [ Icons ] , categories = [ Icons ]
, keyboardSupport = [] , keyboardSupport = []
, state = () , state = { showIconName = False }
, update = \_ state -> ( state, Cmd.none ) , update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none , subscriptions = \_ -> Sub.none
, preview = , preview =
@ -40,8 +40,9 @@ example =
, Pennant.disabledPremiumFlag , Pennant.disabledPremiumFlag
] ]
, view = , view =
\_ -> \{ showIconName } ->
[ IconExamples.viewWithCustomStyles "Premium Pennants" [ IconExamples.viewWithCustomStyles showIconName
"Premium Pennants"
[ ( "premiumFlag" [ ( "premiumFlag"
, Pennant.premiumFlag , Pennant.premiumFlag
, [ Css.width (Css.px 80) ] , [ Css.width (Css.px 80) ]

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

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