Make a color mistake in SVG apparent

styleguide-app/Examples/Svg.elm

@@ -6,17 +6,24 @@ module Examples.Svg exposing (Msg, State, example)
 
 -}
 
+import Browser.Dom as Dom
 import Category exposing (Category(..))
 import Css
 import Example exposing (Example)
+import Examples.AssignmentIcon as AssignmentIcons
+import Examples.IconExamples as IconExamples exposing (IconExampleGroup)
+import Examples.UiIcon as UiIcons
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
+import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
 import Nri.Ui.Colors.V1 as Colors
-import Nri.Ui.Svg.V1 as Svg
+import Nri.Ui.Menu.V3 as Menu
+import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
 import SolidColor exposing (SolidColor)
+import Task
 
 
 {-| -}
@@ -46,7 +53,16 @@ viewSettings state =
             , Css.justifyContent Css.spaceBetween
             ]
         ]
-        [ Html.label []
+        [ Menu.view
+            [ Menu.buttonId "svg-example__icon-selector-button"
+            , Menu.menuId "svg-example__icon-selector-menu"
+            ]
+            { isOpen = state.iconSelectorExpanded
+            , focusAndToggle = FocusAndToggleIconSelector
+            , entries = List.map viewSvgGroup UiIcons.all
+            , button = Menu.button [] "Icon"
+            }
+        , Html.label []
             [ Html.text "Color: "
             , Html.input
                 [ Attributes.type_ "color"
@@ -88,6 +104,21 @@ viewSettings state =
         ]
 
 
+viewSvgGroup : IconExampleGroup -> Menu.Entry Msg
+viewSvgGroup ( groupName, items ) =
+    let
+        toEntry ( name, icon ) =
+            Menu.entry ("svg-selector__" ++ name) <|
+                \attrs ->
+                    ClickableText.button name
+                        [ ClickableText.small
+                        , ClickableText.icon icon
+                        , ClickableText.onClick (SetIcon ( name, icon ))
+                        ]
+    in
+    Menu.group groupName (List.map toEntry items)
+
+
 viewResults : State -> Html.Html Msg
 viewResults state =
     let
@@ -107,7 +138,7 @@ viewResults state =
               , "\n\n\n"
               , "renderedSvg : Svg\n"
               , "renderedSvg =\n"
-              , "   UiIcon.newspaper\n"
+              , "   UiIcon." ++ Tuple.first state.icon ++ "\n"
               , "       |> Svg.withColor color\n"
               , "       |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n"
               , "       |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n"
@@ -127,7 +158,7 @@ viewResults state =
                 , Css.flexGrow (Css.int 2)
                 ]
             ]
-            [ UiIcon.newspaper
+            [ Tuple.second state.icon
                 |> Svg.withColor (toCssColor state.color)
                 |> Svg.withWidth (Css.px state.width)
                 |> Svg.withHeight (Css.px state.height)
@@ -145,7 +176,9 @@ viewResults state =
 
 {-| -}
 type alias State =
-    { color : SolidColor
+    { iconSelectorExpanded : Bool
+    , icon : ( String, Svg )
+    , color : SolidColor
     , width : Float
     , height : Float
     , label : String
@@ -155,7 +188,9 @@ type alias State =
 {-| -}
 init : State
 init =
-    { color = fromCssColor Colors.azure
+    { iconSelectorExpanded = False
+    , icon = ( "newspaper", UiIcon.newspaper )
+    , color = fromCssColor Colors.azure
     , width = 30
     , height = 30
     , label = "Newspaper"
@@ -164,16 +199,30 @@ init =
 
 {-| -}
 type Msg
-    = SetColor (Result String SolidColor)
+    = FocusAndToggleIconSelector { isOpen : Bool, focus : Maybe String }
+    | SetIcon ( String, Svg )
+    | SetColor (Result String SolidColor)
     | SetWidth (Maybe Float)
     | SetHeight (Maybe Float)
     | SetLabel String
+    | Focused (Result Dom.Error ())
 
 
 {-| -}
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
+        FocusAndToggleIconSelector { isOpen, focus } ->
+            ( { state | iconSelectorExpanded = isOpen }
+            , Maybe.map (\idString -> Task.attempt Focused (Dom.focus idString)) focus
+                |> Maybe.withDefault Cmd.none
+            )
+
+        SetIcon svg ->
+            ( { state | icon = svg }
+            , Cmd.none
+            )
+
         SetColor (Ok color) ->
             ( { state | color = color }
             , Cmd.none
@@ -196,3 +245,6 @@ update msg state =
 
         SetLabel label ->
             ( { state | label = label }, Cmd.none )
+
+        Focused _ ->
+            ( state, Cmd.none )