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,113 +1,120 @@
 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 : Example State Msg
-example parentMessage model =
+example =
     { name = "Nri.Ui.Accordion.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Layout
+    , state = init
-    , content =
+    , update = update
-        [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ]
+    , subscriptions = \_ -> Sub.none
-        , Accordion.view
+    , view = view
-            { entries =
+    , categories = [ Layout ]
-                [ { id = 1, title = "Entry 1", content = "Content for the first accordion" }
-                , { id = 2, title = "Entry 2", content = "Content for the second accordion" }
-                , { id = 3, title = "Super long entry that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long", content = "Content for the third accordion" }
-                ]
-                    |> List.map
-                        (\entry ->
-                            ( entry, Dict.get entry.id model |> Maybe.withDefault False )
-                        )
-            , viewHeader = .title >> Html.text
-            , viewContent = \{ content } -> Text.smallBody [ Html.text content ]
-            , customStyles = Nothing
-            , toggle = \entry toExpand -> Toggle entry.id toExpand
-            , caret = Accordion.DefaultCaret
-            }
-        , Heading.h3 [] [ Html.text "Accordion.view with custom styles from peer reviews" ]
-        , Accordion.view
-            { entries =
-                [ { id = 4
-                  , title = "Firstname Lastname"
-                  , content =
-                        Html.div
-                            [ css [ Fonts.baseFont, fontSize (px 13) ]
-                            ]
-                            [ Html.text "has not started writing" ]
-                  }
-                , { id = 5
-                  , title = "LongFirstnameAnd EvenLongerLastname"
-                  , content =
-                        Html.div
-                            [ css [ Fonts.baseFont, fontSize (px 13) ] ]
-                            [ Html.text "has started writing" ]
-                  }
-                ]
-                    |> List.map
-                        (\entry ->
-                            ( entry, Dict.get entry.id model |> Maybe.withDefault False )
-                        )
-            , viewHeader = .title >> Html.text
-            , viewContent = .content
-            , customStyles =
-                Just
-                    (\_ ->
-                        { entryStyles =
-                            [ borderTop3 (px 1) solid Colors.gray75
-                            , marginBottom zero
-                            , width (px 284)
-                            ]
-                        , entryExpandedStyles = []
-                        , entryClosedStyles = []
-                        , headerStyles =
-                            [ height (px 46)
-                            , paddingLeft (px 8)
-                            , paddingRight (px 8)
-                            , Css.alignItems Css.center
-                            ]
-                        , headerExpandedStyles =
-                            [ backgroundColor Colors.gray96
-                            , borderRadius zero
-                            ]
-                        , headerClosedStyles = [ backgroundColor transparent ]
-                        , contentStyles =
-                            [ backgroundColor Colors.gray96
-                            , paddingLeft (px 8)
-                            , paddingRight (px 8)
-                            , paddingBottom (px 8)
-                            ]
-                        }
-                    )
-            , toggle = \entry toExpand -> Toggle entry.id toExpand
-            , caret = Accordion.DefaultCaret
-            }
-        ]
-            |> List.map (Html.map parentMessage)
     }
 
 
+{-| -}
+view : State -> List (Html Msg)
+view model =
+    [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ]
+    , Accordion.view
+        { entries =
+            [ { id = 1, title = "Entry 1", content = "Content for the first accordion" }
+            , { id = 2, title = "Entry 2", content = "Content for the second accordion" }
+            , { id = 3, title = "Super long entry that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long", content = "Content for the third accordion" }
+            ]
+                |> List.map
+                    (\entry ->
+                        ( entry, Dict.get entry.id model |> Maybe.withDefault False )
+                    )
+        , viewHeader = .title >> Html.text
+        , viewContent = \{ content } -> Text.smallBody [ Html.text content ]
+        , customStyles = Nothing
+        , toggle = \entry toExpand -> Toggle entry.id toExpand
+        , caret = Accordion.DefaultCaret
+        }
+    , Heading.h3 [] [ Html.text "Accordion.view with custom styles from peer reviews" ]
+    , Accordion.view
+        { entries =
+            [ { id = 4
+              , title = "Firstname Lastname"
+              , content =
+                    Html.div
+                        [ css [ Fonts.baseFont, fontSize (px 13) ]
+                        ]
+                        [ Html.text "has not started writing" ]
+              }
+            , { id = 5
+              , title = "LongFirstnameAnd EvenLongerLastname"
+              , content =
+                    Html.div
+                        [ css [ Fonts.baseFont, fontSize (px 13) ] ]
+                        [ Html.text "has started writing" ]
+              }
+            ]
+                |> List.map
+                    (\entry ->
+                        ( entry, Dict.get entry.id model |> Maybe.withDefault False )
+                    )
+        , viewHeader = .title >> Html.text
+        , viewContent = .content
+        , customStyles =
+            Just
+                (\_ ->
+                    { entryStyles =
+                        [ borderTop3 (px 1) solid Colors.gray75
+                        , marginBottom zero
+                        , width (px 284)
+                        ]
+                    , entryExpandedStyles = []
+                    , entryClosedStyles = []
+                    , headerStyles =
+                        [ height (px 46)
+                        , paddingLeft (px 8)
+                        , paddingRight (px 8)
+                        , Css.alignItems Css.center
+                        ]
+                    , headerExpandedStyles =
+                        [ backgroundColor Colors.gray96
+                        , borderRadius zero
+                        ]
+                    , headerClosedStyles = [ backgroundColor transparent ]
+                    , contentStyles =
+                        [ backgroundColor Colors.gray96
+                        , paddingLeft (px 8)
+                        , paddingRight (px 8)
+                        , paddingBottom (px 8)
+                        ]
+                    }
+                )
+        , toggle = \entry toExpand -> Toggle entry.id toExpand
+        , caret = Accordion.DefaultCaret
+        }
+    ]
+
+
 type Msg
     = Toggle Int Bool
 
@@ -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,33 +1,46 @@
-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
+    , categories = [ Messaging ]
-    , content =
+    , state = ()
-        [ Heading.h3 [] [ Html.text "Markdown-supporting:" ]
+    , update = \_ state -> ( state, Cmd.none )
-        , Alert.error "This is an **error**"
+    , subscriptions = \_ -> Sub.none
-        , Alert.warning "This is a **warning**"
+    , view =
-        , Alert.tip "This is a **tip**"
+        \_ ->
-        , Alert.success "This is a **success**"
+            [ Heading.h3 [] [ Html.text "Markdown-supporting:" ]
-        , Html.hr [] []
+            , Alert.error "This is an **error**"
-        , Heading.h3 [] [ Html.text "Stacktraces-supporting:" ]
+            , Alert.warning "This is a **warning**"
-        , Alert.somethingWentWrong exampleRailsError
+            , Alert.tip "This is a **tip**"
-        ]
+            , Alert.success "This is a **success**"
+            , Html.hr [] []
+            , Heading.h3 [] [ Html.text "Stacktraces-supporting:" ]
+            , Alert.somethingWentWrong exampleRailsError
+            ]
     }
 
 

styleguide-app/Examples/AssignmentIcon.elm

@@ -1,44 +1,57 @@
-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
+    , categories = [ Icons ]
-    , content =
+    , state = ()
-        [ IconExamples.view "Quiz engine"
+    , update = \_ state -> ( state, Cmd.none )
-            [ ( "diagnostic", AssignmentIcon.diagnostic )
+    , subscriptions = \_ -> Sub.none
-            , ( "practice", AssignmentIcon.practice )
+    , view =
-            , ( "quiz", AssignmentIcon.quiz )
+        \_ ->
+            [ IconExamples.view "Quiz engine"
+                [ ( "diagnostic", AssignmentIcon.diagnostic )
+                , ( "practice", AssignmentIcon.practice )
+                , ( "quiz", AssignmentIcon.quiz )
+                ]
+            , IconExamples.view "Writing"
+                [ ( "quickWrite", AssignmentIcon.quickWrite )
+                , ( "guidedDraft", AssignmentIcon.guidedDraft )
+                , ( "peerReview", AssignmentIcon.peerReview )
+                , ( "selfReview", AssignmentIcon.selfReview )
+                ]
+            , IconExamples.view "Stages"
+                [ ( "submitting", AssignmentIcon.submitting )
+                , ( "rating", AssignmentIcon.rating )
+                , ( "revising", AssignmentIcon.revising )
+                ]
+            , IconExamples.view "Start"
+                [ ( "startPrimary", AssignmentIcon.startPrimary )
+                , ( "startSecondary", AssignmentIcon.startSecondary )
+                ]
             ]
-        , IconExamples.view "Writing"
-            [ ( "quickWrite", AssignmentIcon.quickWrite )
-            , ( "guidedDraft", AssignmentIcon.guidedDraft )
-            , ( "peerReview", AssignmentIcon.peerReview )
-            , ( "selfReview", AssignmentIcon.selfReview )
-            ]
-        , IconExamples.view "Stages"
-            [ ( "submitting", AssignmentIcon.submitting )
-            , ( "rating", AssignmentIcon.rating )
-            , ( "revising", AssignmentIcon.revising )
-            ]
-        , IconExamples.view "Start"
-            [ ( "startPrimary", AssignmentIcon.startPrimary )
-            , ( "startSecondary", AssignmentIcon.startSecondary )
-            ]
-        ]
     }

styleguide-app/Examples/BannerAlert.elm

@@ -3,60 +3,69 @@ 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
+    , state = init
-    , content =
+    , update = update
-        [ if state.show then
+    , subscriptions = \_ -> Sub.none
-            div
+    , view = view
-                []
+    , categories = [ Messaging ]
-                [ h3 [] [ text "alert" ]
+    }
-                , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss)
-                , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ]
-                ]
 
