Adds button example back in

styleguide-app/Examples.elm

@@ -1,11 +1,11 @@
-module Examples exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update, view)
+module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view)
 
 import Category exposing (Category(..))
 import Examples.Accordion as Accordion
 import Examples.Alert
 import Examples.AssignmentIcon
 import Examples.BannerAlert
-import Examples.Button
+import Examples.Button as Button
 import Examples.Callout
 import Examples.Checkbox
 import Examples.ClickableSvg
@@ -51,9 +51,8 @@ type alias Example state msg =
 
 type alias ModuleStates =
     { accordion : Example Accordion.State Accordion.Msg
+    , button : Example Button.State Button.Msg
 
-    --, buttonExample : { state : Examples.Button.State Msg
-    --        , update :Button.State Msg -> Button.State Msg -> (Button.State Msg, Cmd Button.State Msg) }
     --, bannerAlertExample : { state : Examples.BannerAlert.State
     --        , update :Examples.BannerAlert.Msg -> Examples.BannerAlert.State -> (Examples.BannerAlert.State, Cmd Examples.BannerAlert.Msg) }
     --, clickableTextExample : { state : Examples.ClickableText.State
@@ -96,8 +95,8 @@ type alias ModuleStates =
 init : ModuleStates
 init =
     { accordion = Accordion.example_
+    , button = Button.example_
 
-    --, buttonExample = { state = Examples.Button.init, update = Examples.Button.init }
     --, bannerAlertExample = { state = Examples.BannerAlert.init, update = Examples.BannerAlert.init }
     --, clickableTextExample = { state = Examples.ClickableText.init, update = Examples.ClickableText.init }
     --, checkboxExample = { state = Examples.Checkbox.init, update = Examples.Checkbox.init }
@@ -120,204 +119,33 @@ init =
 
 
 type Msg
-    = ComponentMsg (ModuleStates -> Example Accordion.State Accordion.Msg) (Example Accordion.State Accordion.Msg -> ModuleStates -> ModuleStates) Accordion.Msg
-      --| ButtonExampleMsg (Examples.Button.Msg Msg)
-      --| BannerAlertExampleMsg Examples.BannerAlert.Msg
-      --| ClickableTextExampleMsg Examples.ClickableText.Msg
-      --| CheckboxExampleMsg Examples.Checkbox.Msg
-      --| DropdownMsg Examples.Dropdown.Msg
-      --| SegmentedControlMsg Examples.SegmentedControl.Msg
-      --| SelectMsg Examples.Select.Msg
-      --| TableExampleMsg Examples.Table.Msg
-      --| TextAreaExampleMsg TextAreaExample.Msg
-      --| TextInputExampleMsg TextInputExample.Msg
-      --| DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg
-      --| ModalExampleMsg Examples.Modal.Msg
-      --| SlideModalExampleMsg Examples.SlideModal.Msg
-      --| SlideExampleMsg Examples.Slide.Msg
-      --| SortableTableMsg Examples.SortableTable.Msg
-      --| SvgMsg Examples.Svg.Msg
-      --| ClickableSvgMsg Examples.ClickableSvg.Msg
-      --| TabsExampleMsg Examples.Tabs.Tab
-      --| TooltipExampleMsg Examples.Tooltip.Msg
-    | ShowItWorked String String
-    | NoOp
+    = AccordionMsg Accordion.Msg
+    | ButtonMsg Button.Msg
 
 
 update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg )
-update outsideMsg moduleStates =
-    case outsideMsg of
-        ComponentMsg accessor updater msg ->
+update msg moduleStates =
+    let
+        updateWith accessor updater wrapMsg childMsg =
             let
                 module_ =
                     accessor moduleStates
 
                 ( newState, cmd ) =
-                    module_.update msg module_.state
+                    module_.update childMsg module_.state
             in
             ( updater { module_ | state = newState } moduleStates
-            , Cmd.map (ComponentMsg accessor updater) cmd
+            , Cmd.map wrapMsg cmd
             )
+    in
+    case msg of
+        AccordionMsg exampleMsg ->
+            updateWith .accordion (\state m -> { m | accordion = state }) AccordionMsg exampleMsg
 
-        --ButtonExampleMsg msg ->
-        --    let
-        --        ( buttonExampleState, cmd ) =
-        --            Examples.Button.update msg moduleStates.buttonExampleState
-        --    in
-        --    ( { moduleStates | buttonExampleState = buttonExampleState }
-        --    , Cmd.map ButtonExampleMsg cmd
-        --    )
-        --BannerAlertExampleMsg msg ->
-        --    ( { moduleStates
-        --        | bannerAlertExampleState =
-        --            Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState
-        --      }
-        --    , Cmd.none
-        --    )
-        --ClickableTextExampleMsg msg ->
-        --    let
-        --        ( clickableTextExampleState, cmd ) =
-        --            Examples.ClickableText.update msg moduleStates.clickableTextExampleState
-        --    in
-        --    ( { moduleStates | clickableTextExampleState = clickableTextExampleState }
-        --    , Cmd.map ClickableTextExampleMsg cmd
-        --    )
-        --CheckboxExampleMsg msg ->
-        --    let
-        --        ( checkboxExampleState, cmd ) =
-        --            Examples.Checkbox.update msg moduleStates.checkboxExampleState
-        --    in
-        --    ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd )
-        --DropdownMsg msg ->
-        --    let
-        --        ( dropdownState, cmd ) =
-        --            Examples.Dropdown.update msg moduleStates.dropdownState
-        --    in
-        --    ( { moduleStates | dropdownState = dropdownState }
-        --    , Cmd.map DropdownMsg cmd
-        --    )
-        --SegmentedControlMsg msg ->
-        --    let
-        --        ( segmentedControlState, cmd ) =
-        --            Examples.SegmentedControl.update msg moduleStates.segmentedControlState
-        --    in
-        --    ( { moduleStates | segmentedControlState = segmentedControlState }
-        --    , Cmd.map SegmentedControlMsg cmd
-        --    )
-        --SelectMsg msg ->
-        --    let
-        --        ( selectState, cmd ) =
-        --            Examples.Select.update msg moduleStates.selectState
-        --    in
-        --    ( { moduleStates | selectState = selectState }
-        --    , Cmd.map SelectMsg cmd
-        --    )
-        --SvgMsg msg ->
-        --    let
-        --        ( svgState, cmd ) =
-        --            Examples.Svg.update msg moduleStates.svgState
-        --    in
-        --    ( { moduleStates | svgState = svgState }
-        --    , Cmd.map SvgMsg cmd
-        --    )
-        --ClickableSvgMsg msg ->
-        --    let
-        --        ( clickableSvgState, cmd ) =
-        --            Examples.ClickableSvg.update msg moduleStates.clickableSvgState
-        --    in
-        --    ( { moduleStates | clickableSvgState = clickableSvgState }
-        --    , Cmd.map ClickableSvgMsg cmd
-        --    )
-        --TableExampleMsg msg ->
-        --    let
-        --        ( tableExampleState, cmd ) =
-        --            Examples.Table.update msg moduleStates.tableExampleState
-        --    in
-        --    ( { moduleStates | tableExampleState = tableExampleState }
-        --    , Cmd.map TableExampleMsg cmd
-        --    )
-        --TextAreaExampleMsg msg ->
-        --    let
-        --        ( textAreaExampleState, cmd ) =
-        --            TextAreaExample.update msg moduleStates.textAreaExampleState
-        --    in
-        --    ( { moduleStates | textAreaExampleState = textAreaExampleState }
-        --    , Cmd.map TextAreaExampleMsg cmd
-        --    )
-        --TextInputExampleMsg msg ->
-        --    let
-        --        ( textInputExampleState, cmd ) =
-        --            TextInputExample.update msg moduleStates.textInputExampleState
-        --    in
-        --    ( { moduleStates | textInputExampleState = textInputExampleState }
-        --    , Cmd.map TextInputExampleMsg cmd
-        --    )
-        --DisclosureIndicatorExampleMsg msg ->
-        --    let
-        --        ( disclosureIndicatorExampleState, cmd ) =
-        --            Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState
-        --    in
-        --    ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState }
-        --    , Cmd.map DisclosureIndicatorExampleMsg cmd
-        --    )
-        --ModalExampleMsg msg ->
-        --    let
-        --        ( modalExampleState, cmd ) =
-        --            Examples.Modal.update msg moduleStates.modalExampleState
-        --    in
-        --    ( { moduleStates | modalExampleState = modalExampleState }
-        --    , Cmd.map ModalExampleMsg cmd
-        --    )
-        --SlideModalExampleMsg msg ->
-        --    let
-        --        ( slideModalExampleState, cmd ) =
-        --            Examples.SlideModal.update msg moduleStates.slideModalExampleState
-        --    in
-        --    ( { moduleStates | slideModalExampleState = slideModalExampleState }
-        --    , Cmd.map SlideModalExampleMsg cmd
-        --    )
-        --SlideExampleMsg msg ->
-        --    let
-        --        ( slideExampleState, cmd ) =
-        --            Examples.Slide.update msg moduleStates.slideExampleState
-        --    in
-        --    ( { moduleStates | slideExampleState = slideExampleState }
-        --    , Cmd.map SlideExampleMsg cmd
-        --    )
-        --SortableTableMsg msg ->
-        --    let
-        --        ( sortableTableState, cmd ) =
-        --            Examples.SortableTable.update msg moduleStates.sortableTableState
-        --    in
-        --    ( { moduleStates | sortableTableState = sortableTableState }
-        --    , Cmd.map SortableTableMsg cmd
-        --    )
-        --TabsExampleMsg tab ->
-        --    ( { moduleStates | tabsExampleState = tab }
-        --    , Cmd.none
-        --    )
-        --TooltipExampleMsg msg ->
-        --    let
-        --        newState =
-        --            Examples.Tooltip.update msg moduleStates.tooltipExampleState
-        --    in
-        --    ( { moduleStates
-        --        | tooltipExampleState = newState
-        --      }
-        --    , Cmd.none
-        --    )
-        ShowItWorked group message ->
-            let
-                _ =
-                    Debug.log group message
-            in
-            ( moduleStates, Cmd.none )
-
-        NoOp ->
-            ( moduleStates, Cmd.none )
+        ButtonMsg exampleMsg ->
+            updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg
 
 
-subscriptions : ModuleStates -> Sub Msg
 subscriptions moduleStates =
     Sub.batch
         [-- Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState)
