Merge remote-tracking branch 'origin/master' into restore-used-modules

elm.json

@@ -45,6 +45,7 @@
         "Nri.Ui.Icon.V4",
         "Nri.Ui.Icon.V5",
         "Nri.Ui.InputStyles.V2",
+        "Nri.Ui.Loading.V1",
         "Nri.Ui.Logo.V1",
         "Nri.Ui.MasteryIcon.V1",
         "Nri.Ui.Modal.V2",

src/Nri/Ui/Loading/V1.elm

@@ -0,0 +1,122 @@
+module Nri.Ui.Loading.V1 exposing
+    ( fadeInPage, page
+    , spinningPencil, spinningDots
+    )
+
+{-| Loading behaviors
+
+@docs fadeInPage, page
+@docs spinningPencil, spinningDots
+
+-}
+
+import Css exposing (..)
+import Css.Animations
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes as Attributes
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Svg.V1
+import Nri.Ui.UiIcon.V1 as UiIcon
+import Svg.Styled as Svg exposing (Svg)
+import Svg.Styled.Attributes as SvgAttributes
+
+
+{-| View a full-screen loading page that fades into view.
+-}
+fadeInPage : Html msg
+fadeInPage =
+    loading_
+        [ Css.property "animation-delay" "1s"
+        , Css.property "animation-duration" "1.5s"
+        , Css.property "animation-fill-mode" "forwards"
+        , Css.animationName fadeInKeyframes
+        , Css.property "animation-timing-function" "linear"
+        , Css.opacity Css.zero
+        ]
+
+
+{-| View a full-screen loading page.
+-}
+page : Html msg
+page =
+    loading_ []
+
+
+loading_ : List Css.Style -> Html msg
+loading_ withCss =
+    Html.div
+        [ Attributes.css
+            ([ Css.backgroundColor Colors.blueDeep
+             , Css.position Css.fixed
+             , Css.displayFlex
+             , Css.alignItems Css.center
+             , Css.justifyContent Css.center
+             , Css.width (Css.vw 100)
+             , Css.height (Css.vh 100)
+             , Css.top Css.zero
+             , Css.left Css.zero
+             , Css.zIndex (Css.int 10000)
+             ]
+                ++ withCss
+            )
+        ]
+        [ Nri.Ui.Svg.V1.toHtml spinningPencil
+        ]
+
+
+{-| -}
+spinningPencil : Nri.Ui.Svg.V1.Svg
+spinningPencil =
+    UiIcon.edit
+        |> Nri.Ui.Svg.V1.withLabel "Loading..."
+        |> Nri.Ui.Svg.V1.withColor Colors.white
+        |> Nri.Ui.Svg.V1.withWidth (Css.px 100)
+        |> Nri.Ui.Svg.V1.withHeight (Css.px 100)
+        |> Nri.Ui.Svg.V1.withCss circlingCss
+
+
+{-| -}
+spinningDots : Nri.Ui.Svg.V1.Svg
+spinningDots =
+    Svg.svg
+        [ SvgAttributes.width "100%"
+        , SvgAttributes.height "100%"
+        , SvgAttributes.viewBox "0 0 12.54 12.54"
+        ]
+        [ Svg.circle [ SvgAttributes.fill "#004e95", SvgAttributes.cx "6.13", SvgAttributes.cy "0.98", SvgAttributes.r "0.98" ] []
+        , Svg.circle [ SvgAttributes.fill "#004cc9", SvgAttributes.cx "9.95", SvgAttributes.cy "2.47", SvgAttributes.r "0.98", SvgAttributes.transform "translate(1.12 7.67) rotate(-44.43)" ] []
+        , Svg.circle [ SvgAttributes.fill "#146aff", SvgAttributes.x "11.56", SvgAttributes.cy "6.24", SvgAttributes.r "0.98", SvgAttributes.transform "translate(5.09 17.67) rotate(-88.86)" ] []
+        , Svg.circle [ SvgAttributes.fill "#0af", SvgAttributes.cx "10", SvgAttributes.cy "10.02", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-4.15 9.58) rotate(-43.29)" ] []
+        , Svg.circle [ SvgAttributes.fill "#d4f0ff", SvgAttributes.cx "6.2", SvgAttributes.cy "11.56", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-5.6 17.29) rotate(-87.71)" ] []
+        , Svg.circle [ SvgAttributes.fill "#eef9ff", SvgAttributes.cx "2.44", SvgAttributes.cy "9.92", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-6.03 4.21) rotate(-42.14)" ] []
+        , Svg.circle [ SvgAttributes.fill "#f5f5f5", SvgAttributes.cx "0.98", SvgAttributes.cy "6.1", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-5.16 6.71) rotate(-86.57)" ] []
+        , Svg.circle [ SvgAttributes.fill "#fff", SvgAttributes.cx "2.69", SvgAttributes.cy "2.37", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-0.9 2.35) rotate(-41)" ] []
+        ]
+        |> Nri.Ui.Svg.V1.fromHtml
+        |> Nri.Ui.Svg.V1.withWidth (Css.px 100)
+        |> Nri.Ui.Svg.V1.withHeight (Css.px 100)
+        |> Nri.Ui.Svg.V1.withCss circlingCss
+
+
+circlingCss : List Css.Style
+circlingCss =
+    [ Css.property "animation-duration" "1s"
+    , Css.property "animation-iteration-count" "infinite"
+    , Css.animationName rotateKeyframes
+    , Css.property "animation-timing-function" "linear"
+    ]
+
+
+rotateKeyframes : Css.Animations.Keyframes {}
+rotateKeyframes =
+    Css.Animations.keyframes
+        [ ( 0, [ Css.Animations.transform [ Css.rotate (Css.deg -360) ] ] )
+        ]
+
+
+fadeInKeyframes : Css.Animations.Keyframes {}
+fadeInKeyframes =
+    Css.Animations.keyframes
+        [ ( 0, [ Css.Animations.opacity Css.zero ] )
+        , ( 100, [ Css.Animations.opacity (Css.num 1) ] )
+        ]

src/Nri/Ui/Page/V3.elm

@@ -3,7 +3,7 @@ module Nri.Ui.Page.V3 exposing
     , RecoveryText(..)
     )
 
-{-| A styled NRI issue page!
+{-| A styled NRI page!
 
 @docs DefaultPage, broken, blocked, notFound, noPermission
 @docs RecoveryText

styleguide-app/Category.elm

@@ -133,7 +133,7 @@ forDisplay category =
             "Text and Fonts"
 
         Pages ->
-            "Error Pages"
+            "Pages"
 
         Animations ->
             "Animations"
@@ -180,7 +180,7 @@ forId category =
             "text-and-fonts"
 
         Pages ->
-            "error-pages"
+            "pages"
 
         Animations ->
             "animations"

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,784 @@
+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.Loading as Loading
+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
+            )
+    , Loading.example
+        |> Example.wrapMsg LoadingMsg
+            (\msg ->
+                case msg of
+                    LoadingMsg childMsg ->
+                        Just childMsg
+
+                    _ ->
+                        Nothing
+            )
+        |> Example.wrapState LoadingState
+            (\msg ->
+                case msg of
+                    LoadingState 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
+    | LoadingState Loading.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
+    | LoadingMsg Loading.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 parentMessage model =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Accordion.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Layout
-    , content =
-        [ 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
-            }
-        ]
-            |> List.map (Html.map parentMessage)
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = view
+    , categories = [ Layout ]
     }
 
 
