Merge pull request #488 from NoRedInk/tessa/refactor-styleguide-percy

Tessa/refactor styleguide percy

styleguide-app/Example.elm

@@ -0,0 +1,120 @@
+module Example exposing (Example, view, wrapMsg, wrapState)
+
+import Category exposing (Category)
+import Css exposing (..)
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attributes
+import Nri.Ui.Colors.V1 exposing (..)
+import Sort.Set as Set exposing (Set)
+
+
+type alias Example state msg =
+    { name : String
+    , state : state
+    , update : msg -> state -> ( state, Cmd msg )
+    , subscriptions : state -> Sub msg
+    , view : state -> List (Html msg)
+    , categories : List Category
+    }
+
+
+wrapMsg :
+    (msg -> msg2)
+    -> (msg2 -> Maybe msg)
+    -> Example state msg
+    -> Example state msg2
+wrapMsg 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
+    }
+
+
+wrapState :
+    (state -> state2)
+    -> (state2 -> Maybe state)
+    -> Example state msg
+    -> Example state2 msg
+wrapState wrapState_ unwrapState example =
+    { name = example.name
+    , state = wrapState_ example.state
+    , update =
+        \msg state2 ->
+            case unwrapState state2 of
+                Just state ->
+                    example.update msg state
+                        |> Tuple.mapFirst wrapState_
+
+                Nothing ->
+                    ( state2, Cmd.none )
+    , subscriptions =
+        unwrapState
+            >> Maybe.map example.subscriptions
+            >> Maybe.withDefault Sub.none
+    , view =
+        unwrapState
+            >> Maybe.map example.view
+            >> Maybe.withDefault []
+    , categories = example.categories
+    }
+
+
+view : Bool -> Example state msg -> Html msg
+view showFocusLink example =
+    Html.div
+        [ -- this class makes the axe accessibility checking output easier to parse
+          String.replace "." "-" example.name
+            |> (++) "module-example__"
+            |> Attributes.class
+        ]
+        [ Html.div
+            [ Attributes.css
+                [ displayFlex
+                , alignItems center
+                , justifyContent flexStart
+                , flexWrap Css.wrap
+                , padding (px 4)
+                , backgroundColor glacier
+                ]
+            ]
+            [ Html.styled Html.h2
+                [ color gray20
+                , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ]
+                , fontSize (px 20)
+                , marginTop zero
+                , marginBottom zero
+                ]
+                []
+                [ Html.text example.name ]
+            , String.replace "." "-" example.name
+                |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
+                |> viewLink "view docs"
+            , if showFocusLink then
+                viewLink "see only this" ("#/doodad/" ++ example.name)
+
+              else
+                Html.text ""
+            ]
+        , Html.div [ Attributes.css [ padding2 (px 20) zero ] ] (example.view example.state)
+        ]
+
+
+viewLink : String -> String -> Html msg
+viewLink text href =
+    Html.a
+        [ Attributes.href href
+        , Attributes.css [ Css.display Css.block, marginLeft (px 20) ]
+        ]
+        [ Html.text text
+        ]

styleguide-app/Examples.elm