@@ -327,69 +155,14 @@ subscriptions moduleStates =
 {-| -}
 view : ModuleStates -> List (ModuleExample Msg)
 view moduleStates =
-    [ { name = moduleStates.accordion.name
-      , categories = Set.fromList Category.sorter moduleStates.accordion.categories
-      , content =
-            List.map (Html.map (ComponentMsg .accordion (\state m -> { m | accordion = state })))
-                (moduleStates.accordion.view moduleStates.accordion.state)
-      }
+    [ viewExample moduleStates.accordion AccordionMsg
+    , viewExample moduleStates.button ButtonMsg
     ]
 
 
-
---let
---            accordion =
---                moduleStates.accordion
---            ( newState, cmd ) =
---                accordion.update msg accordion.state
---        in
---        ( { moduleStates | accordion = { accordion | state = newState } }
---        , Cmd.map ComponentMsg cmd
---        )
-
-
-nriThemedModules : ModuleStates -> List (ModuleExample Msg)
-nriThemedModules model =
-    [--Examples.Alert.example
-     --Examples.Accordion.example AccordionExampleMsg model.accordion.state
-     --, Examples.AssignmentIcon.example
-     --, Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState
-     --, Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState
-     --, Examples.Callout.example
-     --, Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState
-     --, Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState
-     --, Examples.Colors.example
-     --, Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState
-     --, Examples.Dropdown.example DropdownMsg model.dropdownState
-     --, Examples.Fonts.example
-     --, Examples.Heading.example
-     --, Examples.Icon.example
-     --, Examples.Logo.example
-     --, Examples.MasteryIcon.example
-     --, Examples.Modal.example ModalExampleMsg model.modalExampleState
-     --, Examples.Page.example NoOp
-     --, Examples.Pennant.example
-     --, Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState
-     --, Examples.Select.example SelectMsg model.selectState
-     --, Examples.Slide.example SlideExampleMsg model.slideExampleState
-     --, Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState
-     --, Examples.SortableTable.example SortableTableMsg model.sortableTableState
-     --, Examples.Svg.example (exampleMessages SvgMsg) model.svgState
-     --, Examples.ClickableSvg.example (exampleMessages ClickableSvgMsg) model.clickableSvgState
-     --, Examples.Table.example TableExampleMsg model.tableExampleState
-     --, Examples.Tabs.example TabsExampleMsg model.tabsExampleState
-     --, Examples.Text.example
-     --, Examples.Text.Writing.example
-     --, Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState
-     --, Examples.UiIcon.example
-     --, TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState
-     --, TextInputExample.example TextInputExampleMsg model.textInputExampleState
-    ]
-
-
-exampleMessages : (msg -> Msg) -> String -> ModuleExample.ModuleMessages msg Msg
-exampleMessages exampleMessageWrapper exampleName =
-    { noOp = NoOp
-    , showItWorked = ShowItWorked exampleName
-    , wrapper = exampleMessageWrapper
+viewExample : Example state msg -> (msg -> Msg) -> ModuleExample Msg
+viewExample example wrapperMsg =
+    { name = example.name
+    , categories = Set.fromList Category.sorter example.categories
+    , content = List.map (Html.map wrapperMsg) (example.view example.state)
     }

styleguide-app/Examples/Button.elm

@@ -1,8 +1,12 @@
-module Examples.Button exposing (Msg, State, example, init, update)
+module Examples.Button exposing
+    ( Msg, State, init, update
+    , example_
+    )
 
 {-|
 
 @docs Msg, State, example, init, update
+@docs example_
 
 -}
 
@@ -19,9 +23,18 @@ import Nri.Ui.UiIcon.V1 as UiIcon
 import Sort.Set as Set exposing (Set)
 
 
+example_ =
+    { name = "Nri.Ui.Button.V10"
+    , state = init
+    , update = update
+    , view = \state -> [ viewButtonExamples state ]
+    , categories = [ Buttons ]
+    }
+
+
 {-| -}
-type State parentMsg
-    = State (Control (Model parentMsg))
+type State
+    = State (Control Model)
 
 
 {-| -}
@@ -30,35 +43,44 @@ type ButtonType
     | Link
 
 
-{-| -}
-example :
-    (String -> ModuleMessages (Msg parentMsg) parentMsg)
-    -> State parentMsg
-    -> ModuleExample parentMsg
-example unnamedMessages state =
-    let
-        messages =
-            unnamedMessages "ButtonExample"
-    in
-    { name = "Nri.Ui.Button.V10"
-    , categories = Set.fromList Category.sorter <| List.singleton Buttons
-    , content = [ viewButtonExamples messages state ]
-    }
+
+--{-| -}
+--example :
+--    (String -> ModuleMessages (Msg parentMsg) parentMsg)
+--    -> State parentMsg
+--    -> ModuleExample parentMsg
+--example unnamedMessages state =
+--    let
+--        messages =
+--            unnamedMessages "ButtonExample"
+--    in
+--    { name = "Nri.Ui.Button.V10"
+--    , categories = Set.fromList Category.sorter <| List.singleton Buttons
+--    , content = [ viewButtonExamples messages state ]
+--    }
 
 
 {-| -}
-type Msg parentMsg
-    = SetState (State parentMsg)
+type Msg
+    = SetState State
+    | ShowItWorked String String
     | NoOp
 
 
 {-| -}
-update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) )
+update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
         SetState newState ->
             ( newState, Cmd.none )
 
