Refactor examples so that the organized list of uiicons is available

styleguide-app/Examples/IconExamples.elm

@@ -1,6 +1,7 @@
 module Examples.IconExamples exposing
     ( preview
     , Settings, init, Msg, update, viewSettings
+    , viewByGroupWithSettings, IconExampleGroup
     , view, viewWithCustomStyles
     )
 
@@ -8,6 +9,7 @@ module Examples.IconExamples exposing
 
 @docs preview
 @docs Settings, init, Msg, update, viewSettings
+@docs viewByGroupWithSettings, IconExampleGroup
 @docs view, viewWithCustomStyles
 
 -}
@@ -80,6 +82,22 @@ viewSettings { showIconName } =
         }
 
 
+type alias IconExampleGroup =
+    ( String
+    , List ( String, Svg.Svg )
+    )
+
+
+{-| -}
+viewByGroupWithSettings : Settings -> List IconExampleGroup -> List (Html Msg)
+viewByGroupWithSettings settings groups =
+    let
+        viewExampleSection ( group, values ) =
+            view settings group values
+    in
+    viewSettings settings :: List.map viewExampleSection groups
+
+
 {-| -}
 view : Settings -> String -> List ( String, Svg.Svg ) -> Html msg
 view settings headerText icons =

styleguide-app/Examples/UiIcon.elm

@@ -1,14 +1,23 @@
-module Examples.UiIcon exposing (example, State, Msg)
+module Examples.UiIcon exposing
+    ( example, State, Msg
+    , all
+    )
 
 {-|
 
 @docs example, State, Msg
+@docs all
 
 -}
 
 import Category exposing (Category(..))
 import Example exposing (Example)
 import Examples.IconExamples as IconExamples
+    exposing
+        ( IconExampleGroup
+        , viewByGroupWithSettings
+        )
+import Nri.Ui.Svg.V1 exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
 
 
@@ -47,171 +56,198 @@ example =
             , UiIcon.checkmark
             , UiIcon.equals
             ]