-          else
+
-            div
+view : State -> List (Html Msg)
-                []
+view state =
-                [ h3 [] [ text "success" ]
+    [ if state.show then
-                , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing
+        div
-                , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ]
+            []
-                ]
+            [ h3 [] [ text "alert" ]
-        , h3 [] [ text "error" ]
+            , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss)
-        , BannerAlert.error [ text "This is an error message!" ] Nothing
+            , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ]
-        , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ]
+            ]
-        , h3 [] [ text "neutral" ]
+
-        , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing
+      else
-        , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ]
+        div
-        , h3 [] [ text "custom" ]
+            []
-        , BannerAlert.custom
+            [ h3 [] [ text "success" ]
-            { color = Colors.aquaDark
+            , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing
-            , backgroundColor = Colors.gray92
+            , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ]
-            , icon = Pennant.premiumFlag
+            ]
-            , content = [ text "This is a a custom message!" ]
+    , h3 [] [ text "error" ]
-            , dismiss = Nothing
+    , BannerAlert.error [ text "This is an error message!" ] Nothing
-            }
+    , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ]
-        , pre []
+    , h3 [] [ text "neutral" ]
-            [ text
+    , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing
-                """BannerAlert.custom
+    , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ]
+    , h3 [] [ text "custom" ]
+    , BannerAlert.custom
+        { color = Colors.aquaDark
+        , backgroundColor = Colors.gray92
+        , icon = Pennant.premiumFlag
+        , content = [ text "This is a a custom message!" ]
+        , dismiss = Nothing
+        }
+    , pre []
+        [ text
+            """BannerAlert.custom
     { color = Colors.aquaDark
     , backgroundColor = Colors.gray92
     , icon = Pennant.premiumFlag
@@ -64,25 +73,25 @@ example parentMsg state =
     , dismiss = Nothing
     }
         """
-            ]
+        ]
-        , h3 [] [ text "with multi-line link and icon" ]
+    , h3 [] [ text "with multi-line link and icon" ]
-        , BannerAlert.success
+    , BannerAlert.success
-            [ text "Click "
+        [ text "Click "
-            , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
+        , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
-                [ text
+            [ text
-                    """here, yes, HERE, right here on this very long success message.
+                """here, yes, HERE, right here on this very long success message.
                     Wow, how successful! You're the biggest success I've ever seen!
                     You should feel great about yourself! Give yourself a very big round of applause!
                     """
-                , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ]
+            , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ]
-                    [ Svg.toHtml UiIcon.gear ]
+                [ Svg.toHtml UiIcon.gear ]
-                ]
-            , text " to check out NoRedInk."
             ]
