diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm new file mode 100644 index 00000000..eb8ec748 --- /dev/null +++ b/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 + ] diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index 774a0b75..d8d9f72f 100644 --- a/styleguide-app/NriModules.elm +++ b/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 ]