Adds animation example

styleguide-app/Examples/Slide.elm

@@ -0,0 +1,164 @@
+module Examples.Slide exposing (Msg, State, example, init, update)
+
+{-|
+
+@docs Msg, State, example, init, update
+
+-}
+
+import Accessibility.Styled as Html
+import Css
+import Html.Styled.Attributes exposing (css)
+import Html.Styled.Keyed as Keyed
+import ModuleExample exposing (Category(..), ModuleExample)
+import Nri.Ui.Button.V8 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Slide.V1 as Slide
+
+
+{-| -}
+type Msg
+    = TriggerAnimation Slide.AnimationDirection
+
+
+{-| -}
+type alias State =
+    { direction : Slide.AnimationDirection
+    , current : Panel
+    , previous : Maybe Panel
+    }
+
+
+{-| -}
+example : (Msg -> msg) -> State -> ModuleExample msg
+example parentMessage state =
+    { filename = "Nri.Ui.Slide.V1.elm"
+    , category = Behaviors
+    , content =
+        [ Keyed.node "div"
+            [ css
+                [ Slide.withSlidingContents
+                , Css.border3 (Css.px 3) Css.solid Colors.gray75
+                , Css.padding (Css.px 20)
+                , Css.width (Css.px 600)
+                ]
+            ]
+            (case state.previous of
+                Just previousPanel ->
+                    [ viewPanel previousPanel (Slide.animateOut state.direction)
+                    , viewPanel state.current (Slide.animateIn state.direction)
+                    ]
+
+                Nothing ->
+                    [ viewPanel state.current (Css.batch [])
+                    ]
+            )
+        , Html.div
+            [ css
+                [ Css.displayFlex
+                , Css.justifyContent Css.spaceBetween
+                , Css.marginTop (Css.px 20)
+                , Css.width (Css.px 300)
+                ]
+            ]
+            [ triggerAnimation Slide.FromLTR "Left-to-right"
+            , triggerAnimation Slide.FromRTL "Right-to-left"
+            ]
+        ]
+            |> List.map (Html.map parentMessage)
+    }
+
+
+{-| -}
+init : State
+init =
+    { direction = Slide.FromRTL
+    , current = One
+    , previous = Nothing
+    }
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    case msg of
+        TriggerAnimation direction ->
+            ( { state
+                | direction = direction
+                , current =
+                    case ( direction, state.current ) of
+                        ( Slide.FromRTL, One ) ->
+                            Three
+
+                        ( Slide.FromRTL, Two ) ->
+                            One
+
+                        ( Slide.FromRTL, Three ) ->
+                            Two
+
+                        ( Slide.FromLTR, One ) ->
+                            Two
+
+                        ( Slide.FromLTR, Two ) ->
+                            Three
+
+                        ( Slide.FromLTR, Three ) ->
+                            One
+                , previous = Just state.current
+              }
+            , Cmd.none
+            )
+
+
+
+-- INTERNAL
+
+
+type Panel
+    = One
+    | Two
+    | Three
+
+
+viewPanel : Panel -> Css.Style -> ( String, Html.Html msg )
+viewPanel panel animation =
+    let
+        ( color, text, key ) =
+            case panel of
+                One ->
+                    ( Colors.red, "Panel One", "panel-1" )
+
+                Two ->
+                    ( Colors.yellow, "Panel Two", "panel-2" )
+
+                Three ->
+                    ( Colors.green, "Panel Three", "panel-3" )
+    in
+    ( key
+    , Html.div
+        [ css
+            [ Css.border3 (Css.px 2) Css.dashed color
+            , Css.color color
+            , Css.padding (Css.px 10)
+            , Css.width (Css.px 100)
+            , Css.textAlign Css.center
+            , animation
+            ]
+        ]
+        [ Html.text text
+        ]
+    )
+
+
+triggerAnimation : Slide.AnimationDirection -> String -> Html.Html Msg
+triggerAnimation direction label =
+    Button.button
+        { onClick = TriggerAnimation direction
+        , size = Button.Small
+        , style = Button.Secondary
+        , width = Button.WidthUnbounded
+        }
+        { label = label
+        , state = Button.Enabled
+        , icon = Nothing
+        }

styleguide-app/NriModules.elm

@@ -15,6 +15,7 @@ import Examples.Modal
 import Examples.Page
 import Examples.SegmentedControl
 import Examples.Select
+import Examples.Slide
 import Examples.SlideModal
 import Examples.Table
 import Examples.Tabs
@@ -41,6 +42,7 @@ type alias ModuleStates =
     , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State
     , modalExampleState : Examples.Modal.State
     , slideModalExampleState : Examples.SlideModal.State
+    , slideExampleState : Examples.Slide.State
     , tabsExampleState : Examples.Tabs.Tab
     }
 
@@ -59,6 +61,7 @@ init =
     , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init
     , modalExampleState = Examples.Modal.init
     , slideModalExampleState = Examples.SlideModal.init
+    , slideExampleState = Examples.Slide.init
     , tabsExampleState = Examples.Tabs.First
     }
 
@@ -77,6 +80,7 @@ type Msg
     | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg
     | ModalExampleMsg Examples.Modal.Msg
     | SlideModalExampleMsg Examples.SlideModal.Msg
+    | SlideExampleMsg Examples.Slide.Msg
     | TabsExampleMsg Examples.Tabs.Tab
     | NoOp
 
@@ -197,6 +201,15 @@ update outsideMsg moduleStates =
             , Cmd.map SlideModalExampleMsg cmd
             )
 
+        SlideExampleMsg msg ->
+            let
+                ( slideExampleState, cmd ) =
+                    Examples.Slide.update msg moduleStates.slideExampleState
+            in
+            ( { moduleStates | slideExampleState = slideExampleState }
+            , Cmd.map SlideExampleMsg cmd
+            )
+
         TabsExampleMsg tab ->
             ( { moduleStates | tabsExampleState = tab }
             , Cmd.none
@@ -246,6 +259,7 @@ nriThemedModules model =
     , Examples.Colors.example
     , Examples.Modal.example ModalExampleMsg model.modalExampleState
     , Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState
+    , Examples.Slide.example SlideExampleMsg model.slideExampleState
     , Examples.Tabs.example TabsExampleMsg model.tabsExampleState
     ]