-    , view =
+    , view = \_ settings -> viewByGroupWithSettings settings all
-        \ellieLinkConfig settings ->
-            let
-                viewExampleSection =
-                    IconExamples.view settings
-            in
-            [ IconExamples.viewSettings settings
-            , viewExampleSection "Interface"
-                [ ( "seeMore", UiIcon.seeMore )
-                , ( "openClose", UiIcon.openClose )
-                , ( "download", UiIcon.download )
-                , ( "sort", UiIcon.sort )
-                , ( "gear", UiIcon.gear )
-                ]
-            , viewExampleSection "Archive & Unarchive"
-                [ ( "archive", UiIcon.archive )
-                , ( "unarchive", UiIcon.unarchive )
-                ]
-            , viewExampleSection "Media in Circles"
-                [ ( "playInCircle", UiIcon.playInCircle )
-                , ( "pauseInCircle", UiIcon.pauseInCircle )
-                , ( "stopInCircle", UiIcon.stopInCircle )
-                ]
-            , viewExampleSection "Media"
-                [ ( "play", UiIcon.play )
-                , ( "skip", UiIcon.skip )
-                ]
-            , viewExampleSection "Actions"
-                [ ( "share", UiIcon.share )
-                , ( "preview", UiIcon.preview )
-                , ( "activity", UiIcon.activity )
-                , ( "copyToClipboard", UiIcon.copyToClipboard )
-                , ( "gift", UiIcon.gift )
-                , ( "openInNewTab", UiIcon.openInNewTab )
-                , ( "sync", UiIcon.sync )
-                ]
-            , viewExampleSection "Guidance"
-                [ ( "footsteps", UiIcon.footsteps )
-                , ( "help", UiIcon.help )
-                , ( "checklist", UiIcon.checklist )
-                , ( "checklistComplete", UiIcon.checklistComplete )
-                ]
-            , viewExampleSection "Bulbs"
-                [ ( "sparkleBulb", UiIcon.sparkleBulb )
-                , ( "baldBulb", UiIcon.baldBulb )
-                ]
-            , viewExampleSection "Science & Measurement"
-                [ ( "compass", UiIcon.compass )
-                , ( "speedometer", UiIcon.speedometer )
-                , ( "performance", UiIcon.performance )
-                , ( "microscope", UiIcon.microscope )
-                , ( "scale", UiIcon.scale )
-                ]
-            , viewExampleSection "Humans & Class"
-                [ ( "person", UiIcon.person )
-                , ( "couple", UiIcon.couple )
-                , ( "class", UiIcon.class )
-                , ( "leaderboard", UiIcon.leaderboard )
-                , ( "graduateCap", UiIcon.graduateCap )
-                ]
-            , viewExampleSection "Time"
-                [ ( "emptyCalendar", UiIcon.emptyCalendar )
-                , ( "calendar", UiIcon.calendar )
-                , ( "clock", UiIcon.clock )
-                ]
-            , viewExampleSection "Texts"
-                [ ( "missingDocument", UiIcon.missingDocument )
-                , ( "document", UiIcon.document )
-                , ( "documents", UiIcon.documents )
-                , ( "newspaper", UiIcon.newspaper )
-                , ( "openBook", UiIcon.openBook )
-                , ( "openBooks", UiIcon.openBooks )
-                ]
-            , viewExampleSection "Communication"
-                [ ( "speechBalloon", UiIcon.speechBalloon )
-                , ( "mail", UiIcon.mail )
-                ]
-            , viewExampleSection "Writing Utensils"
-                [ ( "edit", UiIcon.edit )
-                , ( "pen", UiIcon.pen )
-                , ( "highlighter", UiIcon.highlighter )
-                ]
-            , viewExampleSection "Arrows"
-                [ ( "arrowTop", UiIcon.arrowTop )
-                , ( "arrowRight", UiIcon.arrowRight )
-                , ( "arrowDown", UiIcon.arrowDown )
-                , ( "arrowLeft", UiIcon.arrowLeft )
-                , ( "arrowPointingRight", UiIcon.arrowPointingRight )
-                , ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick )
-                , ( "sortArrow", UiIcon.sortArrow )
-                , ( "sortArrowDown", UiIcon.sortArrowDown )
-                ]
-            , viewExampleSection "Checks"
-                [ ( "checkmark", UiIcon.checkmark )
-                , ( "checkmarkInCircle", UiIcon.checkmarkInCircle )
-                , ( "checkmarkInCircleInverse", UiIcon.checkmarkInCircleInverse )
-                , ( "emptyCircle", UiIcon.emptyCircle )
-                ]
-            , viewExampleSection "Xs"
-                [ ( "x", UiIcon.x )
-                , ( "xInCircle", UiIcon.xInCircle )
-                ]
-            , viewExampleSection "Bangs"
-                [ ( "attention", UiIcon.attention )
-                , ( "exclamation", UiIcon.exclamation )
-                ]
-            , viewExampleSection "Math"
-                [ ( "equals", UiIcon.equals )
-                , ( "plus", UiIcon.plus )
-                , ( "null", UiIcon.null )
-                ]
-            , viewExampleSection "Notifs"
-                [ ( "flag", UiIcon.flag )
-                , ( "star", UiIcon.star )
-                , ( "starFilled", UiIcon.starFilled )
-                , ( "starOutline", UiIcon.starOutline )
-                ]
-            , viewExampleSection "Badges & Celebration"
-                [ ( "badge", UiIcon.badge )
-                , ( "tada", UiIcon.tada )
-                ]
-            , viewExampleSection "Lock & Key"
-                [ ( "key", UiIcon.key )
-                , ( "lock", UiIcon.lock )
-                , ( "premiumLock", UiIcon.premiumLock )
-                ]
-            , viewExampleSection "Tips & Tricks"
-                [ ( "hat", UiIcon.hat )
-                , ( "keychain", UiIcon.keychain )
-                ]
-            , viewExampleSection "Growth"
-                [ ( "sprout", UiIcon.sprout )
-                , ( "sapling", UiIcon.sapling )
-                , ( "tree", UiIcon.tree )
-                ]
-            , viewExampleSection "Rich Text Formatting"
-                [ ( "bold", UiIcon.bold )
-                , ( "italic", UiIcon.italic )
-                , ( "underline", UiIcon.underline )
-                , ( "list", UiIcon.list )
-                , ( "link", UiIcon.link )
-                , ( "undo", UiIcon.undo )
-                , ( "redo", UiIcon.redo )
-                ]
-            , viewExampleSection "Punctuation"
-                [ ( "openQuotationMark", UiIcon.openQuotationMark )
-                , ( "closeQuotationMark", UiIcon.closeQuotationMark )
-                ]
-            , viewExampleSection "Navigation"
-                [ ( "home", UiIcon.home )
-                , ( "library", UiIcon.library )
-                ]
-            , viewExampleSection "Search"
-                [ ( "search", UiIcon.search )
-                , ( "searchInCircle", UiIcon.searchInCicle )
-                ]
-            , viewExampleSection "School Category"
-                [ ( "school", UiIcon.school )
-                , ( "highSchool", UiIcon.highSchool )
-                , ( "company", UiIcon.company )
-                , ( "homeSchool", UiIcon.homeSchool )
-                ]
-            , viewExampleSection "Location"
-                [ ( "flagUs", UiIcon.flagUs )
-                , ( "globe", UiIcon.globe )
-                ]
-            ]
     }
