Include the uiicon used in the code gen

styleguide-app/CommonControls.elm

@@ -1,10 +1,12 @@
-module CommonControls exposing (exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation)
+module CommonControls exposing (exampleHtml, httpError, premiumLevel, quickBrownFox, romeoAndJulietQuotation, uiIcon)
 
 import Debug.Control as Control exposing (Control)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Http
 import Nri.Ui.Data.PremiumLevel exposing (PremiumLevel(..))
+import Nri.Ui.Svg.V1 exposing (Svg)
+import Nri.Ui.UiIcon.V1 as UiIcon
 
 
 premiumLevel : Control ( String, PremiumLevel )
@@ -88,3 +90,23 @@ exampleHtml =
         [ Html.text quickBrownFox ]
     , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home."
     ]
+
+
+uiIcon : Control ( String, Svg )
+uiIcon =
+    [ ( "arrowLeft", UiIcon.arrowLeft )
+    , ( "unarchive", UiIcon.unarchive )
+    , ( "share", UiIcon.share )
+    , ( "preview", UiIcon.preview )
+    , ( "skip", UiIcon.skip )
+    , ( "copyToClipboard", UiIcon.copyToClipboard )
+    , ( "gift", UiIcon.gift )
+    , ( "home", UiIcon.home )
+    , ( "library", UiIcon.library )
+    , ( "searchInCicle", UiIcon.searchInCicle )
+    ]
+        |> List.map
+            (\( name, value ) ->
+                ( name, Control.value ( "UiIcon." ++ name, value ) )
+            )
+        |> Control.choice

styleguide-app/Debug/Control/View.elm

@@ -32,7 +32,10 @@ viewExampleCode values =
             :: List.concatMap
                 (\{ sectionName, code } ->
                     [ Heading.h4 [] [ text sectionName ]
-                    , Html.Styled.code [] [ text code ]
+                    , Html.Styled.code
+                        [ css [ whiteSpace preWrap ]
+                        ]
+                        [ text code ]
                     ]
                 )
                 values

styleguide-app/Examples/ClickableSvg.elm

@@ -8,6 +8,7 @@ module Examples.ClickableSvg exposing (Msg, State, example)
 
 import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
+import CommonControls
 import Css
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
@@ -68,7 +69,8 @@ example =
                                     ++ fName
                                     ++ " \""
                                     ++ label
-                                    ++ "\""
+                                    ++ "\"\n\t"
+                                    ++ Tuple.first icon
                                     ++ ControlView.codeFromList attributes
                         in
                         [ { sectionName = "Button"
@@ -151,14 +153,14 @@ viewExampleTable { label, icon, attributes } =
 
         buttonExample attributes_ =
             ClickableSvg.button label
-                icon
+                (Tuple.second icon)
                 (ClickableSvg.onClick (ShowItWorked "You clicked the back button!")
                     :: attributes_
                 )
 
         linkExample attributes_ =
             ClickableSvg.link label
-                icon
+                (Tuple.second icon)
                 (ClickableSvg.linkSpa "some_link" :: attributes_)
     in
     Html.table []
@@ -256,7 +258,7 @@ update msg state =
 
 type alias Settings msg =
     { label : String
-    , icon : Svg
+    , icon : ( String, Svg )
     , attributes : List ( String, ClickableSvg.Attribute msg )
     }
 
@@ -265,20 +267,7 @@ initSettings : Control (Settings msg)
 initSettings =
     Control.record Settings
         |> Control.field "label" (Control.string "Back")
-        |> Control.field "icon"
-            (Control.choice
-                [ ( "arrowLeft", Control.value UiIcon.arrowLeft )
-                , ( "unarchive", Control.value UiIcon.unarchive )
-                , ( "share", Control.value UiIcon.share )
-                , ( "preview", Control.value UiIcon.preview )
-                , ( "skip", Control.value UiIcon.skip )
-                , ( "copyToClipboard", Control.value UiIcon.copyToClipboard )
-                , ( "gift", Control.value UiIcon.gift )
-                , ( "home", Control.value UiIcon.home )
-                , ( "library", Control.value UiIcon.library )
-                , ( "searchInCicle", Control.value UiIcon.searchInCicle )
-                ]
-            )
+        |> Control.field "icon" CommonControls.uiIcon
         |> Control.field "attributes"
             (ControlExtra.list
                 |> ControlExtra.listItem "disabled"