Merge remote-tracking branch 'origin/master' into lab/adds-gd-tda-icons

src/Nri/Ui/ClickableSvg/V1.elm

@@ -6,6 +6,7 @@ module Nri.Ui.ClickableSvg.V1 exposing
     , width, height
     , disabled
     , custom, css
+    , withTooltipAbove, withTooltipBelow
     )
 
 {-|
@@ -14,6 +15,7 @@ module Nri.Ui.ClickableSvg.V1 exposing
 # Post-release patches
 
   - uses ClickableAttributes
+  - adds tooltip helpers
 
 
 # Create a button or link
@@ -42,6 +44,11 @@ module Nri.Ui.ClickableSvg.V1 exposing
 
 @docs custom, css
 
+
+## Tooltips
+
+@docs withTooltipAbove, withTooltipBelow
+
 -}
 
 import Accessibility.Styled.Widget as Widget
@@ -51,6 +58,7 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
+import Nri.Ui.Tooltip.V1 as Tooltip exposing (Tooltip)
 
 
 {-| -}
@@ -205,6 +213,65 @@ css styles =
 
 
 
+-- TOOLTIPS
+
+
+type alias TooltipSettings msg =
+    { position : Tooltip.Position
+    , isOpen : Bool
+    , onShow : Bool -> msg
+    , id : String
+    }
+
+
+showTooltip : String -> Maybe (TooltipSettings msg) -> Html msg -> Html msg
+showTooltip label maybeSettings buttonOrLink =
+    case maybeSettings of
+        Just { position, onShow, isOpen, id } ->
+            let
+                tooltipSettings =
+                    { trigger = Tooltip.OnHover
+                    , onTrigger = onShow
+                    , isOpen = isOpen
+                    , triggerHtml = buttonOrLink
+                    , extraButtonAttrs = []
+                    , id = id ++ "__clickable-svg-tooltip"
+                    }
+            in
+            Tooltip.tooltip [ Html.text label ]
+                |> Tooltip.withPosition position
+                |> Tooltip.withWidth Tooltip.FitToContent
+                |> Tooltip.withPadding Tooltip.SmallPadding
+                |> Tooltip.primaryLabel tooltipSettings
+
+        Nothing ->
+            buttonOrLink
+
+
+withTooltip : Tooltip.Position -> { id : String, isOpen : Bool, onShow : Bool -> msg } -> Attribute msg
+withTooltip position { id, isOpen, onShow } =
+    set
+        (\config ->
+            { config
+                | tooltip =
+                    Just { position = position, id = id, isOpen = isOpen, onShow = onShow }
+            }
+        )
+
+
+{-| -}
+withTooltipAbove : { id : String, isOpen : Bool, onShow : Bool -> msg } -> Attribute msg
+withTooltipAbove =
+    withTooltip Tooltip.OnTop
+
+
+{-| -}
+withTooltipBelow : { id : String, isOpen : Bool, onShow : Bool -> msg } -> Attribute msg
+withTooltipBelow =
+    withTooltip Tooltip.OnBottom
+
+
+
 -- INTERNALS
 
 
@@ -226,6 +293,7 @@ build label icon =
         , disabled = False
         , customAttributes = []
         , customStyles = []
+        , tooltip = Nothing
         }
 
 
@@ -242,6 +310,7 @@ type alias ButtonOrLinkAttributes msg =
     , disabled : Bool
     , customAttributes : List (Html.Attribute msg)
     , customStyles : List Style
+    , tooltip : Maybe (TooltipSettings msg)
     }
 
 
@@ -262,6 +331,7 @@ renderButton ((ButtonOrLink config) as button_) =
             |> Svg.withHeight config.height
             |> Svg.toHtml
         ]
+        |> showTooltip config.label config.tooltip
 
 
 type Link
@@ -298,6 +368,7 @@ renderLink ((ButtonOrLink config) as link_) =
             |> Svg.withHeight config.height
             |> Svg.toHtml
         ]
+        |> showTooltip config.label config.tooltip
 
 
 buttonOrLinkStyles : ButtonOrLinkAttributes msg -> List Style

src/Nri/Ui/Menu/V1.elm

@@ -306,7 +306,10 @@ viewEntry entry_ =
             Html.text ""
 
 