+
+
+all : List IconExampleGroup
+all =
+    [ ( "Interface"
+      , [ ( "seeMore", UiIcon.seeMore )
+        , ( "openClose", UiIcon.openClose )
+        , ( "download", UiIcon.download )
+        , ( "sort", UiIcon.sort )
+        , ( "gear", UiIcon.gear )
+        ]
+      )
+    , ( "Archive & Unarchive"
+      , [ ( "archive", UiIcon.archive )
+        , ( "unarchive", UiIcon.unarchive )
+        ]
+      )
+    , ( "Media in Circles"
+      , [ ( "playInCircle", UiIcon.playInCircle )
+        , ( "pauseInCircle", UiIcon.pauseInCircle )
+        , ( "stopInCircle", UiIcon.stopInCircle )
+        ]
+      )
+    , ( "Media"
+      , [ ( "play", UiIcon.play )
+        , ( "skip", UiIcon.skip )
+        ]
+      )
+    , ( "Actions"
+      , [ ( "share", UiIcon.share )
+        , ( "preview", UiIcon.preview )
+        , ( "activity", UiIcon.activity )
+        , ( "copyToClipboard", UiIcon.copyToClipboard )
+        , ( "gift", UiIcon.gift )
+        , ( "openInNewTab", UiIcon.openInNewTab )
+        , ( "sync", UiIcon.sync )
+        ]
+      )
+    , ( "Guidance"
+      , [ ( "footsteps", UiIcon.footsteps )
+        , ( "help", UiIcon.help )
+        , ( "checklist", UiIcon.checklist )
+        , ( "checklistComplete", UiIcon.checklistComplete )
+        ]
+      )
+    , ( "Bulbs"
+      , [ ( "sparkleBulb", UiIcon.sparkleBulb )
+        , ( "baldBulb", UiIcon.baldBulb )
+        ]
+      )
+    , ( "Science & Measurement"
+      , [ ( "compass", UiIcon.compass )
+        , ( "speedometer", UiIcon.speedometer )
+        , ( "performance", UiIcon.performance )
+        , ( "microscope", UiIcon.microscope )
+        , ( "scale", UiIcon.scale )
+        ]
+      )
+    , ( "Humans & Class"
+      , [ ( "person", UiIcon.person )
+        , ( "couple", UiIcon.couple )
+        , ( "class", UiIcon.class )
+        , ( "leaderboard", UiIcon.leaderboard )
+        , ( "graduateCap", UiIcon.graduateCap )
+        ]
+      )
+    , ( "Time"
+      , [ ( "emptyCalendar", UiIcon.emptyCalendar )
+        , ( "calendar", UiIcon.calendar )
+        , ( "clock", UiIcon.clock )
+        ]
+      )
+    , ( "Texts"
+      , [ ( "missingDocument", UiIcon.missingDocument )
+        , ( "document", UiIcon.document )
+        , ( "documents", UiIcon.documents )
+        , ( "newspaper", UiIcon.newspaper )
+        , ( "openBook", UiIcon.openBook )
+        , ( "openBooks", UiIcon.openBooks )
+        ]
+      )
+    , ( "Communication"
+      , [ ( "speechBalloon", UiIcon.speechBalloon )
+        , ( "mail", UiIcon.mail )
+        ]
+      )
+    , ( "Writing Utensils"
+      , [ ( "edit", UiIcon.edit )
+        , ( "pen", UiIcon.pen )
+        , ( "highlighter", UiIcon.highlighter )
+        ]
+      )
+    , ( "Arrows"
+      , [ ( "arrowTop", UiIcon.arrowTop )
+        , ( "arrowRight", UiIcon.arrowRight )
+        , ( "arrowDown", UiIcon.arrowDown )
+        , ( "arrowLeft", UiIcon.arrowLeft )
+        , ( "arrowPointingRight", UiIcon.arrowPointingRight )
+        , ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick )
+        , ( "sortArrow", UiIcon.sortArrow )
+        , ( "sortArrowDown", UiIcon.sortArrowDown )
+        ]
+      )
+    , ( "Checks"
+      , [ ( "checkmark", UiIcon.checkmark )
+        , ( "checkmarkInCircle", UiIcon.checkmarkInCircle )
+        , ( "checkmarkInCircleInverse", UiIcon.checkmarkInCircleInverse )
+        , ( "emptyCircle", UiIcon.emptyCircle )
+        ]
+      )
+    , ( "Xs"
+      , [ ( "x", UiIcon.x )
+        , ( "xInCircle", UiIcon.xInCircle )
+        ]
+      )
+    , ( "Bangs"
+      , [ ( "attention", UiIcon.attention )
+        , ( "exclamation", UiIcon.exclamation )
+        ]
+      )
+    , ( "Math"
+      , [ ( "equals", UiIcon.equals )
+        , ( "plus", UiIcon.plus )
+        , ( "null", UiIcon.null )
+        ]
+      )
+    , ( "Notifs"
+      , [ ( "flag", UiIcon.flag )
+        , ( "star", UiIcon.star )
+        , ( "starFilled", UiIcon.starFilled )
+        , ( "starOutline", UiIcon.starOutline )
+        ]
+      )
+    , ( "Badges & Celebration"
+      , [ ( "badge", UiIcon.badge )
+        , ( "tada", UiIcon.tada )
+        ]
+      )
+    , ( "Lock & Key"
+      , [ ( "key", UiIcon.key )
+        , ( "lock", UiIcon.lock )
+        , ( "premiumLock", UiIcon.premiumLock )
+        ]
+      )
+    , ( "Tips & Tricks"
+      , [ ( "hat", UiIcon.hat )
+        , ( "keychain", UiIcon.keychain )
+        ]
+      )
+    , ( "Growth"
+      , [ ( "sprout", UiIcon.sprout )
+        , ( "sapling", UiIcon.sapling )
+        , ( "tree", UiIcon.tree )
+        ]
+      )
+    , ( "Rich Text Formatting"
+      , [ ( "bold", UiIcon.bold )
+        , ( "italic", UiIcon.italic )
+        , ( "underline", UiIcon.underline )
+        , ( "list", UiIcon.list )
+        , ( "link", UiIcon.link )
+        , ( "undo", UiIcon.undo )
+        , ( "redo", UiIcon.redo )
+        ]
+      )
+    , ( "Punctuation"
+      , [ ( "openQuotationMark", UiIcon.openQuotationMark )
+        , ( "closeQuotationMark", UiIcon.closeQuotationMark )
+        ]
+      )
+    , ( "Navigation"
+      , [ ( "home", UiIcon.home )
+        , ( "library", UiIcon.library )
+        ]
+      )
+    , ( "Search"
+      , [ ( "search", UiIcon.search )
+        , ( "searchInCircle", UiIcon.searchInCicle )
+        ]
+      )
+    , ( "School Category"
+      , [ ( "school", UiIcon.school )
+        , ( "highSchool", UiIcon.highSchool )
+        , ( "company", UiIcon.company )
+        , ( "homeSchool", UiIcon.homeSchool )
+        ]
+      )
+    , ( "Location"
+      , [ ( "flagUs", UiIcon.flagUs )
+        , ( "globe", UiIcon.globe )
+        ]
+      )
+    ]