Use svgs in internal modeling

src/Nri/Ui/Button/V8.elm

@@ -151,7 +151,7 @@ button :
     ->
         { label : String
         , state : ButtonState
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         }
     -> Html msg
 button config content =
@@ -312,7 +312,7 @@ NOTE: Links do not support two-line labels.
 -}
 link :
     { label : String
-    , icon : Maybe IconType
+    , icon : Maybe Svg
     , url : String
     , size : ButtonSize
     , style : ButtonStyle
@@ -335,7 +335,7 @@ linkSpa :
     -> (route -> msg)
     ->
         { label : String
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         , size : ButtonSize
         , style : ButtonStyle
         , width : ButtonWidth
@@ -361,7 +361,7 @@ some url and have it open to an external site
 -}
 linkExternal :
     { label : String
-    , icon : Maybe IconType
+    , icon : Maybe Svg
     , url : String
     , size : ButtonSize
     , style : ButtonStyle
@@ -379,7 +379,7 @@ linkWithMethod :
     String
     ->
         { label : String
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         , url : String
         , size : ButtonSize
         , style : ButtonStyle
@@ -397,7 +397,7 @@ linkWithTracking :
     msg
     ->
         { label : String
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         , url : String
         , size : ButtonSize
         , style : ButtonStyle
@@ -421,7 +421,7 @@ linkExternalWithTracking :
     msg
     ->
         { label : String
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         , url : String
         , size : ButtonSize
         , style : ButtonStyle
@@ -443,7 +443,7 @@ linkBase :
     -> List (Attribute msg)
     ->
         { label : String
-        , icon : Maybe IconType
+        , icon : Maybe Svg
         , url : String
         , size : ButtonSize
         , style : ButtonStyle
@@ -500,8 +500,8 @@ buttonStyles size width colorPalette =
         ]
 
 
-viewLabel : Maybe IconType -> String -> Html msg
+viewLabel : Maybe Svg -> String -> Html msg
-viewLabel icn label =
+viewLabel maybeSvg label =
     Nri.Ui.styled Html.span
         "button-label-span"
         [ Css.overflow Css.hidden -- Keep scrollbars out of our button
@@ -509,12 +509,12 @@ viewLabel icn label =
         , Css.padding2 (Css.px 2) Css.zero -- Without a bit of bottom padding, text that extends below the baseline, like "g" gets cut off
         ]
         []
-        (case icn of
+        (case maybeSvg of
             Nothing ->
                 renderMarkdown label
 
-            Just iconType ->
+            Just svg ->
-                Icon.decorativeIcon iconType :: renderMarkdown label
+                NriSvg.toHtml svg :: renderMarkdown label
         )
 
 

styleguide-app/Examples/Button.elm

@@ -13,6 +13,7 @@ import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, Mod
 import Nri.Ui.AssetPath exposing (Asset)
 import Nri.Ui.Button.V8 as Button
 import Nri.Ui.Icon.V4 as Icon
+import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
 import Nri.Ui.Text.V2 as Text
 
 
@@ -34,11 +35,10 @@ type ButtonType
 
 {-| -}
 example :
-    { r | teach_assignments_copyWhite_svg : Asset }
+    (String -> ModuleMessages Msg parentMsg)
-    -> (String -> ModuleMessages Msg parentMsg)
     -> State
     -> ModuleExample parentMsg
-example assets unnamedMessages state =
+example unnamedMessages state =
     let
         messages =
             unnamedMessages "ButtonExample"
@@ -46,7 +46,7 @@ example assets unnamedMessages state =
     { filename = "Nri.Ui.Button.V8"
     , category = Buttons
     , content =
-        [ viewButtonExamples assets messages state ]
+        [ viewButtonExamples messages state ]
     }
 
 
@@ -58,8 +58,18 @@ init assets =
         |> Control.field "icon"
             (Control.maybe False <|
                 Control.choice
-                    ( "Performance", Control.value (Icon.performance assets) )
+                    ( "Performance"
-                    [ ( "Lock", Control.value (Icon.lock assets) )
+                    , Icon.performance assets
+                        |> Icon.decorativeIcon
+                        |> NriSvg.fromHtml
+                        |> Control.value
+                    )
+                    [ ( "Lock"
+                      , Icon.lock assets
+                            |> Icon.decorativeIcon
+                            |> NriSvg.fromHtml
+                            |> Control.value
+                      )
                     ]
             )
         |> Control.field "width"
@@ -105,7 +115,7 @@ update msg state =
 
 type alias Model =
     { label : String
-    , icon : Maybe Icon.IconType
+    , icon : Maybe Svg
     , width : Button.ButtonWidth
     , buttonType : ButtonType
     , state : Button.ButtonState
@@ -113,18 +123,17 @@ type alias Model =
 
 
 viewButtonExamples :
-    { r | teach_assignments_copyWhite_svg : Asset }
+    ModuleMessages Msg parentMsg
-    -> ModuleMessages Msg parentMsg
     -> State
     -> Html parentMsg
-viewButtonExamples assets messages (State control) =
+viewButtonExamples messages (State control) =
     let
         model =
             Control.currentValue control
     in
     [ Control.view (State >> SetState >> messages.wrapper) control
         |> fromUnstyled
-    , buttons assets messages model
+    , buttons messages model
     , toggleButtons messages
     , Button.delete
         { label = "Delete Something"
@@ -161,11 +170,10 @@ allStyles =
 
 
 buttons :
-    { r | teach_assignments_copyWhite_svg : Asset }
+    ModuleMessages Msg parentMsg
-    -> ModuleMessages Msg parentMsg
     -> Model
     -> Html parentMsg
-buttons assets messages model =
+buttons messages model =
     let
         exampleRow style =
             List.concat

styleguide-app/NriModules.elm

@@ -215,7 +215,7 @@ nriThemedModules : ModuleStates -> List (ModuleExample Msg)
 nriThemedModules model =
     [ Examples.Alert.example
     , Examples.BannerAlert.example
-    , Examples.Button.example assets (exampleMessages ButtonExampleMsg) model.buttonExampleState
+    , Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState
     , Examples.ClickableText.example assets (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState
     , Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState
     , Examples.Dropdown.example DropdownMsg model.dropdownState