+        ShowItWorked group message ->
+            let
+                _ =
+                    Debug.log group message
+            in
+            ( state, Cmd.none )
+
         NoOp ->
             ( state, Cmd.none )
 
@@ -67,17 +89,17 @@ update msg state =
 -- INTERNAL
 
 
-type alias Model msg =
+type alias Model =
     { label : String
     , icon : Maybe Svg
     , buttonType : ButtonType
-    , width : Button.Attribute msg
-    , state : Button.Attribute msg
+    , width : Button.Attribute Msg
+    , state : Button.Attribute Msg
     }
 
 
 {-| -}
-init : State msg
+init : State
 init =
     Control.record Model
         |> Control.field "label" (Control.string "Label")
@@ -119,40 +141,34 @@ iconChoice =
         ]
 
 
-viewButtonExamples :
-    ModuleMessages (Msg parentMsg) parentMsg
-    -> State parentMsg
-    -> Html parentMsg
-viewButtonExamples messages (State control) =
+viewButtonExamples : State -> Html Msg
+viewButtonExamples (State control) =
     let
         model =
             Control.currentValue control
     in
-    [ Control.view (State >> SetState >> messages.wrapper) control
+    [ Control.view (State >> SetState) control
         |> fromUnstyled
-    , buttons messages model
-    , toggleButtons messages
+    , buttons model
+    , toggleButtons
     , Button.delete
         { label = "Delete Something"
-        , onClick = messages.showItWorked "delete"
+        , onClick = ShowItWorked "ButtonExample" "delete"
         }
     , Button.link "linkExternalWithTracking"
         [ Button.unboundedWidth
         , Button.secondary
         , Button.linkExternalWithTracking
             { url = "#"
-            , track = messages.showItWorked "linkExternalWithTracking clicked"
+            , track = ShowItWorked "ButtonExample" "linkExternalWithTracking clicked"
             }
         ]
     ]
         |> div []
 
 
-buttons :
-    ModuleMessages (Msg parentMsg) parentMsg
-    -> Model parentMsg
-    -> Html parentMsg
-buttons messages model =
+buttons : Model -> Html Msg
+buttons model =
     let
         sizes =
             [ ( Button.small, "small" )
@@ -195,7 +211,7 @@ buttons messages model =
                 , model.width
                 , model.state
                 , Button.custom [ Html.Styled.Attributes.class "styleguide-button" ]
-                , Button.onClick (messages.showItWorked "Button clicked!")
+                , Button.onClick (ShowItWorked "ButtonExample" "Button clicked!")
                 , case model.icon of
                     Just icon ->
                         Button.icon icon
@@ -221,20 +237,20 @@ buttons messages model =
         |> table []
 
 
-toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg
-toggleButtons messages =
+toggleButtons : Html Msg
+toggleButtons =
     div []
         [ Heading.h3 [] [ text "Button toggle" ]
         , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
             [ Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = False
                 }
             , Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = True
                 }