-{-| Display an icon button consistent with menu button
+{-| Display an icon button consistent with menu button.
+
+Prefer to use ClickableSvg with the `withTooltipAbove` helper.
+
 -}
 iconButton :
     { icon : Svg.Svg
@@ -431,6 +434,9 @@ iconButtonWithMenu config =
 
 
 {-| Display an icon link consistent with menu button styles.
+
+Prefer to use ClickableSvg with the `withTooltipAbove` helper.
+
 -}
 iconLink :
     { icon : Svg.Svg

styleguide-app/Examples/ClickableSvg.elm

@@ -33,63 +33,99 @@ example =
     , subscriptions = \_ -> Sub.none
     , view =
         \state ->
-            [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                [ ClickableSvg.button "Back"
+            [ viewExample "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]" <|
+                ClickableSvg.button "Back"
                     UiIcon.arrowLeft
                     [ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ]
-                , viewCode
-                    "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
-                ]
-            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                [ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ]
-                , viewCode
-                    "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]"
-                ]
-            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                [ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
-                , viewCode
-                    "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
-                ]
-            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                [ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
-                , viewCode
-                    "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
-                ]
-            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                [ ClickableSvg.button "Go to tutorial"
+            , viewExample "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]" <|
+                ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ]
+            , viewExample "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" <|
+                ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
+            , viewExample "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" <|
+                ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
+            , viewExample
+                """
+ClickableSvg.button "Go to tutorial"
+    UiIcon.footsteps
+    [ ClickableSvg.width (Css.px 30)
+    , ClickableSvg.height (Css.px 30)
+    , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
+    , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
+    , ClickableSvg.css [ Css.border3 (Css.px 1) Css.dashed Colors.azure ]
+    ]
+                """
+              <|
+                ClickableSvg.button "Go to tutorial"
                     UiIcon.footsteps
-                    [ ClickableSvg.width (Css.px 80)
-                    , ClickableSvg.height (Css.px 80)
+                    [ ClickableSvg.width (Css.px 30)
+                    , ClickableSvg.height (Css.px 30)
                     , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
                     , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
-                    , ClickableSvg.css
-                        [ Css.border3 (Css.px 3) Css.dashed Colors.purple
-                        ]
+                    , ClickableSvg.css [ Css.border3 (Css.px 1) Css.dashed Colors.azure ]
                     ]
-                , viewCode
-                    """
-                    ClickableSvg.button "Go to tutorial"
-                        UiIcon.footsteps
-                        [ ClickableSvg.width (Css.px 80)
-                        , ClickableSvg.height (Css.px 80)
-                        , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
-                        , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
-                        , ClickableSvg.css
-                            [ Css.border3 (Css.px 3) Css.dashed Colors.purple
-                            ]
-                        ]
+            , viewExample
                 """
-                ]
+ClickableSvg.button "Preview"
+    UiIcon.preview
+    [ ClickableSvg.width (Css.px 20)
+    , ClickableSvg.height (Css.px 20)
+    , ClickableSvg.onClick (ShowItWorked "You clicked the preview button!")
+    , ClickableSvg.withTooltipAbove { id = "preview", isOpen = state.tooltipPreview, onShow = SetPreviewTooltip }
+    ]
+            """
+              <|
+                ClickableSvg.button "Preview"
+                    UiIcon.preview
+                    [ ClickableSvg.width (Css.px 20)
+                    , ClickableSvg.height (Css.px 20)
+                    , ClickableSvg.onClick (ShowItWorked "You clicked the preview button!")
+                    , ClickableSvg.withTooltipAbove
+                        { id = "preview"
+                        , isOpen = state.tooltipPreview
+                        , onShow = SetPreviewTooltip
+                        }
+                    ]
+            , viewExample
+                """
+ClickableSvg.button "Share"
+    UiIcon.share
+    [ ClickableSvg.width (Css.px 20)
+    , ClickableSvg.height (Css.px 20)
+    , ClickableSvg.onClick (ShowItWorked "You clicked the Share button!")
+    , ClickableSvg.withTooltipBelow { id = "share", isOpen = state.tooltipShareTo, onShow = SetShareTooltip }
+    ]
+            """
+              <|
+                ClickableSvg.button "Share"
+                    UiIcon.share
+                    [ ClickableSvg.width (Css.px 20)
+                    , ClickableSvg.height (Css.px 20)
+                    , ClickableSvg.onClick (ShowItWorked "You clicked the share button!")
+                    , ClickableSvg.withTooltipBelow
+                        { id = "share"
+                        , isOpen = state.tooltipShareTo
+                        , onShow = SetShareTooltip
+                        }
+                    ]
             ]
     }
 
 
+viewExample : String -> Html.Html msg -> Html.Html msg
+viewExample code html =
+    Html.div
+        [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+        [ html
+        , viewCode code
+        ]
+
+
 viewCode : String -> Html.Html msg
 viewCode renderStrategy =
     Html.code
         [ Attributes.css
             [ Css.width (Css.px 400)
-            , Css.marginRight (Css.px 20)
+            , Css.marginLeft (Css.px 20)
             ]
         ]
         [ Html.pre [] [ Html.text renderStrategy ] ]
@@ -97,18 +133,24 @@ viewCode renderStrategy =
 
 {-| -}
 type alias State =
-    {}
+    { tooltipPreview : Bool
+    , tooltipShareTo : Bool
+    }
 
 
 {-| -}
 init : State
 init =
-    {}
+    { tooltipPreview = False
+    , tooltipShareTo = False
+    }
 
 
 {-| -}
 type Msg
     = ShowItWorked String
+    | SetPreviewTooltip Bool
+    | SetShareTooltip Bool
 
 
 {-| -}
@@ -121,3 +163,9 @@ update msg state =
                     Debug.log "ClickableSvg" message
             in
             ( state, Cmd.none )
+
+        SetPreviewTooltip bool ->
+            ( { state | tooltipPreview = bool }, Cmd.none )
+
+        SetShareTooltip bool ->
+            ( { state | tooltipShareTo = bool }, Cmd.none )

styleguide-app/Examples/Menu.elm

@@ -98,26 +98,6 @@ view state =
             , entries = []
             }
         ]
-    , Html.h3 [] [ Html.text "Row with buttons and menus" ]
-    , Html.div []
-        [ Menu.iconButton
-            { icon = UiIcon.performance
-            , label = "Menu.iconButton: I'm a button!"
-            , isTooltipOpen = Set.member "Performance" state.openTooltips
-            , onShowTooltip = ShowTooltip "Performance"
-            , onClick = ConsoleLog "Clicked the Performance button!"
-            , isDisabled = False
-            , id = "performance"
-            }
-        , Menu.iconLink
-            { icon = UiIcon.document
-            , label = "Menu.iconLink: I link elsewhere!"
-            , isTooltipOpen = Set.member "Document" state.openTooltips
-            , onShowTooltip = ShowTooltip "Document"
-            , linkUrl = "https://www.noredink.com/"
-            , isDisabled = False
-            }
-        ]
     ]