-            Nothing
+        , text " to check out NoRedInk."
-        , pre []
+        ]
-            [ text
+        Nothing
-                """BannerAlert.success
+    , pre []
+        [ text
+            """BannerAlert.success
     [ text "Click "
     , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
         [ text
@@ -97,10 +106,8 @@ example parentMsg state =
     ]
     Nothing
     """
-            ]
         ]
-            |> 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
+example : Example State Msg
-    = State (Control (Model parentMsg))
+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 :
+type Msg
-    (String -> ModuleMessages (Msg parentMsg) parentMsg)
+    = SetState State
-    -> State parentMsg
+    | ShowItWorked String String
-    -> 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)
     | 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
+    , width : Button.Attribute Msg
-    , state : 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 :
+viewButtonExamples : State -> Html Msg
-    ModuleMessages (Msg parentMsg) parentMsg
+viewButtonExamples (State control) =
-    -> State parentMsg
-    -> Html parentMsg
-viewButtonExamples messages (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
-    , toggleButtons messages
+    , 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 :
+buttons : Model -> Html Msg
-    ModuleMessages (Msg parentMsg) parentMsg
+buttons model =
-    -> Model parentMsg
-    -> Html parentMsg
-buttons messages 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 : Html Msg
-toggleButtons messages =
+toggleButtons =
     div []
         [ Heading.h3 [] [ text "Button toggle" ]
         , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
             [ Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = False
                 }
             , Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = True
                 }

styleguide-app/Examples/Callout.elm

@@ -1,57 +1,70 @@
-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
+    , categories = [ Messaging ]
-    , content =
+    , state = ()
-        [ -- PLAIN
+    , update = \_ state -> ( state, Cmd.none )
-          Html.h3 [] [ Html.text "Originally Designed Use Case" ]
+    , subscriptions = \_ -> Sub.none
-        , callout
+    , view =
-            [ Callout.label (Html.text "BETA")
+        \_ ->
-            , Callout.custom (title "beta warning")
+            [ -- PLAIN
-            ]
+              Html.h3 [] [ Html.text "Originally Designed Use Case" ]
-            [ Html.text "This tab is still a work in progress; some of your student's information may be missing."
+            , callout
-            , Html.br [] []
+                [ Callout.label (Html.text "BETA")
-            , Html.text "To share your thoughts and help us improve the experience, "
+                , Callout.custom (title "beta warning")
-            , Html.a [ href "#" ] [ Html.text "click here" ]
+                ]
-            , Html.text "."
+                [ Html.text "This tab is still a work in progress; some of your student's information may be missing."
-            ]
+                , Html.br [] []
+                , Html.text "To share your thoughts and help us improve the experience, "
+                , Html.a [ href "#" ] [ Html.text "click here" ]
+                , Html.text "."
+                ]
 
-        -- WITH SIDE TEXT
+            -- WITH SIDE TEXT
-        , Html.h3 [] [ Html.text "Without side text" ]
+            , Html.h3 [] [ Html.text "Without side text" ]
-        , callout
+            , callout
-            [ Callout.custom (title "no side text") ]
+                [ Callout.custom (title "no side text") ]
-            [ Html.text "I feel weird without my side text!" ]
+                [ Html.text "I feel weird without my side text!" ]
 
-        -- WITH CSS CUSTOMIZATIONS
+            -- WITH CSS CUSTOMIZATIONS
-        , Html.h3 [] [ Html.text "With CSS customizations" ]
+            , Html.h3 [] [ Html.text "With CSS customizations" ]
-        , callout
+            , callout
-            [ Callout.containerCss [ Css.margin (Css.px 20) ]
+                [ Callout.containerCss [ Css.margin (Css.px 20) ]
-            , Callout.label (Html.text "HMMM")
+                , Callout.label (Html.text "HMMM")
-            , Callout.custom (title "margin")
+                , Callout.custom (title "margin")
+                ]
+                [ Html.text "My container styles are customized to add margin around the callout" ]
+            , callout
+                [ Callout.contentCss [ Css.textTransform Css.uppercase ]
+                , Callout.label (Html.text "WOW!")
+                , Callout.custom (title "yelling")
+                ]
+                [ Html.text "My content styles are customized to yell about everything" ]
             ]
-            [ Html.text "My container styles are customized to add margin around the callout" ]
-        , callout
-            [ Callout.contentCss [ Css.textTransform Css.uppercase ]
-            , Callout.label (Html.text "WOW!")
-            , Callout.custom (title "yelling")
-            ]
-            [ Html.text "My content styles are customized to yell about everything" ]
-        ]
     }

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,20 +31,23 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.Checkbox.V5"
-    , categories = Sort.Set.fromList Category.sorter <| List.singleton Inputs
+    , state = init
-    , content =
+    , update = update
-        [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
+    , subscriptions = \_ -> Sub.none
-        , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
+    , view =
-        , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
+        \state ->
-        , viewDisabledCheckbox "styleguide-checkbox-disabled" state
+            [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
-        , viewMultilineCheckboxes
+            , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
-        , h3 [] [ text "Premium Checkboxes" ]
+            , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
-        , viewPremiumCheckboxes state
+            , viewDisabledCheckbox "styleguide-checkbox-disabled" state
-        ]
+            , viewMultilineCheckboxes
-            |> List.map (Html.map parentMessage)
+            , h3 [] [ text "Premium Checkboxes" ]
+            , viewPremiumCheckboxes state
+            ]
+    , categories = [ Inputs ]
     }
 
 

styleguide-app/Examples/ClickableSvg.elm

@@ -1,29 +1,19 @@
-module Examples.ClickableSvg exposing
+module Examples.ClickableSvg exposing (Msg, State, example)
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
 
 {-|
 
-@docs Msg
+@docs Msg, State, example
-@docs State
-@docs example
-@docs init
-@docs update
 
 -}
 
 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,67 +21,66 @@ 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 : Example State Msg
-example unnamedMessages state =
+example =
-    let
-        parentMessages =
-            unnamedMessages "Nri.Ui.ClickableSvg.V1"
-    in
     { name = "Nri.Ui.ClickableSvg.V1"
-    , categories = Set.fromList Category.sorter [ Buttons, Icons ]
+    , categories = [ Buttons, Icons ]
-    , content =
+    , state = init
-        [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+    , update = update
-            [ ClickableSvg.button "Back"
+    , subscriptions = \_ -> Sub.none
-                UiIcon.arrowLeft
+    , view =
-                [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ]
+        \state ->
-            , viewCode
+            [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
+                [ ClickableSvg.button "Back"
-            ]
+                    UiIcon.arrowLeft
-        , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                    [ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ]
-            [ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ]
+                , viewCode
-            , viewCode
+                    "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
-                "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]"
-            ]
-        , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-            [ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
-            , viewCode
-                "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
-            ]
-        , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-            [ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
-            , viewCode
-                "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
-            ]
-        , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-            [ ClickableSvg.button "Go to tutorial"
-                UiIcon.footsteps
-                [ ClickableSvg.width (Css.px 80)
-                , ClickableSvg.height (Css.px 80)
-                , ClickableSvg.onClick (parentMessages.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
-                    ]
                 ]
-            , viewCode
+            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-                """
+                [ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ]
+                , viewCode
+                    "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]"
+                ]
+            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
+                , viewCode
+                    "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
+                ]
+            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ]
+                , viewCode
+                    "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]"
+                ]
+            , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ ClickableSvg.button "Go to tutorial"
+                    UiIcon.footsteps
+                    [ ClickableSvg.width (Css.px 80)
+                    , ClickableSvg.height (Css.px 80)
+                    , 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
+                        ]
+                    ]
+                , viewCode
+                    """
                     ClickableSvg.button "Go to tutorial"
                         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 =
-    ( state, Cmd.none )
+    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 :
+example : Example State Msg
-    (String -> ModuleMessages Msg parentMsg)
+example =
-    -> State
-    -> ModuleExample parentMsg
-example unnamedMessages state =
-    let
-        messages =
-            unnamedMessages "ClickableTextExample"
-    in
     { name = "Nri.Ui.ClickableText.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Buttons
+    , state = init
-    , content =
+    , update = update
-        [ viewExamples messages state ]
+    , 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 :
+viewExamples : State -> Html Msg
-    ModuleMessages Msg parentMsg
+viewExamples (State control) =
-    -> State
-    -> Html parentMsg
-viewExamples messages (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 :
+buttons : Model -> Html Msg
-    ModuleMessages Msg parentMsg
+buttons model =
-    -> Model
-    -> Html parentMsg
-buttons messages 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,102 +1,115 @@
-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
+    , categories = List.singleton Colors
-    , content =
+    , state = ()
-        [ [ ( "gray20", Colors.gray20, "Main text" )
+    , update = \_ state -> ( state, Cmd.none )
-          , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
+    , subscriptions = \_ -> Sub.none
-          , ( "gray75", Colors.gray75, "Border of form elements and tabs" )
+    , view =
-          , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" )
+        \_ ->
-          , ( "gray96", Colors.gray96, "backgrounds/alternating rows" )
+            [ [ ( "gray20", Colors.gray20, "Main text" )
-          , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" )
+              , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
-          , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" )
+              , ( "gray75", Colors.gray75, "Border of form elements and tabs" )
-          , ( "azureDark", Colors.azureDark, "Azure button shadow" )
+              , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" )
-          , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" )
+              , ( "gray96", Colors.gray96, "backgrounds/alternating rows" )
-          , ( "glacier", Colors.glacier, "Blue highlights/selected elements" )
+              , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" )
-          , ( "lichen", Colors.lichen, "70-79 score" )
+              , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" )
-          , ( "grassland", Colors.grassland, "80-89 score" )
+              , ( "azureDark", Colors.azureDark, "Azure button shadow" )
-          , ( "green", Colors.green, "90-100 score" )
+              , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" )
-          , ( "greenDark", Colors.greenDark, "Green button, swathes of green" )
+              , ( "glacier", Colors.glacier, "Blue highlights/selected elements" )
-          , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" )
+              , ( "lichen", Colors.lichen, "70-79 score" )
-          , ( "greenLight", Colors.greenLight, "Green backgrounds" )
+              , ( "grassland", Colors.grassland, "80-89 score" )
-          , ( "greenLightest", Colors.greenLightest, "Green backgrounds" )
+              , ( "green", Colors.green, "90-100 score" )
-          , ( "cornflower", Colors.cornflower, "Mastery level 1" )
+              , ( "greenDark", Colors.greenDark, "Green button, swathes of green" )
-          , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" )
+              , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" )
-          , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" )
+              , ( "greenLight", Colors.greenLight, "Green backgrounds" )
-          , ( "aqua", Colors.aqua, "Master level 2" )
+              , ( "greenLightest", Colors.greenLightest, "Green backgrounds" )
-          , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" )
+              , ( "cornflower", Colors.cornflower, "Mastery level 1" )
-          , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" )
+              , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" )
-          , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" )
+              , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" )
-          , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" )
+              , ( "aqua", Colors.aqua, "Master level 2" )
-          , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" )
+              , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" )
-          , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" )
+              , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" )
-          , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" )
+              , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" )
-          , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" )
+              , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" )
-          , ( "red", Colors.red, "NoRedInk red, form warnings, practice" )
+              , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" )
-          , ( "redDark", Colors.redDark, "Red links/text, red button shadow" )
+              , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" )
-          , ( "redLight", Colors.redLight, "Red backgrounds" )
+              , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" )
-          , ( "cyan", Colors.cyan, "Blue Highlighter" )
+              , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" )
-          , ( "magenta", Colors.magenta, "Pink highlighter" )
+              , ( "red", Colors.red, "NoRedInk red, form warnings, practice" )
-          , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" )
+              , ( "redDark", Colors.redDark, "Red links/text, red button shadow" )
-          , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" )
+              , ( "redLight", Colors.redLight, "Red backgrounds" )
-          , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" )
+              , ( "cyan", Colors.cyan, "Blue Highlighter" )
-          , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
+              , ( "magenta", Colors.magenta, "Pink highlighter" )
-          ]
+              , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" )
-            |> viewColors
+              , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" )
-        , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
+              , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" )
-        , Html.p [] [ Html.text "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
+              , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
-        , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
+              ]
-          , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
+                |> viewColors
-          , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" )
+            , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
-          , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" )
+            , Html.p [] [ Html.text "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ]
-          , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" )
+            , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
-          , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" )
+              , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
-          , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" )
+              , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" )
-          , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" )
+              , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" )
-          , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" )
+              , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" )
-          , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" )
+              , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" )
-          , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" )
+              , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" )
-          , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" )
+              , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" )
-          , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" )
+              , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" )
-          , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
+              , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" )
-          ]
+              , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" )
-            |> viewColors
+              , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" )
-        , Heading.h3 [] [ Html.text "Text Highlight Colors" ]
+              , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" )
-        , Html.p [] [ Html.text "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
+              , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
-        , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
+              ]
-          , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )
+                |> viewColors
-          , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" )
+            , Heading.h3 [] [ Html.text "Text Highlight Colors" ]
-          , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" )
+            , Html.p [] [ Html.text "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
-          , ( "textHighlightBlue", Colors.textHighlightBlue, "Neutral text highlight #5, Positive text highlight #2" )
+            , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
-          , ( "textHighlightPurple", Colors.textHighlightPurple, "Negative text highlight #1" )
+              , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )
-          , ( "textHighlightBrown", Colors.textHighlightBrown, "Negative text highlight #2" )
+              , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" )
-          ]
+              , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" )
-            |> viewColors
+              , ( "textHighlightBlue", Colors.textHighlightBlue, "Neutral text highlight #5, Positive text highlight #2" )
-        ]
+              , ( "textHighlightPurple", Colors.textHighlightPurple, "Negative text highlight #1" )
+              , ( "textHighlightBrown", Colors.textHighlightBrown, "Negative text highlight #2" )
+              ]
+                |> viewColors
+            ]
     }
 
 

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,26 +26,29 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.DisclosureIndicator.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
+    , categories = [ Widgets ]
-    , content =
+    , state = init
-        [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
+    , update = update
-        , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
+    , subscriptions = \_ -> Sub.none
-            [ toggleButton ToggleLarge "Toggle large indicator"
+    , view =
-            , toggleButton ToggleMedium "Toggle medium indicator"
+        \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"
+                , toggleButton ToggleMedium "Toggle medium indicator"
+                ]
+            , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
+                [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState
+                , Html.text "I'm a 17px caret icon."
+                ]
+            , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
+                [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState
+                , Html.text "I'm a 15px caret icon."
+                ]
             ]
-        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
-            [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState
-            , Html.text "I'm a 17px caret icon."
-            ]
-        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
-            [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState
-            , 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 =
+type alias State =
-    List (Nri.Ui.Dropdown.V2.ViewOptionEntry value)
+    List (Nri.Ui.Dropdown.V2.ViewOptionEntry String)
 
 
 {-| -}
-example : (Msg -> msg) -> State Value -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.Dropdown.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
+    , state = init
-    , content =
+    , update = update
-        [ Html.Styled.map parentMessage (Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog)
+    , 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,34 +1,47 @@
-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
+    , categories = List.singleton Text
-    , content =
+    , state = ()
-        [ Heading.h3 [] [ Html.text "baseFont" ]
+    , update = \_ state -> ( state, Cmd.none )
-        , Html.p [ css [ Fonts.baseFont ] ]
+    , subscriptions = \_ -> Sub.none
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+    , view =
-        , Heading.h3 [] [ Html.text "quizFont" ]
+        \_ ->
-        , Html.p [ css [ Fonts.quizFont ] ]
+            [ Heading.h3 [] [ Html.text "baseFont" ]
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+            , Html.p [ css [ Fonts.baseFont ] ]
-        , Heading.h3 [] [ Html.text "ugFont" ]
+                [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        , Html.p [ css [ Fonts.ugFont ] ]
+            , Heading.h3 [] [ Html.text "quizFont" ]
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+            , Html.p [ css [ Fonts.quizFont ] ]
-        ]
+                [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+            , Heading.h3 [] [ Html.text "ugFont" ]
+            , Html.p [ css [ Fonts.ugFont ] ]
+                [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+            ]
     }

styleguide-app/Examples/Heading.elm

@@ -1,33 +1,46 @@
-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
+    , categories = List.singleton Text
-    , content =
+    , state = ()
-        [ Heading.h1 [] [ Html.text "This is the main page heading." ]
+    , update = \_ state -> ( state, Cmd.none )
-        , Heading.h2 [] [ Html.text "This is a tagline" ]
+    , subscriptions = \_ -> Sub.none
-        , Heading.h3 [] [ Html.text "This is a subHeading" ]
+    , view =
-        , Heading.h4 [] [ Html.text "This is a smallHeading" ]
+        \_ ->
-        , Heading.h2 [ Heading.style Heading.Top ]
+            [ Heading.h1 [] [ Html.text "This is the main page heading." ]
-            [ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ]
+            , Heading.h2 [] [ Html.text "This is a tagline" ]
-        , Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]
+            , Heading.h3 [] [ Html.text "This is a subHeading" ]
-            [ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ]
+            , Heading.h4 [] [ Html.text "This is a smallHeading" ]
-        ]
+            , Heading.h2 [ Heading.style Heading.Top ]
+                [ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ]
+            , Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]
+                [ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ]
+            ]
     }

styleguide-app/Examples/Icon.elm

@@ -1,35 +1,48 @@
-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
+    , categories = List.singleton Icons
-    , content =
+    , state = ()
-        [ viewLarge "Bulbs and Tips"
+    , update = \_ state -> ( state, Cmd.none )
-            [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" }
+    , 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,55 +1,68 @@
-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
+    , categories = List.singleton Icons
-    , content =
+    , state = ()
-        [ IconExamples.viewWithCustomStyles "NRI"
+    , update = \_ state -> ( state, Cmd.none )
-            [ ( "noredink"
+    , subscriptions = \_ -> Sub.none
-              , Logo.noredink
+    , view =
-              , [ Css.height (Css.px 25)
+        \_ ->
-                , Css.width (Css.px 100)
+            [ IconExamples.viewWithCustomStyles "NRI"
-                , Css.margin (Css.px 4)
+                [ ( "noredink"
+                  , Logo.noredink
+                  , [ Css.height (Css.px 25)
+                    , Css.width (Css.px 100)
+                    , Css.margin (Css.px 4)
+                    ]
+                  )
                 ]
-              )
+            , IconExamples.viewWithCustomStyles "Social Media & SSO"
-            ]
+                [ ( "facebook"
-        , IconExamples.viewWithCustomStyles "Social Media & SSO"
+                  , Logo.facebook
-            [ ( "facebook"
+                  , defaults
-              , Logo.facebook
+                  )
-              , defaults
+                , ( "twitter", Logo.twitter, defaults )
-              )
+                , ( "clever"
-            , ( "twitter", Logo.twitter, defaults )
+                  , Logo.clever
-            , ( "clever"
+                  , [ Css.height (Css.px 25)
-              , Logo.clever
+                    , Css.width (Css.px 100)
-              , [ Css.height (Css.px 25)
+                    , Css.margin (Css.px 4)
-                , Css.width (Css.px 100)
+                    , Css.color Colors.azure
-                , Css.margin (Css.px 4)
+                    ]
-                , Css.color Colors.azure
+                  )
+                , ( "google classroom"
+                  , Logo.googleClassroom
+                  , defaults
+                  )
                 ]
-              )
-            , ( "google classroom"
-              , Logo.googleClassroom
-              , defaults
-              )
             ]
-        ]
     }
 
 

styleguide-app/Examples/MasteryIcon.elm

@@ -1,30 +1,43 @@
-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
+    , categories = List.singleton Icons
-    , content =
+    , state = ()
-        [ IconExamples.view "Levels"
+    , update = \_ state -> ( state, Cmd.none )
-            [ ( "levelZero", MasteryIcon.levelZero )
+    , subscriptions = \_ -> Sub.none
-            , ( "levelOne", MasteryIcon.levelOne )
+    , view =
-            , ( "levelTwo", MasteryIcon.levelTwo )
+        \_ ->
-            , ( "levelThree", MasteryIcon.levelThree )
+            [ IconExamples.view "Levels"
+                [ ( "levelZero", MasteryIcon.levelZero )
+                , ( "levelOne", MasteryIcon.levelOne )
+                , ( "levelTwo", MasteryIcon.levelTwo )
+                , ( "levelThree", MasteryIcon.levelThree )
+                ]
             ]
-        ]
     }

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,41 +49,44 @@ init =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.Modal.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
+    , categories = [ Modals ]
-    , content =
+    , state = init
-        [ viewSettings state
+    , update = update
-        , Button.button "Launch Info Modal"
+    , subscriptions = subscriptions
-            [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal"))
+    , view =
-            , Button.custom [ Attributes.id "launch-info-modal" ]
+        \state ->
-            , Button.css [ Css.marginRight (Css.px 16) ]
+            [ viewSettings state
-            , Button.secondary
+            , Button.button "Launch Info Modal"
-            , Button.medium
+                [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal"))
+                , Button.custom [ Attributes.id "launch-info-modal" ]
+                , Button.css [ Css.marginRight (Css.px 16) ]
+                , Button.secondary
+                , Button.medium
+                ]
+            , Button.button "Launch Warning Modal"
+                [ Button.onClick (WarningModalMsg (Modal.open "launch-warning-modal"))
+                , Button.custom [ Attributes.id "launch-warning-modal" ]
+                , Button.secondary
+                , Button.medium
+                ]
+            , let
+                params =
+                    ( state, InfoModalMsg, Button.primary )
+              in
+              Modal.info { title = "Modal.info", wrapMsg = InfoModalMsg, visibleTitle = state.visibleTitle }
+                (getFocusable params)
+                state.infoModal
+            , let
+                params =
+                    ( state, WarningModalMsg, Button.danger )
+              in
+              Modal.warning { title = "Modal.warning", wrapMsg = WarningModalMsg, visibleTitle = state.visibleTitle }
+                (getFocusable params)
+                state.warningModal
             ]
-        , Button.button "Launch Warning Modal"
-            [ Button.onClick (WarningModalMsg (Modal.open "launch-warning-modal"))
-            , Button.custom [ Attributes.id "launch-warning-modal" ]
-            , Button.secondary
-            , Button.medium
-            ]
-        , let
-            params =
-                ( state, InfoModalMsg, Button.primary )
-          in
-          Modal.info { title = "Modal.info", wrapMsg = InfoModalMsg, visibleTitle = state.visibleTitle }
-            (getFocusable params)
-            state.infoModal
-        , let
-            params =
-                ( state, WarningModalMsg, Button.danger )
-          in
-          Modal.warning { title = "Modal.warning", wrapMsg = WarningModalMsg, visibleTitle = state.visibleTitle }
-            (getFocusable params)
-            state.warningModal
-        ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/Page.elm

@@ -1,47 +1,60 @@
-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
+type alias State =
-example noOp =
+    ()
+
+
+{-| -}
+type alias Msg =
+    ()
+
+
+{-| -}
+example : Example State Msg
+example =
     { name = "Nri.Ui.Page.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Pages
+    , categories = List.singleton Pages
-    , content =
+    , state = ()
-        [ Css.Global.global
+    , update = \_ state -> ( state, Cmd.none )
-            [ Css.Global.selector "[data-page-container]"
+    , subscriptions = \_ -> Sub.none
-                [ Css.displayFlex
+    , view =
-                , Css.flexWrap Css.wrap
+        \_ ->
+            [ Css.Global.global
+                [ Css.Global.selector "[data-page-container]"
+                    [ Css.displayFlex
+                    , Css.flexWrap Css.wrap
+                    ]
                 ]
+            , Heading.h3 [] [ Html.text "Page: Not Found, recovery text: ReturnTo" ]
+            , Page.notFound
+                { link = ()
+                , recoveryText = Page.ReturnTo "the main page"
+                }
+            , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ]
+            , Page.broken
+                { link = ()
+                , recoveryText = Page.Reload
+                }
+            , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ]
+            , Page.noPermission
+                { link = ()
+                , recoveryText = Page.Custom "Hit the road, Jack"
+                }
             ]
-        , Heading.h3 [] [ Html.text "Page: Not Found, recovery text: ReturnTo" ]
-        , Page.notFound
-            { link = noOp
-            , recoveryText = Page.ReturnTo "the main page"
-            }
-        , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ]
-        , Page.broken
-            { link = noOp
-            , recoveryText = Page.Reload
-            }
-        , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ]
-        , Page.noPermission
-            { link = noOp
-            , recoveryText = Page.Custom "Hit the road, Jack"
-            }
-        ]
     }

styleguide-app/Examples/Pennant.elm

@@ -1,35 +1,48 @@
-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
+    , categories = List.singleton Icons
-    , content =
+    , state = ()
-        [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ]
+    , update = \_ state -> ( state, Cmd.none )
-            [ Pennant.premiumFlag
+    , subscriptions = \_ -> Sub.none
-                |> Svg.withHeight (Css.px 60)
+    , view =
-                |> Svg.toHtml
+        \_ ->
-            , Pennant.disabledPremiumFlag
+            [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ]
-                |> Svg.withHeight (Css.px 60)
+                [ Pennant.premiumFlag
-                |> Svg.toHtml
+                    |> Svg.withHeight (Css.px 60)
+                    |> Svg.toHtml
+                , Pennant.disabledPremiumFlag
+                    |> Svg.withHeight (Css.px 60)
+                    |> Svg.toHtml
+                ]
             ]
-        ]
     }

styleguide-app/Examples/SegmentedControl.elm

@@ -1,72 +1,68 @@
 module Examples.SegmentedControl exposing
-    ( Msg
+    ( Msg, State
-    , State
     , example
-    , init
-    , update
     )
 
 {-|
 
-@docs Msg
+@docs Msg, State
-@docs 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 : Example State Msg
-example parentMessage state =
+example =
-    let
-        options =
-            Control.currentValue state.optionsControl
-    in
     { name = "Nri.Ui.SegmentedControl.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
+    , state = init
-    , content =
+    , update = update
-        [ Control.view ChangeOptions state.optionsControl
+    , subscriptions = \_ -> Sub.none
-            |> Html.fromUnstyled
+    , view =
-        , let
+        \state ->
-            viewFn =
+            let
-                if options.useSpa then
+                options =
-                    SegmentedControl.viewSpa Debug.toString
+                    Control.currentValue state.optionsControl
+            in
+            [ Control.view ChangeOptions state.optionsControl
+                |> Html.fromUnstyled
+            , let
+                viewFn =
+                    if options.useSpa then
+                        SegmentedControl.viewSpa Debug.toString
 
-                else
+                    else
-                    SegmentedControl.view
+                        SegmentedControl.view
-          in
+              in
-          viewFn
+              viewFn
-            { onClick = Select
+                { onClick = Select
-            , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
+                , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
-            , selected = state.selected
+                , selected = state.selected
-            , width = options.width
+                , width = options.width
-            , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]")
+                , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]")
-            }
+                }
-        , Html.h3 [] [ Html.text "Toggle only view" ]
+            , Html.h3 [] [ Html.text "Toggle only view" ]
-        , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
+            , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
-        , SegmentedControl.viewToggle
+            , SegmentedControl.viewToggle
-            { onClick = Select
+                { onClick = Select
-            , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
+                , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
-            , selected = state.selected
+                , selected = state.selected
-            , width = options.width
+                , width = options.width
-            }
+                }
-        ]
+            ]
-            |> List.map (Html.map parentMessage)
+    , categories = [ Widgets ]
     }
 
 

styleguide-app/Examples/Select.elm

@@ -1,81 +1,74 @@
-module Examples.Select exposing
+module Examples.Select exposing (Msg, State, example)
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
 
 {-|
 
-@docs Msg
+@docs Msg, State, example
-@docs State
-@docs example
-@docs init
-@docs update
 
 -}
 
 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 : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.Select.V7"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
+    , state = init
-    , content =
+    , update = update
-        [ Html.Styled.label
+    , subscriptions = \_ -> Sub.none
-            [ Html.Styled.Attributes.for "tortilla-selector" ]
+    , categories = [ Inputs ]
-            [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ]
+    , view =
-        , Select.view
+        \state ->
-            { current = Nothing
+            [ Html.Styled.label
-            , choices =
+                [ Html.Styled.Attributes.for "tortilla-selector" ]
-                [ { label = "Tacos", value = "Tacos" }
+                [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ]
-                , { label = "Burritos", value = "Burritos" }
+            , Select.view
-                , { label = "Enchiladas", value = "Enchiladas" }
-                ]
-            , id = "tortilla-selector"
-            , valueToString = identity
-            , defaultDisplayText = Just "Select a tasty tortilla based treat!"
-            , isInError = False
-            }
-            |> Html.Styled.map (parentMessage << ConsoleLog)
-        , Html.Styled.label
-            [ Html.Styled.Attributes.for "errored-selector" ]
-            [ Heading.h3 [] [ Html.Styled.text "Errored Selector" ] ]
-        , Select.view
-            { current = Nothing
-            , choices = []
-            , id = "errored-selector"
-            , valueToString = identity
-            , defaultDisplayText = Just "Please select an option"
-            , isInError = True
-            }
-            |> Html.Styled.map (parentMessage << ConsoleLog)
-        , Html.Styled.label
-            [ Html.Styled.Attributes.for "overflowed-selector" ]
-            [ Heading.h3 [] [ Html.Styled.text "Selector with Overflowed Text" ] ]
-        , Html.Styled.div
-            [ Html.Styled.Attributes.css [ Css.maxWidth (Css.px 400) ] ]
-            [ Select.view
                 { current = Nothing
-                , choices = []
+                , choices =
-                , id = "overflowed-selector"
+                    [ { label = "Tacos", value = "Tacos" }
+                    , { label = "Burritos", value = "Burritos" }
+                    , { label = "Enchiladas", value = "Enchiladas" }
+                    ]
+                , id = "tortilla-selector"
                 , valueToString = identity
-                , defaultDisplayText = Just "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that?"
+                , 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" ] ]
+            , Select.view
+                { current = Nothing
+                , choices = []
+                , id = "errored-selector"
+                , valueToString = identity
+                , defaultDisplayText = Just "Please select an option"
+                , isInError = True
+                }
+                |> Html.Styled.map ConsoleLog
+            , Html.Styled.label
+                [ Html.Styled.Attributes.for "overflowed-selector" ]
+                [ Heading.h3 [] [ Html.Styled.text "Selector with Overflowed Text" ] ]
+            , Html.Styled.div
+                [ Html.Styled.Attributes.css [ Css.maxWidth (Css.px 400) ] ]
+                [ Select.view
+                    { current = Nothing
+                    , choices = []
+                    , id = "overflowed-selector"
+                    , valueToString = identity
+                    , 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 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,42 +32,45 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.Slide.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Animations
+    , categories = [ Animations ]
-    , content =
+    , state = init
-        [ Keyed.node "div"
+    , update = update
-            [ css
+    , subscriptions = \_ -> Sub.none
-                [ Slide.withSlidingContents
+    , view =
-                , Css.border3 (Css.px 3) Css.solid Colors.gray75
+        \state ->
-                , Css.padding (Css.px 20)
+            [ Keyed.node "div"
-                , Css.width (Css.px 600)
+                [ css
-                ]
+                    [ Slide.withSlidingContents
-            ]
+                    , Css.border3 (Css.px 3) Css.solid Colors.gray75
-            (case state.previous of
+                    , Css.padding (Css.px 20)
-                Just previousPanel ->
+                    , Css.width (Css.px 600)
-                    [ viewPanel previousPanel (Slide.animateOut state.direction)
-                    , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
                     ]
+                ]
+                (case state.previous of
+                    Just previousPanel ->
+                        [ viewPanel previousPanel (Slide.animateOut state.direction)
+                        , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
+                        ]
 
-                Nothing ->
+                    Nothing ->
-                    [ viewPanel (Zipper.current state.panels) (Css.batch [])
+                        [ viewPanel (Zipper.current state.panels) (Css.batch [])
+                        ]
+                )
+            , Html.div
+                [ css
+                    [ Css.displayFlex
+                    , Css.justifyContent Css.spaceBetween
+                    , Css.marginTop (Css.px 20)
+                    , Css.width (Css.px 300)
                     ]
-            )
+                ]
-        , Html.div
+                [ triggerAnimation Slide.FromLTR "Left-to-right"
-            [ css
+                , triggerAnimation Slide.FromRTL "Right-to-left"
-                [ Css.displayFlex
-                , Css.justifyContent Css.spaceBetween
-                , Css.marginTop (Css.px 20)
-                , Css.width (Css.px 300)
                 ]
             ]
-            [ triggerAnimation Slide.FromLTR "Left-to-right"
-            , triggerAnimation Slide.FromRTL "Right-to-left"
-            ]
-        ]
-            |> List.map (Html.map parentMessage)
     }
 
 

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 : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.SlideModal.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
+    , categories = [ Modals ]
-    , content =
+    , state = init
-        [ viewModal state.modal
+    , update = update
-        , modalLaunchButton
+    , subscriptions = \_ -> Sub.none
-        ]
+    , view =
-            |> List.map (Html.map parentMessage)
+        \state ->
+            [ viewModal state.modal
+            , modalLaunchButton
+            ]
     }
 
 

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,51 +31,54 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage { sortState } =
+example =
     { name = "Nri.Ui.SortableTable.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Tables
+    , categories = [ Tables ]
-    , content =
+    , state = init
-        let
+    , update = update
-            config =
+    , subscriptions = \_ -> Sub.none
-                { updateMsg = SetSortState
+    , view =
-                , columns =
+        \{ sortState } ->
-                    [ SortableTable.string
+            let
-                        { id = FirstName
+                config =
-                        , header = "First name"
+                    { updateMsg = SetSortState
-                        , value = .firstName
+                    , columns =
-                        , width = 125
+                        [ SortableTable.string
-                        }
+                            { id = FirstName
-                    , SortableTable.string
+                            , header = "First name"
-                        { id = LastName
+                            , value = .firstName
-                        , header = "Last name"
+                            , width = 125
-                        , value = .lastName
+                            }
-                        , width = 125
+                        , SortableTable.string
-                        }
+                            { id = LastName
-                    , SortableTable.custom
+                            , header = "Last name"
-                        { id = Coins
+                            , value = .lastName
-                        , header = Html.text "Coins"
+                            , width = 125
-                        , view = .coins >> String.fromInt >> Html.text
+                            }
-                        , sorter = SortableTable.simpleSort .coins
+                        , SortableTable.custom
-                        , width = 125
+                            { id = Coins
-                        }
+                            , header = Html.text "Coins"
-                    ]
+                            , view = .coins >> String.fromInt >> Html.text
-                }
+                            , sorter = SortableTable.simpleSort .coins
+                            , width = 125
+                            }
+                        ]
+                    }
 
-            data =
+                data =
-                [ { firstName = "First1", lastName = "Last1", coins = 1 }
+                    [ { firstName = "First1", lastName = "Last1", coins = 1 }
-                , { firstName = "First2", lastName = "Last2", coins = 2 }
+                    , { firstName = "First2", lastName = "Last2", coins = 2 }
-                , { firstName = "First3", lastName = "Last3", coins = 3 }
+                    , { firstName = "First3", lastName = "Last3", coins = 3 }
-                , { firstName = "First4", lastName = "Last4", coins = 4 }
+                    , { firstName = "First4", lastName = "Last4", coins = 4 }
-                , { firstName = "First5", lastName = "Last5", coins = 5 }
+                    , { firstName = "First5", lastName = "Last5", coins = 5 }
-                ]
+                    ]
-        in
+            in
-        [ Heading.h3 [] [ Html.text "With sortable headers" ]
+            [ Heading.h3 [] [ Html.text "With sortable headers" ]
-        , SortableTable.view config sortState data
+            , SortableTable.view config sortState data
-        , Heading.h3 [] [ Html.text "Loading" ]
+            , Heading.h3 [] [ Html.text "Loading" ]
-        , SortableTable.viewLoading config sortState
+            , SortableTable.viewLoading config sortState
-        ]
+            ]
-            |> List.map (Html.map parentMessage)
     }
 
 

styleguide-app/Examples/Svg.elm

@@ -1,52 +1,40 @@
-module Examples.Svg exposing
+module Examples.Svg exposing (Msg, State, example)
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
 
 {-|
 
-@docs Msg
+@docs Msg, State, example
-@docs State
-@docs example
-@docs init
-@docs update
 
 -}
 
 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 : Example State Msg
-example unnamedMessages state =
+example =
-    let
-        parentMessages =
-            unnamedMessages "Nri.Ui.Svg.V1"
-    in
     { name = "Nri.Ui.Svg.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Icons
+    , categories = [ Icons ]
-    , content =
+    , state = init
-        [ viewSettings state
+    , update = update
-            |> Html.map parentMessages.wrapper
+    , subscriptions = \_ -> Sub.none
-        , viewResults parentMessages.showItWorked state
+    , view =
-        ]
+        \state ->
+            [ viewSettings state
+            , viewResults state
+            ]
     }
 
 
@@ -100,8 +88,8 @@ viewSettings state =
         ]
 
 
-viewResults : (String -> msg) -> State -> Html.Html msg
+viewResults : State -> Html.Html Msg
-viewResults msg state =
+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,102 +17,91 @@ 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
+type alias Msg =
-example parentMessage state =
-    { name = "Nri.Ui.Table.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Tables
-    , content =
-        let
-            columns =
-                [ Table.string
-                    { header = "First Name"
-                    , value = .firstName
-                    , width = calc (pct 50) minus (px 250)
-                    , cellStyles = always []
-                    }
-                , Table.string
-                    { header = "Last Name"
-                    , value = .lastName
-                    , width = calc (pct 50) minus (px 250)
-                    , cellStyles = always []
-                    }
-                , Table.string
-                    { header = "# Submitted"
-                    , value = .submitted >> String.fromInt
-                    , width = px 125
-                    , cellStyles =
-                        \value ->
-                            if value.submitted < 5 then
-                                [ backgroundColor Colors.redLight
-                                , textAlign center
-                                ]
-
-                            else
-                                [ textAlign center ]
-                    }
-                , Table.custom
-                    { header =
-                        Html.text "Actions"
-                    , width = px 250
-                    , view =
-                        \_ ->
-                            Button.button
-                                { size = Button.Small
-                                , style = Button.Primary
-                                , onClick = NoOp
-                                , width = Button.WidthUnbounded
-                                }
-                                { label = "Action"
-                                , state = Button.Enabled
-                                , icon = Nothing
-                                }
-                    , cellStyles = always []
-                    }
-                ]
-
-            data =
-                [ { firstName = "First1", lastName = "Last1", submitted = 10 }
-                , { firstName = "First2", lastName = "Last2", submitted = 0 }
-                , { firstName = "First3", lastName = "Last3", submitted = 3 }
-                , { firstName = "First4", lastName = "Last4", submitted = 15 }
-                , { firstName = "First5", lastName = "Last5", submitted = 8 }
-                ]
-        in
-        [ Heading.h3 [] [ Html.text "With header" ]
-        , Table.view columns data
-        , Heading.h3 [] [ Html.text "Without header" ]
-        , Table.viewWithoutHeader columns data
-        , Heading.h3 [] [ Html.text "With additional cell styles" ]
-        , Table.view columns data
-        , Heading.h3 [] [ Html.text "Loading" ]
-        , Table.viewLoading columns
-        , Heading.h3 [] [ Html.text "Loading without header" ]
-        , Table.viewLoadingWithoutHeader columns
-        ]
-            |> List.map (Html.map parentMessage)
-    }
-
-
-{-| -}
-init : State
-init =
     ()
 
 
 {-| -}
-update : Msg -> State -> ( State, Cmd Msg )
+example : Example State Msg
-update msg state =
+example =
-    case msg of
+    { name = "Nri.Ui.Table.V5"
-        NoOp ->
+    , state = ()
-            ( state, Cmd.none )
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Tables ]
+    , view =
+        \state ->
+            let
+                columns =
+                    [ Table.string
+                        { header = "First Name"
+                        , value = .firstName
+                        , width = calc (pct 50) minus (px 250)
+                        , cellStyles = always []
+                        }
+                    , Table.string
+                        { header = "Last Name"
+                        , value = .lastName
+                        , width = calc (pct 50) minus (px 250)
+                        , cellStyles = always []
+                        }
+                    , Table.string
+                        { header = "# Submitted"
+                        , value = .submitted >> String.fromInt
+                        , width = px 125
+                        , cellStyles =
+                            \value ->
+                                if value.submitted < 5 then
+                                    [ backgroundColor Colors.redLight
+                                    , textAlign center
+                                    ]
+
+                                else
+                                    [ textAlign center ]
+                        }
+                    , Table.custom
+                        { header =
+                            Html.text "Actions"
+                        , width = px 250
+                        , view =
+                            \_ ->
+                                Button.button
+                                    { size = Button.Small
+                                    , style = Button.Primary
+                                    , onClick = ()
+                                    , width = Button.WidthUnbounded
+                                    }
+                                    { label = "Action"
+                                    , state = Button.Enabled
+                                    , icon = Nothing
+                                    }
+                        , cellStyles = always []
+                        }
+                    ]
+
+                data =
+                    [ { firstName = "First1", lastName = "Last1", submitted = 10 }
+                    , { firstName = "First2", lastName = "Last2", submitted = 0 }
+                    , { firstName = "First3", lastName = "Last3", submitted = 3 }
+                    , { firstName = "First4", lastName = "Last4", submitted = 15 }
+                    , { firstName = "First5", lastName = "Last5", submitted = 8 }
+                    ]
+            in
+            [ Heading.h3 [] [ Html.text "With header" ]
+            , Table.view columns data
+            , Heading.h3 [] [ Html.text "Without header" ]
+            , Table.viewWithoutHeader columns data
+            , Heading.h3 [] [ Html.text "With additional cell styles" ]
+            , Table.view columns data
+            , Heading.h3 [] [ Html.text "Loading" ]
+            , Table.viewLoading columns
+            , Heading.h3 [] [ Html.text "Loading without header" ]
+            , Table.viewLoadingWithoutHeader columns
+            ]
+    }

styleguide-app/Examples/Tabs.elm

@@ -1,67 +1,75 @@
 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
+type alias Msg =
-example changeTab tab =
+    State
-    { name = "Nri.Ui.Tabs.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Layout
-    , content =
-        [ Tabs.view
-            { title = Nothing
-            , onSelect = changeTab
-            , tabs =
-                case tab of
-                    First ->
-                        List.Zipper.from []
-                            (Tabs.Tab "First tab" First)
-                            [ Tabs.Tab "Second tab" Second ]
 
-                    Second ->
+
-                        List.Zipper.from []
+example : Example State Msg
-                            (Tabs.Tab "Second tab" Second)
+example =
-                            [ Tabs.Tab "First tab" First ]
+    { name = "Nri.Ui.Tabs.V4"
-            , content =
+    , categories = [ Layout ]
-                \id ->
+    , state = First
-                    case id of
+    , update = \newTab oldTab -> ( newTab, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \tab ->
+            [ Tabs.view
+                { title = Nothing
+                , onSelect = identity
+                , tabs =
+                    case tab of
                         First ->
-                            Html.text "First"
+                            List.Zipper.from []
+                                (Tabs.Tab "First tab" First)
+                                [ Tabs.Tab "Second tab" Second ]
 
                         Second ->
-                            Html.text "Second"
+                            List.Zipper.from []
-            , alignment = Tabs.Center
+                                (Tabs.Tab "Second tab" Second)
-            }
+                                [ Tabs.Tab "First tab" First ]
-        , Tabs.links
+                , content =
-            { title = Nothing
+                    \id ->
-            , content = Html.text "Links"
+                        case id of
-            , alignment = Tabs.Left
+                            First ->
-            , tabs =
+                                Html.text "First"
-                List.Zipper.from
+
-                    []
+                            Second ->
-                    (Tabs.NormalLink { label = "Nowhere", href = Nothing })
+                                Html.text "Second"
-                    [ Tabs.NormalLink { label = "Elm", href = Just "http://elm-lang.org" }
+                , alignment = Tabs.Center
-                    , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = changeTab Second }
+                }
-                    ]
+            , Tabs.links
-            }
+                { title = Nothing
-        ]
+                , content = Html.text "Links"
+                , alignment = Tabs.Left
+                , tabs =
+                    List.Zipper.from
+                        []
+                        (Tabs.NormalLink { label = "Nowhere", href = Nothing })
+                        [ Tabs.NormalLink { label = "Elm", href = Just "http://elm-lang.org" }
+                        , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = Second }
+                        ]
+                }
+            ]
     }

styleguide-app/Examples/Text.elm

@@ -1,54 +1,67 @@
-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
+    , categories = List.singleton Text
-    , content =
+    , state = ()
-        let
+    , update = \_ state -> ( state, Cmd.none )
-            exampleHtml kind =
+    , subscriptions = \_ -> Sub.none
-                [ Html.text "This is a "
+    , view =
-                , Html.strong [] [ Html.text kind ]
+        \_ ->
-                , Html.text ". "
+            let
-                , Html.a
+                exampleHtml kind =
-                    [ Attributes.href "http://www.noredink.com"
+                    [ Html.text "This is a "
-                    , Attributes.target "_blank"
+                    , Html.strong [] [ Html.text kind ]
+                    , Html.text ". "
+                    , Html.a
+                        [ Attributes.href "http://www.noredink.com"
+                        , Attributes.target "_blank"
+                        ]
+                        [ Html.text "The quick brown fox jumps over the lazy dog." ]
+                    , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take."
                     ]
-                    [ Html.text "The quick brown fox jumps over the lazy dog." ]
-                , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take."
-                ]
 
-            exampleUGHtml kind =
+                exampleUGHtml kind =
-                [ Html.text "This is a "
+                    [ Html.text "This is a "
-                , Html.strong [] [ Html.text kind ]
+                    , Html.strong [] [ Html.text kind ]
-                , Html.text ". The quick brown fox jumps over the lazy dog."
+                    , Html.text ". The quick brown fox jumps over the lazy dog."
-                , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home."
+                    , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home."
-                ]
+                    ]
-        in
+            in
-        [ Text.caption [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
+            [ Text.caption [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
-        , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ]
+            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ]
-        , Text.mediumBody (exampleHtml "mediumBody")
+            , Text.mediumBody (exampleHtml "mediumBody")
-        , Text.smallBody (exampleHtml "smallBody")
+            , Text.smallBody (exampleHtml "smallBody")
-        , Text.smallBodyGray (exampleHtml "smallBodyGray")
+            , Text.smallBodyGray (exampleHtml "smallBodyGray")
-        , Text.caption (exampleHtml "caption")
+            , Text.caption (exampleHtml "caption")
-        , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
+            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
-        , Text.ugMediumBody (exampleUGHtml "ugMediumBody")
+            , Text.ugMediumBody (exampleUGHtml "ugMediumBody")
-        , Text.ugSmallBody (exampleUGHtml "ugSmallBody")
+            , Text.ugSmallBody (exampleUGHtml "ugSmallBody")
-        ]
+            ]
     }

styleguide-app/Examples/Text/Writing.elm

@@ -1,32 +1,44 @@
-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
+    , categories = List.singleton Text
-    , content =
+    , state = ()
-        let
+    , update = \_ state -> ( state, Cmd.none )
-            longerBody =
+    , subscriptions = \_ -> Sub.none
-                """Be on the lookout for a new and improved assignment
+    , view =
+        \_ ->
+            let
+                longerBody =
+                    """Be on the lookout for a new and improved assignment
                     creation form! Soon, you'll be able to easily see a summary
                     of the content you're assigning, as well as an estimate for
                     how long the assignment will take.
                 """
