Adds empty view for highlighter toolbar and fix compilation

elm.json

@@ -36,6 +36,7 @@
         "Nri.Ui.Highlightable.V1",
         "Nri.Ui.Highlighter.V1",
         "Nri.Ui.HighlighterTool.V1",
+        "Nri.Ui.HighlighterToolbar.V1",
         "Nri.Ui.Html.Attributes.V2",
         "Nri.Ui.Html.V3",
         "Nri.Ui.InputStyles.V3",

src/EventExtras.elm

@@ -1,4 +1,10 @@
-module EventExtras exposing (onClickForLinkWithHref, onClickPreventDefaultForLinkWithHref, onClickStopPropagation, onKeyDownPreventDefault)
+module EventExtras exposing
+    ( onClickForLinkWithHref
+    , onClickPreventDefaultAndStopPropagation
+    , onClickPreventDefaultForLinkWithHref
+    , onClickStopPropagation
+    , onKeyDownPreventDefault
+    )
 
 import Html.Styled as Html
 import Html.Styled.Events as Events
@@ -99,3 +105,20 @@ onKeyDownPreventDefault : List (Decoder msg) -> Html.Attribute msg
 onKeyDownPreventDefault decoders =
     Events.preventDefaultOn "keydown"
         (Json.Decode.map (\d -> ( d, True )) (Json.Decode.oneOf decoders))
+
+
+{-| -}
+onClickPreventDefaultAndStopPropagation : msg -> Html.Attribute msg
+onClickPreventDefaultAndStopPropagation msg =
+    onWithPreventDefaultAndStopPropagation "click" msg
+
+
+{-| -}
+onWithPreventDefaultAndStopPropagation : String -> msg -> Html.Attribute msg
+onWithPreventDefaultAndStopPropagation name msg =
+    Events.custom name <|
+        Json.Decode.succeed
+            { preventDefault = True
+            , stopPropagation = True
+            , message = msg
+            }

src/Nri/Ui/HighlighterToolbar/V1.elm

@@ -7,16 +7,25 @@ module Nri.Ui.HighlighterToolbar.V1 exposing (view, static)
 -}
 
 import Accessibility.Styled.Aria as Aria
-import Css
+import Css exposing (Color)
+import EventExtras exposing (onClickPreventDefaultAndStopPropagation)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
-import Html.Styled.Events.Extra exposing (onClickPreventDefaultAndStopPropagation)
-import Nri.MultiHighlighter.Styles as Styles exposing (RowTheme, class, classList)
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 exposing (nriDescription)
 import Nri.Ui.Html.V3 exposing (viewIf)
 
 
+{-| A colour combination to use for highlights.
+-}
+type alias RowTheme =
+    { solid : Color
+    , light : Color
+    , name : String
+    }
+
+
 toolbar : List (Html msg) -> Html msg
 toolbar =
     ul
@@ -55,7 +64,7 @@ view config model =
 
         eraserSelected : Bool
         eraserSelected =
-            model.currentTool == Eraser
+            model.currentTool == Nothing
     in
     toolbar
         (List.map viewTagWithConfig model.tags
@@ -66,8 +75,8 @@ view config model =
 {-| Render only tags and not eraser without triggering an action
 -}
 static : (a -> String) -> (a -> RowTheme) -> List a -> Html msg
-static getName getColor =
-    toolbar (List.map (staticTag getName getColor))
+static getName getColor tags =
+    toolbar (List.map (staticTag getName getColor) tags)
 
 
 staticTag : (a -> String) -> (a -> RowTheme) -> a -> Html msg
@@ -87,17 +96,25 @@ viewTag :
     -> Html msg
 viewTag { getColor, onChangeTag, getName } selected tag =
     toolContainer ("tag-" ++ getName tag)
-        (viewTool (getName tag) (onChangeTag tag) selected <| Just tag)
+        (viewTool (getName tag) (onChangeTag tag) (getColor tag) selected <| Just tag)
 
 
 viewEraser : msg -> Bool -> Html msg
 viewEraser onSetEraser selected =
     toolContainer "eraser"
-        (viewTool "Remove highlight" onSetEraser selected Eraser)
+        (viewTool "Remove highlight"
+            onSetEraser
+            { light = Colors.gray75
+            , solid = Colors.white
+            , name = "eraser"
+            }
+            selected
+            Nothing
+        )
 
 
-viewTool : String -> msg -> Bool -> Tool a -> Html msg
-viewTool name onClick selected tool =
+viewTool : String -> msg -> RowTheme -> Bool -> Maybe tag -> Html msg
+viewTool name onClick theme selected tool =
     button
         [ css
             [ Css.backgroundColor Css.transparent
@@ -111,14 +128,20 @@ viewTool name onClick selected tool =
         , Aria.pressed (Just selected)
         ]
         [ toolContent name tool
-        , viewIf (\() -> active) selected
+        , viewIf (\() -> active theme) selected
         ]
 
 
-active : Html msg
-active =
+active : RowTheme -> Html msg
+active palette_ =
     div
-        [ class [ Styles.ActiveTool ] ]
+        [ nriDescription "active-tool"
+        , css
+            [ Css.width (Css.px 38)
+            , Css.height (Css.px 4)
+            , Css.backgroundColor palette_.light
+            ]
+        ]
         []
 
 
@@ -135,8 +158,16 @@ toolContent name tool =
             , Css.alignItems Css.center
             ]
         ]
