Drop Icon support from the icon examples helpers

styleguide-app/Examples/AssignmentIcon.elm

@@ -9,9 +9,7 @@ module Examples.AssignmentIcon exposing (example)
 import Examples.IconExamples as IconExamples
 import ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon
-import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Icon.V5 as Icon
-import Nri.Ui.Svg.V1 as Svg
 
 
 {-| -}
@@ -20,18 +18,18 @@ example =
     { name = "Nri.Ui.AssignmentIcon.V1"
     , category = Icons
     , content =
-        [ (IconExamples.view "Quiz engine icons" << List.map (Tuple.mapSecond Svg.toHtml))
+        [ IconExamples.view "Quiz engine icons"
             [ ( "diagnostic", AssignmentIcon.diagnostic )
             , ( "practice", AssignmentIcon.practice )
             , ( "quiz", AssignmentIcon.quiz )
             ]
-        , (IconExamples.view "Writing assignment icons" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Writing assignment icons"
             [ ( "quickWrite", AssignmentIcon.quickWrite )
             , ( "guidedDraft", AssignmentIcon.guidedDraft )
             , ( "peerReview", AssignmentIcon.peerReview )
             , ( "selfReview", AssignmentIcon.selfReview )
             ]
-        , (IconExamples.view "Peer Review sub-assignment icons" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Peer Review sub-assignment icons"
             [ ( "submitting", AssignmentIcon.submitting )
             , ( "rating", AssignmentIcon.rating )
             , ( "revising", AssignmentIcon.revising )

styleguide-app/Examples/Icon.elm

@@ -8,13 +8,14 @@ module Examples.Icon exposing (example)
 
 import Css
 import Css.Global
-import Examples.IconExamples as IconExamples
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.AssetPath as AssetPath exposing (Asset(..))
 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
 
 
 {-| -}
@@ -23,32 +24,32 @@ example =
     { name = "Nri.Ui.Icon.V5"
     , category = Icons
     , content =
-        [ IconExamples.view "Mastery Icons"
+        [ viewLarge "Mastery Icons"
             [ deprecatedIcon { icon = Icon.gardening { startingOffBadge_png = Asset "assets/images/starting-off-badge.png" }, background = Colors.blue, alt = "Gardening" }
             , deprecatedIcon { icon = Icon.highFive { level3Badge_png = Asset "assets/images/level-3-badge.png" }, background = Colors.blue, alt = "HighFive" }
             , deprecatedIcon { icon = Icon.okay { level2Badge_png = Asset "assets/images/level-2-badge.png" }, background = Colors.blue, alt = "Okay" }
             , deprecatedIcon { icon = Icon.thumbsUp { level1Badge_png = Asset "assets/images/level-1-badge.png" }, background = Colors.blue, alt = "ThumbsUp" }
             , deprecatedIcon { icon = Icon.masteryBadge { masteryBadge = "icon-mastery-badge" }, background = Colors.frost, alt = "Badge " }
             ]
-        , IconExamples.view "Student Assignment Actions"
+        , viewLarge "Student Assignment Actions"
             [ deprecatedIcon { icon = Icon.assignmentStartButtonPrimary { assignmentStartButtonPrimary_svg = Asset "assets/images/assignment-start-button-primary.svg" }, background = Colors.frost, alt = "Start primary" }
             , deprecatedIcon { icon = Icon.assignmentStartButtonSecondary { assignmentStartButtonSecondary_svg = Asset "assets/images/assignment-start-button-secondary.svg" }, background = Colors.frost, alt = "Start secondary" }
             ]
-        , IconExamples.view "Social Media"
+        , viewLarge "Social Media"
             [ deprecatedIcon { icon = Icon.facebook { facebookBlue_svg = Asset "assets/images/facebook-blue.svg" }, background = Colors.frost, alt = "Facebook" }
             , deprecatedIcon { icon = Icon.twitter { twitterBlue_svg = Asset "assets/images/twitter-blue.svg" }, background = Colors.frost, alt = "Twitter" }
             , deprecatedIcon { icon = Icon.clever { clever = "icon-clever" }, background = Colors.frost, alt = "Clever" }
             ]
-        , IconExamples.view "Bulbs and Tips"
+        , viewLarge "Bulbs and Tips"
             [ deprecatedIcon { icon = Icon.bulb { bulb = "icon-bulb" }, background = Colors.frost, alt = "Bulb" }
             , deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" }
             , deprecatedIcon { icon = Icon.helpSvg { help = "icon-help" }, background = Colors.frost, alt = "Help" }
             ]
-        , IconExamples.view "Locks and keys"
+        , viewLarge "Locks and keys"
             [ deprecatedIcon { icon = Icon.key { key = "icon-key" }, background = Colors.frost, alt = "Key" }
             , deprecatedIcon { icon = Icon.lock { lock = "icon-lock" }, background = Colors.frost, alt = "Lock" }
             ]
-        , IconExamples.view "Uncategorized (SVGs)"
+        , viewLarge "Uncategorized (SVGs)"
             [ deprecatedIcon { icon = Icon.activity { activity = "icon-activity" }, background = Colors.frost, alt = "Activity" }
             , deprecatedIcon { icon = Icon.compassSvg { compass = "icon-compass" }, background = Colors.frost, alt = "CompassSvg" }
             , deprecatedIcon { icon = Icon.footsteps { footsteps = "icon-footsteps" }, background = Colors.frost, alt = "Footsteps" }
@@ -61,6 +62,45 @@ example =
     }
 
 
+viewLarge :
+    String
+    -> List ( String, Html msg )
+    -> Html msg
+viewLarge headerText icons =
+    Html.section [ css [ Css.marginTop (Css.px 16) ] ]
+        [ Heading.h2 [] [ Html.text headerText ]
+        , Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
+            (List.map viewIcon icons)
+        ]
+
+
+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) Colors.navy
+            , Css.displayFlex
+            , Css.flexDirection Css.column
+            , Css.alignItems Css.center
+            , Css.justifyContent Css.flexStart
+            ]
+        ]
+        [ Html.div
+            [ css
+                [ Css.height (Css.px 80)
+                , Css.width (Css.px 80)
+                , Css.margin (Css.px 10)
+                , Css.color Colors.green
+                ]
+            ]
+            [ assignmentIcon
+            ]
+        , Text.mediumBody [ Html.text name ]
+        ]
+
+
 deprecatedIcon : { alt : String, background : Css.Color, icon : Icon.IconType } -> ( String, Html msg )
 deprecatedIcon { alt, background, icon } =
     ( alt

styleguide-app/Examples/IconExamples.elm

@@ -5,13 +5,11 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css, style, title)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V4 as Text
 
 
-view :
-    String
-    -> List ( String, Html msg )
-    -> Html msg
+view : String -> List ( String, Svg.Svg ) -> Html msg
 view headerText icons =
     Html.section [ css [ Css.marginTop (Css.px 16) ] ]
         [ Heading.h2 [] [ Html.text headerText ]
@@ -20,8 +18,8 @@ view headerText icons =
         ]
 
 
-viewIcon : ( String, Html msg ) -> Html msg
-viewIcon ( name, assignmentIcon ) =
+viewIcon : ( String, Svg.Svg ) -> Html msg
+viewIcon ( name, icon ) =
     Html.div
         [ css
             [ Css.margin (Css.px 10)
@@ -41,7 +39,7 @@ viewIcon ( name, assignmentIcon ) =
                 , Css.color Colors.green
                 ]
             ]
-            [ assignmentIcon
+            [ Svg.toHtml icon
             ]
-        , Text.mediumBody [ Html.text name ]
+        , Text.smallBody [ Html.text name ]
         ]

styleguide-app/Examples/UiIcon.elm

@@ -10,7 +10,6 @@ import Examples.IconExamples as IconExamples
 import ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Icon.V5 as Icon
-import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
@@ -20,7 +19,7 @@ example =
     { name = "Nri.Ui.UiIcon.V1"
     , category = Icons
     , content =
-        [ (IconExamples.view "Interface" << List.map (Tuple.mapSecond Svg.toHtml))
+        [ IconExamples.view "Interface"
             [ ( "seeMore", UiIcon.seeMore )
             , ( "openClose", UiIcon.openClose )
             , ( "download", UiIcon.download )
@@ -28,37 +27,37 @@ example =
             , ( "gear", UiIcon.gear )
             , ( "sortArrow", UiIcon.sortArrow )
             ]
-        , (IconExamples.view "Actions" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Actions"
             [ ( "unarchive", UiIcon.unarchive )
             , ( "share", UiIcon.share )
             , ( "preview", UiIcon.preview )
             ]
-        , (IconExamples.view "Humans & Class" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Humans & Class"
             [ ( "person", UiIcon.person )
             , ( "class", UiIcon.class )
             , ( "leaderboard", UiIcon.leaderboard )
             , ( "performance", UiIcon.performance )
             ]
-        , (IconExamples.view "Time" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Time"
             [ ( "calendar", UiIcon.calendar )
             , ( "clock", UiIcon.clock )
             ]
-        , (IconExamples.view "Writing Utensils" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Writing Utensils"
             [ ( "edit", UiIcon.edit )
             , ( "pen", UiIcon.pen )
             ]
-        , (IconExamples.view "Writing" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Writing"
             [ ( "document", UiIcon.document )
             , ( "newspaper", UiIcon.newspaper )
             ]
-        , (IconExamples.view "Sticky things" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Sticky things"
             [ ( "arrowDown", UiIcon.arrowDown )
             , ( "checkmark", UiIcon.checkmark )
             , ( "x", UiIcon.x )
             , ( "attention", UiIcon.attention )
             , ( "exclamation", UiIcon.exclamation )
             ]
-        , (IconExamples.view "Notifs" << List.map (Tuple.mapSecond Svg.toHtml))
+        , IconExamples.view "Notifs"
             [ ( "flag", UiIcon.flag )
             , ( "star", UiIcon.star )
             , ( "starOutline", UiIcon.starOutline )