-        in
+            in
-        [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ]
+            [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ]
-        ]
+            ]
     }

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,104 +34,107 @@ type alias State =
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
+example : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.TextArea.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
+    , state = init
-    , content =
+    , update = update
-        [ Heading.h1 [] [ Html.text "Textarea controls" ]
+    , subscriptions = \_ -> Sub.none
-        , Html.div []
+    , categories = [ Inputs ]
-            [ Checkbox.viewWithLabel
+    , view =
-                { identifier = "show-textarea-label"
+        \state ->
-                , label = "Show Label"
+            [ Heading.h1 [] [ Html.text "Textarea controls" ]
-                , setterMsg = ToggleLabel
+            , Html.div []
-                , selected = state.showLabel
+                [ Checkbox.viewWithLabel
-                , disabled = False
+                    { identifier = "show-textarea-label"
-                , theme = Checkbox.Square
+                    , label = "Show Label"
+                    , setterMsg = ToggleLabel
+                    , selected = state.showLabel
+                    , disabled = False
+                    , theme = Checkbox.Square
+                    }
+                , Checkbox.viewWithLabel
+                    { identifier = "textarea-autoresize"
+                    , label = "Autoresize"
+                    , setterMsg = ToggleAutoResize
+                    , selected = state.autoResize
+                    , disabled = False
+                    , theme = Checkbox.Square
+                    }
+                , Checkbox.viewWithLabel
+                    { identifier = "textarea-isInError"
+                    , label = "Show Error State"
+                    , setterMsg = ToggleErrorState
+                    , selected = state.isInError
+                    , disabled = False
+                    , theme = Checkbox.Square
+                    }
+                ]
+            , TextArea.view
+                { value = Maybe.withDefault "" <| Dict.get 1 state.textValues
+                , autofocus = False
+                , onInput = InputGiven 1
+                , onBlur = Nothing
+                , isInError = state.isInError == Checkbox.Selected
+                , label = "TextArea.view"
+                , height =
+                    if state.autoResize == Checkbox.Selected then
+                        TextArea.AutoResize TextArea.SingleLine
+
+                    else
+                        TextArea.Fixed
+                , placeholder = "Placeholder"
+                , showLabel = state.showLabel == Checkbox.Selected
                 }
-            , Checkbox.viewWithLabel
+            , TextArea.writing
-                { identifier = "textarea-autoresize"
+                { value = Maybe.withDefault "" <| Dict.get 2 state.textValues
-                , label = "Autoresize"
+                , autofocus = False
-                , setterMsg = ToggleAutoResize
+                , onInput = InputGiven 2
-                , selected = state.autoResize
+                , onBlur = Nothing
-                , disabled = False
+                , isInError = state.isInError == Checkbox.Selected
-                , theme = Checkbox.Square
+                , label = "TextArea.writing"
+                , height =
+                    if state.autoResize == Checkbox.Selected then
+                        TextArea.AutoResize TextArea.DefaultHeight
+
+                    else
+                        TextArea.Fixed
+                , placeholder = "Placeholder"
+                , showLabel = state.showLabel == Checkbox.Selected
                 }
-            , Checkbox.viewWithLabel
+            , TextArea.contentCreation
-                { identifier = "textarea-isInError"
+                { value = Maybe.withDefault "" <| Dict.get 3 state.textValues
-                , label = "Show Error State"
+                , autofocus = False
-                , setterMsg = ToggleErrorState
+                , onInput = InputGiven 3
-                , selected = state.isInError
+                , onBlur = Nothing
-                , disabled = False
+                , isInError = state.isInError == Checkbox.Selected
-                , theme = Checkbox.Square
+                , label = "TextArea.contentCreation"
+                , height =
+                    if state.autoResize == Checkbox.Selected then
+                        TextArea.AutoResize TextArea.DefaultHeight
+
+                    else
+                        TextArea.Fixed
+                , placeholder = "Placeholder"
+                , showLabel = state.showLabel == Checkbox.Selected
+                }
+            , TextArea.writing
+                { value = Maybe.withDefault "" <| Dict.get 4 state.textValues
+                , autofocus = False
+                , onInput = InputGiven 4
+                , onBlur = Just (InputGiven 4 "Neener neener Blur happened")
+                , isInError = state.isInError == Checkbox.Selected
+                , label = "TextArea.writing onBlur demonstration"
+                , height =
+                    if state.autoResize == Checkbox.Selected then
+                        TextArea.AutoResize TextArea.DefaultHeight
+
+                    else
+                        TextArea.Fixed
+                , placeholder = "Placeholder"
+                , showLabel = state.showLabel == Checkbox.Selected
                 }
             ]
-        , TextArea.view
-            { value = Maybe.withDefault "" <| Dict.get 1 state.textValues
-            , autofocus = False
-            , onInput = InputGiven 1
-            , onBlur = Nothing
-            , isInError = state.isInError == Checkbox.Selected
-            , label = "TextArea.view"
-            , height =
-                if state.autoResize == Checkbox.Selected then
-                    TextArea.AutoResize TextArea.SingleLine
-
-                else
-                    TextArea.Fixed
-            , placeholder = "Placeholder"
-            , showLabel = state.showLabel == Checkbox.Selected
-            }
-        , TextArea.writing
-            { value = Maybe.withDefault "" <| Dict.get 2 state.textValues
-            , autofocus = False
-            , onInput = InputGiven 2
-            , onBlur = Nothing
-            , isInError = state.isInError == Checkbox.Selected
-            , label = "TextArea.writing"
-            , height =
-                if state.autoResize == Checkbox.Selected then
-                    TextArea.AutoResize TextArea.DefaultHeight
-
-                else
-                    TextArea.Fixed
-            , placeholder = "Placeholder"
-            , showLabel = state.showLabel == Checkbox.Selected
-            }
-        , TextArea.contentCreation
-            { value = Maybe.withDefault "" <| Dict.get 3 state.textValues
-            , autofocus = False
-            , onInput = InputGiven 3
-            , onBlur = Nothing
-            , isInError = state.isInError == Checkbox.Selected
-            , label = "TextArea.contentCreation"
-            , height =
-                if state.autoResize == Checkbox.Selected then
-                    TextArea.AutoResize TextArea.DefaultHeight
-
-                else
-                    TextArea.Fixed
-            , placeholder = "Placeholder"
-            , showLabel = state.showLabel == Checkbox.Selected
-            }
-        , TextArea.writing
-            { value = Maybe.withDefault "" <| Dict.get 4 state.textValues
-            , autofocus = False
-            , onInput = InputGiven 4
-            , onBlur = Just (InputGiven 4 "Neener neener Blur happened")
-            , isInError = state.isInError == Checkbox.Selected
-            , label = "TextArea.writing onBlur demonstration"
-            , height =
-                if state.autoResize == Checkbox.Selected then
-                    TextArea.AutoResize TextArea.DefaultHeight
-
-                else
-                    TextArea.Fixed
-            , placeholder = "Placeholder"
-            , 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 : Example State Msg
-example parentMessage state =
+example =
     { name = "Nri.Ui.TextInput.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
+    , categories = [ Inputs ]
-    , content =
+    , state = init
-        [ Html.map parentMessage <|
+    , update = update
-            Html.div []
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Html.div []
                 [ TextInput.view
                     { label = "Criterion"
                     , isInError = False
@@ -172,7 +174,7 @@ example parentMessage state =
                     , showLabel = True
                     }
                 ]
-        ]
+            ]
     }
 
 

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,101 +40,105 @@ 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 : Example State Msg
-example msg model =
+example =
     { name = "Nri.Ui.Tooltip.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
+    , categories = [ Widgets ]
-    , content =
+    , state = init
-        [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
+    , update = update
-        , Heading.h3 [] [ Html.text "primaryLabel" ]
+    , subscriptions = \_ -> Sub.none
-        , Text.smallBody
+    , view =
-            [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
+        \model ->
-            , Html.br []
+            [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
-            , Html.text "e.g. when the trigger content is an icon with no text."
+            , Heading.h3 [] [ Html.text "primaryLabel" ]
-            ]
+            , Text.smallBody
-        , Tooltip.tooltip [ Html.text "Tooltip" ]
+                [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
-            |> Tooltip.primaryLabel
+                , Html.br []
-                { trigger = Tooltip.OnClick
+                , Html.text "e.g. when the trigger content is an icon with no text."
-                , triggerHtml = Html.text "Primary Label - OnClick Trigger"
-                , onTrigger = ToggleTooltip PrimaryLabelOnClick >> msg
-                , isOpen = model.openTooltip == Just PrimaryLabelOnClick
-                , id = "primary label tooltip"
-                , extraButtonAttrs = []
-                }
-        , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
-        , Tooltip.tooltip [ Html.text "Tooltip" ]
-            |> Tooltip.primaryLabel
-                { trigger = Tooltip.OnHover
-                , triggerHtml = Html.text "Primary Label - OnHover Trigger"
-                , onTrigger = ToggleTooltip PrimaryLabelOnHover >> msg
-                , isOpen = model.openTooltip == Just PrimaryLabelOnHover
-                , id = "primary label tooltip"
-                , extraButtonAttrs = []
-                }
-        , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
-        , Heading.h3 [] [ Html.text "auxillaryDescription" ]
-        , Text.smallBody
-            [ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content"
-            , Html.br []
-            , Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation."
-            ]
-        , Tooltip.tooltip [ Html.text "Tooltip" ]
-            |> Tooltip.auxillaryDescription
-                { trigger = Tooltip.OnClick
-                , triggerHtml = Html.text "Auxillary Description Trigger"
-                , onTrigger = ToggleTooltip AuxillaryDescription >> msg
-                , isOpen = model.openTooltip == Just AuxillaryDescription
-                , id = "Auxillary description"
-                , extraButtonAttrs = []
-                }
-        , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
-        , Heading.h3 [] [ Html.text "toggleTip" ]
-        , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ]
-        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
-            [ Tooltip.tooltip
-                [ Html.text "Tooltip On Top! "
-                , Html.a
-                    [ href "/" ]
-                    [ Html.text "Links work!" ]
                 ]
-                |> Tooltip.toggleTip
+            , Tooltip.tooltip [ Html.text "Tooltip" ]
-                    { onTrigger = ToggleTooltip ToggleTipTop >> msg
+                |> Tooltip.primaryLabel
-                    , isOpen = model.openTooltip == Just ToggleTipTop
+                    { trigger = Tooltip.OnClick
-                    , label = "More info"
+                    , triggerHtml = Html.text "Primary Label - OnClick Trigger"
+                    , onTrigger = ToggleTooltip PrimaryLabelOnClick
+                    , isOpen = model.openTooltip == Just PrimaryLabelOnClick
+                    , id = "primary label tooltip"
                     , extraButtonAttrs = []
                     }
-            , Text.mediumBody
+            , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
-                [ Html.text "This toggletip will open on top"
+            , Tooltip.tooltip [ Html.text "Tooltip" ]
-                ]
+                |> Tooltip.primaryLabel
-            ]
+                    { trigger = Tooltip.OnHover
-        , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                    , triggerHtml = Html.text "Primary Label - OnHover Trigger"
-            [ Tooltip.tooltip
+                    , onTrigger = ToggleTooltip PrimaryLabelOnHover
-                [ Html.text "Tooltip On Left! "
+                    , isOpen = model.openTooltip == Just PrimaryLabelOnHover
-                , Html.a
+                    , id = "primary label tooltip"
-                    [ href "/" ]
-                    [ Html.text "Links work!" ]
-                ]
-                |> Tooltip.withPosition Tooltip.OnLeft
-                |> Tooltip.toggleTip
-                    { onTrigger = ToggleTooltip ToggleTipLeft >> msg
-                    , isOpen = model.openTooltip == Just ToggleTipLeft
-                    , label = "More info"
                     , extraButtonAttrs = []
                     }
-            , Text.mediumBody
+            , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
-                [ Html.text "This toggletip will open on the left"
+            , Heading.h3 [] [ Html.text "auxillaryDescription" ]
+            , Text.smallBody
+                [ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content"
+                , Html.br []
+                , Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation."
+                ]
+            , Tooltip.tooltip [ Html.text "Tooltip" ]
+                |> Tooltip.auxillaryDescription
+                    { trigger = Tooltip.OnClick
+                    , triggerHtml = Html.text "Auxillary Description Trigger"
+                    , onTrigger = ToggleTooltip AuxillaryDescription
+                    , isOpen = model.openTooltip == Just AuxillaryDescription
+                    , id = "Auxillary description"
+                    , extraButtonAttrs = []
+                    }
+            , Html.br [ css [ Css.marginBottom (Css.px 20) ] ]
+            , Heading.h3 [] [ Html.text "toggleTip" ]
+            , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ]
+            , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ Tooltip.tooltip
+                    [ Html.text "Tooltip On Top! "
+                    , Html.a
+                        [ href "/" ]
+                        [ Html.text "Links work!" ]
+                    ]
+                    |> Tooltip.toggleTip
+                        { onTrigger = ToggleTooltip ToggleTipTop
+                        , isOpen = model.openTooltip == Just ToggleTipTop
+                        , label = "More info"
+                        , extraButtonAttrs = []
+                        }
+                , Text.mediumBody
+                    [ Html.text "This toggletip will open on top"
+                    ]
+                ]
+            , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ Tooltip.tooltip
+                    [ Html.text "Tooltip On Left! "
+                    , Html.a
+                        [ href "/" ]
+                        [ Html.text "Links work!" ]
+                    ]
+                    |> Tooltip.withPosition Tooltip.OnLeft
+                    |> Tooltip.toggleTip
+                        { onTrigger = ToggleTooltip ToggleTipLeft
+                        , isOpen = model.openTooltip == Just ToggleTipLeft
+                        , label = "More info"
+                        , extraButtonAttrs = []
+                        }
+                , Text.mediumBody
+                    [ Html.text "This toggletip will open on the left"
+                    ]
                 ]
             ]
-        ]
     }

styleguide-app/Examples/UiIcon.elm

@@ -1,103 +1,116 @@
-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
+    , categories = List.singleton Icons
-    , content =
+    , state = ()
-        [ IconExamples.view "Interface"
+    , update = \_ state -> ( state, Cmd.none )
-            [ ( "seeMore", UiIcon.seeMore )
+    , subscriptions = \_ -> Sub.none
-            , ( "openClose", UiIcon.openClose )
+    , view =
-            , ( "download", UiIcon.download )
+        \_ ->
-            , ( "sort", UiIcon.sort )
+            [ IconExamples.view "Interface"
-            , ( "gear", UiIcon.gear )
+                [ ( "seeMore", UiIcon.seeMore )
-            , ( "sortArrow", UiIcon.sortArrow )
+                , ( "openClose", UiIcon.openClose )
+                , ( "download", UiIcon.download )
+                , ( "sort", UiIcon.sort )
+                , ( "gear", UiIcon.gear )
+                , ( "sortArrow", UiIcon.sortArrow )
+                ]
+            , IconExamples.view "Actions"
+                [ ( "unarchive", UiIcon.unarchive )
+                , ( "share", UiIcon.share )
+                , ( "preview", UiIcon.preview )
+                , ( "activity", UiIcon.activity )
+                , ( "skip", UiIcon.skip )
+                , ( "copyToClipboard", UiIcon.copyToClipboard )
+                , ( "gift", UiIcon.gift )
+                ]
+            , IconExamples.view "Guidance"
+                [ ( "footsteps", UiIcon.footsteps )
+                , ( "compass", UiIcon.compass )
+                , ( "speedometer", UiIcon.speedometer )
+                , ( "bulb", UiIcon.bulb )
+                , ( "help", UiIcon.help )
+                ]
+            , IconExamples.view "Humans & Class"
+                [ ( "person", UiIcon.person )
+                , ( "class", UiIcon.class )
+                , ( "leaderboard", UiIcon.leaderboard )
+                , ( "performance", UiIcon.performance )
+                ]
+            , IconExamples.view "Time"
+                [ ( "calendar", UiIcon.calendar )
+                , ( "clock", UiIcon.clock )
+                ]
+            , IconExamples.view "Writing & Writing Utensils"
+                [ ( "document", UiIcon.document )
+                , ( "newspaper", UiIcon.newspaper )
+                , ( "edit", UiIcon.edit )
+                , ( "pen", UiIcon.pen )
+                ]
+            , IconExamples.view "Arrows"
+                [ ( "arrowTop", UiIcon.arrowTop )
+                , ( "arrowRight", UiIcon.arrowRight )
+                , ( "arrowDown", UiIcon.arrowDown )
+                , ( "arrowLeft", UiIcon.arrowLeft )
+                , ( "arrowPointingRight", UiIcon.arrowPointingRight )
+                ]
+            , IconExamples.view "Sticky things"
+                [ ( "checkmark", UiIcon.checkmark )
+                , ( "x", UiIcon.x )
+                , ( "attention", UiIcon.attention )
+                , ( "exclamation", UiIcon.exclamation )
+                ]
+            , IconExamples.view "Notifs"
+                [ ( "flag", UiIcon.flag )
+                , ( "star", UiIcon.star )
+                , ( "starOutline", UiIcon.starOutline )
+                ]
+            , IconExamples.view "Math"
+                [ ( "equals", UiIcon.equals )
+                , ( "plus", UiIcon.plus )
+                ]
+            , IconExamples.view "Lock & Key"
+                [ ( "key", UiIcon.key )
+                , ( "lock", UiIcon.lock )
+                , ( "premiumLock", UiIcon.premiumLock )
+                ]
+            , IconExamples.view "Badges & Levels"
+                [ ( "badge", UiIcon.badge )
+                ]
+            , IconExamples.view "Tips & Tricks"
+                [ ( "hat", UiIcon.hat )
+                , ( "keychain", UiIcon.keychain )
+                ]
+            , IconExamples.view "Growth"
+                [ ( "sprout", UiIcon.sprout )
+                , ( "sapling", UiIcon.sapling )
+                , ( "tree", UiIcon.tree )
+                ]
             ]
-        , IconExamples.view "Actions"
-            [ ( "unarchive", UiIcon.unarchive )
-            , ( "share", UiIcon.share )
-            , ( "preview", UiIcon.preview )
-            , ( "activity", UiIcon.activity )
-            , ( "skip", UiIcon.skip )
-            , ( "copyToClipboard", UiIcon.copyToClipboard )
-            , ( "gift", UiIcon.gift )
-            ]
-        , IconExamples.view "Guidance"
-            [ ( "footsteps", UiIcon.footsteps )
-            , ( "compass", UiIcon.compass )
-            , ( "speedometer", UiIcon.speedometer )
-            , ( "bulb", UiIcon.bulb )
-            , ( "help", UiIcon.help )
-            ]
-        , IconExamples.view "Humans & Class"
-            [ ( "person", UiIcon.person )
-            , ( "class", UiIcon.class )
-            , ( "leaderboard", UiIcon.leaderboard )
-            , ( "performance", UiIcon.performance )
-            ]
-        , IconExamples.view "Time"
-            [ ( "calendar", UiIcon.calendar )
-            , ( "clock", UiIcon.clock )
-            ]
-        , IconExamples.view "Writing & Writing Utensils"
-            [ ( "document", UiIcon.document )
-            , ( "newspaper", UiIcon.newspaper )
-            , ( "edit", UiIcon.edit )
-            , ( "pen", UiIcon.pen )
-            ]
-        , IconExamples.view "Arrows"
-            [ ( "arrowTop", UiIcon.arrowTop )
-            , ( "arrowRight", UiIcon.arrowRight )
-            , ( "arrowDown", UiIcon.arrowDown )
-            , ( "arrowLeft", UiIcon.arrowLeft )
-            , ( "arrowPointingRight", UiIcon.arrowPointingRight )
-            ]
-        , IconExamples.view "Sticky things"
-            [ ( "checkmark", UiIcon.checkmark )
-            , ( "x", UiIcon.x )
-            , ( "attention", UiIcon.attention )
-            , ( "exclamation", UiIcon.exclamation )
-            ]
-        , IconExamples.view "Notifs"
-            [ ( "flag", UiIcon.flag )
-            , ( "star", UiIcon.star )
-            , ( "starOutline", UiIcon.starOutline )
-            ]
-        , IconExamples.view "Math"
-            [ ( "equals", UiIcon.equals )
-            , ( "plus", UiIcon.plus )
-            ]
-        , IconExamples.view "Lock & Key"
-            [ ( "key", UiIcon.key )
-            , ( "lock", UiIcon.lock )
-            , ( "premiumLock", UiIcon.premiumLock )
-            ]
-        , IconExamples.view "Badges & Levels"
-            [ ( "badge", UiIcon.badge )
-            ]
-        , IconExamples.view "Tips & Tricks"
-            [ ( "hat", UiIcon.hat )
-            , ( "keychain", UiIcon.keychain )
-            ]
-        , IconExamples.view "Growth"
-            [ ( "sprout", UiIcon.sprout )
-            , ( "sapling", UiIcon.sapling )
-            , ( "tree", UiIcon.tree )
-            ]
-        ]
     }

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 ->
+        UpdateModuleStates key exampleMsg ->
-            let
+            case Dict.get key model.moduleStates of
-                ( moduleStates, cmd ) =
+                Just example ->
-                    NriModules.update msg model.moduleStates
+                    example.update exampleMsg example.state
-            in
+                        |> Tuple.mapFirst
-            ( { model | moduleStates = moduleStates }
+                            (\newState ->
-            , Cmd.map UpdateModuleStates cmd
+                                { 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
+                        , Dict.values model.moduleStates
-                            |> List.filter (\doodad -> Set.memberOf doodad.categories category)
+                            |> List.filter
-                            |> List.map (ModuleExample.view True)
+                                (\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
+                        , Dict.values model.moduleStates
-                            |> List.map (ModuleExample.view True)
+                            |> 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
-    }