diff --git a/component-catalog-app/Examples/HighlighterToolbar.elm b/component-catalog-app/Examples/HighlighterToolbar.elm index c272b574..4168091f 100644 --- a/component-catalog-app/Examples/HighlighterToolbar.elm +++ b/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 + } + ] {-| -} diff --git a/src/Nri/Ui/HighlighterToolbar/V3.elm b/src/Nri/Ui/HighlighterToolbar/V3.elm index 0b6f2fc4..94d0ba38 100644 --- a/src/Nri/Ui/HighlighterToolbar/V3.elm +++ b/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 diff --git a/tests/Spec/Nri/Ui/HighlighterToolbar.elm b/tests/Spec/Nri/Ui/HighlighterToolbar.elm index e99823c0..96fe5aac 100644 --- a/tests/Spec/Nri/Ui/HighlighterToolbar.elm +++ b/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