diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm new file mode 100644 index 00000000..17900634 --- /dev/null +++ b/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 + } + ] + } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index be53605a..cdc87fa9 100644 --- a/styleguide-app/NriModules.elm +++ b/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 ]