adds examples for DisclosureIndicator to the style-guide

styleguide-app/Examples/DisclosureIndicator.elm

@@ -0,0 +1,94 @@
+module Examples.DisclosureIndicator exposing (Msg, State, example, init, update)
+
+{- \
+   @docs Msg, State, example, init, update,
+-}
+
+import Assets exposing (Assets, assets)
+import Css
+import Html.Styled as Html
+import Html.Styled.Attributes exposing (css)
+import Html.Styled.Events exposing (onClick)
+import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
+import Nri.Ui.DisclosureIndicator.V1 as DisclosureIndicatorV1
+
+
+{-| -}
+type Msg
+    = DisclosureIndicatorToggle Bool
+    | InlineDisclosureIndicatorToggle Bool
+
+
+{-| -}
+type alias State =
+    { disclosed : Bool
+    , inlineDisclosed : Bool
+    }
+
+
+{-| -}
+example : (Msg -> msg) -> State -> ModuleExample msg
+example parentMessage state =
+    { filename = "ui/src/Nri/Ui/DisclosureIndicator/V1..elm"
+    , category = Behaviors
+    , content =
+        [ Html.h3 [] [ Html.text "Panel indicator" ]
+        , Html.div
+            [ onClick
+                (DisclosureIndicatorToggle <| not state.disclosed)
+            ]
+            [ DisclosureIndicatorV1.view assets
+                { isOpen = state.disclosed
+                , label = "Details"
+                }
+            ]
+        , Html.h3 [] [ Html.text "Inline indicator" ]
+        , Html.p []
+            [ Html.text
+                """
+                The inline variant of the indicator is smaller and occupies
+                less vertical space so it can be inlined in lists or tables
+                without breaking text flow. Also, it rotates from right to
+                down direction when expanding.
+                """
+            ]
+        , Html.div
+            [ css [ inlineIndicatorContainer ]
+            , onClick (InlineDisclosureIndicatorToggle <| not state.inlineDisclosed)
+            ]
+            [ DisclosureIndicatorV1.viewInline assets
+                { isOpen = state.inlineDisclosed
+                , label = "Details"
+                }
+            , Html.span [] [ Html.text "list item with detail" ]
+            ]
+        ]
+            |> List.map (Html.map parentMessage >> Html.toUnstyled)
+    }
+
+
+{-| -}
+init : State
+init =
+    { disclosed = False
+    , inlineDisclosed = False
+    }
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        DisclosureIndicatorToggle disclosed ->
+            ( { state | disclosed = disclosed }, Cmd.none )
+
+        InlineDisclosureIndicatorToggle disclosed ->
+            ( { state | inlineDisclosed = disclosed }, Cmd.none )
+
+
+inlineIndicatorContainer : Css.Style
+inlineIndicatorContainer =
+    Css.batch
+        [ Css.displayFlex
+        , Css.alignItems Css.center
+        ]

styleguide-app/NriModules.elm

@@ -5,6 +5,7 @@ import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import Examples.Button
 import Examples.Checkbox
 import Examples.Colors
+import Examples.DisclosureIndicator
 import Examples.Dropdown
 import Examples.Fonts
 import Examples.Icon
@@ -38,6 +39,7 @@ type alias ModuleStates =
     , tableExampleState : Examples.Table.State
     , textAreaExampleState : TextAreaExample.State
     , textInputExampleState : TextInputExample.State
+    , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State
     }
 
 
@@ -51,6 +53,7 @@ init =
     , tableExampleState = Examples.Table.init
     , textAreaExampleState = TextAreaExample.init
     , textInputExampleState = TextInputExample.init
+    , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init
     }
 
 
@@ -64,6 +67,7 @@ type Msg
     | TableExampleMsg Examples.Table.Msg
     | TextAreaExampleMsg TextAreaExample.Msg
     | TextInputExampleMsg TextInputExample.Msg
+    | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg
     | NoOp
 
 
@@ -147,6 +151,15 @@ update msg moduleStates =
             , Cmd.map TextInputExampleMsg cmd
             )
 
+        DisclosureIndicatorExampleMsg msg ->
+            let
+                ( disclosureIndicatorExampleState, cmd ) =
+                    Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState
+            in
+            ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState }
+            , Cmd.map DisclosureIndicatorExampleMsg cmd
+            )
+
         NoOp ->
             ( moduleStates, Cmd.none )
 
@@ -184,6 +197,7 @@ nriThemedModules model =
     , Examples.Table.example TableExampleMsg model.tableExampleState
     , TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState
     , TextInputExample.example TextInputExampleMsg model.textInputExampleState
+    , Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState
     , Examples.Colors.example
     ]