@@ -0,0 +1,762 @@
+module Examples exposing (Msg, State, all)
+
+import Example exposing (Example)
+import Examples.Accordion as Accordion
+import Examples.Alert as Alert
+import Examples.AssignmentIcon as AssignmentIcon
+import Examples.BannerAlert as BannerAlert
+import Examples.Button as Button
+import Examples.Callout as Callout
+import Examples.Checkbox as Checkbox
+import Examples.ClickableSvg as ClickableSvg
+import Examples.ClickableText as ClickableText
+import Examples.Colors as Colors
+import Examples.DisclosureIndicator as DisclosureIndicator
+import Examples.Dropdown as Dropdown
+import Examples.Fonts as Fonts
+import Examples.Heading as Heading
+import Examples.Icon as Icon
+import Examples.Logo as Logo
+import Examples.MasteryIcon as MasteryIcon
+import Examples.Modal as Modal
+import Examples.Page as Page
+import Examples.Pennant as Pennant
+import Examples.SegmentedControl as SegmentedControl
+import Examples.Select as Select
+import Examples.Slide as Slide
+import Examples.SlideModal as SlideModal
+import Examples.SortableTable as SortableTable
+import Examples.Svg as Svg
+import Examples.Table as Table
+import Examples.Tabs as Tabs
+import Examples.Text as Text
+import Examples.Text.Writing as Writing
+import Examples.TextArea as TextArea
+import Examples.TextInput as TextInput
+import Examples.Tooltip as Tooltip
+import Examples.UiIcon as UiIcon
+
+
+all : List (Example State Msg)
+all =
+    [ Accordion.example
+        |> Example.wrapMsg AccordionMsg
+            (\msg ->
+                case msg of
+                    AccordionMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState AccordionState
+            (\msg ->
+                case msg of
+                    AccordionState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Alert.example
+        |> Example.wrapMsg AlertMsg
+            (\msg ->
+                case msg of
+                    AlertMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState AlertState
+            (\msg ->
+                case msg of
+                    AlertState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , AssignmentIcon.example
+        |> Example.wrapMsg AssignmentIconMsg
+            (\msg ->
+                case msg of
+                    AssignmentIconMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState AssignmentIconState
+            (\msg ->
+                case msg of
+                    AssignmentIconState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , BannerAlert.example
+        |> Example.wrapMsg BannerAlertMsg
+            (\msg ->
+                case msg of
+                    BannerAlertMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState BannerAlertState
+            (\msg ->
+                case msg of
+                    BannerAlertState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Button.example
+        |> Example.wrapMsg ButtonMsg
+            (\msg ->
+                case msg of
+                    ButtonMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ButtonState
+            (\msg ->
+                case msg of
+                    ButtonState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Callout.example
+        |> Example.wrapMsg CalloutMsg
+            (\msg ->
+                case msg of
+                    CalloutMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState CalloutState
+            (\msg ->
+                case msg of
+                    CalloutState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Checkbox.example
+        |> Example.wrapMsg CheckboxMsg
+            (\msg ->
+                case msg of
+                    CheckboxMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState CheckboxState
+            (\msg ->
+                case msg of
+                    CheckboxState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , ClickableSvg.example
+        |> Example.wrapMsg ClickableSvgMsg
+            (\msg ->
+                case msg of
+                    ClickableSvgMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ClickableSvgState
+            (\msg ->
+                case msg of
+                    ClickableSvgState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , ClickableText.example
+        |> Example.wrapMsg ClickableTextMsg
+            (\msg ->
+                case msg of
+                    ClickableTextMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ClickableTextState
+            (\msg ->
+                case msg of
+                    ClickableTextState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Colors.example
+        |> Example.wrapMsg ColorsMsg
+            (\msg ->
+                case msg of
+                    ColorsMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ColorsState
+            (\msg ->
+                case msg of
+                    ColorsState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , DisclosureIndicator.example
+        |> Example.wrapMsg DisclosureIndicatorMsg
+            (\msg ->
+                case msg of
+                    DisclosureIndicatorMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState DisclosureIndicatorState
+            (\msg ->
+                case msg of
+                    DisclosureIndicatorState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Dropdown.example
+        |> Example.wrapMsg DropdownMsg
+            (\msg ->
+                case msg of
+                    DropdownMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState DropdownState
+            (\msg ->
+                case msg of
+                    DropdownState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Fonts.example
+        |> Example.wrapMsg FontsMsg
+            (\msg ->
+                case msg of
+                    FontsMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState FontsState
+            (\msg ->
+                case msg of
+                    FontsState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Heading.example
+        |> Example.wrapMsg HeadingMsg
+            (\msg ->
+                case msg of
+                    HeadingMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState HeadingState
+            (\msg ->
+                case msg of
+                    HeadingState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Icon.example
+        |> Example.wrapMsg IconMsg
+            (\msg ->
+                case msg of
+                    IconMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState IconState
+            (\msg ->
+                case msg of
+                    IconState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Logo.example
+        |> Example.wrapMsg LogoMsg
+            (\msg ->
+                case msg of
+                    LogoMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState LogoState
+            (\msg ->
+                case msg of
+                    LogoState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , MasteryIcon.example
+        |> Example.wrapMsg MasteryIconMsg
+            (\msg ->
+                case msg of
+                    MasteryIconMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState MasteryIconState
+            (\msg ->
+                case msg of
+                    MasteryIconState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Modal.example
+        |> Example.wrapMsg ModalMsg
+            (\msg ->
+                case msg of
+                    ModalMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState ModalState
+            (\msg ->
+                case msg of
+                    ModalState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Page.example
+        |> Example.wrapMsg PageMsg
+            (\msg ->
+                case msg of
+                    PageMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState PageState
+            (\msg ->
+                case msg of
+                    PageState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Pennant.example
+        |> Example.wrapMsg PennantMsg
+            (\msg ->
+                case msg of
+                    PennantMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState PennantState
+            (\msg ->
+                case msg of
+                    PennantState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , SegmentedControl.example
+        |> Example.wrapMsg SegmentedControlMsg
+            (\msg ->
+                case msg of
+                    SegmentedControlMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SegmentedControlState
+            (\msg ->
+                case msg of
+                    SegmentedControlState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Select.example
+        |> Example.wrapMsg SelectMsg
+            (\msg ->
+                case msg of
+                    SelectMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SelectState
+            (\msg ->
+                case msg of
+                    SelectState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Slide.example
+        |> Example.wrapMsg SlideMsg
+            (\msg ->
+                case msg of
+                    SlideMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SlideState
+            (\msg ->
+                case msg of
+                    SlideState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , SlideModal.example
+        |> Example.wrapMsg SlideModalMsg
+            (\msg ->
+                case msg of
+                    SlideModalMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SlideModalState
+            (\msg ->
+                case msg of
+                    SlideModalState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , SortableTable.example
+        |> Example.wrapMsg SortableTableMsg
+            (\msg ->
+                case msg of
+                    SortableTableMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SortableTableState
+            (\msg ->
+                case msg of
+                    SortableTableState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Svg.example
+        |> Example.wrapMsg SvgMsg
+            (\msg ->
+                case msg of
+                    SvgMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState SvgState
+            (\msg ->
+                case msg of
+                    SvgState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Table.example
+        |> Example.wrapMsg TableMsg
+            (\msg ->
+                case msg of
+                    TableMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TableState
+            (\msg ->
+                case msg of
+                    TableState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Tabs.example
+        |> Example.wrapMsg TabsMsg
+            (\msg ->
+                case msg of
+                    TabsMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TabsState
+            (\msg ->
+                case msg of
+                    TabsState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Text.example
+        |> Example.wrapMsg TextMsg
+            (\msg ->
+                case msg of
+                    TextMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TextState
+            (\msg ->
+                case msg of
+                    TextState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Writing.example
+        |> Example.wrapMsg WritingMsg
+            (\msg ->
+                case msg of
+                    WritingMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState WritingState
+            (\msg ->
+                case msg of
+                    WritingState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , TextArea.example
+        |> Example.wrapMsg TextAreaMsg
+            (\msg ->
+                case msg of
+                    TextAreaMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TextAreaState
+            (\msg ->
+                case msg of
+                    TextAreaState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , TextInput.example
+        |> Example.wrapMsg TextInputMsg
+            (\msg ->
+                case msg of
+                    TextInputMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TextInputState
+            (\msg ->
+                case msg of
+                    TextInputState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , Tooltip.example
+        |> Example.wrapMsg TooltipMsg
+            (\msg ->
+                case msg of
+                    TooltipMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState TooltipState
+            (\msg ->
+                case msg of
+                    TooltipState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    , UiIcon.example
+        |> Example.wrapMsg UiIconMsg
+            (\msg ->
+                case msg of
+                    UiIconMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState UiIconState
+            (\msg ->
+                case msg of
+                    UiIconState childState ->
+                        Just childState
+
+                    _ ->
+                        Nothing
+            )
+    ]
+
+
+type State
+    = AccordionState Accordion.State
+    | AlertState Alert.State
+    | AssignmentIconState AssignmentIcon.State
+    | BannerAlertState BannerAlert.State
+    | ButtonState Button.State
+    | CalloutState Callout.State
+    | CheckboxState Checkbox.State
+    | ClickableSvgState ClickableSvg.State
+    | ClickableTextState ClickableText.State
+    | ColorsState Colors.State
+    | DisclosureIndicatorState DisclosureIndicator.State
+    | DropdownState Dropdown.State
+    | FontsState Fonts.State
+    | HeadingState Heading.State
+    | IconState Icon.State
+    | LogoState Logo.State
+    | MasteryIconState MasteryIcon.State
+    | ModalState Modal.State
+    | PageState Page.State
+    | PennantState Pennant.State
+    | SegmentedControlState SegmentedControl.State
+    | SelectState Select.State
+    | SlideState Slide.State
+    | SlideModalState SlideModal.State
+    | SortableTableState SortableTable.State
+    | SvgState Svg.State
+    | TableState Table.State
+    | TabsState Tabs.State
+    | TextState Text.State
+    | TextAreaState TextArea.State
+    | TextInputState TextInput.State
+    | TooltipState Tooltip.State
+    | UiIconState UiIcon.State
+    | WritingState Writing.State
+
+
+type Msg
+    = AccordionMsg Accordion.Msg
+    | AlertMsg Alert.Msg
+    | AssignmentIconMsg AssignmentIcon.Msg
+    | BannerAlertMsg BannerAlert.Msg
+    | ButtonMsg Button.Msg
+    | CalloutMsg Callout.Msg
+    | CheckboxMsg Checkbox.Msg
+    | ClickableSvgMsg ClickableSvg.Msg
+    | ClickableTextMsg ClickableText.Msg
+    | ColorsMsg Colors.Msg
+    | DisclosureIndicatorMsg DisclosureIndicator.Msg
+    | DropdownMsg Dropdown.Msg
+    | FontsMsg Fonts.Msg
+    | HeadingMsg Heading.Msg
+    | IconMsg Icon.Msg
+    | LogoMsg Logo.Msg
+    | MasteryIconMsg MasteryIcon.Msg
+    | ModalMsg Modal.Msg
+    | PageMsg Page.Msg
+    | PennantMsg Pennant.Msg
+    | SegmentedControlMsg SegmentedControl.Msg
+    | SelectMsg Select.Msg
+    | SlideMsg Slide.Msg
+    | SlideModalMsg SlideModal.Msg
+    | SortableTableMsg SortableTable.Msg
+    | SvgMsg Svg.Msg
+    | TableMsg Table.Msg
+    | TabsMsg Tabs.Msg
+    | TextMsg Text.Msg
+    | TextAreaMsg TextArea.Msg
+    | TextInputMsg TextInput.Msg
+    | TooltipMsg Tooltip.Msg
+    | UiIconMsg UiIcon.Msg
+    | WritingMsg Writing.Msg

styleguide-app/Examples/Accordion.elm

@@ -1,34 +1,43 @@
 module Examples.Accordion exposing
     ( example
-    , Msg, State, init, update
+    , State, Msg
     )
 
 {-|
 
-@docs example, styles
+@docs example
+@docs State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css exposing (..)
 import Dict exposing (Dict)
-import Html.Styled as Html
+import Example exposing (Example)
+import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Accordion.V1 as Accordion
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Text.V4 as Text
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage model =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Accordion.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Layout
-    , content =
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = view
+    , categories = [ Layout ]
+    }
+
+
+{-| -}
+view : State -> List (Html Msg)
+view model =
     [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ]
     , Accordion.view
         { entries =
@@ -104,8 +113,6 @@ example parentMessage model =
         , caret = Accordion.DefaultCaret
         }
     ]
-            |> List.map (Html.map parentMessage)
-    }
 
 
 type Msg
@@ -130,6 +137,6 @@ type alias State =
 
 
 {-| -}
-update : Msg -> State -> State
+update : Msg -> State -> ( State, Cmd Msg )
 update (Toggle id toExpanded) model =
-    Dict.insert id toExpanded model
+    ( Dict.insert id toExpanded model, Cmd.none )

styleguide-app/Examples/Alert.elm

@@ -1,24 +1,37 @@
-module Examples.Alert exposing (example)
+module Examples.Alert exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Alert.V4 as Alert
 import Nri.Ui.Heading.V2 as Heading
-import Sort.Set as Set exposing (Set)
 
 
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Alert.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Messaging
-    , content =
+    , categories = [ Messaging ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ Heading.h3 [] [ Html.text "Markdown-supporting:" ]
             , Alert.error "This is an **error**"
             , Alert.warning "This is a **warning**"

styleguide-app/Examples/AssignmentIcon.elm

@@ -1,25 +1,38 @@
-module Examples.AssignmentIcon exposing (example)
+module Examples.AssignmentIcon exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon
 import Nri.Ui.Icon.V5 as Icon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.AssignmentIcon.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = [ Icons ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ IconExamples.view "Quiz engine"
                 [ ( "diagnostic", AssignmentIcon.diagnostic )
                 , ( "practice", AssignmentIcon.practice )

styleguide-app/Examples/BannerAlert.elm

@@ -3,28 +3,37 @@ module Examples.BannerAlert exposing (example, State, init, Msg, update)
 {-|
 
 @docs example, State, init, Msg, update
+@docs example_
 
 -}
 
 import Category exposing (Category(..))
 import Css
-import Html.Styled exposing (a, div, h3, pre, text)
+import Example exposing (Example)
+import Html.Styled exposing (Html, a, div, h3, pre, text)
 import Html.Styled.Attributes as Attributes
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.BannerAlert.V6 as BannerAlert
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Pennant.V2 as Pennant
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMsg state =
+{-| -}
+example : Example State Msg
+example =
     { name = "Nri.Ui.BannerAlert.V6"
-    , categories = Set.fromList Category.sorter <| List.singleton Messaging
-    , content =
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = view
+    , categories = [ Messaging ]
+    }
+
+
+view : State -> List (Html Msg)
+view state =
     [ if state.show then
         div
             []
@@ -99,8 +108,6 @@ example parentMsg state =
     """
         ]
     ]
-            |> List.map (Html.Styled.map parentMsg)
-    }
 
 
 type alias State =
@@ -117,11 +124,11 @@ type Msg
     | Dismiss
 
 
-update : Msg -> State -> State
+update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
         NoOp ->
-            state
+            ( state, Cmd.none )
 
         Dismiss ->
-            { state | show = False }
+            ( { state | show = False }, Cmd.none )

styleguide-app/Examples/Button.elm

@@ -1,27 +1,38 @@
-module Examples.Button exposing (Msg, State, example, init, update)
+module Examples.Button exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css exposing (middle, verticalAlign)
 import Debug.Control as Control exposing (Control)
+import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css, id)
-import ModuleExample exposing (ModuleExample, ModuleMessages)
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-type State parentMsg
-    = State (Control (Model parentMsg))
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Button.V10"
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = \state -> [ viewButtonExamples state ]
+    , categories = [ Buttons ]
+    }
+
+
+{-| -}
+type State
+    = State (Control Model)
 
 
 {-| -}
@@ -31,34 +42,26 @@ type ButtonType
 
 
 {-| -}
-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 +70,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 +122,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 +192,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 +218,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
                 }

styleguide-app/Examples/Callout.elm

@@ -1,25 +1,38 @@
-module Examples.Callout exposing (example)
+module Examples.Callout exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (href, title)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Callout.V1 as Callout exposing (callout)
-import Sort.Set as Set exposing (Set)
 
 
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Callout.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Messaging
-    , content =
+    , categories = [ Messaging ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ -- PLAIN
               Html.h3 [] [ Html.text "Originally Designed Use Case" ]
             , callout

styleguide-app/Examples/Checkbox.elm

@@ -1,16 +1,16 @@
-module Examples.Checkbox exposing (Msg, State, example, init, update)
+module Examples.Checkbox exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled as Html exposing (..)
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
 import Nri.Ui.PremiumCheckbox.V6 as PremiumCheckbox
@@ -31,11 +31,14 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Checkbox.V5"
-    , categories = Sort.Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
             , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
             , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
@@ -44,7 +47,7 @@ example parentMessage state =
             , h3 [] [ text "Premium Checkboxes" ]
             , viewPremiumCheckboxes state
             ]
-            |> List.map (Html.map parentMessage)
+    , categories = [ Inputs ]
     }
 
 

styleguide-app/Examples/ClickableSvg.elm

@@ -1,29 +1,19 @@
-module Examples.ClickableSvg exposing
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
+module Examples.ClickableSvg exposing (Msg, State, example)
 
 {-|
 
-@docs Msg
-@docs State
-@docs example
-@docs init
-@docs update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Color exposing (Color)
 import Css
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
-import ModuleExample exposing (ModuleExample, ModuleMessages)
 import Nri.Ui.ClickableSvg.V1 as ClickableSvg
 import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
 import Nri.Ui.Colors.V1 as Colors
@@ -31,23 +21,22 @@ import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V6 as Select
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (String -> ModuleMessages Msg msg) -> State -> ModuleExample msg
-example unnamedMessages state =
-    let
-        parentMessages =
-            unnamedMessages "Nri.Ui.ClickableSvg.V1"
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.ClickableSvg.V1"
-    , categories = Set.fromList Category.sorter [ Buttons, Icons ]
-    , content =
+    , categories = [ Buttons, Icons ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
                 [ ClickableSvg.button "Back"
                     UiIcon.arrowLeft
-                [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ]
+                    [ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ]
                 , viewCode
                     "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
                 ]
@@ -71,7 +60,7 @@ example unnamedMessages state =
                     UiIcon.footsteps
                     [ ClickableSvg.width (Css.px 80)
                     , ClickableSvg.height (Css.px 80)
-                , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!")
+                    , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
                     , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
                     , ClickableSvg.css
                         [ Css.border3 (Css.px 3) Css.dashed Colors.purple
@@ -83,7 +72,7 @@ example unnamedMessages state =
                         UiIcon.footsteps
                         [ ClickableSvg.width (Css.px 80)
                         , ClickableSvg.height (Css.px 80)
-                        , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!")
+                        , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!")
                         , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ]
                         , ClickableSvg.css
                             [ Css.border3 (Css.px 3) Css.dashed Colors.purple
@@ -119,10 +108,16 @@ init =
 
 {-| -}
 type Msg
-    = SetRenderStrategy String
+    = ShowItWorked String
 
 
 {-| -}
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
+    case msg of
+        ShowItWorked message ->
+            let
+                _ =
+                    Debug.log "ClickableSvg" message
+            in
             ( state, Cmd.none )

styleguide-app/Examples/ClickableText.elm

@@ -1,27 +1,21 @@
-module Examples.ClickableText exposing (Msg, State, example, init, update)
+module Examples.ClickableText exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css exposing (middle, verticalAlign)
 import Debug.Control as Control exposing (Control)
+import Example exposing (Example)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css, id)
-import ModuleExample exposing (ModuleExample, ModuleMessages)
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.Text.V4 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
-
-
-{-| -}
-type Msg
-    = SetState State
 
 
 {-| -}
@@ -30,19 +24,14 @@ type State
 
 
 {-| -}
-example :
-    (String -> ModuleMessages Msg parentMsg)
-    -> State
-    -> ModuleExample parentMsg
-example unnamedMessages state =
-    let
-        messages =
-            unnamedMessages "ClickableTextExample"
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.ClickableText.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Buttons
-    , content =
-        [ viewExamples messages state ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = \state -> [ viewExamples state ]
+    , categories = [ Buttons ]
     }
 
 
@@ -62,6 +51,12 @@ init =
         |> State
 
 
+{-| -}
+type Msg
+    = SetState State
+    | ShowItWorked String String
+
+
 {-| -}
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
@@ -69,6 +64,13 @@ update msg state =
         SetState newState ->
             ( newState, Cmd.none )
 
+        ShowItWorked group message ->
+            let
+                _ =
+                    Debug.log group message
+            in
+            ( state, Cmd.none )
+
 
 
 -- INTERNAL
@@ -80,18 +82,15 @@ type alias Model =
     }
 
 
-viewExamples :
-    ModuleMessages Msg parentMsg
-    -> State
-    -> Html parentMsg
-viewExamples messages (State control) =
+viewExamples : State -> Html Msg
+viewExamples (State control) =
     let
         model =
             Control.currentValue control
     in
-    [ Control.view (State >> SetState >> messages.wrapper) control
+    [ Control.view (State >> SetState) control
         |> fromUnstyled
-    , buttons messages model
+    , buttons model
     , Text.smallBody
         [ text "Sometimes, we'll want our clickable links: "
         , ClickableText.link model.label
@@ -102,7 +101,7 @@ viewExamples messages (State control) =
         , text " and clickable buttons: "
         , ClickableText.button model.label
             [ ClickableText.small
-            , ClickableText.onClick (messages.showItWorked "in-line button")
+            , ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
             , Maybe.map ClickableText.icon model.icon
                 |> Maybe.withDefault (ClickableText.custom [])
             ]
@@ -120,11 +119,8 @@ sizes =
     ]
 
 
-buttons :
-    ModuleMessages Msg parentMsg
-    -> Model
-    -> Html parentMsg
-buttons messages model =
+buttons : Model -> Html Msg
+buttons model =
     let
         sizeRow label render =
             row label (List.map render sizes)
@@ -144,7 +140,7 @@ buttons messages model =
             (\( size, sizeLabel ) ->
                 ClickableText.button model.label
                     [ size
-                    , ClickableText.onClick (messages.showItWorked sizeLabel)
+                    , ClickableText.onClick (ShowItWorked "ClickableText" sizeLabel)
                     , Maybe.map ClickableText.icon model.icon
                         |> Maybe.withDefault (ClickableText.custom [])
                     ]

styleguide-app/Examples/Colors.elm

@@ -1,32 +1,45 @@
-module Examples.Colors exposing (example)
+module Examples.Colors exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Color exposing (highContrast)
 import Css
+import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
-import Sort.Set as Set exposing (Set)
 
 
 type alias ColorExample =
     ( String, Css.Color, String )
 
 
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Colors.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Colors
-    , content =
+    , categories = List.singleton Colors
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ [ ( "gray20", Colors.gray20, "Main text" )
               , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
               , ( "gray75", Colors.gray75, "Border of form elements and tabs" )

styleguide-app/Examples/DisclosureIndicator.elm

@@ -1,22 +1,21 @@
-module Examples.DisclosureIndicator exposing (Msg, State, example, init, update)
+module Examples.DisclosureIndicator exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (css)
 import Html.Styled.Events exposing (onClick)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V8 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
 import Nri.Ui.Text.V2 as Text
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -27,11 +26,15 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.DisclosureIndicator.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
+    , categories = [ Widgets ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
             , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
                 [ toggleButton ToggleLarge "Toggle large indicator"
@@ -46,7 +49,6 @@ example parentMessage state =
                 , Html.text "I'm a 15px caret icon."
                 ]
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/Dropdown.elm

@@ -1,21 +1,15 @@
-module Examples.Dropdown exposing (Msg, State, Value, example, init, update)
+module Examples.Dropdown exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, Value, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Dropdown.V2
-import Sort.Set as Set exposing (Set)
-
-
-{-| -}
-type alias Value =
-    String
 
 
 {-| -}
@@ -24,23 +18,27 @@ type Msg
 
 
 {-| -}
-type alias State value =
-    List (Nri.Ui.Dropdown.V2.ViewOptionEntry value)
+type alias State =
+    List (Nri.Ui.Dropdown.V2.ViewOptionEntry String)
 
 
 {-| -}
-example : (Msg -> msg) -> State Value -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Dropdown.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Html.Styled.map parentMessage (Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog)
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog
             ]
+    , categories = [ Inputs ]
     }
 
 
 {-| -}
-init : State Value
+init : State
 init =
     [ { isSelected = False, val = "Burrito", displayText = "Burrito" }
     , { isSelected = False, val = "Nacho", displayText = "Nacho" }
@@ -49,7 +47,7 @@ init =
 
 
 {-| -}
-update : Msg -> State Value -> ( State Value, Cmd Msg )
+update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
         ConsoleLog message ->

styleguide-app/Examples/Fonts.elm

@@ -1,26 +1,39 @@
-module Examples.Fonts exposing (example)
+module Examples.Fonts exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Fonts.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Text
-    , content =
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ Heading.h3 [] [ Html.text "baseFont" ]
             , Html.p [ css [ Fonts.baseFont ] ]
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]

styleguide-app/Examples/Heading.elm

@@ -1,26 +1,39 @@
-module Examples.Heading exposing (example)
+module Examples.Heading exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Heading.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Text
-    , content =
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ Heading.h1 [] [ Html.text "This is the main page heading." ]
             , Heading.h2 [] [ Html.text "This is a tagline" ]
             , Heading.h3 [] [ Html.text "This is a subHeading" ]

styleguide-app/Examples/Icon.elm

@@ -1,31 +1,44 @@
-module Examples.Icon exposing (example)
+module Examples.Icon exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
 import Css.Global
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.AssetPath as AssetPath exposing (Asset(..))
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Icon.V5 as Icon
 import Nri.Ui.Text.V4 as Text
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Icon.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ viewLarge "Bulbs and Tips"
                 [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" }
                 ]

styleguide-app/Examples/Logo.elm

@@ -1,26 +1,39 @@
-module Examples.Logo exposing (example)
+module Examples.Logo exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Logo.V1 as Logo
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Logo.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ IconExamples.viewWithCustomStyles "NRI"
                 [ ( "noredink"
                   , Logo.noredink

styleguide-app/Examples/MasteryIcon.elm

@@ -1,25 +1,38 @@
-module Examples.MasteryIcon exposing (example)
+module Examples.MasteryIcon exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.MasteryIcon.V1 as MasteryIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.MasteryIcon.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ IconExamples.view "Levels"
                 [ ( "levelZero", MasteryIcon.levelZero )
                 , ( "levelOne", MasteryIcon.levelOne )

styleguide-app/Examples/Modal.elm

@@ -1,8 +1,8 @@
-module Examples.Modal exposing (Msg, State, example, init, update, subscriptions)
+module Examples.Modal exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update, subscriptions
+@docs Msg, State, example
 
 -}
 
@@ -10,16 +10,15 @@ import Accessibility.Styled as Html exposing (Html, div, h3, h4, p, span, text)
 import Category exposing (Category(..))
 import Css exposing (..)
 import Css.Global
+import Example exposing (Example)
 import Html as Root
 import Html.Styled.Attributes as Attributes
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Modal.V8 as Modal
 import Nri.Ui.Text.V4 as Text
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -50,11 +49,15 @@ init =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Modal.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
-    , content =
+    , categories = [ Modals ]
+    , state = init
+    , update = update
+    , subscriptions = subscriptions
+    , view =
+        \state ->
             [ viewSettings state
             , Button.button "Launch Info Modal"
                 [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal"))
@@ -84,7 +87,6 @@ example parentMessage state =
                 (getFocusable params)
                 state.warningModal
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/Page.elm

@@ -1,27 +1,40 @@
-module Examples.Page exposing (example)
+module Examples.Page exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
 import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Page.V3 as Page
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : msg -> ModuleExample msg
-example noOp =
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
+example =
     { name = "Nri.Ui.Page.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Pages
-    , content =
+    , categories = List.singleton Pages
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ Css.Global.global
                 [ Css.Global.selector "[data-page-container]"
                     [ Css.displayFlex
@@ -30,17 +43,17 @@ example noOp =
                 ]
             , Heading.h3 [] [ Html.text "Page: Not Found, recovery text: ReturnTo" ]
             , Page.notFound
-            { link = noOp
+                { link = ()
                 , recoveryText = Page.ReturnTo "the main page"
                 }
             , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ]
             , Page.broken
-            { link = noOp
+                { link = ()
                 , recoveryText = Page.Reload
                 }
             , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ]
             , Page.noPermission
-            { link = noOp
+                { link = ()
                 , recoveryText = Page.Custom "Hit the road, Jack"
                 }
             ]

styleguide-app/Examples/Pennant.elm

@@ -1,28 +1,41 @@
-module Examples.Pennant exposing (example)
+module Examples.Pennant exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css exposing (..)
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Pennant.V2 as Pennant
 import Nri.Ui.Svg.V1 as Svg
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Pennant.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ]
                 [ Pennant.premiumFlag
                     |> Svg.withHeight (Css.px 60)

styleguide-app/Examples/SegmentedControl.elm

@@ -1,45 +1,41 @@
 module Examples.SegmentedControl exposing
-    ( Msg
-    , State
+    ( Msg, State
     , example
-    , init
-    , update
     )
 
 {-|
 
-@docs Msg
-@docs State
+@docs Msg, State
 @docs example
-@docs init
-@docs update
 
 -}
 
 import Accessibility.Styled
 import Category exposing (Category(..))
 import Debug.Control as Control exposing (Control)
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attr
 import Html.Styled.Events as Events
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.SegmentedControl.V8 as SegmentedControl
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
+    { name = "Nri.Ui.SegmentedControl.V8"
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             let
                 options =
                     Control.currentValue state.optionsControl
             in
-    { name = "Nri.Ui.SegmentedControl.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
             [ Control.view ChangeOptions state.optionsControl
                 |> Html.fromUnstyled
             , let
@@ -66,7 +62,7 @@ example parentMessage state =
                 , width = options.width
                 }
             ]
-            |> List.map (Html.map parentMessage)
+    , categories = [ Widgets ]
     }
 
 

styleguide-app/Examples/Select.elm

@@ -1,37 +1,30 @@
-module Examples.Select exposing
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
+module Examples.Select exposing (Msg, State, example)
 
 {-|
 
-@docs Msg
-@docs State
-@docs example
-@docs init
-@docs update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled
 import Html.Styled.Attributes
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V7 as Select
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Select.V7"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Inputs ]
+    , view =
+        \state ->
             [ Html.Styled.label
                 [ Html.Styled.Attributes.for "tortilla-selector" ]
                 [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ]
@@ -47,7 +40,7 @@ example parentMessage state =
                 , defaultDisplayText = Just "Select a tasty tortilla based treat!"
                 , isInError = False
                 }
-            |> Html.Styled.map (parentMessage << ConsoleLog)
+                |> Html.Styled.map ConsoleLog
             , Html.Styled.label
                 [ Html.Styled.Attributes.for "errored-selector" ]
                 [ Heading.h3 [] [ Html.Styled.text "Errored Selector" ] ]
@@ -59,7 +52,7 @@ example parentMessage state =
                 , defaultDisplayText = Just "Please select an option"
                 , isInError = True
                 }
-            |> Html.Styled.map (parentMessage << ConsoleLog)
+                |> Html.Styled.map ConsoleLog
             , Html.Styled.label
                 [ Html.Styled.Attributes.for "overflowed-selector" ]
                 [ Heading.h3 [] [ Html.Styled.text "Selector with Overflowed Text" ] ]
@@ -73,7 +66,7 @@ example parentMessage state =
                     , defaultDisplayText = Just "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that?"
                     , isInError = False
                     }
-                |> Html.Styled.map (parentMessage << ConsoleLog)
+                    |> Html.Styled.map ConsoleLog
                 ]
             ]
     }

styleguide-app/Examples/Slide.elm

@@ -1,22 +1,21 @@
-module Examples.Slide exposing (Msg, State, example, init, update)
+module Examples.Slide exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Accessibility.Styled as Html
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled.Attributes exposing (css)
 import Html.Styled.Keyed as Keyed
 import List.Zipper as Zipper exposing (Zipper)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V8 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Slide.V1 as Slide
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -33,11 +32,15 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Slide.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Animations
-    , content =
+    , categories = [ Animations ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ Keyed.node "div"
                 [ css
                     [ Slide.withSlidingContents
@@ -68,7 +71,6 @@ example parentMessage state =
                 , triggerAnimation Slide.FromRTL "Right-to-left"
                 ]
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/SlideModal.elm

@@ -1,21 +1,20 @@
-module Examples.SlideModal exposing (Msg, State, example, init, update)
+module Examples.SlideModal exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Accessibility.Styled as Html exposing (Html, div, h3, p, text)
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled exposing (fromUnstyled)
 import Html.Styled.Attributes exposing (css)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V8 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.SlideModal.V2 as SlideModal
-import Sort.Set as Set exposing (Set)
 import Svg exposing (..)
 import Svg.Attributes exposing (..)
 
@@ -31,15 +30,18 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.SlideModal.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
-    , content =
+    , categories = [ Modals ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ viewModal state.modal
             , modalLaunchButton
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/SortableTable.elm

@@ -1,17 +1,16 @@
-module Examples.SortableTable exposing (Msg, State, example, init, update)
+module Examples.SortableTable exposing (Msg, State, example)
 
 {-|
 
-    @docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.SortableTable.V1 as SortableTable
-import Sort.Set as Set exposing (Set)
 
 
 type Column
@@ -32,11 +31,15 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage { sortState } =
+example : Example State Msg
+example =
     { name = "Nri.Ui.SortableTable.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Tables
-    , content =
+    , categories = [ Tables ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \{ sortState } ->
             let
                 config =
                     { updateMsg = SetSortState
@@ -76,7 +79,6 @@ example parentMessage { sortState } =
             , Heading.h3 [] [ Html.text "Loading" ]
             , SortableTable.viewLoading config sortState
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/Svg.elm

@@ -1,51 +1,39 @@
-module Examples.Svg exposing
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
+module Examples.Svg exposing (Msg, State, example)
 
 {-|
 
-@docs Msg
-@docs State
-@docs example
-@docs init
-@docs update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Color exposing (Color)
 import Css
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
-import ModuleExample exposing (ModuleExample, ModuleMessages)
 import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V6 as Select
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (String -> ModuleMessages Msg msg) -> State -> ModuleExample msg
-example unnamedMessages state =
-    let
-        parentMessages =
-            unnamedMessages "Nri.Ui.Svg.V1"
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.Svg.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = [ Icons ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
             [ viewSettings state
-            |> Html.map parentMessages.wrapper
-        , viewResults parentMessages.showItWorked state
+            , viewResults state
             ]
     }
 
@@ -100,8 +88,8 @@ viewSettings state =
         ]
 
 
-viewResults : (String -> msg) -> State -> Html.Html msg
-viewResults msg state =
+viewResults : State -> Html.Html Msg
+viewResults state =
     let
         ( red, green, blue ) =
             Color.toRGB state.color

styleguide-app/Examples/Table.elm

@@ -1,13 +1,15 @@
-module Examples.Table exposing (Msg, State, example, init, update)
+module Examples.Table exposing (Msg, State, example)
+
+{-|
+
+@docs Msg, State, example
 
-{- \
-   @docs Msg, State, example, init, update
 -}
 
 import Category exposing (Category(..))
 import Css exposing (..)
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V5 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
@@ -15,22 +17,26 @@ import Nri.Ui.Table.V5 as Table
 import Sort.Set as Set exposing (Set)
 
 
-{-| -}
-type Msg
-    = NoOp
-
-
 {-| -}
 type alias State =
     ()
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
+example =
     { name = "Nri.Ui.Table.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Tables
-    , content =
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Tables ]
+    , view =
+        \state ->
             let
                 columns =
                     [ Table.string
@@ -68,7 +74,7 @@ example parentMessage state =
                                 Button.button
                                     { size = Button.Small
                                     , style = Button.Primary
-                                , onClick = NoOp
+                                    , onClick = ()
                                     , width = Button.WidthUnbounded
                                     }
                                     { label = "Action"
@@ -98,19 +104,4 @@ example parentMessage state =
             , Heading.h3 [] [ Html.text "Loading without header" ]
             , Table.viewLoadingWithoutHeader columns
             ]
-            |> List.map (Html.map parentMessage)
     }
-
-
-{-| -}
-init : State
-init =
-    ()
-
-
-{-| -}
-update : Msg -> State -> ( State, Cmd Msg )
-update msg state =
-    case msg of
-        NoOp ->
-            ( state, Cmd.none )

styleguide-app/Examples/Tabs.elm

@@ -1,35 +1,43 @@
 module Examples.Tabs exposing
     ( example
-    , Tab(..)
+    , State, Msg
     )
 
 {-|
 
 @docs example
+@docs State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled as Html
 import List.Zipper
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Tabs.V4 as Tabs
-import Sort.Set as Set exposing (Set)
 
 
-type Tab
+type State
     = First
     | Second
 
 
-example : (Tab -> msg) -> Tab -> ModuleExample msg
-example changeTab tab =
+type alias Msg =
+    State
+
+
+example : Example State Msg
+example =
     { name = "Nri.Ui.Tabs.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Layout
-    , content =
+    , categories = [ Layout ]
+    , state = First
+    , update = \newTab oldTab -> ( newTab, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \tab ->
             [ Tabs.view
                 { title = Nothing
-            , onSelect = changeTab
+                , onSelect = identity
                 , tabs =
                     case tab of
                         First ->
@@ -60,7 +68,7 @@ example changeTab tab =
                         []
                         (Tabs.NormalLink { label = "Nowhere", href = Nothing })
                         [ Tabs.NormalLink { label = "Elm", href = Just "http://elm-lang.org" }
-                    , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = changeTab Second }
+                        , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = Second }
                         ]
                 }
             ]

styleguide-app/Examples/Text.elm

@@ -1,26 +1,39 @@
-module Examples.Text exposing (example)
+module Examples.Text exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Text.V4 as Text
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.Text.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Text
-    , content =
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             let
                 exampleHtml kind =
                     [ Html.text "This is a "

styleguide-app/Examples/Text/Writing.elm

@@ -1,24 +1,36 @@
-module Examples.Text.Writing exposing (example)
+module Examples.Text.Writing exposing (example, State, Msg)
 
 {-|
 
-@docs example
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Html.Styled exposing (text)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Text.Writing.V1 as TextWriting
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+example : Example State Msg
 example =
     { name = "Nri.Ui.Text.Writing.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Text
-    , content =
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             let
                 longerBody =
                     """Be on the lookout for a new and improved assignment

styleguide-app/Examples/TextArea.elm

@@ -1,20 +1,19 @@
-module Examples.TextArea exposing (Msg, State, example, init, update)
+module Examples.TextArea exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Dict exposing (Dict)
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.AssetPath exposing (Asset(..))
 import Nri.Ui.Checkbox.V5 as Checkbox
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.TextArea.V4 as TextArea
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -35,11 +34,15 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.TextArea.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Inputs ]
+    , view =
+        \state ->
             [ Heading.h1 [] [ Html.text "Textarea controls" ]
             , Html.div []
                 [ Checkbox.viewWithLabel
@@ -132,7 +135,6 @@ example parentMessage state =
                 , showLabel = state.showLabel == Checkbox.Selected
                 }
             ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/TextInput.elm

@@ -1,18 +1,17 @@
-module Examples.TextInput exposing (Msg, State, example, init, update)
+module Examples.TextInput exposing (Msg, State, example)
 
 {-|
 
-@docs Msg, State, example, init, update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Dict exposing (Dict)
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.TextInput.V5 as TextInput
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
@@ -33,13 +32,16 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.TextInput.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Html.map parentMessage <|
-            Html.div []
+    , categories = [ Inputs ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Html.div []
                 [ TextInput.view
                     { label = "Criterion"
                     , isInError = False

styleguide-app/Examples/Tooltip.elm

@@ -1,20 +1,19 @@
-module Examples.Tooltip exposing (example, init, update, State, Msg)
+module Examples.Tooltip exposing (example, State, Msg)
 
 {-|
 
-@docs example, init, update, State, Msg
+@docs example, State, Msg
 
 -}
 
 import Accessibility.Styled as Html
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled.Attributes exposing (css, href)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Text.V4 as Text
 import Nri.Ui.Tooltip.V1 as Tooltip
-import Sort.Set as Set exposing (Set)
 
 
 type TooltipType
@@ -41,22 +40,26 @@ type Msg
     = ToggleTooltip TooltipType Bool
 
 
-update : Msg -> State -> State
+update : Msg -> State -> ( State, Cmd Msg )
 update msg model =
     case msg of
         ToggleTooltip type_ isOpen ->
             if isOpen then
-                { model | openTooltip = Just type_ }
+                ( { model | openTooltip = Just type_ }, Cmd.none )
 
             else
-                { model | openTooltip = Nothing }
+                ( { model | openTooltip = Nothing }, Cmd.none )
 
 
-example : (Msg -> msg) -> State -> ModuleExample msg
-example msg model =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Tooltip.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
+    , categories = [ Widgets ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \model ->
             [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
             , Heading.h3 [] [ Html.text "primaryLabel" ]
             , Text.smallBody
@@ -68,7 +71,7 @@ example msg model =
                 |> Tooltip.primaryLabel
                     { trigger = Tooltip.OnClick
                     , triggerHtml = Html.text "Primary Label - OnClick Trigger"
-                , onTrigger = ToggleTooltip PrimaryLabelOnClick >> msg
+                    , onTrigger = ToggleTooltip PrimaryLabelOnClick
                     , isOpen = model.openTooltip == Just PrimaryLabelOnClick
                     , id = "primary label tooltip"
                     , extraButtonAttrs = []
@@ -78,7 +81,7 @@ example msg model =
                 |> Tooltip.primaryLabel
                     { trigger = Tooltip.OnHover
                     , triggerHtml = Html.text "Primary Label - OnHover Trigger"
-                , onTrigger = ToggleTooltip PrimaryLabelOnHover >> msg
+                    , onTrigger = ToggleTooltip PrimaryLabelOnHover
                     , isOpen = model.openTooltip == Just PrimaryLabelOnHover
                     , id = "primary label tooltip"
                     , extraButtonAttrs = []
@@ -94,7 +97,7 @@ example msg model =
                 |> Tooltip.auxillaryDescription
                     { trigger = Tooltip.OnClick
                     , triggerHtml = Html.text "Auxillary Description Trigger"
-                , onTrigger = ToggleTooltip AuxillaryDescription >> msg
+                    , onTrigger = ToggleTooltip AuxillaryDescription
                     , isOpen = model.openTooltip == Just AuxillaryDescription
                     , id = "Auxillary description"
                     , extraButtonAttrs = []
@@ -110,7 +113,7 @@ example msg model =
                         [ Html.text "Links work!" ]
                     ]
                     |> Tooltip.toggleTip
-                    { onTrigger = ToggleTooltip ToggleTipTop >> msg
+                        { onTrigger = ToggleTooltip ToggleTipTop
                         , isOpen = model.openTooltip == Just ToggleTipTop
                         , label = "More info"
                         , extraButtonAttrs = []
@@ -128,7 +131,7 @@ example msg model =
                     ]
                     |> Tooltip.withPosition Tooltip.OnLeft
                     |> Tooltip.toggleTip
-                    { onTrigger = ToggleTooltip ToggleTipLeft >> msg
+                        { onTrigger = ToggleTooltip ToggleTipLeft
                         , isOpen = model.openTooltip == Just ToggleTipLeft
                         , label = "More info"
                         , extraButtonAttrs = []

styleguide-app/Examples/UiIcon.elm

@@ -1,25 +1,38 @@
-module Examples.UiIcon exposing (example)
+module Examples.UiIcon exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : ModuleExample msg
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
 example =
     { name = "Nri.Ui.UiIcon.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
-    , content =
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
             [ IconExamples.view "Interface"
                 [ ( "seeMore", UiIcon.seeMore )
                 , ( "openClose", UiIcon.openClose )

styleguide-app/Main.elm

@@ -5,17 +5,18 @@ import Browser.Dom
 import Browser.Navigation exposing (Key)
 import Category
 import Css exposing (..)
+import Dict exposing (Dict)
+import Example exposing (Example)
+import Examples
 import Html as RootHtml
 import Html.Attributes
 import Html.Styled as Html exposing (Html, img)
 import Html.Styled.Attributes as Attributes exposing (..)
 import Html.Styled.Events as Events
-import ModuleExample as ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Css.VendorPrefixed as VendorPrefixed
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
-import NriModules as NriModules exposing (ModuleStates, nriThemedModules)
 import Routes as Routes exposing (Route(..))
 import Sort.Set as Set
 import Task
@@ -37,7 +38,7 @@ main =
 type alias Model =
     { -- Global UI
       route : Route
-    , moduleStates : ModuleStates
+    , moduleStates : Dict String (Example Examples.State Examples.Msg)
     , navigationKey : Key
     }
 
@@ -45,7 +46,9 @@ type alias Model =
 init : () -> Url -> Key -> ( Model, Cmd Msg )
 init () url key =
     ( { route = Routes.fromLocation url
-      , moduleStates = NriModules.init
+      , moduleStates =
+            Dict.fromList
+                (List.map (\example -> ( example.name, example )) Examples.all)
       , navigationKey = key
       }
     , Cmd.none
@@ -53,7 +56,7 @@ init () url key =
 
 
 type Msg
-    = UpdateModuleStates NriModules.Msg
+    = UpdateModuleStates String Examples.Msg
     | OnUrlRequest Browser.UrlRequest
     | OnUrlChange Url
     | SkipToMainContent
@@ -63,14 +66,23 @@ type Msg
 update : Msg -> Model -> ( Model, Cmd Msg )
 update action model =
     case action of
-        UpdateModuleStates msg ->
-            let
-                ( moduleStates, cmd ) =
-                    NriModules.update msg model.moduleStates
-            in
-            ( { model | moduleStates = moduleStates }
-            , Cmd.map UpdateModuleStates cmd
+        UpdateModuleStates key exampleMsg ->
+            case Dict.get key model.moduleStates of
+                Just example ->
+                    example.update exampleMsg example.state
+                        |> Tuple.mapFirst
+                            (\newState ->
+                                { model
+                                    | moduleStates =
+                                        Dict.insert key
+                                            { example | state = newState }
+                                            model.moduleStates
+                                }
                             )
+                        |> Tuple.mapSecond (Cmd.map (UpdateModuleStates key))
+
+                Nothing ->
+                    ( model, Cmd.none )
 
         OnUrlRequest request ->
             case request of
@@ -94,7 +106,9 @@ update action model =
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-    Sub.map UpdateModuleStates (NriModules.subscriptions model.moduleStates)
+    Dict.values model.moduleStates
+        |> List.map (\example -> Sub.map (UpdateModuleStates example.name) (example.subscriptions example.state))
+        |> Sub.batch
 
 
 view : Model -> Document Msg
@@ -122,11 +136,14 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ]
-                        , nriThemedModules model.moduleStates
+                        , Dict.values model.moduleStates
                             |> List.filter (\m -> m.name == doodad)
-                            |> List.map (ModuleExample.view False)
+                            |> List.map
+                                (\example ->
+                                    Example.view False example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div []
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
 
@@ -135,11 +152,19 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text (Category.forDisplay category) ]
-                        , nriThemedModules model.moduleStates
-                            |> List.filter (\doodad -> Set.memberOf doodad.categories category)
-                            |> List.map (ModuleExample.view True)
+                        , Dict.values model.moduleStates
+                            |> List.filter
+                                (\doodad ->
+                                    Set.memberOf
+                                        (Set.fromList Category.sorter doodad.categories)
+                                        category
+                                )
+                            |> List.map
+                                (\example ->
+                                    Example.view True example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div [ id (Category.forId category) ]
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
 
@@ -148,10 +173,13 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text "All" ]
-                        , nriThemedModules model.moduleStates
-                            |> List.map (ModuleExample.view True)
+                        , Dict.values model.moduleStates
+                            |> List.map
+                                (\example ->
+                                    Example.view True example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div []
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
             )

styleguide-app/ModuleExample.elm

@@ -1,73 +0,0 @@
-module ModuleExample exposing (ModuleExample, ModuleMessages, view)
-
-import Category exposing (Category)
-import Css exposing (..)
-import Html.Styled as Html exposing (Html, img)
-import Html.Styled.Attributes as Attributes
-import Nri.Ui.Colors.V1 exposing (..)
-import Sort.Set as Set exposing (Set)
-
-
-type alias ModuleExample msg =
-    { name : String
-    , content : List (Html msg)
-    , categories : Set Category
-    }
-
-
-{-| -}
-type alias ModuleMessages moduleMsg parentMsg =
-    { noOp : parentMsg
-    , showItWorked : String -> parentMsg
-    , wrapper : moduleMsg -> parentMsg
-    }
-
-
-view : Bool -> ModuleExample msg -> Html msg
-view showFocusLink { name, content } =
-    Html.div
-        [ -- this class makes the axe accessibility checking output easier to parse
-          String.replace "." "-" name
-            |> (++) "module-example__"
-            |> Attributes.class
-        ]
-        [ Html.div
-            [ Attributes.css
-                [ displayFlex
-                , alignItems center
-                , justifyContent flexStart
-                , flexWrap wrap
-                , padding (px 4)
-                , backgroundColor glacier
-                ]
-            ]
-            [ Html.styled Html.h2
-                [ color gray20
-                , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ]
-                , fontSize (px 20)
-                , marginTop zero
-                , marginBottom zero
-                ]
-                []
-                [ Html.text name ]
-            , String.replace "." "-" name
-                |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
-                |> viewLink "view docs"
-            , if showFocusLink then
-                viewLink "see only this" ("#/doodad/" ++ name)
-
-              else
-                Html.text ""
-            ]
-        , Html.div [ Attributes.css [ padding2 (px 20) zero ] ] content
-        ]
-
-
-viewLink : String -> String -> Html msg
-viewLink text href =
-    Html.a
-        [ Attributes.href href
-        , Attributes.css [ Css.display Css.block, marginLeft (px 20) ]
-        ]
-        [ Html.text text
-        ]

styleguide-app/NriModules.elm

@@ -1,355 +0,0 @@
-module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update)
-
-import Category exposing (Category(..))
-import Examples.Accordion
-import Examples.Alert
-import Examples.AssignmentIcon
-import Examples.BannerAlert
-import Examples.Button
-import Examples.Callout
-import Examples.Checkbox
-import Examples.ClickableSvg
-import Examples.ClickableText
-import Examples.Colors
-import Examples.DisclosureIndicator
-import Examples.Dropdown
-import Examples.Fonts
-import Examples.Heading
-import Examples.Icon
-import Examples.Logo
-import Examples.MasteryIcon
-import Examples.Modal
-import Examples.Page
-import Examples.Pennant
-import Examples.SegmentedControl
-import Examples.Select
-import Examples.Slide
-import Examples.SlideModal
-import Examples.SortableTable
-import Examples.Svg
-import Examples.Table
-import Examples.Tabs
-import Examples.Text
-import Examples.Text.Writing
-import Examples.TextArea as TextAreaExample
-import Examples.TextInput as TextInputExample
-import Examples.Tooltip
-import Examples.UiIcon
-import ModuleExample exposing (ModuleExample)
-import Sort.Set as Set exposing (Set)
-
-
-type alias ModuleStates =
-    { accordionExampleState : Examples.Accordion.State
-    , buttonExampleState : Examples.Button.State Msg
-    , bannerAlertExampleState : Examples.BannerAlert.State
-    , clickableTextExampleState : Examples.ClickableText.State
-    , checkboxExampleState : Examples.Checkbox.State
-    , dropdownState : Examples.Dropdown.State Examples.Dropdown.Value
-    , segmentedControlState : Examples.SegmentedControl.State
-    , selectState : Examples.Select.State
-    , tableExampleState : Examples.Table.State
-    , textAreaExampleState : TextAreaExample.State
-    , textInputExampleState : TextInputExample.State
-    , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State
-    , modalExampleState : Examples.Modal.State
-    , slideModalExampleState : Examples.SlideModal.State
-    , slideExampleState : Examples.Slide.State
-    , sortableTableState : Examples.SortableTable.State
-    , svgState : Examples.Svg.State
-    , clickableSvgState : Examples.ClickableSvg.State
-    , tabsExampleState : Examples.Tabs.Tab
-    , tooltipExampleState : Examples.Tooltip.State
-    }
-
-
-init : ModuleStates
-init =
-    { accordionExampleState = Examples.Accordion.init
-    , buttonExampleState = Examples.Button.init
-    , bannerAlertExampleState = Examples.BannerAlert.init
-    , clickableTextExampleState = Examples.ClickableText.init
-    , checkboxExampleState = Examples.Checkbox.init
-    , dropdownState = Examples.Dropdown.init
-    , segmentedControlState = Examples.SegmentedControl.init
-    , selectState = Examples.Select.init
-    , tableExampleState = Examples.Table.init
-    , textAreaExampleState = TextAreaExample.init
-    , textInputExampleState = TextInputExample.init
-    , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init
-    , modalExampleState = Examples.Modal.init
-    , slideModalExampleState = Examples.SlideModal.init
-    , slideExampleState = Examples.Slide.init
-    , sortableTableState = Examples.SortableTable.init
-    , svgState = Examples.Svg.init
-    , clickableSvgState = Examples.ClickableSvg.init
-    , tabsExampleState = Examples.Tabs.First
-    , tooltipExampleState = Examples.Tooltip.init
-    }
-
-
-type Msg
-    = AccordionExampleMsg Examples.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
-    | ShowItWorked String String
-    | 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
-    | NoOp
-
-
-update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg )
-update outsideMsg moduleStates =
-    case outsideMsg of
-        AccordionExampleMsg msg ->
-            ( { moduleStates
-                | accordionExampleState =
-                    Examples.Accordion.update msg moduleStates.accordionExampleState
-              }
-            , Cmd.none
-            )
-
-        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
-            )
-
-        ShowItWorked group message ->
-            let
-                _ =
-                    Debug.log group message
-            in
-            ( moduleStates, Cmd.none )
-
-        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
-            )
-
-        NoOp ->
-            ( moduleStates, Cmd.none )
-
-
-subscriptions : ModuleStates -> Sub Msg
-subscriptions moduleStates =
-    Sub.batch
-        [ Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState)
-        ]
-
-
-nriThemedModules : ModuleStates -> List (ModuleExample Msg)
-nriThemedModules model =
-    [ Examples.Alert.example
-    , Examples.Accordion.example AccordionExampleMsg model.accordionExampleState
-    , 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
-    }