-        [ span [ classList [ iconClassFromTool tool ] ] []
-        , span
+        [ -- TODO: render the appropriate icon
+          --span [
+          --css case tool of
+          --Just _ ->
+          --    ( Styles.IconMarker, True )
+          --Nothing ->
+          --    ( Styles.IconEraser, True )
+          --] []
+          --,
+          span
             [ nriDescription "tool-label"
             , css
                 [ Css.color Colors.navy
@@ -148,13 +179,3 @@ toolContent name tool =
             ]
             [ text name ]
         ]
-
-
-iconClassFromTool : Maybe tag -> ( Styles.Classes, Bool )
-iconClassFromTool tool =
-    case tool of
-        Just _ ->
-            ( Styles.IconMarker, True )
-
-        Nothing ->
-            ( Styles.IconEraser, True )

styleguide-app/Examples.elm

@@ -19,6 +19,7 @@ import Examples.Divider as Divider
 import Examples.Fonts as Fonts
 import Examples.Heading as Heading
 import Examples.Highlighter as Highlighter
+import Examples.HighlighterToolbar as HighlighterToolbar
 import Examples.Loading as Loading
 import Examples.Logo as Logo
 import Examples.Menu as Menu
@@ -387,6 +388,25 @@ all =
                     HighlighterState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , HighlighterToolbar.example
+        |> Example.wrapMsg HighlighterToolbarMsg
+            (\msg ->
+                case msg of
+                    HighlighterToolbarMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState HighlighterToolbarState
+            (\msg ->
+                case msg of
+                    HighlighterToolbarState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -887,6 +907,7 @@ type State
     | FontsState Fonts.State
     | HeadingState Heading.State
     | HighlighterState Highlighter.State
+    | HighlighterToolbarState HighlighterToolbar.State
     | LoadingState Loading.State
     | LogoState Logo.State
     | MenuState Menu.State
@@ -933,6 +954,7 @@ type Msg
     | FontsMsg Fonts.Msg
     | HeadingMsg Heading.Msg
     | HighlighterMsg Highlighter.Msg
+    | HighlighterToolbarMsg HighlighterToolbar.Msg
     | LoadingMsg Loading.Msg
     | LogoMsg Logo.Msg
     | MenuMsg Menu.Msg

styleguide-app/Examples/HighlighterToolbar.elm

@@ -0,0 +1,102 @@
+module Examples.HighlighterToolbar exposing (Msg, State, example)
+
+{-|
+
+@docs Msg, State, example
+
+-}
+
+import Category exposing (Category(..))
+import Code
+import CommonControls
+import Css exposing (Color)
+import Debug.Control as Control exposing (Control)
+import Debug.Control.Extra as ControlExtra
+import Debug.Control.View as ControlView
+import Example exposing (Example)
+import Examples.Colors
+import Html.Styled exposing (..)
+import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Heading.V3 as Heading
+import Nri.Ui.HighlighterToolbar.V1 as HighlighterToolbar
+
+
+moduleName : String
+moduleName =
+    "HighlighterToolbar"
+
+
+version : Int
+version =
+    1
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = moduleName
+    , version = version
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , preview =
+        []
+    , view =
+        \ellieLinkConfig state ->
+            [ ControlView.view
+                { ellieLinkConfig = ellieLinkConfig
+                , name = moduleName
+                , version = version
+                , update = UpdateControls
+                , settings = state.settings
+                , mainType = Nothing
+                , extraCode = []
+                , renderExample = Code.unstyledView
+                , toExampleCode = \_ -> []
+                }
+            , Heading.h2 [ Heading.plaintext "Interactive Example" ]
+            , Heading.h2 [ Heading.plaintext "Non-interactive examples" ]
+            ]
+    , categories = [ Buttons, Interactions ]
+    , keyboardSupport = []
+    }
+
+
+{-| -}
+type alias State =
+    { settings : Control Settings
+    }
+
+
+{-| -}
+init : State
+init =
+    let
+        settings =
+            controlSettings
+    in
+    { settings = settings
+    }
+
+
+type alias Settings =
+    {}
+
+
+controlSettings : Control Settings
+controlSettings =
+    Control.record Settings
+
+
+{-| -}
+type Msg
+    = UpdateControls (Control Settings)
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        UpdateControls settings ->
+            ( { state | settings = settings }, Cmd.none )