Wires up confetti example

src/Nri/Ui/Confetti/V1.elm

@@ -1,15 +1,21 @@
 module Nri.Ui.Confetti.V1 exposing
-    ( Confetti
-    , Msg
-    , System
-    , burst
-    , init
-    , particleSystem
-    , update
-    , updateCenter
+    ( System, init
+    , Msg, burst, update, updateCenter
     , view
+    , Confetti
+    , particleSystem
     )
 
+{-|
+
+@docs System, init
+@docs Msg, burst, update, updateCenter
+@docs view
+@docs Confetti
+@docs particleSystem
+
+-}
+
 import Css exposing (Color)
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes exposing (css)
@@ -21,6 +27,7 @@ import Random.Extra
 import Random.Float exposing (normal)
 
 
+{-| -}
 type Confetti
     = Word
         { color : Color
@@ -34,14 +41,17 @@ type Confetti
         }
 
 
+{-| -}
 type System
     = System (ParticleSystem.System Confetti) Float
 
 
+{-| -}
 type alias Msg =
     ParticleSystem.Msg Confetti
 
 
+{-| -}
 init : Float -> System
 init center =
     System
@@ -49,6 +59,7 @@ init center =
         center
 
 
+{-| -}
 burst : List { color : Color, text : String } -> System -> System
 burst highlightedWords (System system center) =
     System
@@ -148,6 +159,7 @@ particleGenerator center generator =
             )
 
 
+{-| -}
 view : System -> Html.Html msg
 view (System system _) =
     system
@@ -225,6 +237,7 @@ viewConfetti particle =
                 []
 
 
+{-| -}
 update : ParticleSystem.Msg Confetti -> System -> System
 update msg (System system center) =
     System
@@ -232,11 +245,13 @@ update msg (System system center) =
         center
 
 
+{-| -}
 updateCenter : Float -> System -> System
 updateCenter center (System system _) =
     System system center
 
 
+{-| -}
 particleSystem : System -> ParticleSystem.System Confetti
 particleSystem (System system _) =
     system

styleguide-app/Examples.elm

@@ -9,6 +9,7 @@ import Examples.Checkbox as Checkbox
 import Examples.ClickableSvg as ClickableSvg
 import Examples.ClickableText as ClickableText
 import Examples.Colors as Colors
+import Examples.Confetti as Confetti
 import Examples.DisclosureIndicator as DisclosureIndicator
 import Examples.Divider as Divider
 import Examples.Fonts as Fonts
@@ -188,6 +189,25 @@ all =
                     ColorsState childState ->
                         Just childState
 
+                    _ ->
+                        Nothing
+            )
+    , Confetti.example
+        |> Example.wrapMsg ConfettiMsg
+            (\msg ->
+                case msg of
+                    ConfettiMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ConfettiState
+            (\msg ->
+                case msg of
+                    ConfettiState childState ->
+                        Just childState
+
                     _ ->
                         Nothing
             )
@@ -697,6 +717,7 @@ type State
     | ClickableSvgState ClickableSvg.State
     | ClickableTextState ClickableText.State
     | ColorsState Colors.State
+    | ConfettiState Confetti.State
     | DisclosureIndicatorState DisclosureIndicator.State
     | DividerState Divider.State
     | FontsState Fonts.State
@@ -734,6 +755,7 @@ type Msg
     | ClickableSvgMsg ClickableSvg.Msg
     | ClickableTextMsg ClickableText.Msg
     | ColorsMsg Colors.Msg
+    | ConfettiMsg Confetti.Msg
     | DisclosureIndicatorMsg DisclosureIndicator.Msg
     | DividerMsg Divider.Msg
     | FontsMsg Fonts.Msg

styleguide-app/Examples/Confetti.elm

@@ -0,0 +1,73 @@
+module Examples.Confetti exposing (example, State, Msg)
+
+{-|
+
+@docs example, State, Msg
+
+-}
+
+import Category exposing (Category(..))
+import Css
+import Example exposing (Example)
+import Html.Styled as Html
+import Html.Styled.Attributes as Attributes exposing (css)
+import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Confetti.V1 as Confetti
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Confetti.V1"
+    , categories = [ Animations ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Button.button "Launch confetti!"
+                [ Button.onClick LaunchConfetti
+                , Button.small
+                , Button.secondary
+                ]
+            , Confetti.view state.confettiState
+            ]
+    }
+
+
+{-| -}
+type alias State =
+    { confettiState : Confetti.System
+    }
+
+
+init : State
+init =
+    { confettiState = Confetti.init 50
+    }
+
+
+{-| -}
+type Msg
+    = LaunchConfetti
+    | ConfettiMsg Confetti.Msg
+
+
+{-| -}
+update : Msg -> State -> ( State, Cmd Msg )
+update msg state =
+    let
+        words =
+            [ { color = Colors.azure, text = "Hello!" } ]
+    in
+    case msg of
+        LaunchConfetti ->
+            ( { state | confettiState = Confetti.burst words state.confettiState }
+            , Cmd.none
+            )
+
+        ConfettiMsg confettiMsg ->
+            ( { state | confettiState = Confetti.update confettiMsg state.confettiState }
+            , Cmd.none
+            )