Add basic example to styleguide

styleguide-app/Examples/Tooltip.elm

@@ -0,0 +1,85 @@
+module Examples.Tooltip exposing (example, init, update, State, Msg)
+
+{-|
+
+@docs example, init, update, State, Msg
+
+-}
+
+import Accessibility.Styled as Html
+import Css
+import Html.Styled.Attributes exposing (css)
+import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
+import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Text.V3 as Text
+import Nri.Ui.Tooltip.V1 as Tooltip
+
+
+type TooltipType
+    = PrimaryLabel
+    | AuxillaryDescription
+    | ToggleTip
+
+
+type alias State =
+    { openTooltip : Maybe TooltipType
+    }
+
+
+init : State
+init =
+    { openTooltip = Nothing }
+
+
+type Msg
+    = ToggleTooltip TooltipType Bool
+
+
+update : Msg -> State -> State
+update msg model =
+    case msg of
+        ToggleTooltip type_ isOpen ->
+            if isOpen then
+                { model | openTooltip = Just type_ }
+
+            else
+                { model | openTooltip = Nothing }
+
+
+example : (Msg -> msg) -> State -> ModuleExample msg
+example msg model =
+    { name = "Nri.Ui.Tooltip.V1"
+    , category = Widgets
+    , content =
+        [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
+        , Heading.h3 [] [ Html.text "primaryLabel" ]
+        , Text.smallBody [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content." ]
+        , Tooltip.tooltip [ Html.text "Tooltip" ]
+            |> Tooltip.primaryLabel
+                { trigger = Tooltip.OnClick
+                , triggerHtml = Html.text "Primary Label Trigger"
+                , onTrigger = ToggleTooltip PrimaryLabel >> msg
+                , isOpen = model.openTooltip == Just PrimaryLabel
+                }
+        , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
+        , Heading.h3 [] [ Html.text "auxillaryDescription" ]
+        , Text.smallBody [ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content." ]
+        , Tooltip.tooltip [ Html.text "Tooltip" ]
+            |> Tooltip.primaryLabel
+                { trigger = Tooltip.OnClick
+                , triggerHtml = Html.text "Auxillary Description Trigger"
+                , onTrigger = ToggleTooltip AuxillaryDescription >> msg
+                , isOpen = model.openTooltip == Just AuxillaryDescription
+                }
+        , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
+        , Heading.h3 [] [ Html.text "toggleTip" ]
+        , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ]
+        , Tooltip.tooltip [ Html.text "Tooltip" ]
+            |> Tooltip.toggleTip
+                { trigger = Tooltip.OnClick
+                , triggerHtml = Html.text "Toggle Tip Trigger"
+                , onTrigger = ToggleTooltip ToggleTip >> msg
+                , isOpen = model.openTooltip == Just ToggleTip
+                }
+        ]
+    }

styleguide-app/NriModules.elm

@@ -24,6 +24,7 @@ import Examples.Text
 import Examples.Text.Writing
 import Examples.TextArea as TextAreaExample
 import Examples.TextInput as TextInputExample
+import Examples.Tooltip
 import Html exposing (Html, img)
 import Html.Attributes exposing (..)
 import ModuleExample exposing (Category(..), ModuleExample)
@@ -47,6 +48,7 @@ type alias ModuleStates =
     , slideExampleState : Examples.Slide.State
     , sortableTableState : Examples.SortableTable.State
     , tabsExampleState : Examples.Tabs.Tab
+    , tooltipExampleState : Examples.Tooltip.State
     }
 
 
@@ -68,6 +70,7 @@ init =
     , slideExampleState = Examples.Slide.init
     , sortableTableState = Examples.SortableTable.init
     , tabsExampleState = Examples.Tabs.First
+    , tooltipExampleState = Examples.Tooltip.init
     }
 
 
@@ -89,6 +92,7 @@ type Msg
     | SlideExampleMsg Examples.Slide.Msg
     | SortableTableMsg Examples.SortableTable.Msg
     | TabsExampleMsg Examples.Tabs.Tab
+    | TooltipExampleMsg Examples.Tooltip.Msg
     | NoOp
 
 
@@ -239,6 +243,17 @@ update outsideMsg moduleStates =
             , Cmd.none
             )
 
+        TooltipExampleMsg msg ->
+            let
+                newState =
+                    Examples.Tooltip.update msg moduleStates.tooltipExampleState
+            in
+            ( { moduleStates
+                | tooltipExampleState = newState
+              }
+            , Cmd.none
+            )
+
         NoOp ->
             ( moduleStates, Cmd.none )
 
@@ -287,6 +302,7 @@ nriThemedModules model =
     , Examples.Slide.example SlideExampleMsg model.slideExampleState
     , Examples.SortableTable.example SortableTableMsg model.sortableTableState
     , Examples.Tabs.example TabsExampleMsg model.tabsExampleState
+    , Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState
     ]