+{-| -}
+view : State -> List (Html Msg)
+view model =
+    [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ]
+    , Accordion.view
+        { entries =
+            [ { 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
-    , content =
-        [ Heading.h3 [] [ Html.text "Markdown-supporting:" ]
-        , Alert.error "This is an **error**"
-        , Alert.warning "This is a **warning**"
-        , Alert.tip "This is a **tip**"
-        , Alert.success "This is a **success**"
-        , Html.hr [] []
-        , Heading.h3 [] [ Html.text "Stacktraces-supporting:" ]
-        , Alert.somethingWentWrong exampleRailsError
-        ]
+    , categories = [ Messaging ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ Heading.h3 [] [ Html.text "Markdown-supporting:" ]
+            , Alert.error "This is an **error**"
+            , Alert.warning "This is a **warning**"
+            , 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
-    , content =
-        [ IconExamples.view "Quiz engine"
-            [ ( "diagnostic", AssignmentIcon.diagnostic )
-            , ( "practice", AssignmentIcon.practice )
-            , ( "quiz", AssignmentIcon.quiz )
+    , categories = [ Icons ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ 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
-    , content =
-        [ if state.show then
-            div
-                []
-                [ 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)" ]
-                ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = view
+    , categories = [ Messaging ]
+    }
 
-          else
-            div
-                []
-                [ h3 [] [ text "success" ]
-                , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing
-                , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ]
-                ]
-        , h3 [] [ text "error" ]
-        , BannerAlert.error [ text "This is an error message!" ] Nothing
-        , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ]
-        , h3 [] [ text "neutral" ]
-        , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing
-        , 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
+
+view : State -> List (Html Msg)
+view state =
+    [ if state.show then
+        div
+            []
+            [ 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
+            []
+            [ h3 [] [ text "success" ]
+            , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing
+            , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ]
+            ]
+    , h3 [] [ text "error" ]
+    , BannerAlert.error [ text "This is an error message!" ] Nothing
+    , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ]
+    , h3 [] [ text "neutral" ]
+    , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing
+    , 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" ]
-        , BannerAlert.success
-            [ text "Click "
-            , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
-                [ text
-                    """here, yes, HERE, right here on this very long success message.
+        ]
+    , h3 [] [ text "with multi-line link and icon" ]
+    , BannerAlert.success
+        [ text "Click "
+        , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ]
+            [ text
+                """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) ] ]
-                    [ Svg.toHtml UiIcon.gear ]
-                ]
-            , text " to check out NoRedInk."
+            , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ]
+                [ Svg.toHtml UiIcon.gear ]
             ]
-            Nothing
-        , pre []
-            [ text
-                """BannerAlert.success
+        , text " to check out NoRedInk."
+        ]
+        Nothing
+    , 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
-    = State (Control (Model parentMsg))
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Button.V10"
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = \state -> [ viewButtonExamples state ]
+    , categories = [ Buttons ]
+    }
+
+
+{-| -}
+type State
+    = State (Control Model)
 
 
 {-| -}
@@ -31,34 +42,26 @@ type ButtonType
 
 
 {-| -}
-example :
-    (String -> ModuleMessages (Msg parentMsg) parentMsg)
-    -> State parentMsg
-    -> ModuleExample parentMsg
-example unnamedMessages state =
-    let
-        messages =
-            unnamedMessages "ButtonExample"
-    in
-    { name = "Nri.Ui.Button.V10"
-    , categories = Set.fromList Category.sorter <| List.singleton Buttons
-    , content = [ viewButtonExamples messages state ]
-    }
-
-
-{-| -}
-type Msg parentMsg
-    = SetState (State parentMsg)
+type Msg
+    = SetState State
+    | ShowItWorked String String
     | NoOp
 
 
 {-| -}
-update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) )
+update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
         SetState newState ->
             ( newState, Cmd.none )
 
+        ShowItWorked group message ->
+            let
+                _ =
+                    Debug.log group message
+            in
+            ( state, Cmd.none )
+
         NoOp ->
             ( state, Cmd.none )
 
@@ -67,17 +70,17 @@ update msg state =
 -- INTERNAL
 
 
-type alias Model msg =
+type alias Model =
     { label : String
     , icon : Maybe Svg
     , buttonType : ButtonType
-    , width : Button.Attribute msg
-    , state : Button.Attribute msg
+    , width : Button.Attribute Msg
+    , state : Button.Attribute Msg
     }
 
 
 {-| -}
-init : State msg
+init : State
 init =
     Control.record Model
         |> Control.field "label" (Control.string "Label")
@@ -119,40 +122,34 @@ iconChoice =
         ]
 
 
-viewButtonExamples :
-    ModuleMessages (Msg parentMsg) parentMsg
-    -> State parentMsg
-    -> Html parentMsg
-viewButtonExamples messages (State control) =
+viewButtonExamples : State -> Html Msg
+viewButtonExamples (State control) =
     let
         model =
             Control.currentValue control
     in
-    [ Control.view (State >> SetState >> messages.wrapper) control
+    [ Control.view (State >> SetState) control
         |> fromUnstyled
-    , buttons messages model
-    , toggleButtons messages
+    , buttons model
+    , toggleButtons
     , Button.delete
         { label = "Delete Something"
-        , onClick = messages.showItWorked "delete"
+        , onClick = ShowItWorked "ButtonExample" "delete"
         }
     , Button.link "linkExternalWithTracking"
         [ Button.unboundedWidth
         , Button.secondary
         , Button.linkExternalWithTracking
             { url = "#"
-            , track = messages.showItWorked "linkExternalWithTracking clicked"
+            , track = ShowItWorked "ButtonExample" "linkExternalWithTracking clicked"
             }
         ]
     ]
         |> div []
 
 
-buttons :
-    ModuleMessages (Msg parentMsg) parentMsg
-    -> Model parentMsg
-    -> Html parentMsg
-buttons messages model =
+buttons : Model -> Html Msg
+buttons model =
     let
         sizes =
             [ ( Button.small, "small" )
@@ -195,7 +192,7 @@ buttons messages model =
                 , model.width
                 , model.state
                 , Button.custom [ Html.Styled.Attributes.class "styleguide-button" ]
-                , Button.onClick (messages.showItWorked "Button clicked!")
+                , Button.onClick (ShowItWorked "ButtonExample" "Button clicked!")
                 , case model.icon of
                     Just icon ->
                         Button.icon icon
@@ -221,20 +218,20 @@ buttons messages model =
         |> table []
 
 
-toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg
-toggleButtons messages =
+toggleButtons : Html Msg
+toggleButtons =
     div []
         [ Heading.h3 [] [ text "Button toggle" ]
         , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ]
             [ Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = False
                 }
             , Button.toggleButton
-                { onDeselect = messages.showItWorked "onDeselect"
-                , onSelect = messages.showItWorked "onSelect"
+                { onDeselect = ShowItWorked "ButtonExample" "onDeselect"
+                , onSelect = ShowItWorked "ButtonExample" "onSelect"
                 , label = "5"
                 , pressed = True
                 }

styleguide-app/Examples/Callout.elm

@@ -1,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
-    , content =
-        [ -- PLAIN
-          Html.h3 [] [ Html.text "Originally Designed Use Case" ]
-        , callout
-            [ Callout.label (Html.text "BETA")
-            , Callout.custom (title "beta warning")
-            ]
-            [ 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 "."
-            ]
+    , categories = [ Messaging ]
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ -- PLAIN
+              Html.h3 [] [ Html.text "Originally Designed Use Case" ]
+            , callout
+                [ Callout.label (Html.text "BETA")
+                , Callout.custom (title "beta warning")
+                ]
+                [ 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
-        , Html.h3 [] [ Html.text "Without side text" ]
-        , callout
-            [ Callout.custom (title "no side text") ]
-            [ Html.text "I feel weird without my side text!" ]
+            -- WITH SIDE TEXT
+            , Html.h3 [] [ Html.text "Without side text" ]
+            , callout
+                [ Callout.custom (title "no side text") ]
+                [ Html.text "I feel weird without my side text!" ]
 
-        -- WITH CSS CUSTOMIZATIONS
-        , Html.h3 [] [ Html.text "With CSS customizations" ]
-        , callout
-            [ Callout.containerCss [ Css.margin (Css.px 20) ]
-            , Callout.label (Html.text "HMMM")
-            , Callout.custom (title "margin")
+            -- WITH CSS CUSTOMIZATIONS
+            , Html.h3 [] [ Html.text "With CSS customizations" ]
+            , callout
+                [ Callout.containerCss [ Css.margin (Css.px 20) ]
+                , Callout.label (Html.text "HMMM")
+                , 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Checkbox.V5"
-    , categories = Sort.Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
-        , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
-        , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
-        , viewDisabledCheckbox "styleguide-checkbox-disabled" state
-        , viewMultilineCheckboxes
-        , h3 [] [ text "Premium Checkboxes" ]
-        , viewPremiumCheckboxes state
-        ]
-            |> List.map (Html.map parentMessage)
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
+            , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
+            , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state
+            , viewDisabledCheckbox "styleguide-checkbox-disabled" state
+            , viewMultilineCheckboxes
+            , h3 [] [ text "Premium Checkboxes" ]
+            , viewPremiumCheckboxes state
+            ]
+    , categories = [ Inputs ]
     }
 
 

styleguide-app/Examples/ClickableSvg.elm

@@ -1,29 +1,19 @@
-module Examples.ClickableSvg exposing
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
+module Examples.ClickableSvg exposing (Msg, State, example)
 
 {-|
 
-@docs Msg
-@docs State
-@docs example
-@docs init
-@docs update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Color exposing (Color)
 import Css
+import Example exposing (Example)
 import Examples.IconExamples as IconExamples
 import Html.Styled as Html
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
-import ModuleExample exposing (ModuleExample, ModuleMessages)
 import Nri.Ui.ClickableSvg.V1 as ClickableSvg
 import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
 import Nri.Ui.Colors.V1 as Colors
@@ -31,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 unnamedMessages state =
-    let
-        parentMessages =
-            unnamedMessages "Nri.Ui.ClickableSvg.V1"
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.ClickableSvg.V1"
-    , categories = Set.fromList Category.sorter [ Buttons, Icons ]
-    , content =
-        [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
-            [ ClickableSvg.button "Back"
-                UiIcon.arrowLeft
-                [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ]
-            , viewCode
-                "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
-            ]
-        , 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 (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
-                    ]
+    , categories = [ Buttons, Icons ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ ClickableSvg.button "Back"
+                    UiIcon.arrowLeft
+                    [ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ]
+                , viewCode
+                    "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]"
                 ]
-            , 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 :
-    (String -> ModuleMessages Msg parentMsg)
-    -> State
-    -> ModuleExample parentMsg
-example unnamedMessages state =
-    let
-        messages =
-            unnamedMessages "ClickableTextExample"
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.ClickableText.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Buttons
-    , content =
-        [ viewExamples messages state ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view = \state -> [ viewExamples state ]
+    , categories = [ Buttons ]
     }
 
 
@@ -62,6 +51,12 @@ init =
         |> State
 
 
+{-| -}
+type Msg
+    = SetState State
+    | ShowItWorked String String
+
+
 {-| -}
 update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
@@ -69,6 +64,13 @@ update msg state =
         SetState newState ->
             ( newState, Cmd.none )
 
+        ShowItWorked group message ->
+            let
+                _ =
+                    Debug.log group message
+            in
+            ( state, Cmd.none )
+
 
 
 -- INTERNAL
@@ -80,18 +82,15 @@ type alias Model =
     }
 
 
-viewExamples :
-    ModuleMessages Msg parentMsg
-    -> State
-    -> Html parentMsg
-viewExamples messages (State control) =
+viewExamples : State -> Html Msg
+viewExamples (State control) =
     let
         model =
             Control.currentValue control
     in
-    [ Control.view (State >> SetState >> messages.wrapper) control
+    [ Control.view (State >> SetState) control
         |> fromUnstyled
-    , buttons messages model
+    , buttons model
     , Text.smallBody
         [ text "Sometimes, we'll want our clickable links: "
         , ClickableText.link model.label
@@ -102,7 +101,7 @@ viewExamples messages (State control) =
         , text " and clickable buttons: "
         , ClickableText.button model.label
             [ ClickableText.small
-            , ClickableText.onClick (messages.showItWorked "in-line button")
+            , ClickableText.onClick (ShowItWorked "ClickableText" "in-line button")
             , Maybe.map ClickableText.icon model.icon
                 |> Maybe.withDefault (ClickableText.custom [])
             ]
@@ -120,11 +119,8 @@ sizes =
     ]
 
 
-buttons :
-    ModuleMessages Msg parentMsg
-    -> Model
-    -> Html parentMsg
-buttons messages model =
+buttons : Model -> Html Msg
+buttons model =
     let
         sizeRow label render =
             row label (List.map render sizes)
@@ -144,7 +140,7 @@ buttons messages model =
             (\( size, sizeLabel ) ->
                 ClickableText.button model.label
                     [ size
-                    , ClickableText.onClick (messages.showItWorked sizeLabel)
+                    , ClickableText.onClick (ShowItWorked "ClickableText" sizeLabel)
                     , Maybe.map ClickableText.icon model.icon
                         |> Maybe.withDefault (ClickableText.custom [])
                     ]

styleguide-app/Examples/Colors.elm

@@ -1,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
-    , content =
-        [ [ ( "gray20", Colors.gray20, "Main text" )
-          , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
-          , ( "gray75", Colors.gray75, "Border of form elements and tabs" )
-          , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" )
-          , ( "gray96", Colors.gray96, "backgrounds/alternating rows" )
-          , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" )
-          , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" )
-          , ( "azureDark", Colors.azureDark, "Azure button shadow" )
-          , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" )
-          , ( "glacier", Colors.glacier, "Blue highlights/selected elements" )
-          , ( "lichen", Colors.lichen, "70-79 score" )
-          , ( "grassland", Colors.grassland, "80-89 score" )
-          , ( "green", Colors.green, "90-100 score" )
-          , ( "greenDark", Colors.greenDark, "Green button, swathes of green" )
-          , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" )
-          , ( "greenLight", Colors.greenLight, "Green backgrounds" )
-          , ( "greenLightest", Colors.greenLightest, "Green backgrounds" )
-          , ( "cornflower", Colors.cornflower, "Mastery level 1" )
-          , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" )
-          , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" )
-          , ( "aqua", Colors.aqua, "Master level 2" )
-          , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" )
-          , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" )
-          , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" )
-          , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" )
-          , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" )
-          , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" )
-          , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" )
-          , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" )
-          , ( "red", Colors.red, "NoRedInk red, form warnings, practice" )
-          , ( "redDark", Colors.redDark, "Red links/text, red button shadow" )
-          , ( "redLight", Colors.redLight, "Red backgrounds" )
-          , ( "cyan", Colors.cyan, "Blue Highlighter" )
-          , ( "magenta", Colors.magenta, "Pink highlighter" )
-          , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" )
-          , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" )
-          , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" )
-          , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
-          ]
-            |> viewColors
-        , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
-        , 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." ]
-        , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
-          , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
-          , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" )
-          , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" )
-          , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" )
-          , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" )
-          , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" )
-          , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" )
-          , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" )
-          , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" )
-          , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" )
-          , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" )
-          , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" )
-          , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
-          ]
-            |> viewColors
-        , Heading.h3 [] [ Html.text "Text Highlight Colors" ]
-        , Html.p [] [ Html.text "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
-        , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
-          , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )
-          , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" )
-          , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" )
-          , ( "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
-        ]
+    , categories = List.singleton Colors
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ [ ( "gray20", Colors.gray20, "Main text" )
+              , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
+              , ( "gray75", Colors.gray75, "Border of form elements and tabs" )
+              , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" )
+              , ( "gray96", Colors.gray96, "backgrounds/alternating rows" )
+              , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" )
+              , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" )
+              , ( "azureDark", Colors.azureDark, "Azure button shadow" )
+              , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" )
+              , ( "glacier", Colors.glacier, "Blue highlights/selected elements" )
+              , ( "lichen", Colors.lichen, "70-79 score" )
+              , ( "grassland", Colors.grassland, "80-89 score" )
+              , ( "green", Colors.green, "90-100 score" )
+              , ( "greenDark", Colors.greenDark, "Green button, swathes of green" )
+              , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" )
+              , ( "greenLight", Colors.greenLight, "Green backgrounds" )
+              , ( "greenLightest", Colors.greenLightest, "Green backgrounds" )
+              , ( "cornflower", Colors.cornflower, "Mastery level 1" )
+              , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" )
+              , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" )
+              , ( "aqua", Colors.aqua, "Master level 2" )
+              , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" )
+              , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" )
+              , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" )
+              , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" )
+              , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" )
+              , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" )
+              , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" )
+              , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" )
+              , ( "red", Colors.red, "NoRedInk red, form warnings, practice" )
+              , ( "redDark", Colors.redDark, "Red links/text, red button shadow" )
+              , ( "redLight", Colors.redLight, "Red backgrounds" )
+              , ( "cyan", Colors.cyan, "Blue Highlighter" )
+              , ( "magenta", Colors.magenta, "Pink highlighter" )
+              , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" )
+              , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" )
+              , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" )
+              , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" )
+              ]
+                |> viewColors
+            , Heading.h3 [] [ Html.text "Background Highlight Colors" ]
+            , 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." ]
+            , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" )
+              , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" )
+              , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" )
+              , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" )
+              , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" )
+              , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" )
+              , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" )
+              , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" )
+              , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" )
+              , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" )
+              , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" )
+              , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" )
+              , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" )
+              , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" )
+              ]
+                |> viewColors
+            , Heading.h3 [] [ Html.text "Text Highlight Colors" ]
+            , Html.p [] [ Html.text "Colors for highlighting text on a white background.  These colors are readable at 14px bold and bigger." ]
+            , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" )
+              , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" )
+              , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" )
+              , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" )
+              , ( "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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.DisclosureIndicator.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
-        [ 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"
+    , categories = [ Widgets ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
+            , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ]
+                [ toggleButton ToggleLarge "Toggle large indicator"
+                , 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 =
-    List (Nri.Ui.Dropdown.V2.ViewOptionEntry value)
+type alias State =
+    List (Nri.Ui.Dropdown.V2.ViewOptionEntry String)
 
 
 {-| -}
-example : (Msg -> msg) -> State Value -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Dropdown.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Html.Styled.map parentMessage (Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog)
-        ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog
+            ]
+    , categories = [ Inputs ]
     }
 
 
 {-| -}
-init : State Value
+init : State
 init =
     [ { isSelected = False, val = "Burrito", displayText = "Burrito" }
     , { isSelected = False, val = "Nacho", displayText = "Nacho" }
@@ -49,7 +47,7 @@ init =
 
 
 {-| -}
-update : Msg -> State Value -> ( State Value, Cmd Msg )
+update : Msg -> State -> ( State, Cmd Msg )
 update msg state =
     case msg of
         ConsoleLog message ->

styleguide-app/Examples/Fonts.elm

@@ -1,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
-    , content =
-        [ Heading.h3 [] [ Html.text "baseFont" ]
-        , Html.p [ css [ Fonts.baseFont ] ]
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        , Heading.h3 [] [ Html.text "quizFont" ]
-        , Html.p [ css [ Fonts.quizFont ] ]
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        , Heading.h3 [] [ Html.text "ugFont" ]
-        , Html.p [ css [ Fonts.ugFont ] ]
-            [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        ]
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ Heading.h3 [] [ Html.text "baseFont" ]
+            , Html.p [ css [ Fonts.baseFont ] ]
+                [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
+            , Heading.h3 [] [ Html.text "quizFont" ]
+            , 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
-    , content =
-        [ Heading.h1 [] [ Html.text "This is the main page heading." ]
-        , Heading.h2 [] [ Html.text "This is a tagline" ]
-        , Heading.h3 [] [ Html.text "This is a subHeading" ]
-        , 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 ] ]" ]
-        ]
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ Heading.h1 [] [ Html.text "This is the main page heading." ]
+            , Heading.h2 [] [ Html.text "This is a tagline" ]
+            , Heading.h3 [] [ Html.text "This is a subHeading" ]
+            , 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
-    , content =
-        [ viewLarge "Bulbs and Tips"
-            [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" }
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ viewLarge "Bulbs and Tips"
+                [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" }
+                ]
             ]
-        ]
     }
 
 

styleguide-app/Examples/Loading.elm

@@ -0,0 +1,139 @@
+module Examples.Loading exposing (example, State, Msg)
+
+{-|
+
+@docs example, State, Msg
+
+-}
+
+import Browser.Events
+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 Html.Styled.Events as Events
+import Json.Decode
+import Nri.Ui.Button.V10 as Button
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Heading.V2 as Heading
+import Nri.Ui.Loading.V1 as Loading
+import Nri.Ui.Svg.V1 as Svg
+import Nri.Ui.Text.V4 as Text
+
+
+{-| -}
+type alias State =
+    { showLoadingFadeIn : Bool
+    , showLoading : Bool
+    , showSpinners : Bool
+    }
+
+
+init : State
+init =
+    { showLoadingFadeIn = False
+    , showLoading = False
+    , showSpinners = False
+    }
+
+
+{-| -}
+type Msg
+    = ShowLoadingFadeIn
+    | ShowLoading
+    | ShowSpinners
+    | Close
+
+
+update : Msg -> State -> ( State, Cmd Msg )
+update msg model =
+    case msg of
+        ShowLoadingFadeIn ->
+            ( { model | showLoadingFadeIn = True }
+            , Cmd.none
+            )
+
+        ShowLoading ->
+            ( { model | showLoading = True }
+            , Cmd.none
+            )
+
+        ShowSpinners ->
+            ( { model | showSpinners = True }
+            , Cmd.none
+            )
+
+        Close ->
+            ( { model
+                | showLoadingFadeIn = False
+                , showLoading = False
+                , showSpinners = False
+              }
+            , Cmd.none
+            )
+
+
+subscriptions : State -> Sub Msg
+subscriptions { showLoadingFadeIn, showLoading, showSpinners } =
+    if showLoadingFadeIn || showLoading || showSpinners then
+        Browser.Events.onClick (Json.Decode.succeed Close)
+
+    else
+        Sub.none
+
+
+{-| -}
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Loading.V1"
+    , categories = [ Pages ]
+    , state = init
+    , update = update
+    , subscriptions = subscriptions
+    , view =
+        \{ showLoadingFadeIn, showLoading, showSpinners } ->
+            [ if showLoading then
+                Loading.page
+
+              else
+                Html.text ""
+            , button "Loading.page" ShowLoading showLoadingFadeIn
+            , if showLoadingFadeIn then
+                Loading.fadeInPage
+
+              else
+                Html.text ""
+            , button "Loading.fadeInPage" ShowLoadingFadeIn showLoadingFadeIn
+            , if showSpinners then
+                Html.div []
+                    [ Loading.spinningPencil
+                        |> Svg.withColor Colors.blue
+                        |> Svg.toHtml
+                    , Text.caption [ Html.text "By default, the spinningPencil is white. Showing as blue for visibility." ]
+                    , Loading.spinningDots
+                        |> Svg.toHtml
+                    ]
+
+              else
+                button "Loading.spinningPencil, Loading.spinningDots" ShowSpinners showLoadingFadeIn
+            ]
+    }
+
+
+button : String -> Msg -> Bool -> Html Msg
+button name do disabled =
+    Button.button name
+        [ Button.custom
+            [ Events.stopPropagationOn "click"
+                (Json.Decode.map (\m -> ( m, True ))
+                    (Json.Decode.succeed do)
+                )
+            ]
+        , if disabled then
+            Button.disabled
+
+          else
+            Button.secondary
+        , Button.css [ Css.marginRight (Css.px 20) ]
+        ]

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
-    , content =
-        [ IconExamples.viewWithCustomStyles "NRI"
-            [ ( "noredink"
-              , Logo.noredink
-              , [ Css.height (Css.px 25)
-                , Css.width (Css.px 100)
-                , Css.margin (Css.px 4)
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ IconExamples.viewWithCustomStyles "NRI"
+                [ ( "noredink"
+                  , Logo.noredink
+                  , [ Css.height (Css.px 25)
+                    , Css.width (Css.px 100)
+                    , Css.margin (Css.px 4)
+                    ]
+                  )
                 ]
-              )
-            ]
-        , IconExamples.viewWithCustomStyles "Social Media & SSO"
-            [ ( "facebook"
-              , Logo.facebook
-              , defaults
-              )
-            , ( "twitter", Logo.twitter, defaults )
-            , ( "clever"
-              , Logo.clever
-              , [ Css.height (Css.px 25)
-                , Css.width (Css.px 100)
-                , Css.margin (Css.px 4)
-                , Css.color Colors.azure
+            , IconExamples.viewWithCustomStyles "Social Media & SSO"
+                [ ( "facebook"
+                  , Logo.facebook
+                  , defaults
+                  )
+                , ( "twitter", Logo.twitter, defaults )
+                , ( "clever"
+                  , Logo.clever
+                  , [ Css.height (Css.px 25)
+                    , Css.width (Css.px 100)
+                    , 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
-    , content =
-        [ IconExamples.view "Levels"
-            [ ( "levelZero", MasteryIcon.levelZero )
-            , ( "levelOne", MasteryIcon.levelOne )
-            , ( "levelTwo", MasteryIcon.levelTwo )
-            , ( "levelThree", MasteryIcon.levelThree )
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Modal.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
-    , content =
-        [ viewSettings state
-        , Button.button "Launch Info Modal"
-            [ 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
+    , categories = [ Modals ]
+    , state = init
+    , update = update
+    , subscriptions = subscriptions
+    , view =
+        \state ->
+            [ viewSettings state
+            , Button.button "Launch Info Modal"
+                [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal"))
+                , 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,66 @@
-module Examples.Page exposing (example)
+module Examples.Page exposing (example, State, Msg)
 
 {-|
 
-@docs example, styles
+@docs example, State, Msg
 
 -}
 
 import Category exposing (Category(..))
 import Css
 import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Page.V3 as Page
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : msg -> ModuleExample msg
-example noOp =
+type alias State =
+    ()
+
+
+{-| -}
+type alias Msg =
+    String
+
+
+{-| -}
+example : Example State Msg
+example =
     { name = "Nri.Ui.Page.V3"
-    , categories = Set.fromList Category.sorter <| List.singleton Pages
-    , content =
-        [ Css.Global.global
-            [ Css.Global.selector "[data-page-container]"
-                [ Css.displayFlex
-                , Css.flexWrap Css.wrap
+    , categories = List.singleton Pages
+    , state = ()
+    , update =
+        \msg model ->
+            let
+                _ =
+                    Debug.log "Clicked: " msg
+            in
+            ( model, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ 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 = "Page.notFound ReturnTo"
+                , recoveryText = Page.ReturnTo "the main page"
+                }
+            , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ]
+            , Page.broken
+                { link = "Page.broken Reload"
+                , recoveryText = Page.Reload
+                }
+            , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ]
+            , Page.noPermission
+                { link = "Page.noPermission Custom"
+                , 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
-    , content =
-        [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ]
-            [ Pennant.premiumFlag
-                |> Svg.withHeight (Css.px 60)
-                |> Svg.toHtml
-            , Pennant.disabledPremiumFlag
-                |> Svg.withHeight (Css.px 60)
-                |> Svg.toHtml
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ]
+                [ Pennant.premiumFlag
+                    |> Svg.withHeight (Css.px 60)
+                    |> 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
-    , State
+    ( Msg, State
     , example
-    , init
-    , update
     )
 
 {-|
 
-@docs Msg
-@docs State
+@docs Msg, State
 @docs example
-@docs init
-@docs update
 
 -}
 
 import Accessibility.Styled
 import Category exposing (Category(..))
 import Debug.Control as Control exposing (Control)
+import Example exposing (Example)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attr
 import Html.Styled.Events as Events
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.SegmentedControl.V8 as SegmentedControl
 import Nri.Ui.Svg.V1 as Svg exposing (Svg)
 import Nri.Ui.UiIcon.V1 as UiIcon
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
-    let
-        options =
-            Control.currentValue state.optionsControl
-    in
+example : Example State Msg
+example =
     { name = "Nri.Ui.SegmentedControl.V8"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
-        [ Control.view ChangeOptions state.optionsControl
-            |> Html.fromUnstyled
-        , let
-            viewFn =
-                if options.useSpa then
-                    SegmentedControl.viewSpa Debug.toString
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            let
+                options =
+                    Control.currentValue state.optionsControl
+            in
+            [ Control.view ChangeOptions state.optionsControl
+                |> Html.fromUnstyled
+            , let
+                viewFn =
+                    if options.useSpa then
+                        SegmentedControl.viewSpa Debug.toString
 
-                else
-                    SegmentedControl.view
-          in
-          viewFn
-            { onClick = Select
-            , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
-            , selected = state.selected
-            , width = options.width
-            , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]")
-            }
-        , Html.h3 [] [ Html.text "Toggle only view" ]
-        , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
-        , SegmentedControl.viewToggle
-            { onClick = Select
-            , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
-            , selected = state.selected
-            , width = options.width
-            }
-        ]
-            |> List.map (Html.map parentMessage)
+                    else
+                        SegmentedControl.view
+              in
+              viewFn
+                { onClick = Select
+                , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ]
+                , selected = state.selected
+                , width = options.width
+                , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]")
+                }
+            , Html.h3 [] [ Html.text "Toggle only view" ]
+            , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ]
+            , SegmentedControl.viewToggle
+                { onClick = Select
+                , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ]
+                , selected = state.selected
+                , width = options.width
+                }
+            ]
+    , categories = [ Widgets ]
     }
 
 

styleguide-app/Examples/Select.elm

@@ -1,81 +1,74 @@
-module Examples.Select exposing
-    ( Msg
-    , State
-    , example
-    , init
-    , update
-    )
+module Examples.Select exposing (Msg, State, example)
 
 {-|
 
-@docs Msg
-@docs State
-@docs example
-@docs init
-@docs update
+@docs Msg, State, example
 
 -}
 
 import Category exposing (Category(..))
 import Css
+import Example exposing (Example)
 import Html.Styled
 import Html.Styled.Attributes
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Select.V7 as Select
-import Sort.Set as Set exposing (Set)
 
 
 {-| -}
-example : (Msg -> msg) -> State -> ModuleExample msg
-example parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Select.V7"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Html.Styled.label
-            [ Html.Styled.Attributes.for "tortilla-selector" ]
-            [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ]
-        , Select.view
-            { current = Nothing
-            , choices =
-                [ { label = "Tacos", value = "Tacos" }
-                , { label = "Burritos", value = "Burritos" }
-                , { 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
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Inputs ]
+    , view =
+        \state ->
+            [ Html.Styled.label
+                [ Html.Styled.Attributes.for "tortilla-selector" ]
+                [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ]
+            , Select.view
                 { current = Nothing
-                , choices = []
-                , id = "overflowed-selector"
+                , choices =
+                    [ { 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Slide.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Animations
-    , content =
-        [ Keyed.node "div"
-            [ css
-                [ Slide.withSlidingContents
-                , Css.border3 (Css.px 3) Css.solid Colors.gray75
-                , Css.padding (Css.px 20)
-                , Css.width (Css.px 600)
-                ]
-            ]
-            (case state.previous of
-                Just previousPanel ->
-                    [ viewPanel previousPanel (Slide.animateOut state.direction)
-                    , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
+    , categories = [ Animations ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Keyed.node "div"
+                [ css
+                    [ Slide.withSlidingContents
+                    , Css.border3 (Css.px 3) Css.solid Colors.gray75
+                    , Css.padding (Css.px 20)
+                    , Css.width (Css.px 600)
                     ]
+                ]
+                (case state.previous of
+                    Just previousPanel ->
+                        [ viewPanel previousPanel (Slide.animateOut state.direction)
+                        , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
+                        ]
 
-                Nothing ->
-                    [ viewPanel (Zipper.current state.panels) (Css.batch [])
+                    Nothing ->
+                        [ 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
-            [ css
-                [ 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"
                 ]
             ]
-            [ 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.SlideModal.V2"
-    , categories = Set.fromList Category.sorter <| List.singleton Modals
-    , content =
-        [ viewModal state.modal
-        , modalLaunchButton
-        ]
-            |> List.map (Html.map parentMessage)
+    , categories = [ Modals ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \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 parentMessage { sortState } =
+example : Example State Msg
+example =
     { name = "Nri.Ui.SortableTable.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Tables
-    , content =
-        let
-            config =
-                { updateMsg = SetSortState
-                , columns =
-                    [ SortableTable.string
-                        { id = FirstName
-                        , header = "First name"
-                        , value = .firstName
-                        , width = 125
-                        }
-                    , SortableTable.string
-                        { id = LastName
-                        , header = "Last name"
-                        , value = .lastName
-                        , width = 125
-                        }
-                    , SortableTable.custom
-                        { id = Coins
-                        , header = Html.text "Coins"
-                        , view = .coins >> String.fromInt >> Html.text
-                        , sorter = SortableTable.simpleSort .coins
-                        , width = 125
-                        }
-                    ]
-                }
+    , categories = [ Tables ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \{ sortState } ->
+            let
+                config =
+                    { updateMsg = SetSortState
+                    , columns =
+                        [ SortableTable.string
+                            { id = FirstName
+                            , header = "First name"
+                            , value = .firstName
+                            , width = 125
+                            }
+                        , SortableTable.string
+                            { id = LastName
+                            , header = "Last name"
+                            , value = .lastName
+                            , width = 125
+                            }
+                        , SortableTable.custom
+                            { id = Coins
+                            , header = Html.text "Coins"
+                            , view = .coins >> String.fromInt >> Html.text
+                            , sorter = SortableTable.simpleSort .coins
+                            , width = 125
+                            }
+                        ]
+                    }
 
-            data =
-                [ { firstName = "First1", lastName = "Last1", coins = 1 }
-                , { firstName = "First2", lastName = "Last2", coins = 2 }
-                , { firstName = "First3", lastName = "Last3", coins = 3 }
-                , { firstName = "First4", lastName = "Last4", coins = 4 }
-                , { firstName = "First5", lastName = "Last5", coins = 5 }
-                ]
-        in
-        [ Heading.h3 [] [ Html.text "With sortable headers" ]
-        , SortableTable.view config sortState data
-        , Heading.h3 [] [ Html.text "Loading" ]
-        , SortableTable.viewLoading config sortState
-        ]
-            |> List.map (Html.map parentMessage)
+                data =
+                    [ { firstName = "First1", lastName = "Last1", coins = 1 }
+                    , { firstName = "First2", lastName = "Last2", coins = 2 }
+                    , { firstName = "First3", lastName = "Last3", coins = 3 }
+                    , { firstName = "First4", lastName = "Last4", coins = 4 }
+                    , { firstName = "First5", lastName = "Last5", coins = 5 }
+                    ]
+            in
+            [ Heading.h3 [] [ Html.text "With sortable headers" ]
+            , SortableTable.view config sortState data
+            , Heading.h3 [] [ Html.text "Loading" ]
+            , SortableTable.viewLoading config sortState
+            ]
     }
 
 

styleguide-app/Examples/Svg.elm

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

styleguide-app/Examples/Table.elm

@@ -1,13 +1,15 @@
-module Examples.Table exposing (Msg, State, example, init, update)
+module Examples.Table exposing (Msg, State, example)
+
+{-|
+
+@docs Msg, State, example
 
-{- \
-   @docs Msg, State, example, init, update
 -}
 
 import Category exposing (Category(..))
 import Css exposing (..)
+import Example exposing (Example)
 import Html.Styled as Html
-import ModuleExample exposing (ModuleExample)
 import Nri.Ui.Button.V5 as Button
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Heading.V2 as Heading
@@ -15,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
-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 =
+type alias Msg =
     ()
 
 
 {-| -}
-update : Msg -> State -> ( State, Cmd Msg )
-update msg state =
-    case msg of
-        NoOp ->
-            ( state, Cmd.none )
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Table.V5"
+    , state = ()
+    , 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
-example changeTab tab =
-    { 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 ]
+type alias Msg =
+    State
 
-                    Second ->
-                        List.Zipper.from []
-                            (Tabs.Tab "Second tab" Second)
-                            [ Tabs.Tab "First tab" First ]
-            , content =
-                \id ->
-                    case id of
+
+example : Example State Msg
+example =
+    { name = "Nri.Ui.Tabs.V4"
+    , categories = [ Layout ]
+    , state = First
+    , 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"
-            , alignment = Tabs.Center
-            }
-        , 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 = changeTab Second }
-                    ]
-            }
-        ]
+                            List.Zipper.from []
+                                (Tabs.Tab "Second tab" Second)
+                                [ Tabs.Tab "First tab" First ]
+                , content =
+                    \id ->
+                        case id of
+                            First ->
+                                Html.text "First"
+
+                            Second ->
+                                Html.text "Second"
+                , alignment = Tabs.Center
+                }
+            , 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
-    , content =
-        let
-            exampleHtml kind =
-                [ Html.text "This is a "
-                , Html.strong [] [ Html.text kind ]
-                , Html.text ". "
-                , Html.a
-                    [ Attributes.href "http://www.noredink.com"
-                    , Attributes.target "_blank"
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            let
+                exampleHtml kind =
+                    [ Html.text "This is a "
+                    , 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 =
-                [ Html.text "This is a "
-                , Html.strong [] [ Html.text kind ]
-                , 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."
-                ]
-        in
-        [ 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" ]
-        , Text.mediumBody (exampleHtml "mediumBody")
-        , Text.smallBody (exampleHtml "smallBody")
-        , Text.smallBodyGray (exampleHtml "smallBodyGray")
-        , Text.caption (exampleHtml "caption")
-        , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
-        , Text.ugMediumBody (exampleUGHtml "ugMediumBody")
-        , Text.ugSmallBody (exampleUGHtml "ugSmallBody")
-        ]
+                exampleUGHtml kind =
+                    [ Html.text "This is a "
+                    , Html.strong [] [ Html.text kind ]
+                    , 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."
+                    ]
+            in
+            [ 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" ]
+            , Text.mediumBody (exampleHtml "mediumBody")
+            , Text.smallBody (exampleHtml "smallBody")
+            , Text.smallBodyGray (exampleHtml "smallBodyGray")
+            , Text.caption (exampleHtml "caption")
+            , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ]
+            , Text.ugMediumBody (exampleUGHtml "ugMediumBody")
+            , 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
-    , content =
-        let
-            longerBody =
-                """Be on the lookout for a new and improved assignment
+    , categories = List.singleton Text
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            let
+                longerBody =
+                    """Be on the lookout for a new and improved assignment
                     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
-        [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ]
-        ]
+            in
+            [ 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.TextArea.V4"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Heading.h1 [] [ Html.text "Textarea controls" ]
-        , Html.div []
-            [ Checkbox.viewWithLabel
-                { identifier = "show-textarea-label"
-                , label = "Show Label"
-                , setterMsg = ToggleLabel
-                , selected = state.showLabel
-                , disabled = False
-                , theme = Checkbox.Square
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , categories = [ Inputs ]
+    , view =
+        \state ->
+            [ Heading.h1 [] [ Html.text "Textarea controls" ]
+            , Html.div []
+                [ Checkbox.viewWithLabel
+                    { identifier = "show-textarea-label"
+                    , 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
-                { identifier = "textarea-autoresize"
-                , label = "Autoresize"
-                , setterMsg = ToggleAutoResize
-                , selected = state.autoResize
-                , disabled = False
-                , theme = Checkbox.Square
+            , 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
                 }
-            , Checkbox.viewWithLabel
-                { identifier = "textarea-isInError"
-                , label = "Show Error State"
-                , setterMsg = ToggleErrorState
-                , selected = state.isInError
-                , disabled = False
-                , theme = Checkbox.Square
+            , 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
                 }
             ]
-        , 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 parentMessage state =
+example : Example State Msg
+example =
     { name = "Nri.Ui.TextInput.V5"
-    , categories = Set.fromList Category.sorter <| List.singleton Inputs
-    , content =
-        [ Html.map parentMessage <|
-            Html.div []
+    , categories = [ Inputs ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \state ->
+            [ Html.div []
                 [ TextInput.view
                     { label = "Criterion"
                     , isInError = False
@@ -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 msg model =
+example : Example State Msg
+example =
     { name = "Nri.Ui.Tooltip.V1"
-    , categories = Set.fromList Category.sorter <| List.singleton Widgets
-    , content =
-        [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
-        , Heading.h3 [] [ Html.text "primaryLabel" ]
-        , Text.smallBody
-            [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
-            , Html.br []
-            , Html.text "e.g. when the trigger content is an icon with no text."
-            ]
-        , Tooltip.tooltip [ Html.text "Tooltip" ]
-            |> Tooltip.primaryLabel
-                { trigger = Tooltip.OnClick
-                , 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!" ]
+    , categories = [ Widgets ]
+    , state = init
+    , update = update
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \model ->
+            [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ]
+            , Heading.h3 [] [ Html.text "primaryLabel" ]
+            , Text.smallBody
+                [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content"
+                , Html.br []
+                , Html.text "e.g. when the trigger content is an icon with no text."
                 ]
-                |> Tooltip.toggleTip
-                    { onTrigger = ToggleTooltip ToggleTipTop >> msg
-                    , isOpen = model.openTooltip == Just ToggleTipTop
-                    , label = "More info"
+            , Tooltip.tooltip [ Html.text "Tooltip" ]
+                |> Tooltip.primaryLabel
+                    { trigger = Tooltip.OnClick
+                    , triggerHtml = Html.text "Primary Label - OnClick Trigger"
+                    , onTrigger = ToggleTooltip PrimaryLabelOnClick
+                    , isOpen = model.openTooltip == Just PrimaryLabelOnClick
+                    , id = "primary label tooltip"
                     , 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 >> msg
-                    , isOpen = model.openTooltip == Just ToggleTipLeft
-                    , label = "More info"
+            , 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
+                    , isOpen = model.openTooltip == Just PrimaryLabelOnHover
+                    , id = "primary label tooltip"
                     , extraButtonAttrs = []
                     }
-            , Text.mediumBody
-                [ Html.text "This toggletip will open on the left"
+            , 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
+                    , 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
-    , content =
-        [ IconExamples.view "Interface"
-            [ ( "seeMore", UiIcon.seeMore )
-            , ( "openClose", UiIcon.openClose )
-            , ( "download", UiIcon.download )
-            , ( "sort", UiIcon.sort )
-            , ( "gear", UiIcon.gear )
-            , ( "sortArrow", UiIcon.sortArrow )
+    , categories = List.singleton Icons
+    , state = ()
+    , update = \_ state -> ( state, Cmd.none )
+    , subscriptions = \_ -> Sub.none
+    , view =
+        \_ ->
+            [ IconExamples.view "Interface"
+                [ ( "seeMore", UiIcon.seeMore )
+                , ( "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 ->
-            let
-                ( moduleStates, cmd ) =
-                    NriModules.update msg model.moduleStates
-            in
-            ( { model | moduleStates = moduleStates }
-            , Cmd.map UpdateModuleStates cmd
-            )
+        UpdateModuleStates key exampleMsg ->
+            case Dict.get key model.moduleStates of
+                Just example ->
+                    example.update exampleMsg example.state
+                        |> Tuple.mapFirst
+                            (\newState ->
+                                { model
+                                    | moduleStates =
+                                        Dict.insert key
+                                            { example | state = newState }
+                                            model.moduleStates
+                                }
+                            )
+                        |> Tuple.mapSecond (Cmd.map (UpdateModuleStates key))
+
+                Nothing ->
+                    ( model, Cmd.none )
 
         OnUrlRequest request ->
             case request of
@@ -94,7 +106,9 @@ update action model =
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-    Sub.map UpdateModuleStates (NriModules.subscriptions model.moduleStates)
+    Dict.values model.moduleStates
+        |> List.map (\example -> Sub.map (UpdateModuleStates example.name) (example.subscriptions example.state))
+        |> Sub.batch
 
 
 view : Model -> Document Msg
@@ -122,11 +136,14 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ]
-                        , nriThemedModules model.moduleStates
+                        , Dict.values model.moduleStates
                             |> List.filter (\m -> m.name == doodad)
-                            |> List.map (ModuleExample.view False)
+                            |> List.map
+                                (\example ->
+                                    Example.view False example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div []
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
 
@@ -135,11 +152,19 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text (Category.forDisplay category) ]
-                        , nriThemedModules model.moduleStates
-                            |> List.filter (\doodad -> Set.memberOf doodad.categories category)
-                            |> List.map (ModuleExample.view True)
+                        , Dict.values model.moduleStates
+                            |> List.filter
+                                (\doodad ->
+                                    Set.memberOf
+                                        (Set.fromList Category.sorter doodad.categories)
+                                        category
+                                )
+                            |> List.map
+                                (\example ->
+                                    Example.view True example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div [ id (Category.forId category) ]
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
 
@@ -148,10 +173,13 @@ view_ model =
                         [ sectionStyles ]
                         []
                         [ Heading.h2 [] [ Html.text "All" ]
-                        , nriThemedModules model.moduleStates
-                            |> List.map (ModuleExample.view True)
+                        , Dict.values model.moduleStates
+                            |> List.map
+                                (\example ->
+                                    Example.view True example
+                                        |> Html.map (UpdateModuleStates example.name)
+                                )
                             |> Html.div []
-                            |> Html.map UpdateModuleStates
                         ]
                     ]
             )

styleguide-app/ModuleExample.elm

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

styleguide-app/NriModules.elm

@@ -1,355 +0,0 @@
-module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update)
-
-import Category exposing (Category(..))
-import Examples.Accordion
-import Examples.Alert
-import Examples.AssignmentIcon
-import Examples.BannerAlert
-import Examples.Button
-import Examples.Callout
-import Examples.Checkbox
-import Examples.ClickableSvg
-import Examples.ClickableText
-import Examples.Colors
-import Examples.DisclosureIndicator
-import Examples.Dropdown
-import Examples.Fonts
-import Examples.Heading
-import Examples.Icon
-import Examples.Logo
-import Examples.MasteryIcon
-import Examples.Modal
-import Examples.Page
-import Examples.Pennant
-import Examples.SegmentedControl
-import Examples.Select
-import Examples.Slide
-import Examples.SlideModal
-import Examples.SortableTable
-import Examples.Svg
-import Examples.Table
-import Examples.Tabs
-import Examples.Text
-import Examples.Text.Writing
-import Examples.TextArea as TextAreaExample
-import Examples.TextInput as TextInputExample
-import Examples.Tooltip
-import Examples.UiIcon
-import ModuleExample exposing (ModuleExample)
-import Sort.Set as Set exposing (Set)
-
-
-type alias ModuleStates =
-    { accordionExampleState : Examples.Accordion.State
-    , buttonExampleState : Examples.Button.State Msg
-    , bannerAlertExampleState : Examples.BannerAlert.State
-    , clickableTextExampleState : Examples.ClickableText.State
-    , checkboxExampleState : Examples.Checkbox.State
-    , dropdownState : Examples.Dropdown.State Examples.Dropdown.Value
-    , segmentedControlState : Examples.SegmentedControl.State
-    , selectState : Examples.Select.State
-    , tableExampleState : Examples.Table.State
-    , textAreaExampleState : TextAreaExample.State
-    , textInputExampleState : TextInputExample.State
-    , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State
-    , modalExampleState : Examples.Modal.State
-    , slideModalExampleState : Examples.SlideModal.State
-    , slideExampleState : Examples.Slide.State
-    , sortableTableState : Examples.SortableTable.State
-    , svgState : Examples.Svg.State
-    , clickableSvgState : Examples.ClickableSvg.State
-    , tabsExampleState : Examples.Tabs.Tab
-    , tooltipExampleState : Examples.Tooltip.State
-    }
-
-
-init : ModuleStates
-init =
-    { accordionExampleState = Examples.Accordion.init
-    , buttonExampleState = Examples.Button.init
-    , bannerAlertExampleState = Examples.BannerAlert.init
-    , clickableTextExampleState = Examples.ClickableText.init
-    , checkboxExampleState = Examples.Checkbox.init
-    , dropdownState = Examples.Dropdown.init
-    , segmentedControlState = Examples.SegmentedControl.init
-    , selectState = Examples.Select.init
-    , tableExampleState = Examples.Table.init
-    , textAreaExampleState = TextAreaExample.init
-    , textInputExampleState = TextInputExample.init
-    , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init
-    , modalExampleState = Examples.Modal.init
-    , slideModalExampleState = Examples.SlideModal.init
-    , slideExampleState = Examples.Slide.init
-    , sortableTableState = Examples.SortableTable.init
-    , svgState = Examples.Svg.init
-    , clickableSvgState = Examples.ClickableSvg.init
-    , tabsExampleState = Examples.Tabs.First
-    , tooltipExampleState = Examples.Tooltip.init
-    }
-
-
-type Msg
-    = AccordionExampleMsg Examples.Accordion.Msg
-    | ButtonExampleMsg (Examples.Button.Msg Msg)
-    | BannerAlertExampleMsg Examples.BannerAlert.Msg
-    | ClickableTextExampleMsg Examples.ClickableText.Msg
-    | CheckboxExampleMsg Examples.Checkbox.Msg
-    | DropdownMsg Examples.Dropdown.Msg
-    | SegmentedControlMsg Examples.SegmentedControl.Msg
-    | SelectMsg Examples.Select.Msg
-    | ShowItWorked String String
-    | TableExampleMsg Examples.Table.Msg
-    | TextAreaExampleMsg TextAreaExample.Msg
-    | TextInputExampleMsg TextInputExample.Msg
-    | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg
-    | ModalExampleMsg Examples.Modal.Msg
-    | SlideModalExampleMsg Examples.SlideModal.Msg
-    | SlideExampleMsg Examples.Slide.Msg
-    | SortableTableMsg Examples.SortableTable.Msg
-    | SvgMsg Examples.Svg.Msg
-    | ClickableSvgMsg Examples.ClickableSvg.Msg
-    | TabsExampleMsg Examples.Tabs.Tab
-    | TooltipExampleMsg Examples.Tooltip.Msg
-    | NoOp
-
-
-update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg )
-update outsideMsg moduleStates =
-    case outsideMsg of
-        AccordionExampleMsg msg ->
-            ( { moduleStates
-                | accordionExampleState =
-                    Examples.Accordion.update msg moduleStates.accordionExampleState
-              }
-            , Cmd.none
-            )
-
-        ButtonExampleMsg msg ->
-            let
-                ( buttonExampleState, cmd ) =
-                    Examples.Button.update msg moduleStates.buttonExampleState
-            in
-            ( { moduleStates | buttonExampleState = buttonExampleState }
-            , Cmd.map ButtonExampleMsg cmd
-            )
-
-        BannerAlertExampleMsg msg ->
-            ( { moduleStates
-                | bannerAlertExampleState =
-                    Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState
-              }
-            , Cmd.none
-            )
-
-        ClickableTextExampleMsg msg ->
-            let
-                ( clickableTextExampleState, cmd ) =
-                    Examples.ClickableText.update msg moduleStates.clickableTextExampleState
-            in
-            ( { moduleStates | clickableTextExampleState = clickableTextExampleState }
-            , Cmd.map ClickableTextExampleMsg cmd
-            )
-
-        CheckboxExampleMsg msg ->
-            let
-                ( checkboxExampleState, cmd ) =
-                    Examples.Checkbox.update msg moduleStates.checkboxExampleState
-            in
-            ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd )
-
-        DropdownMsg msg ->
-            let
-                ( dropdownState, cmd ) =
-                    Examples.Dropdown.update msg moduleStates.dropdownState
-            in
-            ( { moduleStates | dropdownState = dropdownState }
-            , Cmd.map DropdownMsg cmd
-            )
-
-        SegmentedControlMsg msg ->
-            let
-                ( segmentedControlState, cmd ) =
-                    Examples.SegmentedControl.update msg moduleStates.segmentedControlState
-            in
-            ( { moduleStates | segmentedControlState = segmentedControlState }
-            , Cmd.map SegmentedControlMsg cmd
-            )
-
-        SelectMsg msg ->
-            let
-                ( selectState, cmd ) =
-                    Examples.Select.update msg moduleStates.selectState
-            in
-            ( { moduleStates | selectState = selectState }
-            , Cmd.map SelectMsg cmd
-            )
-
-        ShowItWorked group message ->
-            let
-                _ =
-                    Debug.log group message
-            in
-            ( moduleStates, Cmd.none )
-
-        SvgMsg msg ->
-            let
-                ( svgState, cmd ) =
-                    Examples.Svg.update msg moduleStates.svgState
-            in
-            ( { moduleStates | svgState = svgState }
-            , Cmd.map SvgMsg cmd
-            )
-
-        ClickableSvgMsg msg ->
-            let
-                ( clickableSvgState, cmd ) =
-                    Examples.ClickableSvg.update msg moduleStates.clickableSvgState
-            in
-            ( { moduleStates | clickableSvgState = clickableSvgState }
-            , Cmd.map ClickableSvgMsg cmd
-            )
-
-        TableExampleMsg msg ->
-            let
-                ( tableExampleState, cmd ) =
-                    Examples.Table.update msg moduleStates.tableExampleState
-            in
-            ( { moduleStates | tableExampleState = tableExampleState }
-            , Cmd.map TableExampleMsg cmd
-            )
-
-        TextAreaExampleMsg msg ->
-            let
-                ( textAreaExampleState, cmd ) =
-                    TextAreaExample.update msg moduleStates.textAreaExampleState
-            in
-            ( { moduleStates | textAreaExampleState = textAreaExampleState }
-            , Cmd.map TextAreaExampleMsg cmd
-            )
-
-        TextInputExampleMsg msg ->
-            let
-                ( textInputExampleState, cmd ) =
-                    TextInputExample.update msg moduleStates.textInputExampleState
-            in
-            ( { moduleStates | textInputExampleState = textInputExampleState }
-            , Cmd.map TextInputExampleMsg cmd
-            )
-
-        DisclosureIndicatorExampleMsg msg ->
-            let
-                ( disclosureIndicatorExampleState, cmd ) =
-                    Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState
-            in
-            ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState }
-            , Cmd.map DisclosureIndicatorExampleMsg cmd
-            )
-
-        ModalExampleMsg msg ->
-            let
-                ( modalExampleState, cmd ) =
-                    Examples.Modal.update msg moduleStates.modalExampleState
-            in
-            ( { moduleStates | modalExampleState = modalExampleState }
-            , Cmd.map ModalExampleMsg cmd
-            )
-
-        SlideModalExampleMsg msg ->
-            let
-                ( slideModalExampleState, cmd ) =
-                    Examples.SlideModal.update msg moduleStates.slideModalExampleState
-            in
-            ( { moduleStates | slideModalExampleState = slideModalExampleState }
-            , Cmd.map SlideModalExampleMsg cmd
-            )
-
-        SlideExampleMsg msg ->
-            let
-                ( slideExampleState, cmd ) =
-                    Examples.Slide.update msg moduleStates.slideExampleState
-            in
-            ( { moduleStates | slideExampleState = slideExampleState }
-            , Cmd.map SlideExampleMsg cmd
-            )
-
-        SortableTableMsg msg ->
-            let
-                ( sortableTableState, cmd ) =
-                    Examples.SortableTable.update msg moduleStates.sortableTableState
-            in
-            ( { moduleStates | sortableTableState = sortableTableState }
-            , Cmd.map SortableTableMsg cmd
-            )
-
-        TabsExampleMsg tab ->
-            ( { moduleStates | tabsExampleState = tab }
-            , Cmd.none
-            )
-
-        TooltipExampleMsg msg ->
-            let
-                newState =
-                    Examples.Tooltip.update msg moduleStates.tooltipExampleState
-            in
-            ( { moduleStates
-                | tooltipExampleState = newState
-              }
-            , Cmd.none
-            )
-
-        NoOp ->
-            ( moduleStates, Cmd.none )
-
-
-subscriptions : ModuleStates -> Sub Msg
-subscriptions moduleStates =
-    Sub.batch
-        [ Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState)
-        ]
-
-
-nriThemedModules : ModuleStates -> List (ModuleExample Msg)
-nriThemedModules model =
-    [ Examples.Alert.example
-    , Examples.Accordion.example AccordionExampleMsg model.accordionExampleState
-    , Examples.AssignmentIcon.example
-    , Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState
-    , Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState
-    , Examples.Callout.example
-    , Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState
-    , Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState
-    , Examples.Colors.example
-    , Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState
-    , Examples.Dropdown.example DropdownMsg model.dropdownState
-    , Examples.Fonts.example
-    , Examples.Heading.example
-    , Examples.Icon.example
-    , Examples.Logo.example
-    , Examples.MasteryIcon.example
-    , Examples.Modal.example ModalExampleMsg model.modalExampleState
-    , Examples.Page.example NoOp
-    , Examples.Pennant.example
-    , Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState
-    , Examples.Select.example SelectMsg model.selectState
-    , Examples.Slide.example SlideExampleMsg model.slideExampleState
-    , Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState
-    , Examples.SortableTable.example SortableTableMsg model.sortableTableState
-    , Examples.Svg.example (exampleMessages SvgMsg) model.svgState
-    , Examples.ClickableSvg.example (exampleMessages ClickableSvgMsg) model.clickableSvgState
-    , Examples.Table.example TableExampleMsg model.tableExampleState
-    , Examples.Tabs.example TabsExampleMsg model.tabsExampleState
-    , Examples.Text.example
-    , Examples.Text.Writing.example
-    , Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState
-    , Examples.UiIcon.example
-    , TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState
-    , TextInputExample.example TextInputExampleMsg model.textInputExampleState
-    ]
-
-
-exampleMessages : (msg -> Msg) -> String -> ModuleExample.ModuleMessages msg Msg
-exampleMessages exampleMessageWrapper exampleName =
-    { noOp = NoOp
-    , showItWorked = ShowItWorked exampleName
-    , wrapper = exampleMessageWrapper
-    }

tests/elm-verify-examples.json

@@ -41,6 +41,7 @@
         "Nri.Ui.Icon.V4",
         "Nri.Ui.Icon.V5",
         "Nri.Ui.InputStyles.V2",
+        "Nri.Ui.Loading.V1",
         "Nri.Ui.Logo.V1",
         "Nri.Ui.MasteryIcon.V1",
         "Nri.Ui.Modal.V2",