Begin trying wrapped implementation

styleguide-app/Example.elm

@@ -1,4 +1,4 @@
-module Example exposing (Example, view)
+module Example exposing (Example, view, wrap)
 
 import Category exposing (Category)
 import Css exposing (..)
@@ -18,6 +18,28 @@ type alias Example state msg =
     }
 
 
+wrap :
+    { wrapMsg : msg -> msg2, unwrapMsg : msg2 -> Maybe msg }
+    -> Example state msg
+    -> Example state msg2
+wrap { wrapMsg, unwrapMsg } example =
+    { name = example.name
+    , state = example.state
+    , update =
+        \msg2 state ->
+            case unwrapMsg msg2 of
+                Just msg ->
+                    example.update msg state
+                        |> Tuple.mapSecond (Cmd.map wrapMsg)
+
+                Nothing ->
+                    ( state, Cmd.none )
+    , subscriptions = \state -> Sub.map wrapMsg (example.subscriptions state)
+    , view = \state -> List.map (Html.map wrapMsg) (example.view state)
+    , categories = example.categories
+    }
+
+
 view : Bool -> Example state msg -> Html msg
 view showFocusLink example =
     Html.div
@@ -31,7 +53,7 @@ view showFocusLink example =
                 [ displayFlex
                 , alignItems center
                 , justifyContent flexStart
-                , flexWrap wrap
+                , flexWrap Css.wrap
                 , padding (px 4)
                 , backgroundColor glacier
                 ]

styleguide-app/Examples.elm

@@ -39,8 +39,8 @@ import Html.Styled as Html exposing (Html)
 
 
 type alias ModuleStates =
-    { accordion : Example Accordion.State Accordion.Msg
-    , button : Example Button.State Button.Msg
+    { accordion : Example Accordion.State Msg
+    , button : Example Button.State Msg
     , bannerAlert : Example BannerAlert.State BannerAlert.Msg
     , clickableText : Example ClickableText.State ClickableText.Msg
     , checkbox : Example Checkbox.State Checkbox.Msg
@@ -64,8 +64,8 @@ type alias ModuleStates =
 
 init : ModuleStates
 init =
-    { accordion = Accordion.example
-    , button = Button.example
+    { accordion = Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg } Accordion.example
+    , button = Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg } Button.example
     , bannerAlert = BannerAlert.example
     , clickableText = ClickableText.example
     , checkbox = Checkbox.example
@@ -94,6 +94,26 @@ type Msg
     | ModalMsg Modal.Msg
 
 
+getAccordionMsg : Msg -> Maybe Accordion.Msg
+getAccordionMsg msg =
+    case msg of
+        AccordionMsg childMsg ->
+            Just childMsg
+
+        _ ->
+            Nothing
+
+
+getButtonMsg : Msg -> Maybe Button.Msg
+getButtonMsg msg =
+    case msg of
+        ButtonMsg childMsg ->
+            Just childMsg
+
+        _ ->
+            Nothing
+
+
 update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg )
 update msg moduleStates =
     let
@@ -108,13 +128,19 @@ update msg moduleStates =
             ( updater { module_ | state = newState } moduleStates
             , Cmd.map wrapMsg cmd
             )
+
+        update_ example =
+            example.update msg example.state
+                |> Tuple.mapFirst (\newState -> { example | state = newState })
     in
     case msg of
         AccordionMsg exampleMsg ->
-            updateWith .accordion (\state m -> { m | accordion = state }) AccordionMsg exampleMsg
+            update_ moduleStates.accordion
+                |> Tuple.mapFirst (\accordion -> { moduleStates | accordion = accordion })
 
         ButtonMsg exampleMsg ->
-            updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg
+            update_ moduleStates.button
+                |> Tuple.mapFirst (\button -> { moduleStates | button = button })
 
         BannerAlertMsg exampleMsg ->
             updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg
@@ -136,9 +162,9 @@ view : Bool -> (Example state msg -> Bool) -> ModuleStates -> List (Html Msg)
 view showFocusLink filter moduleStates =
     -- TODO add the filter back in
     [ Example.view showFocusLink moduleStates.accordion
-        |> Html.map AccordionMsg
     , Example.view showFocusLink moduleStates.button
-        |> Html.map ButtonMsg
     , Example.view showFocusLink moduleStates.bannerAlert
         |> Html.map BannerAlertMsg
+    , Example.view showFocusLink moduleStates.modal
+        |> Html.map ModalMsg
     ]