🎨 improve the API

component-catalog-app/Examples/HighlighterToolbar.elm

@@ -65,8 +65,7 @@ example =
                                 Code.fromModule moduleName "view"
                                     ++ Code.recordMultiline
                                         [ ( "onSelect", "identity -- msg for selecting the tag or eraser" )
-                                        , ( "getColor", "\\tag -> { colorSolid = tag.colorSolid, colorLight = tag.colorLight }" )
-                                        , ( "getName", ".name" )
+                                        , ( "getNameAndColor", "identity" )
                                         , ( "highlighterId", Code.string "highlighter-id" )
                                         ]
                                         2
@@ -81,8 +80,7 @@ example =
             , Heading.h2 [ Heading.plaintext "Example" ]
             , HighlighterToolbar.view
                 { onSelect = SelectTag
-                , getColor = getColor
-                , getName = getName
+                , getNameAndColor = identity
                 , highlighterId = "highlighter"
                 }
                 { currentTool = state.currentTool
@@ -127,47 +125,28 @@ toolPreview color border icon name =
         ]
 
 
-type Tag
-    = Claim
-    | Evidence
-    | Reasoning
+type alias Tag =
+    { name : String
+    , colorSolid : Css.Color
+    , colorLight : Css.Color
+    }
 
 
 tags : List Tag
 tags =
-    [ Claim, Evidence, Reasoning ]
-
-
-getName : Tag -> String
-getName tag =
-    case tag of
-        Claim ->
-            "Claim"
-
-        Evidence ->
-            "Evidence"
-
-        Reasoning ->
-            "Reasoning"
-
-
-getColor : Tag -> { colorSolid : Color, colorLight : Color }
-getColor tag =
-    case tag of
-        Claim ->
-            { colorSolid = Colors.mustard
-            , colorLight = Colors.highlightYellow
-            }
-
-        Evidence ->
-            { colorSolid = Colors.magenta
-            , colorLight = Colors.highlightMagenta
-            }
-
-        Reasoning ->
-            { colorSolid = Colors.cyan
-            , colorLight = Colors.highlightCyan
-            }
+    [ { name = "Claim"
+      , colorSolid = Colors.mustard
+      , colorLight = Colors.highlightYellow
+      }
+    , { name = "Evidence"
+      , colorSolid = Colors.magenta
+      , colorLight = Colors.highlightMagenta
+      }
+    , { name = "Reasoning"
+      , colorSolid = Colors.cyan
+      , colorLight = Colors.highlightCyan
+      }
+    ]
 
 
 {-| -}

src/Nri/Ui/HighlighterToolbar/V3.elm

@@ -8,6 +8,7 @@ module Nri.Ui.HighlighterToolbar.V3 exposing (view)
 ### Changes from V2:
 
   - Use radio inputs under the hood
+  - don't arbitrarily complicate API -- match the usecases on the monolith side
 
 
 ### Patch changes:
@@ -42,8 +43,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon
 -}
 view :
     { onSelect : Maybe tag -> msg
-    , getColor : tag -> { extras | colorSolid : Color, colorLight : Color }
-    , getName : tag -> String
+    , getNameAndColor : tag -> { extras | name : String, colorSolid : Color, colorLight : Color }
     , highlighterId : String
     }
     -> { model | currentTool : Maybe tag, tags : List tag }
@@ -52,7 +52,7 @@ view config model =
     let
         viewTagWithConfig : tag -> Html msg
         viewTagWithConfig tag =
-            viewTool (config.getName tag) config.onSelect (config.getColor tag) (Just tag) model
+            viewTool config.onSelect (config.getNameAndColor tag) (Just tag) model
     in
     toolbar config.highlighterId
         (List.map viewTagWithConfig model.tags
@@ -83,21 +83,23 @@ viewEraser :
     -> { model | currentTool : Maybe tag }
     -> Html msg
 viewEraser onSelect model =
-    viewTool "Remove highlight"
+    viewTool
         onSelect
-        { colorLight = Colors.gray75, colorSolid = Colors.white }
+        { name = "Remove highlight"
+        , colorLight = Colors.gray75
+        , colorSolid = Colors.white
+        }
         Nothing
         model
 
 
 viewTool :
-    String
-    -> (Maybe tag -> msg)
-    -> { extras | colorSolid : Color, colorLight : Color }
+    (Maybe tag -> msg)
+    -> { extras | name : String, colorSolid : Color, colorLight : Color }
     -> Maybe tag
     -> { model | currentTool : Maybe tag }
     -> Html msg
-viewTool name onSelect theme tag model =
+viewTool onSelect ({ name } as theme) tag model =
     let
         selected =
             model.currentTool == tag

tests/Spec/Nri/Ui/HighlighterToolbar.elm

@@ -70,55 +70,35 @@ ensureActiveToolIs label testContext =
             )
 
 
-type Tag
-    = Claim
-    | Evidence
-    | Reasoning
+type alias Tag =
+    { name : String
+    , colorSolid : Css.Color
+    , colorLight : Css.Color
+    }
 
 
 tags : List Tag
 tags =
-    [ Claim, Evidence, Reasoning ]
-
-
-getName : Tag -> String
-getName tag =
-    case tag of
-        Claim ->
-            "Claim"
-
-        Evidence ->
-            "Evidence"
-
-        Reasoning ->
-            "Reasoning"
-
-
-getColor : Tag -> { colorSolid : Color, colorLight : Color }
-getColor tag =
-    case tag of
-        Claim ->
-            { colorSolid = Colors.mustard
-            , colorLight = Colors.highlightYellow
-            }
-
-        Evidence ->
-            { colorSolid = Colors.magenta
-            , colorLight = Colors.highlightMagenta
-            }
-
-        Reasoning ->
-            { colorSolid = Colors.cyan
-            , colorLight = Colors.highlightCyan
-            }
+    [ { name = "Claim"
+      , colorSolid = Colors.mustard
+      , colorLight = Colors.highlightYellow
+      }
+    , { name = "Evidence"
+      , colorSolid = Colors.magenta
+      , colorLight = Colors.highlightMagenta
+      }
+    , { name = "Reasoning"
+      , colorSolid = Colors.cyan
+      , colorLight = Colors.highlightCyan
+      }
+    ]
 
 
 view : Maybe Tag -> Html (Maybe Tag)
 view model =
     HighlighterToolbar.view
         { onSelect = identity
-        , getColor = getColor
-        , getName = getName
+        , getNameAndColor = identity
         , highlighterId = "highlighter"
         }
         { currentTool = model