From 078b16c8f48010c4fbf9c333f0164f26af0aa09f Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 10:35:58 -0700
Subject: [PATCH 01/36] Only show a preview for a category or for general
 browsing

---
 styleguide-app/Example.elm | 67 ++++++++++++++++++++++++--------------
 styleguide-app/Main.elm    |  4 +--
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index f96e60b8..dda11464 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -1,4 +1,4 @@
-module Example exposing (Example, view, wrapMsg, wrapState)
+module Example exposing (Example, preview, view, wrapMsg, wrapState)
 
 import Category exposing (Category)
 import Css exposing (..)
@@ -8,6 +8,7 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
 import Nri.Ui.Colors.V1 exposing (..)
+import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank)
 
@@ -24,6 +25,11 @@ type alias Example state msg =
     }
 
 
+fullName : Example state msg -> String
+fullName example =
+    "Nri.Ui." ++ example.name ++ ".V" ++ String.fromInt example.version
+
+
 wrapMsg :
     (msg -> msg2)
     -> (msg2 -> Maybe msg)
@@ -80,6 +86,18 @@ wrapState wrapState_ unwrapState example =
     }
 
 
+preview : Example state msg -> Html msg
+preview =
+    Lazy.lazy preview_
+
+
+preview_ : Example state msg -> Html msg
+preview_ example =
+    Container.view
+        [ Container.html [ exampleName example ]
+        ]
+
+
 view : Example state msg -> Html msg
 view =
     Lazy.lazy view_
@@ -87,10 +105,6 @@ view =
 
 view_ : Example state msg -> Html msg
 view_ example =
-    let
-        fullName =
-            "Nri.Ui." ++ example.name ++ ".V" ++ String.fromInt example.version
-    in
     Html.div
         [ -- this class makes the axe accessibility checking output easier to parse
           String.replace "." "-" example.name
@@ -107,27 +121,11 @@ view_ example =
                 , descendants [ Css.Global.a [ textDecoration none ] ]
                 ]
             ]
-            [ Html.styled Html.h2
-                [ color navy
-                , fontSize (px 20)
-                , marginTop zero
-                , marginBottom zero
-                , Fonts.baseFont
-                ]
-                []
-                [ Html.a
-                    [ Attributes.href ("#/doodad/" ++ example.name)
-                    , Attributes.class "module-example__doodad-link"
-                    , -- this data attribute is used to name the Percy screenshots
-                      String.replace "." "-" example.name
-                        |> Attributes.attribute "data-percy-name"
-                    ]
-                    [ Html.text fullName ]
-                ]
-            , String.replace "." "-" fullName
+            [ exampleName example
+            , String.replace "." "-" (fullName example)
                 |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
                 |> viewLink "Docs"
-            , String.replace "." "/" fullName
+            , String.replace "." "/" (fullName example)
                 ++ ".elm"
                 |> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/"
                 |> viewLink "Source"
@@ -146,6 +144,27 @@ view_ example =
         ]
 
 
+exampleName : Example state msg -> Html msg
+exampleName example =
+    Html.styled Html.h2
+        [ color navy
+        , fontSize (px 20)
+        , marginTop zero
+        , marginBottom zero
+        , Fonts.baseFont
+        ]
+        []
+        [ Html.a
+            [ Attributes.href ("#/doodad/" ++ example.name)
+            , Attributes.class "module-example__doodad-link"
+            , -- this data attribute is used to name the Percy screenshots
+              String.replace "." "-" example.name
+                |> Attributes.attribute "data-percy-name"
+            ]
+            [ Html.text (fullName example) ]
+        ]
+
+
 viewLink : String -> String -> Html msg
 viewLink text href =
     Html.a
diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index 06ef6ca0..57ff0470 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -168,7 +168,7 @@ view_ model =
                         )
                         |> List.map
                             (\example ->
-                                Example.view example
+                                Example.preview example
                                     |> Html.map (UpdateModuleStates example.name)
                             )
                         |> Html.div [ id (Category.forId category) ]
@@ -179,7 +179,7 @@ view_ model =
                     , examples (\_ -> True)
                         |> List.map
                             (\example ->
-                                Example.view example
+                                Example.preview example
                                     |> Html.map (UpdateModuleStates example.name)
                             )
                         |> Html.div []

From 63ac9d5ea7e9de66b480bdc26f28536d2535f1e9 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 10:42:52 -0700
Subject: [PATCH 02/36] Use internal components for links and heading styles

---
 styleguide-app/Example.elm | 76 ++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index dda11464..4dd19279 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -7,9 +7,11 @@ import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
+import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 exposing (..)
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank)
 
 
@@ -94,7 +96,7 @@ preview =
 preview_ : Example state msg -> Html msg
 preview_ example =
     Container.view
-        [ Container.html [ exampleName example ]
+        [ Container.html [ exampleLink example ]
         ]
 
 
@@ -121,14 +123,9 @@ view_ example =
                 , descendants [ Css.Global.a [ textDecoration none ] ]
                 ]
             ]
-            [ exampleName example
-            , String.replace "." "-" (fullName example)
-                |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
-                |> viewLink "Docs"
-            , String.replace "." "/" (fullName example)
-                ++ ".elm"
-                |> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/"
-                |> viewLink "Source"
+            [ exampleLink example
+            , docsLink example
+            , srcLink example
             ]
         , KeyboardSupport.view example.keyboardSupport
         , Html.div
@@ -144,34 +141,43 @@ view_ example =
         ]
 
 
-exampleName : Example state msg -> Html msg
-exampleName example =
-    Html.styled Html.h2
-        [ color navy
-        , fontSize (px 20)
-        , marginTop zero
-        , marginBottom zero
-        , Fonts.baseFont
-        ]
-        []
-        [ Html.a
-            [ Attributes.href ("#/doodad/" ++ example.name)
-            , Attributes.class "module-example__doodad-link"
-            , -- this data attribute is used to name the Percy screenshots
-              String.replace "." "-" example.name
-                |> Attributes.attribute "data-percy-name"
+exampleLink : Example state msg -> Html msg
+exampleLink example =
+    Heading.h2 []
+        [ ClickableText.link (fullName example)
+            [ ClickableText.href ("#/doodad/" ++ example.name)
+            , ClickableText.large
+            , ClickableText.custom
+                [ -- this data attribute is used to name the Percy screenshots
+                  String.replace "." "-" example.name
+                    |> Attributes.attribute "data-percy-name"
+                ]
             ]
-            [ Html.text (fullName example) ]
         ]
 
 
-viewLink : String -> String -> Html msg
-viewLink text href =
-    Html.a
-        ([ Attributes.href href
-         , Attributes.css [ Css.display Css.block, marginLeft (px 20) ]
-         ]
-            ++ targetBlank
-        )
-        [ Html.text text
+docsLink : Example state msg -> Html msg
+docsLink example =
+    let
+        link =
+            "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
+                ++ String.replace "." "-" (fullName example)
+    in
+    ClickableText.link "Docs"
+        [ ClickableText.linkExternal link
+        , ClickableText.css [ Css.marginLeft (Css.px 20) ]
+        ]
+
+
+srcLink : Example state msg -> Html msg
+srcLink example =
+    let
+        link =
+            String.replace "." "/" (fullName example)
+                ++ ".elm"
+                |> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/"
+    in
+    ClickableText.link "Source"
+        [ ClickableText.linkExternal link
+        , ClickableText.css [ Css.marginLeft (Css.px 20) ]
         ]

From 96f4adb968a5e7e51cdc033629a711467c57fd4b Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:05:08 -0700
Subject: [PATCH 03/36] Use a grid layout for the example previews

---
 styleguide-app/Example.elm | 23 ++++++++++++++++++++---
 styleguide-app/Main.elm    | 33 ++++++++++++++++++++-------------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index 4dd19279..3791f350 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -8,7 +8,7 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
 import Nri.Ui.ClickableText.V3 as ClickableText
-import Nri.Ui.Colors.V1 exposing (..)
+import Nri.Ui.Colors.V1 as Colors exposing (..)
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
@@ -96,7 +96,19 @@ preview =
 preview_ : Example state msg -> Html msg
 preview_ example =
     Container.view
-        [ Container.html [ exampleLink example ]
+        [ Container.gray
+        , Container.css
+            [ Css.flexBasis (Css.px 150)
+            , Css.hover
+                [ Css.backgroundColor Colors.glacier
+                , Css.cursor Css.pointer
+                ]
+            ]
+        , Container.html
+            [ ClickableText.link example.name
+                [ ClickableText.href (exampleHref example)
+                ]
+            ]
         ]
 
 
@@ -141,11 +153,16 @@ view_ example =
         ]
 
 
+exampleHref : Example state msg -> String
+exampleHref example =
+    "#/doodad/" ++ example.name
+
+
 exampleLink : Example state msg -> Html msg
 exampleLink example =
     Heading.h2 []
         [ ClickableText.link (fullName example)
-            [ ClickableText.href ("#/doodad/" ++ example.name)
+            [ ClickableText.href (exampleHref example)
             , ClickableText.large
             , ClickableText.custom
                 [ -- this data attribute is used to name the Percy screenshots
diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index 57ff0470..ed41f13c 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -166,28 +166,35 @@ view_ model =
                                 (Set.fromList Category.sorter doodad.categories)
                                 category
                         )
-                        |> List.map
-                            (\example ->
-                                Example.preview example
-                                    |> Html.map (UpdateModuleStates example.name)
-                            )
-                        |> Html.div [ id (Category.forId category) ]
+                        |> viewPreviews (Category.forId category)
                     ]
 
                 Routes.All ->
                     [ mainContentHeader "All"
-                    , examples (\_ -> True)
-                        |> List.map
-                            (\example ->
-                                Example.preview example
-                                    |> Html.map (UpdateModuleStates example.name)
-                            )
-                        |> Html.div []
+                    , viewPreviews "all" (examples (\_ -> True))
                     ]
             )
         ]
 
 
+viewPreviews : String -> List (Example state Examples.Msg) -> Html Msg
+viewPreviews containerId examples =
+    examples
+        |> List.map
+            (\example ->
+                Example.preview example
+                    |> Html.map (UpdateModuleStates example.name)
+            )
+        |> Html.div
+            [ id containerId
+            , css
+                [ Css.displayFlex
+                , Css.flexWrap Css.wrap
+                , Css.property "gap" "10px"
+                ]
+            ]
+
+
 navigation : Route -> Html Msg
 navigation route =
     let

From b5888c997728767dd8fa1ee126b807f8a00b1c13 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:13:28 -0700
Subject: [PATCH 04/36] Make the hit area the entire container the only element
 that will receive focus is the actual link

---
 styleguide-app/Example.elm | 12 +++++++-----
 styleguide-app/Main.elm    | 12 ++++++------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index 3791f350..158b941f 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -5,6 +5,7 @@ import Css exposing (..)
 import Css.Global exposing (a, descendants)
 import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes as Attributes
+import Html.Styled.Events as Events
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
 import Nri.Ui.ClickableText.V3 as ClickableText
@@ -88,13 +89,13 @@ wrapState wrapState_ unwrapState example =
     }
 
 
-preview : Example state msg -> Html msg
-preview =
-    Lazy.lazy preview_
+preview : (String -> msg2) -> Example state msg -> Html msg2
+preview navigate =
+    Lazy.lazy (preview_ navigate)
 
 
-preview_ : Example state msg -> Html msg
-preview_ example =
+preview_ : (String -> msg2) -> Example state msg -> Html msg2
+preview_ navigate example =
     Container.view
         [ Container.gray
         , Container.css
@@ -104,6 +105,7 @@ preview_ example =
                 , Css.cursor Css.pointer
                 ]
             ]
+        , Container.custom [ Events.onClick (navigate (exampleHref example)) ]
         , Container.html
             [ ClickableText.link example.name
                 [ ClickableText.href (exampleHref example)
diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index ed41f13c..dbe4e3aa 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -61,6 +61,7 @@ type Msg
     = UpdateModuleStates String Examples.Msg
     | OnUrlRequest Browser.UrlRequest
     | OnUrlChange Url
+    | ChangeUrl String
     | SkipToMainContent
     | NoOp
 
@@ -97,6 +98,9 @@ update action model =
         OnUrlChange route ->
             ( { model | route = Routes.fromLocation route }, Cmd.none )
 
+        ChangeUrl url ->
+            ( model, Browser.Navigation.pushUrl model.navigationKey url )
+
         SkipToMainContent ->
             ( model
             , Task.attempt (\_ -> NoOp) (Browser.Dom.focus "maincontent")
@@ -177,14 +181,10 @@ view_ model =
         ]
 
 
-viewPreviews : String -> List (Example state Examples.Msg) -> Html Msg
+viewPreviews : String -> List (Example state msg) -> Html Msg
 viewPreviews containerId examples =
     examples
-        |> List.map
-            (\example ->
-                Example.preview example
-                    |> Html.map (UpdateModuleStates example.name)
-            )
+        |> List.map (\example -> Example.preview ChangeUrl example)
         |> Html.div
             [ id containerId
             , css

From 52dd34abc21d6e4a266f705fb3a0d45122f2b58c Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:19:08 -0700
Subject: [PATCH 05/36] Adds  to example record

---
 styleguide-app/Example.elm                      | 8 ++++++--
 styleguide-app/Examples/Accordion.elm           | 1 +
 styleguide-app/Examples/AssignmentIcon.elm      | 1 +
 styleguide-app/Examples/Balloon.elm             | 1 +
 styleguide-app/Examples/Button.elm              | 1 +
 styleguide-app/Examples/Checkbox.elm            | 1 +
 styleguide-app/Examples/ClickableSvg.elm        | 1 +
 styleguide-app/Examples/ClickableText.elm       | 1 +
 styleguide-app/Examples/Colors.elm              | 1 +
 styleguide-app/Examples/Confetti.elm            | 1 +
 styleguide-app/Examples/Container.elm           | 1 +
 styleguide-app/Examples/DisclosureIndicator.elm | 1 +
 styleguide-app/Examples/Divider.elm             | 1 +
 styleguide-app/Examples/Fonts.elm               | 1 +
 styleguide-app/Examples/Heading.elm             | 1 +
 styleguide-app/Examples/Loading.elm             | 1 +
 styleguide-app/Examples/Logo.elm                | 1 +
 styleguide-app/Examples/MasteryIcon.elm         | 1 +
 styleguide-app/Examples/Menu.elm                | 1 +
 styleguide-app/Examples/Message.elm             | 1 +
 styleguide-app/Examples/Modal.elm               | 1 +
 styleguide-app/Examples/Page.elm                | 1 +
 styleguide-app/Examples/Pennant.elm             | 1 +
 styleguide-app/Examples/RadioButton.elm         | 1 +
 styleguide-app/Examples/SegmentedControl.elm    | 1 +
 styleguide-app/Examples/Select.elm              | 1 +
 styleguide-app/Examples/Slide.elm               | 1 +
 styleguide-app/Examples/SlideModal.elm          | 1 +
 styleguide-app/Examples/SortableTable.elm       | 1 +
 styleguide-app/Examples/Svg.elm                 | 1 +
 styleguide-app/Examples/Switch.elm              | 1 +
 styleguide-app/Examples/Table.elm               | 1 +
 styleguide-app/Examples/Tabs.elm                | 1 +
 styleguide-app/Examples/Text.elm                | 1 +
 styleguide-app/Examples/Text/Writing.elm        | 1 +
 styleguide-app/Examples/TextArea.elm            | 1 +
 styleguide-app/Examples/TextInput.elm           | 1 +
 styleguide-app/Examples/Tooltip.elm             | 1 +
 styleguide-app/Examples/UiIcon.elm              | 1 +
 39 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index 158b941f..ff35be32 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -22,6 +22,7 @@ type alias Example state msg =
     , state : state
     , update : msg -> state -> ( state, Cmd msg )
     , subscriptions : state -> Sub msg
+    , preview : List (Html Never)
     , view : state -> List (Html msg)
     , categories : List Category
     , keyboardSupport : List KeyboardSupport
@@ -52,6 +53,7 @@ wrapMsg wrapMsg_ unwrapMsg example =
                 Nothing ->
                     ( state, Cmd.none )
     , subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
+    , preview = []
     , view = \state -> List.map (Html.map wrapMsg_) (example.view state)
     , categories = example.categories
     , keyboardSupport = example.keyboardSupport
@@ -80,6 +82,7 @@ wrapState wrapState_ unwrapState example =
         unwrapState
             >> Maybe.map example.subscriptions
             >> Maybe.withDefault Sub.none
+    , preview = []
     , view =
         unwrapState
             >> Maybe.map example.view
@@ -107,10 +110,11 @@ preview_ navigate example =
             ]
         , Container.custom [ Events.onClick (navigate (exampleHref example)) ]
         , Container.html
-            [ ClickableText.link example.name
+            (ClickableText.link example.name
                 [ ClickableText.href (exampleHref example)
                 ]
-            ]
+                :: List.map (Html.map never) example.preview
+            )
         ]
 
 
diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm
index b60db65e..c802aeb6 100644
--- a/styleguide-app/Examples/Accordion.elm
+++ b/styleguide-app/Examples/Accordion.elm
@@ -38,6 +38,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = view
     , categories = [ Layout ]
     , keyboardSupport =
diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm
index 3503bb10..3182f91d 100644
--- a/styleguide-app/Examples/AssignmentIcon.elm
+++ b/styleguide-app/Examples/AssignmentIcon.elm
@@ -33,6 +33,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ IconExamples.view "Diagnostic"
diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm
index e9838dcf..7806aa9b 100644
--- a/styleguide-app/Examples/Balloon.elm
+++ b/styleguide-app/Examples/Balloon.elm
@@ -29,6 +29,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = view
     }
 
diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index af5d809b..88f2d33a 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -28,6 +28,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = \state -> [ viewButtonExamples state ]
     , categories = [ Buttons ]
     , keyboardSupport = []
diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm
index f8f4b53b..39188ab2 100644
--- a/styleguide-app/Examples/Checkbox.elm
+++ b/styleguide-app/Examples/Checkbox.elm
@@ -38,6 +38,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             [ viewInteractableCheckbox "styleguide-checkbox-interactable" state
diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm
index e266609e..f3285888 100644
--- a/styleguide-app/Examples/ClickableSvg.elm
+++ b/styleguide-app/Examples/ClickableSvg.elm
@@ -36,6 +36,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm
index ee96bf9f..44e40ceb 100644
--- a/styleguide-app/Examples/ClickableText.elm
+++ b/styleguide-app/Examples/ClickableText.elm
@@ -32,6 +32,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = \state -> [ viewExamples state ]
     , categories = [ Buttons ]
     , keyboardSupport = []
diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index 9a748709..b1544f29 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/styleguide-app/Examples/Colors.elm
@@ -41,6 +41,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ [ ( "gray20", Colors.gray20, "Main text" )
diff --git a/styleguide-app/Examples/Confetti.elm b/styleguide-app/Examples/Confetti.elm
index a4ba340d..e3325631 100644
--- a/styleguide-app/Examples/Confetti.elm
+++ b/styleguide-app/Examples/Confetti.elm
@@ -33,6 +33,7 @@ example =
                 [ Browser.Events.onResize WindowResized
                 , Confetti.subscriptions ConfettiMsg state
                 ]
+    , preview = []
     , view =
         \state ->
             [ Button.button "Launch confetti!"
diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm
index 128dc1cc..975e82fc 100644
--- a/styleguide-app/Examples/Container.elm
+++ b/styleguide-app/Examples/Container.elm
@@ -35,6 +35,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index 1e3bd7b4..fff45eb8 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -36,6 +36,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
diff --git a/styleguide-app/Examples/Divider.elm b/styleguide-app/Examples/Divider.elm
index 6f30b4b5..57386214 100644
--- a/styleguide-app/Examples/Divider.elm
+++ b/styleguide-app/Examples/Divider.elm
@@ -35,5 +35,6 @@ example =
     , state = {}
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = \state -> [ Divider.view "Dividing Line" ]
     }
diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index 7aedc1d7..7029af95 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/styleguide-app/Examples/Fonts.elm
@@ -35,6 +35,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ Heading.h3 [] [ Html.text "baseFont" ]
diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index 886e9a94..4ce785ad 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -35,6 +35,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ Heading.h1 [] [ Html.text "This is the main page heading." ]
diff --git a/styleguide-app/Examples/Loading.elm b/styleguide-app/Examples/Loading.elm
index 0efadaf3..5e0e8f0b 100644
--- a/styleguide-app/Examples/Loading.elm
+++ b/styleguide-app/Examples/Loading.elm
@@ -94,6 +94,7 @@ example =
     , state = init
     , update = update
     , subscriptions = subscriptions
+    , preview = []
     , view =
         \{ showLoadingFadeIn, showLoading, showSpinners } ->
             [ if showLoading then
diff --git a/styleguide-app/Examples/Logo.elm b/styleguide-app/Examples/Logo.elm
index 8644f19a..36bf20ae 100644
--- a/styleguide-app/Examples/Logo.elm
+++ b/styleguide-app/Examples/Logo.elm
@@ -35,6 +35,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ IconExamples.viewWithCustomStyles "NRI"
diff --git a/styleguide-app/Examples/MasteryIcon.elm b/styleguide-app/Examples/MasteryIcon.elm
index 01ec1f90..b33206c0 100644
--- a/styleguide-app/Examples/MasteryIcon.elm
+++ b/styleguide-app/Examples/MasteryIcon.elm
@@ -34,6 +34,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ IconExamples.view "Levels"
diff --git a/styleguide-app/Examples/Menu.elm b/styleguide-app/Examples/Menu.elm
index 4f09a0e5..8a6a97cf 100644
--- a/styleguide-app/Examples/Menu.elm
+++ b/styleguide-app/Examples/Menu.elm
@@ -47,6 +47,7 @@ example =
           }
         , { keys = [ Esc ], result = "Closes the menu" }
         ]
+    , preview = []
     , view = view
     }
 
diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm
index 71db74ed..76b9ec04 100644
--- a/styleguide-app/Examples/Message.elm
+++ b/styleguide-app/Examples/Message.elm
@@ -177,6 +177,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm
index 4d78a9cc..d8e82cd2 100644
--- a/styleguide-app/Examples/Modal.elm
+++ b/styleguide-app/Examples/Modal.elm
@@ -125,6 +125,7 @@ example =
     , state = init
     , update = update
     , subscriptions = subscriptions
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index 2f6f5ee7..e05726ad 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -62,6 +62,7 @@ example =
     , state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText }
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \model ->
             let
diff --git a/styleguide-app/Examples/Pennant.elm b/styleguide-app/Examples/Pennant.elm
index 596bd96e..e39fb1f6 100644
--- a/styleguide-app/Examples/Pennant.elm
+++ b/styleguide-app/Examples/Pennant.elm
@@ -38,6 +38,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ IconExamples.viewWithCustomStyles "Premium Pennants"
diff --git a/styleguide-app/Examples/RadioButton.elm b/styleguide-app/Examples/RadioButton.elm
index d6dd00ab..a7bd4207 100644
--- a/styleguide-app/Examples/RadioButton.elm
+++ b/styleguide-app/Examples/RadioButton.elm
@@ -34,6 +34,7 @@ example =
     , state = init
     , update = update
     , subscriptions = subscriptions
+    , preview = []
     , view = view
     , categories = [ Inputs ]
     , keyboardSupport =
diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm
index d079b77a..e2a40f0e 100644
--- a/styleguide-app/Examples/SegmentedControl.elm
+++ b/styleguide-app/Examples/SegmentedControl.elm
@@ -36,6 +36,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm
index b89e01e8..4507c38d 100644
--- a/styleguide-app/Examples/Select.elm
+++ b/styleguide-app/Examples/Select.elm
@@ -26,6 +26,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Inputs ]
     , keyboardSupport = []
+    , preview = []
     , view =
         \state ->
             [ Html.Styled.label
diff --git a/styleguide-app/Examples/Slide.elm b/styleguide-app/Examples/Slide.elm
index a9585b7e..03a6d6c2 100644
--- a/styleguide-app/Examples/Slide.elm
+++ b/styleguide-app/Examples/Slide.elm
@@ -42,6 +42,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             [ Keyed.node "div"
diff --git a/styleguide-app/Examples/SlideModal.elm b/styleguide-app/Examples/SlideModal.elm
index 3c2d321d..e5a1a034 100644
--- a/styleguide-app/Examples/SlideModal.elm
+++ b/styleguide-app/Examples/SlideModal.elm
@@ -40,6 +40,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             [ viewModal state.modal
diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm
index 2e7792d3..187657ba 100644
--- a/styleguide-app/Examples/SortableTable.elm
+++ b/styleguide-app/Examples/SortableTable.elm
@@ -41,6 +41,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \{ sortState } ->
             let
diff --git a/styleguide-app/Examples/Svg.elm b/styleguide-app/Examples/Svg.elm
index 690b4e62..e7703121 100644
--- a/styleguide-app/Examples/Svg.elm
+++ b/styleguide-app/Examples/Svg.elm
@@ -33,6 +33,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             [ viewSettings state
diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm
index 161516ef..519922f9 100644
--- a/styleguide-app/Examples/Switch.elm
+++ b/styleguide-app/Examples/Switch.elm
@@ -31,6 +31,7 @@ example =
     , state = True
     , update = \(Switch new) _ -> ( new, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \interactiveIsOn ->
             [ Heading.h3 [] [ Html.text "Interactive" ]
diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index bd946cb3..31da571f 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/styleguide-app/Examples/Table.elm
@@ -37,6 +37,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Tables, Layout ]
     , keyboardSupport = []
+    , preview = []
     , view =
         \() ->
             let
diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm
index 9be4b46a..511e39dd 100644
--- a/styleguide-app/Examples/Tabs.elm
+++ b/styleguide-app/Examples/Tabs.elm
@@ -136,6 +136,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \model ->
             let
diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm
index 5286c7e6..4f9e5cae 100644
--- a/styleguide-app/Examples/Text.elm
+++ b/styleguide-app/Examples/Text.elm
@@ -30,6 +30,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/Text/Writing.elm b/styleguide-app/Examples/Text/Writing.elm
index f9a1f1d2..fd0ca16b 100644
--- a/styleguide-app/Examples/Text/Writing.elm
+++ b/styleguide-app/Examples/Text/Writing.elm
@@ -32,6 +32,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             let
diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm
index f4a2a662..f39bf075 100644
--- a/styleguide-app/Examples/TextArea.elm
+++ b/styleguide-app/Examples/TextArea.elm
@@ -44,6 +44,7 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Inputs ]
     , keyboardSupport = []
+    , preview = []
     , view =
         \state ->
             [ Heading.h1 [] [ Html.text "Textarea controls" ]
diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm
index 2cd1d906..15a99d55 100644
--- a/styleguide-app/Examples/TextInput.elm
+++ b/styleguide-app/Examples/TextInput.elm
@@ -32,6 +32,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index 2cfa05c0..7a5f1690 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/styleguide-app/Examples/Tooltip.elm
@@ -33,6 +33,7 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view = view
     }
 
diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm
index 0841dfb7..dda6aed0 100644
--- a/styleguide-app/Examples/UiIcon.elm
+++ b/styleguide-app/Examples/UiIcon.elm
@@ -33,6 +33,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
+    , preview = []
     , view =
         \_ ->
             [ IconExamples.view "Interface"

From 460c347d7ae631858c8491e08f23e7a95a5486ee Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:26:43 -0700
Subject: [PATCH 06/36]  Adjust sidebar link style

---
 styleguide-app/Main.elm | 43 ++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index dbe4e3aa..0a3d968d 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -1,6 +1,6 @@
 module Main exposing (init, main)
 
-import Accessibility.Styled as Html exposing (Html, img, text)
+import Accessibility.Styled as Html exposing (Html)
 import Browser exposing (Document, UrlRequest(..))
 import Browser.Dom
 import Browser.Navigation exposing (Key)
@@ -10,10 +10,10 @@ import Css.Media exposing (withMedia)
 import Dict exposing (Dict)
 import Example exposing (Example)
 import Examples
-import Html as RootHtml
 import Html.Attributes
 import Html.Styled.Attributes as Attributes exposing (..)
 import Html.Styled.Events as Events
+import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed
 import Nri.Ui.Fonts.V1 as Fonts
@@ -143,11 +143,16 @@ view_ model =
             [ displayFlex
             , withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
             , alignItems flexStart
-            , minHeight (vh 100)
             ]
         ]
         [ navigation model.route
-        , Html.main_ [ css [ flexGrow (int 1), sectionStyles ] ]
+        , Html.main_
+            [ css
+                [ flexGrow (int 1)
+                , margin2 (px 40) zero
+                , Css.minHeight (Css.vh 100)
+                ]
+            ]
             (case model.route of
                 Routes.Doodad doodad ->
                     case List.head (examples (\m -> m.name == doodad)) of
@@ -207,21 +212,21 @@ navigation route =
                     False
 
         link active hash displayName =
-            Html.a
-                [ css
-                    [ backgroundColor transparent
-                    , borderStyle none
-                    , textDecoration none
+            ClickableText.link displayName
+                [ ClickableText.small
+                , ClickableText.css
+                    [ Css.color Colors.navy
+                    , Css.display Css.block
+                    , Css.padding (Css.px 8)
+                    , Css.borderRadius (Css.px 8)
                     , if active then
-                        color Colors.navy
+                        Css.backgroundColor Colors.glacier
 
                       else
-                        color Colors.azure
-                    , Fonts.baseFont
+                        Css.batch []
                     ]
-                , Attributes.href hash
+                , ClickableText.href hash
                 ]
-                [ Html.text displayName ]
 
         navLink category =
             link (isActive category)
@@ -231,7 +236,7 @@ navigation route =
         toNavLi element =
             Html.li
                 [ css
-                    [ margin2 (px 10) zero
+                    [ margin zero
                     , listStyle none
                     , textDecoration none
                     ]
@@ -276,18 +281,12 @@ navigation route =
             , id "skip"
             ]
             [ Html.text "Skip to main content" ]
-        , Heading.h4 [] [ Html.text "Categories" ]
         , (link (route == Routes.All) "#/" "All"
             :: List.map navLink Category.all
           )
             |> List.map toNavLi
             |> Html.ul
-                [ css [ margin4 zero zero (px 40) zero, padding zero ]
+                [ css [ margin zero, padding zero ]
                 , id "categories"
                 ]
         ]
-
-
-sectionStyles : Css.Style
-sectionStyles =
-    Css.batch [ margin2 (px 40) zero ]

From 0a0d008d02f639f3382057d8774c7d5903749b21 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:48:09 -0700
Subject: [PATCH 07/36] Begins adding preview content

---
 styleguide-app/Example.elm                 |  4 ++--
 styleguide-app/Examples/AssignmentIcon.elm |  9 ++++++++-
 styleguide-app/Examples/IconExamples.elm   | 19 ++++++++++++++++++-
 styleguide-app/Examples/Message.elm        |  6 +++++-
 styleguide-app/Examples/UiIcon.elm         |  9 ++++++++-
 5 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index ff35be32..2da803e8 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -53,7 +53,7 @@ wrapMsg wrapMsg_ unwrapMsg example =
                 Nothing ->
                     ( state, Cmd.none )
     , subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
-    , preview = []
+    , preview = example.preview
     , view = \state -> List.map (Html.map wrapMsg_) (example.view state)
     , categories = example.categories
     , keyboardSupport = example.keyboardSupport
@@ -82,7 +82,7 @@ wrapState wrapState_ unwrapState example =
         unwrapState
             >> Maybe.map example.subscriptions
             >> Maybe.withDefault Sub.none
-    , preview = []
+    , preview = example.preview
     , view =
         unwrapState
             >> Maybe.map example.view
diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm
index 3182f91d..b7a62469 100644
--- a/styleguide-app/Examples/AssignmentIcon.elm
+++ b/styleguide-app/Examples/AssignmentIcon.elm
@@ -33,7 +33,14 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        IconExamples.preview
+            [ AssignmentIcon.diagnostic
+            , AssignmentIcon.practice
+            , AssignmentIcon.quiz
+            , AssignmentIcon.quickWrite
+            , AssignmentIcon.guidedDraft
+            ]
     , view =
         \_ ->
             [ IconExamples.view "Diagnostic"
diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index def4eb27..2c8bcb0c 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/styleguide-app/Examples/IconExamples.elm
@@ -1,4 +1,4 @@
-module Examples.IconExamples exposing (view, viewWithCustomStyles)
+module Examples.IconExamples exposing (preview, view, viewWithCustomStyles)
 
 import Css
 import Html.Styled as Html exposing (Html)
@@ -9,6 +9,23 @@ import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
 
 
+preview : List Svg.Svg -> List (Html msg)
+preview icons =
+    [ Html.div
+        [ css
+            [ Css.displayFlex
+            , Css.justifyContent Css.spaceBetween
+            , Css.marginTop (Css.px 8)
+            , Css.color Colors.gray45
+            ]
+        ]
+        (List.map
+            (Svg.withWidth (Css.px 18) >> Svg.withHeight (Css.px 18) >> Svg.toHtml)
+            icons
+        )
+    ]
+
+
 view : String -> List ( String, Svg.Svg ) -> Html msg
 view headerText icons =
     let
diff --git a/styleguide-app/Examples/Message.elm b/styleguide-app/Examples/Message.elm
index 76b9ec04..17708dd1 100644
--- a/styleguide-app/Examples/Message.elm
+++ b/styleguide-app/Examples/Message.elm
@@ -177,7 +177,11 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Message.view [ Message.plaintext "Tiny tip" ]
+        , Message.view [ Message.success, Message.plaintext "Tiny success" ]
+        , Message.view [ Message.error, Message.plaintext "Tiny error" ]
+        ]
     , view =
         \state ->
             let
diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm
index dda6aed0..d125c305 100644
--- a/styleguide-app/Examples/UiIcon.elm
+++ b/styleguide-app/Examples/UiIcon.elm
@@ -33,7 +33,14 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        IconExamples.preview
+            [ UiIcon.seeMore
+            , UiIcon.copyToClipboard
+            , UiIcon.speechBalloon
+            , UiIcon.arrowPointingRight
+            , UiIcon.checkmark
+            ]
     , view =
         \_ ->
             [ IconExamples.view "Interface"

From cf319c64239a3f7b20168d022d1823133bea187c Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 11:59:39 -0700
Subject: [PATCH 08/36] Adds balloon example

---
 styleguide-app/Example.elm               | 1 +
 styleguide-app/Examples/Balloon.elm      | 9 ++++++++-
 styleguide-app/Examples/IconExamples.elm | 1 -
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index 2da803e8..c646ac32 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -112,6 +112,7 @@ preview_ navigate example =
         , Container.html
             (ClickableText.link example.name
                 [ ClickableText.href (exampleHref example)
+                , ClickableText.css [ Css.marginBottom (Css.px 10) ]
                 ]
                 :: List.map (Html.map never) example.preview
             )
diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm
index 7806aa9b..9616c223 100644
--- a/styleguide-app/Examples/Balloon.elm
+++ b/styleguide-app/Examples/Balloon.elm
@@ -29,7 +29,14 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Balloon.balloon
+            [ Balloon.onTop
+            , Balloon.navy
+            , Balloon.paddingPx 4
+            ]
+            (text "This is a balloon.")
+        ]
     , view = view
     }
 
diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index 2c8bcb0c..762a00b7 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/styleguide-app/Examples/IconExamples.elm
@@ -15,7 +15,6 @@ preview icons =
         [ css
             [ Css.displayFlex
             , Css.justifyContent Css.spaceBetween
-            , Css.marginTop (Css.px 8)
             , Css.color Colors.gray45
             ]
         ]

From db95e2c3b93ee00efd40a5253899a66ab6f7b9d0 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:04:46 -0700
Subject: [PATCH 09/36] Adds Button examples

---
 styleguide-app/Example.elm               |  9 ++++++++-
 styleguide-app/Examples/Balloon.elm      |  2 +-
 styleguide-app/Examples/Button.elm       | 16 +++++++++++++++-
 styleguide-app/Examples/IconExamples.elm |  5 +++--
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index c646ac32..6c917ed2 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -114,7 +114,14 @@ preview_ navigate example =
                 [ ClickableText.href (exampleHref example)
                 , ClickableText.css [ Css.marginBottom (Css.px 10) ]
                 ]
-                :: List.map (Html.map never) example.preview
+                :: [ Html.div
+                        [ Attributes.css
+                            [ Css.displayFlex
+                            , Css.flexDirection Css.column
+                            ]
+                        ]
+                        (List.map (Html.map never) example.preview)
+                   ]
             )
         ]
 
diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm
index 9616c223..9ba1a24a 100644
--- a/styleguide-app/Examples/Balloon.elm
+++ b/styleguide-app/Examples/Balloon.elm
@@ -33,7 +33,7 @@ example =
         [ Balloon.balloon
             [ Balloon.onTop
             , Balloon.navy
-            , Balloon.paddingPx 4
+            , Balloon.paddingPx 15
             ]
             (text "This is a balloon.")
         ]
diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 88f2d33a..1dd39854 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -28,7 +28,21 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Button.link "Primary" [ Button.small, Button.fillContainerWidth ]
+        , Button.link "Secondary"
+            [ Button.small
+            , Button.fillContainerWidth
+            , Button.secondary
+            , Button.css [ Css.marginTop (Css.px 8) ]
+            ]
+        , Button.link "Premium"
+            [ Button.small
+            , Button.fillContainerWidth
+            , Button.premium
+            , Button.css [ Css.marginTop (Css.px 8) ]
+            ]
+        ]
     , view = \state -> [ viewButtonExamples state ]
     , categories = [ Buttons ]
     , keyboardSupport = []
diff --git a/styleguide-app/Examples/IconExamples.elm b/styleguide-app/Examples/IconExamples.elm
index 762a00b7..fae857f2 100644
--- a/styleguide-app/Examples/IconExamples.elm
+++ b/styleguide-app/Examples/IconExamples.elm
@@ -14,12 +14,13 @@ preview icons =
     [ Html.div
         [ css
             [ Css.displayFlex
-            , Css.justifyContent Css.spaceBetween
+            , Css.flexWrap Css.wrap
+            , Css.property "gap" "10px"
             , Css.color Colors.gray45
             ]
         ]
         (List.map
-            (Svg.withWidth (Css.px 18) >> Svg.withHeight (Css.px 18) >> Svg.toHtml)
+            (Svg.withWidth (Css.px 30) >> Svg.withHeight (Css.px 30) >> Svg.toHtml)
             icons
         )
     ]

From 7cdb53489ca48239aaeceecd9f181bb6ab47a282 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:13:17 -0700
Subject: [PATCH 10/36] Adds clickablesv examples

---
 styleguide-app/Examples/ClickableSvg.elm | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm
index f3285888..2425527b 100644
--- a/styleguide-app/Examples/ClickableSvg.elm
+++ b/styleguide-app/Examples/ClickableSvg.elm
@@ -36,7 +36,11 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ ClickableSvg.link "ClickableSvg small" UiIcon.link [ ClickableSvg.small ]
+        , ClickableSvg.link "ClickableSvg medium" UiIcon.link [ ClickableSvg.medium ]
+        , ClickableSvg.link "ClickableSvg large" UiIcon.link [ ClickableSvg.large ]
+        ]
     , view =
         \state ->
             let

From 51c14c010658047b85b2e12549ef4d3e44fca7de Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:16:52 -0700
Subject: [PATCH 11/36] Adds ClickableText preview

---
 styleguide-app/Examples/Button.elm        |  5 ++++-
 styleguide-app/Examples/ClickableText.elm | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 1dd39854..0a131382 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -29,7 +29,10 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ Button.link "Primary" [ Button.small, Button.fillContainerWidth ]
+        [ Button.link "Primary"
+            [ Button.small
+            , Button.fillContainerWidth
+            ]
         , Button.link "Secondary"
             [ Button.small
             , Button.fillContainerWidth
diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm
index 44e40ceb..89ff5158 100644
--- a/styleguide-app/Examples/ClickableText.elm
+++ b/styleguide-app/Examples/ClickableText.elm
@@ -32,7 +32,20 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ ClickableText.link "Small"
+            [ ClickableText.icon UiIcon.link
+            , ClickableText.small
+            ]
+        , ClickableText.link "Medium"
+            [ ClickableText.icon UiIcon.link
+            , ClickableText.medium
+            ]
+        , ClickableText.link "Large"
+            [ ClickableText.icon UiIcon.link
+            , ClickableText.large
+            ]
+        ]
     , view = \state -> [ viewExamples state ]
     , categories = [ Buttons ]
     , keyboardSupport = []

From 4350e22248f70fd2f9f4c0b85458a443cbfa9f5b Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:28:37 -0700
Subject: [PATCH 12/36] Adds Colors preview

---
 styleguide-app/Examples/Colors.elm | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index b1544f29..e0e3041e 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/styleguide-app/Examples/Colors.elm
@@ -41,7 +41,12 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ ( "green", Colors.green )
+        , ( "purple", Colors.purple )
+        , ( "mustard", Colors.mustard )
+        ]
+            |> List.map viewPreviewSwatch
     , view =
         \_ ->
             [ [ ( "gray20", Colors.gray20, "Main text" )
@@ -118,6 +123,24 @@ example =
     }
 
 
+viewPreviewSwatch : ( String, Css.Color ) -> Html.Html msg
+viewPreviewSwatch ( name, color ) =
+    Html.div
+        [ Attributes.css
+            [ Css.textAlign Css.center
+            , Css.padding2 (Css.px 8) Css.zero
+            , Css.margin2 (Css.px 4) Css.zero
+            , Css.borderRadius (Css.px 4)
+            , Css.backgroundColor color
+            , Nri.Ui.Colors.Extra.fromCssColor color
+                |> highContrast
+                |> Nri.Ui.Colors.Extra.toCssColor
+                |> Css.color
+            ]
+        ]
+        [ Html.text name ]
+
+
 viewColors : List ColorExample -> Html.Html msg
 viewColors colors =
     colors

From 117c21408a0e206a68ea135fcc8517bfb115d58c Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:35:01 -0700
Subject: [PATCH 13/36] Adds Container examples

---
 styleguide-app/Examples/Colors.elm    |  7 +++----
 styleguide-app/Examples/Container.elm | 12 +++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm
index e0e3041e..869a01f1 100644
--- a/styleguide-app/Examples/Colors.elm
+++ b/styleguide-app/Examples/Colors.elm
@@ -14,6 +14,7 @@ import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import SolidColor exposing (highContrast)
 
@@ -132,10 +133,8 @@ viewPreviewSwatch ( name, color ) =
             , Css.margin2 (Css.px 4) Css.zero
             , Css.borderRadius (Css.px 4)
             , Css.backgroundColor color
-            , Nri.Ui.Colors.Extra.fromCssColor color
-                |> highContrast
-                |> Nri.Ui.Colors.Extra.toCssColor
-                |> Css.color
+            , Css.color color
+            , Css.fontSize (Css.px 14)
             ]
         ]
         [ Html.text name ]
diff --git a/styleguide-app/Examples/Container.elm b/styleguide-app/Examples/Container.elm
index 975e82fc..2c3134da 100644
--- a/styleguide-app/Examples/Container.elm
+++ b/styleguide-app/Examples/Container.elm
@@ -35,7 +35,17 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Container.view []
+        , Container.view
+            [ Container.invalid
+            , Container.css [ Css.marginTop (Css.px 8) ]
+            ]
+        , Container.view
+            [ Container.disabled
+            , Container.css [ Css.marginTop (Css.px 8) ]
+            ]
+        ]
     , view =
         \state ->
             let

From d23f3e6a8c6139dc3c2977101382549b58f7b1d5 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:37:22 -0700
Subject: [PATCH 14/36] Adds discloser indicator preview TODO: consider
 removing the example for this. People should use the Accordion compnent
 directly

---
 styleguide-app/Examples/DisclosureIndicator.elm | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm
index fff45eb8..272ad9f4 100644
--- a/styleguide-app/Examples/DisclosureIndicator.elm
+++ b/styleguide-app/Examples/DisclosureIndicator.elm
@@ -36,7 +36,12 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ DisclosureIndicator.medium [] False
+        , DisclosureIndicator.medium [] True
+        , DisclosureIndicator.large [] False
+        , DisclosureIndicator.large [] True
+        ]
     , view =
         \state ->
             [ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]

From dc2ec3fc185062d750af5b9f067dab7a244660b0 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:38:12 -0700
Subject: [PATCH 15/36] Adds dividing line preview

---
 styleguide-app/Examples/Divider.elm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Divider.elm b/styleguide-app/Examples/Divider.elm
index 57386214..d81abccc 100644
--- a/styleguide-app/Examples/Divider.elm
+++ b/styleguide-app/Examples/Divider.elm
@@ -35,6 +35,6 @@ example =
     , state = {}
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview = [ Divider.view "Dividing Line" ]
     , view = \state -> [ Divider.view "Dividing Line" ]
     }

From 700f269eed47cb286ebb9640822e97908ebc0440 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:44:23 -0700
Subject: [PATCH 16/36] Adds fonts examples

---
 styleguide-app/Examples/Fonts.elm | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm
index 7029af95..4d032355 100644
--- a/styleguide-app/Examples/Fonts.elm
+++ b/styleguide-app/Examples/Fonts.elm
@@ -7,8 +7,9 @@ module Examples.Fonts exposing (example, State, Msg)
 -}
 
 import Category exposing (Category(..))
+import Css exposing (Style)
 import Example exposing (Example)
-import Html.Styled as Html
+import Html.Styled as Html exposing (Html)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Fonts.V1 as Fonts
@@ -35,7 +36,12 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ ( "baseFont", Fonts.baseFont )
+        , ( "quizFont", Fonts.quizFont )
+        , ( "ugFont", Fonts.ugFont )
+        ]
+            |> List.map viewPreview
     , view =
         \_ ->
             [ Heading.h3 [] [ Html.text "baseFont" ]
@@ -49,3 +55,20 @@ example =
                 [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
             ]
     }
+
+
+viewPreview : ( String, Style ) -> Html msg
+viewPreview ( name, font ) =
+    Html.div
+        [ css
+            [ Css.displayFlex
+            , Css.justifyContent Css.spaceBetween
+            , font
+            , Css.fontSize (Css.px 14)
+            ]
+        ]
+        [ Html.p [ css [ Css.margin2 (Css.px 8) Css.zero ] ]
+            [ Html.text name ]
+        , Html.p [ css [ Css.margin2 (Css.px 8) Css.zero ] ]
+            [ Html.text "AaBbCc" ]
+        ]

From d3077d875c5591daa99c2aa5c271c757884158e7 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:45:22 -0700
Subject: [PATCH 17/36] Adds heading preview

---
 styleguide-app/Examples/Heading.elm | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm
index 4ce785ad..057758db 100644
--- a/styleguide-app/Examples/Heading.elm
+++ b/styleguide-app/Examples/Heading.elm
@@ -35,7 +35,12 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Heading.h1 [] [ Html.text "h1" ]
+        , Heading.h2 [] [ Html.text "h2" ]
+        , Heading.h3 [] [ Html.text "h3" ]
+        , Heading.h4 [] [ Html.text "h4" ]
+        ]
     , view =
         \_ ->
             [ Heading.h1 [] [ Html.text "This is the main page heading." ]

From 45da215536c7898dbe31ab1633c730f52b3ea032 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:50:05 -0700
Subject: [PATCH 18/36] Adds logo examples

---
 styleguide-app/Examples/Logo.elm | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Logo.elm b/styleguide-app/Examples/Logo.elm
index 36bf20ae..4dab3e7e 100644
--- a/styleguide-app/Examples/Logo.elm
+++ b/styleguide-app/Examples/Logo.elm
@@ -10,9 +10,12 @@ import Category exposing (Category(..))
 import Css
 import Example exposing (Example)
 import Examples.IconExamples as IconExamples
+import Html.Styled as Html exposing (Html)
+import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Logo.V1 as Logo
+import Nri.Ui.Svg.V1 as Svg
 
 
 {-| -}
@@ -35,7 +38,14 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        Html.div [ css [ Css.marginBottom (Css.px 8) ] ] [ Svg.toHtml Logo.noredink ]
+            :: IconExamples.preview
+                [ Logo.facebook
+                , Logo.twitter
+                , Logo.cleverC
+                , Logo.googleG
+                ]
     , view =
         \_ ->
             [ IconExamples.viewWithCustomStyles "NRI"

From 0c1830f261cc09674f3cef84dcb9dbbaac4c2509 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 12:59:13 -0700
Subject: [PATCH 19/36] Mini example preview of the page component

---
 src/Nri/Ui/Page/V3.elm           |  2 +-
 styleguide-app/Examples/Page.elm | 28 +++++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm
index 444e1465..ef0c98ae 100644
--- a/src/Nri/Ui/Page/V3.elm
+++ b/src/Nri/Ui/Page/V3.elm
@@ -23,7 +23,7 @@ import Nri.Ui.Html.V3 exposing (viewIf)
 
 {-| The default page information is for the button
 which will direct the user back to the main page of
-the SPA. Specify it's name and the message which will
+the SPA. Specify its name and the message which will
 navigate to the page.
 -}
 type alias DefaultPage msg =
diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm
index e05726ad..7d0c0956 100644
--- a/styleguide-app/Examples/Page.elm
+++ b/styleguide-app/Examples/Page.elm
@@ -17,6 +17,7 @@ import Html.Styled.Attributes exposing (css)
 import Http
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Page.V3 as Page exposing (RecoveryText(..))
 
@@ -62,7 +63,32 @@ example =
     , state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText }
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ -- faking a mini version of the Page component to give styleguide users a sense of what the
+          -- component might look like
+          Html.div
+            [ css
+                [ Css.displayFlex
+                , Css.alignItems Css.center
+                , Css.flexDirection Css.column
+                , Css.backgroundColor Colors.white
+                , Css.borderRadius (Css.px 4)
+                , Css.padding (Css.px 20)
+                ]
+            ]
+            [ Html.div [ css [ Css.fontSize (Css.px 40) ] ] [ Html.text "😵" ]
+            , Html.p
+                [ css
+                    [ Css.color Colors.navy
+                    , Fonts.baseFont
+                    , Css.fontWeight Css.bold
+                    , Css.textAlign Css.center
+                    , Css.margin Css.zero
+                    ]
+                ]
+                [ Html.text "There was a problem!" ]
+            ]
+        ]
     , view =
         \model ->
             let

From 22a19168553ab1851ef6f7357ad855ab24eb6abc Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 13:13:35 -0700
Subject: [PATCH 20/36] Mini modal preview

---
 styleguide-app/Examples/Modal.elm | 49 ++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm
index d8e82cd2..e369d6e5 100644
--- a/styleguide-app/Examples/Modal.elm
+++ b/styleguide-app/Examples/Modal.elm
@@ -18,11 +18,15 @@ import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button
 import Nri.Ui.Checkbox.V5 as Checkbox
+import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
+import Nri.Ui.Colors.Extra
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.FocusTrap.V1 as FocusTrap
+import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Modal.V11 as Modal
 import Nri.Ui.Text.V6 as Text
+import Nri.Ui.UiIcon.V1 as UiIcon
 import Task
 
 
@@ -125,7 +129,50 @@ example =
     , state = init
     , update = update
     , subscriptions = subscriptions
-    , preview = []
+    , preview =
+        [ -- faking a mini version of the Modal component to give styleguide users a sense of what the
+          -- component might look like
+          div
+            [ css
+                [ Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy)
+                , Css.borderRadius (Css.px 4)
+                , Css.padding2 (Css.px 25) Css.zero
+                , Css.displayFlex
+                , Css.alignItems Css.center
+                , Css.justifyContent Css.center
+                ]
+            ]
+            [ div
+                [ css
+                    [ Css.backgroundColor Colors.white
+                    , Css.padding (Css.px 10)
+                    , Css.borderRadius (Css.px 10)
+                    , Css.boxShadow5 Css.zero (Css.px 1) (Css.px 10) Css.zero (Css.rgba 0 0 0 0.35)
+                    , Css.textAlign Css.center
+                    , Css.color Colors.navy
+                    , Fonts.baseFont
+                    , Css.margin Css.auto
+                    , Css.width (Css.px 100)
+                    , Css.height (Css.px 60)
+                    , Css.fontSize (Css.px 10)
+                    , Css.fontWeight Css.bold
+                    , Css.position Css.relative
+                    ]
+                ]
+                [ text "Modal"
+                , ClickableSvg.button "Close"
+                    UiIcon.x
+                    [ ClickableSvg.exactWidth 10
+                    , ClickableSvg.exactHeight 10
+                    , ClickableSvg.css
+                        [ Css.position absolute
+                        , Css.top (Css.px 10)
+                        , Css.right (Css.px 10)
+                        ]
+                    ]
+                ]
+            ]
+        ]
     , view =
         \state ->
             let

From e6b524021e07bd6d9b6b6468084c97216c931b53 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 13:14:23 -0700
Subject: [PATCH 21/36] Adds pennant

---
 styleguide-app/Examples/Pennant.elm | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Pennant.elm b/styleguide-app/Examples/Pennant.elm
index e39fb1f6..8cadebb2 100644
--- a/styleguide-app/Examples/Pennant.elm
+++ b/styleguide-app/Examples/Pennant.elm
@@ -38,7 +38,12 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        IconExamples.preview
+            [ Pennant.premiumFlag
+            , Pennant.expiredPremiumFlag
+            , Pennant.disabledPremiumFlag
+            ]
     , view =
         \_ ->
             [ IconExamples.viewWithCustomStyles "Premium Pennants"

From a5743b06394ebcf72994adab2d3b1833a42281c4 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 13:55:44 -0700
Subject: [PATCH 22/36] Adds switch preivew and removes Text.mediumBody
 wrapping  the styleguide shouldn't imply that styles like those of medium
 body are att ached when they're not

---
 styleguide-app/Examples/Switch.elm | 61 +++++++++++++-----------------
 1 file changed, 26 insertions(+), 35 deletions(-)

diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm
index 519922f9..bdadbd80 100644
--- a/styleguide-app/Examples/Switch.elm
+++ b/styleguide-app/Examples/Switch.elm
@@ -11,7 +11,6 @@ import Example exposing (Example)
 import Html.Styled as Html
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Switch.V1 as Switch
-import Nri.Ui.Text.V6 as Text
 
 
 {-| -}
@@ -31,47 +30,39 @@ example =
     , state = True
     , update = \(Switch new) _ -> ( new, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Switch.view [ Switch.label (Html.text "Toggle On") ] False
+        , Switch.view [ Switch.label (Html.text "Toggle Off") ] True
+        ]
     , view =
         \interactiveIsOn ->
             [ Heading.h3 [] [ Html.text "Interactive" ]
-            , Text.mediumBody
-                [ Text.html
-                    [ Switch.view
-                        [ Switch.onSwitch Switch
-                        , Switch.id "switch-interactive"
-                        , Switch.label
-                            (if interactiveIsOn then
-                                Html.text "On"
+            , Switch.view
+                [ Switch.onSwitch Switch
+                , Switch.id "switch-interactive"
+                , Switch.label
+                    (if interactiveIsOn then
+                        Html.text "On"
 
-                             else
-                                Html.text "Off"
-                            )
-                        ]
-                        interactiveIsOn
-                    ]
+                     else
+                        Html.text "Off"
+                    )
                 ]
-            , Heading.h3 [] [ Html.text "Disabled" ]
-            , Text.mediumBody
-                [ Text.html
-                    [ Switch.view
-                        [ Switch.disabled
-                        , Switch.id "switch-disabled-on"
-                        , Switch.label (Html.text "Permanently on")
-                        ]
-                        True
-                    ]
+                interactiveIsOn
+            , Heading.h3 [] [ Html.text "Disabled (On)" ]
+            , Switch.view
+                [ Switch.disabled
+                , Switch.id "switch-disabled-on"
+                , Switch.label (Html.text "Permanently on")
                 ]
-            , Text.mediumBody
-                [ Text.html
-                    [ Switch.view
-                        [ Switch.disabled
-                        , Switch.id "switch-disabled-off"
-                        , Switch.label (Html.text "Permanently off")
-                        ]
-                        False
-                    ]
+                True
+            , Heading.h3 [] [ Html.text "Disabled (Off)" ]
+            , Switch.view
+                [ Switch.disabled
+                , Switch.id "switch-disabled-off"
+                , Switch.label (Html.text "Permanently off")
                 ]
+                False
             ]
     , categories = [ Category.Inputs ]
     , keyboardSupport = [{- TODO -}]

From b684abf57c276ee26e6c85a52062167b3ef15608 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:01:10 -0700
Subject: [PATCH 23/36] Adds table example

---
 styleguide-app/Examples/Table.elm | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm
index 31da571f..2379e553 100644
--- a/styleguide-app/Examples/Table.elm
+++ b/styleguide-app/Examples/Table.elm
@@ -37,7 +37,29 @@ example =
     , subscriptions = \_ -> Sub.none
     , categories = [ Tables, Layout ]
     , keyboardSupport = []
-    , preview = []
+    , preview =
+        [ Table.view
+            [ Table.string
+                { header = "A"
+                , value = .a
+                , width = px 50
+                , cellStyles = always []
+                }
+            , Table.string
+                { header = "B"
+                , value = .b
+                , width = px 50
+                , cellStyles = always []
+                }
+            ]
+            [ { a = "Row 1 A"
+              , b = "Row 1 B"
+              }
+            , { a = "Row 2 A"
+              , b = "Row 2 B"
+              }
+            ]
+        ]
     , view =
         \() ->
             let

From 985e4dead9148a74249f69dbfba9c68ca6997bb9 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:06:32 -0700
Subject: [PATCH 24/36] Adds text preview

---
 styleguide-app/Examples/Text.elm         | 13 ++++++++++++-
 styleguide-app/Examples/Text/Writing.elm |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm
index 4f9e5cae..04be16bc 100644
--- a/styleguide-app/Examples/Text.elm
+++ b/styleguide-app/Examples/Text.elm
@@ -30,7 +30,13 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ ( "caption", Text.caption )
+        , ( "smallBody", Text.smallBody )
+        , ( "mediumBody", Text.mediumBody )
+        , ( "ugMediumBody", Text.ugMediumBody )
+        ]
+            |> List.map viewPreview
     , view =
         \state ->
             let
@@ -58,6 +64,11 @@ example =
     }
 
 
+viewPreview : ( String, List (Text.Attribute msg) -> Html msg ) -> Html msg
+viewPreview ( name, view ) =
+    view [ Text.plaintext name ]
+
+
 viewExamples : List ( String, List (Text.Attribute msg) -> Html msg ) -> List (Text.Attribute msg) -> Html msg
 viewExamples examples attributes =
     let
diff --git a/styleguide-app/Examples/Text/Writing.elm b/styleguide-app/Examples/Text/Writing.elm
index fd0ca16b..22299a47 100644
--- a/styleguide-app/Examples/Text/Writing.elm
+++ b/styleguide-app/Examples/Text/Writing.elm
@@ -32,7 +32,7 @@ example =
     , state = ()
     , update = \_ state -> ( state, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview = [ TextWriting.footnote [ text "This is a footnote. " ] ]
     , view =
         \_ ->
             let

From 27ee66295bf5efbee34e75b56c787e75b0c68d77 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:11:11 -0700
Subject: [PATCH 25/36] Adds text input examples

---
 styleguide-app/Examples/TextInput.elm | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm
index 15a99d55..f51e5748 100644
--- a/styleguide-app/Examples/TextInput.elm
+++ b/styleguide-app/Examples/TextInput.elm
@@ -32,7 +32,13 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ TextInput.view "Text Input" []
+        , TextInput.view "Errored"
+            [ TextInput.value "invalid content"
+            , TextInput.errorIf True
+            ]
+        ]
     , view =
         \state ->
             let

From cd84f2c628ab91c1c1aa58f14bb5392267f8bc0d Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:17:14 -0700
Subject: [PATCH 26/36] Adds tooltip preview

---
 styleguide-app/Examples/Tooltip.elm | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index 7a5f1690..f61243c1 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/styleguide-app/Examples/Tooltip.elm
@@ -33,7 +33,31 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ Html.div
+            [ css
+                [ Css.marginTop (Css.px 60)
+                , Css.alignSelf Css.center
+                ]
+            ]
+            [ Tooltip.view
+                { id = "preview-tooltip"
+                , trigger =
+                    \attributes ->
+                        ClickableSvg.button "example-preview-tooltip-icon"
+                            UiIcon.gear
+                            [ ClickableSvg.custom attributes
+                            , ClickableSvg.small
+                            ]
+                }
+                [ Tooltip.plaintext "This is a tooltip."
+                , Tooltip.open True
+                , Tooltip.onTop
+                , Tooltip.smallPadding
+                , Tooltip.fitToContent
+                ]
+            ]
+        ]
     , view = view
     }
 

From 52a58c492425aa435d6d6365c45a4a856d5cd752 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:35:09 -0700
Subject: [PATCH 27/36] Remove the preview items from the tab order need to fix
 switch still

---
 styleguide-app/Examples/Button.elm        |  4 ++++
 styleguide-app/Examples/ClickableSvg.elm  | 19 ++++++++++++++++---
 styleguide-app/Examples/ClickableText.elm |  4 ++++
 styleguide-app/Examples/Modal.elm         |  4 +++-
 styleguide-app/Examples/Switch.elm        | 17 +++++++++++++++--
 styleguide-app/Examples/TextInput.elm     |  6 +++++-
 styleguide-app/Examples/Tooltip.elm       |  2 ++
 7 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm
index 0a131382..d3381441 100644
--- a/styleguide-app/Examples/Button.elm
+++ b/styleguide-app/Examples/Button.elm
@@ -6,6 +6,7 @@ module Examples.Button exposing (Msg, State, example)
 
 -}
 
+import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css exposing (middle, verticalAlign)
 import Debug.Control as Control exposing (Control)
@@ -32,18 +33,21 @@ example =
         [ Button.link "Primary"
             [ Button.small
             , Button.fillContainerWidth
+            , Button.custom [ Key.tabbable False ]
             ]
         , Button.link "Secondary"
             [ Button.small
             , Button.fillContainerWidth
             , Button.secondary
             , Button.css [ Css.marginTop (Css.px 8) ]
+            , Button.custom [ Key.tabbable False ]
             ]
         , Button.link "Premium"
             [ Button.small
             , Button.fillContainerWidth
             , Button.premium
             , Button.css [ Css.marginTop (Css.px 8) ]
+            , Button.custom [ Key.tabbable False ]
             ]
         ]
     , view = \state -> [ viewButtonExamples state ]
diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm
index 2425527b..91bb3278 100644
--- a/styleguide-app/Examples/ClickableSvg.elm
+++ b/styleguide-app/Examples/ClickableSvg.elm
@@ -6,6 +6,7 @@ module Examples.ClickableSvg exposing (Msg, State, example)
 
 -}
 
+import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css
 import Debug.Control as Control exposing (Control)
@@ -37,9 +38,21 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ ClickableSvg.link "ClickableSvg small" UiIcon.link [ ClickableSvg.small ]
-        , ClickableSvg.link "ClickableSvg medium" UiIcon.link [ ClickableSvg.medium ]
-        , ClickableSvg.link "ClickableSvg large" UiIcon.link [ ClickableSvg.large ]
+        [ ClickableSvg.link "ClickableSvg small"
+            UiIcon.link
+            [ ClickableSvg.small
+            , ClickableSvg.custom [ Key.tabbable False ]
+            ]
+        , ClickableSvg.link "ClickableSvg medium"
+            UiIcon.link
+            [ ClickableSvg.medium
+            , ClickableSvg.custom [ Key.tabbable False ]
+            ]
+        , ClickableSvg.link "ClickableSvg large"
+            UiIcon.link
+            [ ClickableSvg.large
+            , ClickableSvg.custom [ Key.tabbable False ]
+            ]
         ]
     , view =
         \state ->
diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm
index 89ff5158..8a288cef 100644
--- a/styleguide-app/Examples/ClickableText.elm
+++ b/styleguide-app/Examples/ClickableText.elm
@@ -6,6 +6,7 @@ module Examples.ClickableText exposing (Msg, State, example)
 
 -}
 
+import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css exposing (middle, verticalAlign)
 import Debug.Control as Control exposing (Control)
@@ -36,14 +37,17 @@ example =
         [ ClickableText.link "Small"
             [ ClickableText.icon UiIcon.link
             , ClickableText.small
+            , ClickableText.custom [ Key.tabbable False ]
             ]
         , ClickableText.link "Medium"
             [ ClickableText.icon UiIcon.link
             , ClickableText.medium
+            , ClickableText.custom [ Key.tabbable False ]
             ]
         , ClickableText.link "Large"
             [ ClickableText.icon UiIcon.link
             , ClickableText.large
+            , ClickableText.custom [ Key.tabbable False ]
             ]
         ]
     , view = \state -> [ viewExamples state ]
diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm
index e369d6e5..03eebf35 100644
--- a/styleguide-app/Examples/Modal.elm
+++ b/styleguide-app/Examples/Modal.elm
@@ -7,6 +7,7 @@ module Examples.Modal exposing (Msg, State, example)
 -}
 
 import Accessibility.Styled as Html exposing (Html, div, h3, h4, p, span, text)
+import Accessibility.Styled.Key as Key
 import Browser.Dom as Dom
 import Category exposing (Category(..))
 import Css exposing (..)
@@ -160,7 +161,7 @@ example =
                     ]
                 ]
                 [ text "Modal"
-                , ClickableSvg.button "Close"
+                , ClickableSvg.link "Close"
                     UiIcon.x
                     [ ClickableSvg.exactWidth 10
                     , ClickableSvg.exactHeight 10
@@ -169,6 +170,7 @@ example =
                         , Css.top (Css.px 10)
                         , Css.right (Css.px 10)
                         ]
+                    , ClickableSvg.custom [ Key.tabbable False ]
                     ]
                 ]
             ]
diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm
index bdadbd80..24fa5b32 100644
--- a/styleguide-app/Examples/Switch.elm
+++ b/styleguide-app/Examples/Switch.elm
@@ -6,6 +6,7 @@ module Examples.Switch exposing (Msg, State, example)
 
 -}
 
+import Accessibility.Styled.Key as Key
 import Category
 import Example exposing (Example)
 import Html.Styled as Html
@@ -31,8 +32,20 @@ example =
     , update = \(Switch new) _ -> ( new, Cmd.none )
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ Switch.view [ Switch.label (Html.text "Toggle On") ] False
-        , Switch.view [ Switch.label (Html.text "Toggle Off") ] True
+        [ Switch.view
+            [ Switch.label (Html.text "Toggle On")
+
+            -- TODO
+            -- Switch.custom [ Key.tabbable False ]
+            ]
+            False
+        , Switch.view
+            [ Switch.label (Html.text "Toggle Off")
+
+            -- TODO
+            -- Switch.custom [ Key.tabbable False ]
+            ]
+            True
         ]
     , view =
         \interactiveIsOn ->
diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm
index f51e5748..494e7582 100644
--- a/styleguide-app/Examples/TextInput.elm
+++ b/styleguide-app/Examples/TextInput.elm
@@ -7,6 +7,7 @@ module Examples.TextInput exposing (Msg, State, example)
 -}
 
 import Accessibility.Styled as Html exposing (..)
+import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css exposing (..)
 import Debug.Control as Control exposing (Control)
@@ -33,10 +34,13 @@ example =
     , update = update
     , subscriptions = \_ -> Sub.none
     , preview =
-        [ TextInput.view "Text Input" []
+        [ TextInput.view "Text Input"
+            [ TextInput.custom [ Key.tabbable False ]
+            ]
         , TextInput.view "Errored"
             [ TextInput.value "invalid content"
             , TextInput.errorIf True
+            , TextInput.custom [ Key.tabbable False ]
             ]
         ]
     , view =
diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm
index f61243c1..2ad8a296 100644
--- a/styleguide-app/Examples/Tooltip.elm
+++ b/styleguide-app/Examples/Tooltip.elm
@@ -7,6 +7,7 @@ module Examples.Tooltip exposing (example, State, Msg)
 -}
 
 import Accessibility.Styled as Html exposing (Html)
+import Accessibility.Styled.Key as Key
 import Category exposing (Category(..))
 import Css
 import Debug.Control as Control exposing (Control)
@@ -48,6 +49,7 @@ example =
                             UiIcon.gear
                             [ ClickableSvg.custom attributes
                             , ClickableSvg.small
+                            , ClickableSvg.custom [ Key.tabbable False ]
                             ]
                 }
                 [ Tooltip.plaintext "This is a tooltip."

From fe0e3f2e13d4d949d7b39f3e1cbaa7c2f6206415 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 14:42:34 -0700
Subject: [PATCH 28/36] Make the Switch component preview non-focusable

---
 src/Nri/Ui/Switch/V1.elm           | 29 +++++++++++++++++++++++------
 styleguide-app/Examples/Switch.elm |  8 ++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/Nri/Ui/Switch/V1.elm b/src/Nri/Ui/Switch/V1.elm
index e18c763a..08f2f14c 100644
--- a/src/Nri/Ui/Switch/V1.elm
+++ b/src/Nri/Ui/Switch/V1.elm
@@ -1,8 +1,8 @@
-module Nri.Ui.Switch.V1 exposing (view, Attribute, onSwitch, disabled, id, label)
+module Nri.Ui.Switch.V1 exposing (view, Attribute, onSwitch, disabled, id, label, custom)
 
 {-|
 
-@docs view, Attribute, onSwitch, disabled, id, label
+@docs view, Attribute, onSwitch, disabled, id, label, custom
 
 -}
 
@@ -27,6 +27,7 @@ type Attribute msg
     | Id String
     | Label (Html msg)
     | Disabled
+    | Custom (List (Html.Attribute Never))
 
 
 {-| Specify what happens when the switch is toggled.
@@ -63,10 +64,18 @@ label =
     Label
 
 
+{-| Pass custom attributes through to be attached to the underlying input.
+-}
+custom : List (Html.Attribute Never) -> Attribute msg
+custom =
+    Custom
+
+
 type alias Config msg =
     { onSwitch : Maybe (Bool -> msg)
     , id : String
     , label : Maybe (Html msg)
+    , attributes : List (Html.Attribute Never)
     }
 
 
@@ -75,6 +84,7 @@ defaultConfig =
     { onSwitch = Nothing
     , id = "nri-ui-switch-with-default-id"
     , label = Nothing
+    , attributes = []
     }
 
 
@@ -93,6 +103,9 @@ customize attr config =
         Label label_ ->
             { config | label = Just label_ }
 
+        Custom custom_ ->
+            { config | attributes = custom_ }
+
 
 {-| Render a switch. The boolean here indicates whether the switch is on
 or not.
@@ -133,6 +146,7 @@ view attrs isOn =
             { id = config.id
             , onCheck = config.onSwitch
             , checked = isOn
+            , attributes = config.attributes
             }
         , Nri.Ui.Svg.V1.toHtml
             (viewSwitch
@@ -162,26 +176,29 @@ viewCheckbox :
     { id : String
     , onCheck : Maybe (Bool -> msg)
     , checked : Bool
+    , attributes : List (Html.Attribute Never)
     }
     -> Html msg
 viewCheckbox config =
     Html.checkbox config.id
         (Just config.checked)
-        [ Attributes.id config.id
-        , Attributes.css
+        ([ Attributes.id config.id
+         , Attributes.css
             [ Css.position Css.absolute
             , Css.top (Css.px 10)
             , Css.left (Css.px 10)
             , Css.zIndex (Css.int 0)
             , Css.opacity (Css.num 0)
             ]
-        , case config.onCheck of
+         , case config.onCheck of
             Just onCheck ->
                 Events.onCheck onCheck
 
             Nothing ->
                 Widget.disabled True
-        ]
+         ]
+            ++ List.map (Attributes.map never) config.attributes
+        )
 
 
 viewSwitch :
diff --git a/styleguide-app/Examples/Switch.elm b/styleguide-app/Examples/Switch.elm
index 24fa5b32..8167cbcc 100644
--- a/styleguide-app/Examples/Switch.elm
+++ b/styleguide-app/Examples/Switch.elm
@@ -34,16 +34,12 @@ example =
     , preview =
         [ Switch.view
             [ Switch.label (Html.text "Toggle On")
-
-            -- TODO
-            -- Switch.custom [ Key.tabbable False ]
+            , Switch.custom [ Key.tabbable False ]
             ]
             False
         , Switch.view
             [ Switch.label (Html.text "Toggle Off")
-
-            -- TODO
-            -- Switch.custom [ Key.tabbable False ]
+            , Switch.custom [ Key.tabbable False ]
             ]
             True
         ]

From 91c086372bf02e5d3adba40300083dd1ab4c2888 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:04:14 -0700
Subject: [PATCH 29/36] Adds button to take you back out of an example

---
 styleguide-app/Example.elm       |  9 +++++----
 styleguide-app/Examples/Tabs.elm | 10 ++++++++--
 styleguide-app/Main.elm          | 28 ++++++++++++++++++++++------
 styleguide-app/Routes.elm        | 15 ++++++++++++++-
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index 6c917ed2..c016bcc0 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -14,6 +14,7 @@ import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank)
+import Routes exposing (Route)
 
 
 type alias Example state msg =
@@ -92,12 +93,12 @@ wrapState wrapState_ unwrapState example =
     }
 
 
-preview : (String -> msg2) -> Example state msg -> Html msg2
+preview : (Route -> msg2) -> Example state msg -> Html msg2
 preview navigate =
     Lazy.lazy (preview_ navigate)
 
 
-preview_ : (String -> msg2) -> Example state msg -> Html msg2
+preview_ : (Route -> msg2) -> Example state msg -> Html msg2
 preview_ navigate example =
     Container.view
         [ Container.gray
@@ -108,7 +109,7 @@ preview_ navigate example =
                 , Css.cursor Css.pointer
                 ]
             ]
-        , Container.custom [ Events.onClick (navigate (exampleHref example)) ]
+        , Container.custom [ Events.onClick (navigate (Routes.Doodad example.name)) ]
         , Container.html
             (ClickableText.link example.name
                 [ ClickableText.href (exampleHref example)
@@ -169,7 +170,7 @@ view_ example =
 
 exampleHref : Example state msg -> String
 exampleHref example =
-    "#/doodad/" ++ example.name
+    Routes.toString (Routes.Doodad example.name)
 
 
 exampleLink : Example state msg -> Html msg
diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm
index 511e39dd..8fec8d95 100644
--- a/styleguide-app/Examples/Tabs.elm
+++ b/styleguide-app/Examples/Tabs.elm
@@ -23,6 +23,7 @@ import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Tabs.V7 as Tabs exposing (Alignment(..), Tab)
 import Nri.Ui.Tooltip.V2 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
+import Routes
 import Task
 
 
@@ -117,9 +118,14 @@ update msg model =
             )
 
 
+exampleName : String
+exampleName =
+    "Tabs"
+
+
 example : Example State Msg
 example =
-    { name = "Tabs"
+    { name = exampleName
     , version = 7
     , categories = [ Layout ]
     , keyboardSupport =
@@ -168,7 +174,7 @@ allTabs openTooltipId labelledBy =
                 |> Svg.toHtml
     in
     [ Tabs.build { id = First, idString = "tab-0" }
-        ([ Tabs.spaHref "/#/doodad/Tabs"
+        ([ Tabs.spaHref <| Routes.toString (Routes.Doodad exampleName)
          , Tabs.tabString "1"
          , Tabs.withTooltip
             [ Tooltip.plaintext "Link Example"
diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index 0a3d968d..f6b615b8 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -13,12 +13,14 @@ import Examples
 import Html.Attributes
 import Html.Styled.Attributes as Attributes exposing (..)
 import Html.Styled.Events as Events
+import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.MediaQuery.V1 exposing (mobile, notMobile)
+import Nri.Ui.UiIcon.V1 as UiIcon
 import Routes as Routes exposing (Route(..))
 import Sort.Set as Set exposing (Set)
 import Task
@@ -40,6 +42,7 @@ main =
 type alias Model =
     { -- Global UI
       route : Route
+    , previousRoute : Maybe Route
     , moduleStates : Dict String (Example Examples.State Examples.Msg)
     , navigationKey : Key
     }
@@ -48,6 +51,7 @@ type alias Model =
 init : () -> Url -> Key -> ( Model, Cmd Msg )
 init () url key =
     ( { route = Routes.fromLocation url
+      , previousRoute = Nothing
       , moduleStates =
             Dict.fromList
                 (List.map (\example -> ( example.name, example )) Examples.all)
@@ -61,7 +65,7 @@ type Msg
     = UpdateModuleStates String Examples.Msg
     | OnUrlRequest Browser.UrlRequest
     | OnUrlChange Url
-    | ChangeUrl String
+    | ChangeRoute Route
     | SkipToMainContent
     | NoOp
 
@@ -96,10 +100,15 @@ update action model =
                     ( model, Browser.Navigation.load loc )
 
         OnUrlChange route ->
-            ( { model | route = Routes.fromLocation route }, Cmd.none )
+            ( { model
+                | route = Routes.fromLocation route
+                , previousRoute = Just model.route
+              }
+            , Cmd.none
+            )
 
-        ChangeUrl url ->
-            ( model, Browser.Navigation.pushUrl model.navigationKey url )
+        ChangeRoute route ->
+            ( model, Browser.Navigation.pushUrl model.navigationKey (Routes.toString route) )
 
         SkipToMainContent ->
             ( model
@@ -162,6 +171,13 @@ view_ model =
                                 [ Example.view example
                                     |> Html.map (UpdateModuleStates example.name)
                                 ]
+                            , ClickableSvg.link ("Close " ++ example.name ++ " example")
+                                UiIcon.x
+                                [ ClickableSvg.href
+                                    (Maybe.withDefault Routes.All model.previousRoute
+                                        |> Routes.toString
+                                    )
+                                ]
                             ]
 
                         Nothing ->
@@ -189,7 +205,7 @@ view_ model =
 viewPreviews : String -> List (Example state msg) -> Html Msg
 viewPreviews containerId examples =
     examples
-        |> List.map (\example -> Example.preview ChangeUrl example)
+        |> List.map (\example -> Example.preview ChangeRoute example)
         |> Html.div
             [ id containerId
             , css
@@ -230,7 +246,7 @@ navigation route =
 
         navLink category =
             link (isActive category)
-                ("#/category/" ++ Debug.toString category)
+                (Routes.toString (Routes.Category category))
                 (Category.forDisplay category)
 
         toNavLi element =
diff --git a/styleguide-app/Routes.elm b/styleguide-app/Routes.elm
index c7ab0e48..0e05f257 100644
--- a/styleguide-app/Routes.elm
+++ b/styleguide-app/Routes.elm
@@ -1,4 +1,4 @@
-module Routes exposing (Route(..), fromLocation)
+module Routes exposing (Route(..), fromLocation, toString)
 
 import Browser.Navigation as Navigation
 import Category
@@ -12,6 +12,19 @@ type Route
     | All
 
 
+toString : Route -> String
+toString route_ =
+    case route_ of
+        Doodad exampleName ->
+            "#/doodad/" ++ exampleName
+
+        Category c ->
+            "#/category/" ++ Debug.toString c
+
+        All ->
+            ""
+
+
 route : Parser Route
 route =
     Parser.oneOf

From 01fa2d4e0a50fb4877034f2cd9ceea6b32c2bf0b Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:16:54 -0700
Subject: [PATCH 30/36] Improve example rendering and not-found behavior

---
 styleguide-app/Example.elm |  27 +++++-----
 styleguide-app/Main.elm    | 102 +++++++++++++++++++------------------
 styleguide-app/Routes.elm  |   2 +-
 3 files changed, 68 insertions(+), 63 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index c016bcc0..bc060d97 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -8,12 +8,14 @@ import Html.Styled.Attributes as Attributes
 import Html.Styled.Events as Events
 import Html.Styled.Lazy as Lazy
 import KeyboardSupport exposing (KeyboardSupport)
+import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors exposing (..)
 import Nri.Ui.Container.V2 as Container
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank)
+import Nri.Ui.UiIcon.V1 as UiIcon
 import Routes exposing (Route)
 
 
@@ -127,18 +129,19 @@ preview_ navigate example =
         ]
 
 
-view : Example state msg -> Html msg
+view : Maybe Route -> Example state msg -> Html msg
 view =
-    Lazy.lazy view_
+    Lazy.lazy2 view_
 
 
-view_ : Example state msg -> Html msg
-view_ example =
+view_ : Maybe Route -> Example state msg -> Html msg
+view_ previousRoute example =
     Html.div
         [ -- this class makes the axe accessibility checking output easier to parse
           String.replace "." "-" example.name
             |> (++) "module-example__"
             |> Attributes.class
+        , Attributes.id (String.replace "." "-" example.name)
         ]
         [ Html.div
             [ Attributes.css
@@ -155,16 +158,14 @@ view_ example =
             , srcLink example
             ]
         , KeyboardSupport.view example.keyboardSupport
-        , Html.div
-            [ Attributes.css
-                [ padding (px 40)
-                , boxShadow5 zero (px 2) (px 4) zero (rgba 0 0 0 0.25)
-                , border3 (px 1) solid gray92
-                , borderRadius (px 20)
-                , margin3 (px 10) zero (px 40)
-                ]
+        , Html.div [] (example.view example.state)
+        , ClickableSvg.link ("Close " ++ example.name ++ " example")
+            UiIcon.x
+            [ ClickableSvg.href
+                (Maybe.withDefault Routes.All previousRoute
+                    |> Routes.toString
+                )
             ]
-            (example.view example.state)
         ]
 
 
diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm
index f6b615b8..17065f63 100644
--- a/styleguide-app/Main.elm
+++ b/styleguide-app/Main.elm
@@ -13,14 +13,13 @@ import Examples
 import Html.Attributes
 import Html.Styled.Attributes as Attributes exposing (..)
 import Html.Styled.Events as Events
-import Nri.Ui.ClickableSvg.V2 as ClickableSvg
 import Nri.Ui.ClickableText.V3 as ClickableText
 import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.MediaQuery.V1 exposing (mobile, notMobile)
-import Nri.Ui.UiIcon.V1 as UiIcon
+import Nri.Ui.Page.V3 as Page
 import Routes as Routes exposing (Route(..))
 import Sort.Set as Set exposing (Set)
 import Task
@@ -108,7 +107,10 @@ update action model =
             )
 
         ChangeRoute route ->
-            ( model, Browser.Navigation.pushUrl model.navigationKey (Routes.toString route) )
+            ( model
+            , Browser.Navigation.pushUrl model.navigationKey
+                (Routes.toString route)
+            )
 
         SkipToMainContent ->
             ( model
@@ -138,15 +140,43 @@ view_ model =
     let
         examples filterBy =
             List.filter (\m -> filterBy m) (Dict.values model.moduleStates)
-
-        mainContentHeader heading =
-            Heading.h1
-                [ Heading.customAttr (id "maincontent")
-                , Heading.customAttr (tabindex -1)
-                , Heading.css [ marginBottom (px 30) ]
-                ]
-                [ Html.text heading ]
     in
+    case model.route of
+        Routes.Doodad doodad ->
+            case List.head (examples (\m -> m.name == doodad)) of
+                Just example ->
+                    Html.main_ []
+                        [ Example.view model.previousRoute example
+                            |> Html.map (UpdateModuleStates example.name)
+                        ]
+
+                Nothing ->
+                    Page.notFound
+                        { link = ChangeRoute Routes.All
+                        , recoveryText = Page.ReturnTo "Component Library"
+                        }
+
+        Routes.Category category ->
+            withSideNav model.route
+                [ mainContentHeader (Category.forDisplay category)
+                , examples
+                    (\doodad ->
+                        Set.memberOf
+                            (Set.fromList Category.sorter doodad.categories)
+                            category
+                    )
+                    |> viewPreviews (Category.forId category)
+                ]
+
+        Routes.All ->
+            withSideNav model.route
+                [ mainContentHeader "All"
+                , viewPreviews "all" (examples (\_ -> True))
+                ]
+
+
+withSideNav : Route -> List (Html Msg) -> Html Msg
+withSideNav currentRoute content =
     Html.div
         [ css
             [ displayFlex
@@ -154,7 +184,7 @@ view_ model =
             , alignItems flexStart
             ]
         ]
-        [ navigation model.route
+        [ navigation currentRoute
         , Html.main_
             [ css
                 [ flexGrow (int 1)
@@ -162,46 +192,20 @@ view_ model =
                 , Css.minHeight (Css.vh 100)
                 ]
             ]
-            (case model.route of
-                Routes.Doodad doodad ->
-                    case List.head (examples (\m -> m.name == doodad)) of
-                        Just example ->
-                            [ mainContentHeader ("Viewing " ++ doodad ++ " doodad only")
-                            , Html.div [ id (String.replace "." "-" example.name) ]
-                                [ Example.view example
-                                    |> Html.map (UpdateModuleStates example.name)
-                                ]
-                            , ClickableSvg.link ("Close " ++ example.name ++ " example")
-                                UiIcon.x
-                                [ ClickableSvg.href
-                                    (Maybe.withDefault Routes.All model.previousRoute
-                                        |> Routes.toString
-                                    )
-                                ]
-                            ]
-
-                        Nothing ->
-                            [ Html.text <| "Oops! We couldn't find " ++ doodad ]
-
-                Routes.Category category ->
-                    [ mainContentHeader (Category.forDisplay category)
-                    , examples
-                        (\doodad ->
-                            Set.memberOf
-                                (Set.fromList Category.sorter doodad.categories)
-                                category
-                        )
-                        |> viewPreviews (Category.forId category)
-                    ]
-
-                Routes.All ->
-                    [ mainContentHeader "All"
-                    , viewPreviews "all" (examples (\_ -> True))
-                    ]
-            )
+            content
         ]
 
 
+mainContentHeader : String -> Html msg
+mainContentHeader heading =
+    Heading.h1
+        [ Heading.customAttr (id "maincontent")
+        , Heading.customAttr (tabindex -1)
+        , Heading.css [ marginBottom (px 30) ]
+        ]
+        [ Html.text heading ]
+
+
 viewPreviews : String -> List (Example state msg) -> Html Msg
 viewPreviews containerId examples =
     examples
diff --git a/styleguide-app/Routes.elm b/styleguide-app/Routes.elm
index 0e05f257..6fc49ee4 100644
--- a/styleguide-app/Routes.elm
+++ b/styleguide-app/Routes.elm
@@ -22,7 +22,7 @@ toString route_ =
             "#/category/" ++ Debug.toString c
 
         All ->
-            ""
+            "#/"
 
 
 route : Parser Route

From a595dac7a17d471fc2b39e149b3d4df900f13b6b Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:24:00 -0700
Subject: [PATCH 31/36] Launch full-screen examples

---
 styleguide-app/Example.elm | 39 +++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm
index bc060d97..019fd789 100644
--- a/styleguide-app/Example.elm
+++ b/styleguide-app/Example.elm
@@ -130,12 +130,36 @@ preview_ navigate example =
 
 
 view : Maybe Route -> Example state msg -> Html msg
-view =
-    Lazy.lazy2 view_
+view previousRoute example =
+    Container.view
+        [ Container.pillow
+        , Container.css
+            [ Css.position Css.relative
+            , Css.margin (Css.px 10)
+            , Css.minHeight (Css.calc (Css.vh 100) Css.minus (Css.px 20))
+            , Css.boxSizing Css.borderBox
+            ]
+        , Container.html
+            [ Lazy.lazy view_ example
+            , ClickableSvg.link ("Close " ++ example.name ++ " example")
+                UiIcon.x
+                [ ClickableSvg.href
+                    (Maybe.withDefault Routes.All previousRoute
+                        |> Routes.toString
+                    )
+                , ClickableSvg.small
+                , ClickableSvg.css
+                    [ Css.position Css.absolute
+                    , Css.top (Css.px 15)
+                    , Css.right (Css.px 15)
+                    ]
+                ]
+            ]
+        ]
 
 
-view_ : Maybe Route -> Example state msg -> Html msg
-view_ previousRoute example =
+view_ : Example state msg -> Html msg
+view_ example =
     Html.div
         [ -- this class makes the axe accessibility checking output easier to parse
           String.replace "." "-" example.name
@@ -159,13 +183,6 @@ view_ previousRoute example =
             ]
         , KeyboardSupport.view example.keyboardSupport
         , Html.div [] (example.view example.state)
-        , ClickableSvg.link ("Close " ++ example.name ++ " example")
-            UiIcon.x
-            [ ClickableSvg.href
-                (Maybe.withDefault Routes.All previousRoute
-                    |> Routes.toString
-                )
-            ]
         ]
 
 

From 19b5e1ed9f7cdfc75a58b1fd18c26c86b3012a8f Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:26:48 -0700
Subject: [PATCH 32/36] Put a more-even number of icons for AssignmentIcon
 preview

---
 styleguide-app/Examples/AssignmentIcon.elm | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm
index b7a62469..e5b5b57c 100644
--- a/styleguide-app/Examples/AssignmentIcon.elm
+++ b/styleguide-app/Examples/AssignmentIcon.elm
@@ -35,11 +35,18 @@ example =
     , subscriptions = \_ -> Sub.none
     , preview =
         IconExamples.preview
-            [ AssignmentIcon.diagnostic
-            , AssignmentIcon.practice
-            , AssignmentIcon.quiz
-            , AssignmentIcon.quickWrite
-            , AssignmentIcon.guidedDraft
+            [ AssignmentIcon.planningDiagnosticCircled
+            , AssignmentIcon.unitDiagnosticCircled
+            , AssignmentIcon.practiceCircled
+            , AssignmentIcon.quizCircled
+            , AssignmentIcon.quickWriteCircled
+            , AssignmentIcon.guidedDraftCircled
+            , AssignmentIcon.peerReviewCircled
+            , AssignmentIcon.selfReviewCircled
+            , AssignmentIcon.startPrimary
+            , AssignmentIcon.assessment
+            , AssignmentIcon.standards
+            , AssignmentIcon.writing
             ]
     , view =
         \_ ->

From 8bbb7655d0c231cb5a2535f372382fe6739ab8b2 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:28:51 -0700
Subject: [PATCH 33/36] Even out the number of UiIcons shown as well

---
 styleguide-app/Examples/UiIcon.elm | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm
index d125c305..10eac21b 100644
--- a/styleguide-app/Examples/UiIcon.elm
+++ b/styleguide-app/Examples/UiIcon.elm
@@ -36,10 +36,17 @@ example =
     , preview =
         IconExamples.preview
             [ UiIcon.seeMore
-            , UiIcon.copyToClipboard
+            , UiIcon.archive
+            , UiIcon.share
+            , UiIcon.footsteps
+            , UiIcon.person
+            , UiIcon.calendar
+            , UiIcon.missingDocument
             , UiIcon.speechBalloon
-            , UiIcon.arrowPointingRight
+            , UiIcon.edit
+            , UiIcon.arrowTop
             , UiIcon.checkmark
+            , UiIcon.equals
             ]
     , view =
         \_ ->

From fd1120b3870eda96594384b8a56b7e5771d02da5 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:38:35 -0700
Subject: [PATCH 34/36] Fake an accordion example

---
 styleguide-app/Examples/Accordion.elm | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm
index c802aeb6..088ce90a 100644
--- a/styleguide-app/Examples/Accordion.elm
+++ b/styleguide-app/Examples/Accordion.elm
@@ -25,6 +25,7 @@ import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
 import Nri.Ui.Fonts.V1 as Fonts
 import Nri.Ui.Heading.V2 as Heading
 import Nri.Ui.Svg.V1 as Svg
+import Nri.Ui.Text.V6 as Text
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Set exposing (Set)
 import Task
@@ -38,7 +39,21 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ -- faking a mini version of the Accordion component to give styleguide users a sense of what the
+          -- component might look like
+          Html.div []
+            [ Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ defaultCaret False
+                , Text.smallBody [ Text.plaintext "Closed" ]
+                ]
+            , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
+                [ defaultCaret True
+                , Text.smallBody [ Text.plaintext "Open" ]
+                ]
+            , Text.caption [ Text.plaintext "Accordion content." ]
+            ]
+        ]
     , view = view
     , categories = [ Layout ]
     , keyboardSupport =
@@ -58,13 +73,14 @@ example =
     }
 
 
+defaultCaret : Bool -> Html msg
+defaultCaret =
+    DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]
+
+
 {-| -}
 view : State -> List (Html Msg)
 view model =
-    let
-        defaultCaret =
-            DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]
-    in
     [ Heading.h3 [] [ Html.text "Accordion.view" ]
     , Accordion.view
         { entries =

From b369adcbd58a1f9966f53973b35432b49d122e46 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 15:53:15 -0700
Subject: [PATCH 35/36] Adds faked out tab example

---
 styleguide-app/Examples/Tabs.elm | 46 +++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm
index 8fec8d95..9e7a9b2a 100644
--- a/styleguide-app/Examples/Tabs.elm
+++ b/styleguide-app/Examples/Tabs.elm
@@ -19,8 +19,10 @@ import Html.Styled as Html exposing (Html, fromUnstyled)
 import Html.Styled.Attributes exposing (css)
 import KeyboardSupport exposing (Key(..))
 import List.Zipper exposing (Zipper)
+import Nri.Ui.Colors.V1 as Colors
 import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Tabs.V7 as Tabs exposing (Alignment(..), Tab)
+import Nri.Ui.Text.V6 as Text
 import Nri.Ui.Tooltip.V2 as Tooltip
 import Nri.Ui.UiIcon.V1 as UiIcon
 import Routes
@@ -142,7 +144,49 @@ example =
     , state = init
     , update = update
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ -- faking a mini version of the Tabs component to give styleguide users a sense of what the
+          -- component might look like
+          Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
+            [ Html.div
+                [ css
+                    [ Css.backgroundColor Colors.white
+                    , Css.padding (Css.px 4)
+                    , Css.borderRadius4 (Css.px 4) (Css.px 4) Css.zero Css.zero
+                    , Css.border3 (Css.px 1) Css.solid Colors.navy
+                    , Css.borderBottomWidth Css.zero
+                    ]
+                ]
+                [ Text.smallBody [ Text.plaintext "Tab 1" ] ]
+            , Html.div
+                [ css [ Css.width (Css.px 4), Css.borderBottom3 (Css.px 1) Css.solid Colors.navy ]
+                ]
+                []
+            , Html.div
+                [ css
+                    [ Css.backgroundColor Colors.frost
+                    , Css.padding (Css.px 4)
+                    , Css.borderRadius4 (Css.px 4) (Css.px 4) Css.zero Css.zero
+                    , Css.border3 (Css.px 1) Css.solid Colors.navy
+                    ]
+                ]
+                [ Text.smallBody [ Text.plaintext "Tab 1" ] ]
+            , Html.div
+                [ css
+                    [ Css.width (Css.px 30)
+                    , Css.borderBottom3 (Css.px 1) Css.solid Colors.navy
+                    ]
+                ]
+                []
+            , Html.div
+                [ css
+                    [ Css.paddingTop (Css.px 4)
+                    , Css.minWidth (Css.px 100)
+                    ]
+                ]
+                [ Text.caption [ Text.plaintext "Tab 1 content" ] ]
+            ]
+        ]
     , view =
         \model ->
             let

From d98b9ca94e0fcda6fa46323a72dda6e907f12183 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Fri, 5 Nov 2021 16:02:02 -0700
Subject: [PATCH 36/36] Ratchet deprecated imports

---
 forbidden-imports.toml            | 6 +-----
 styleguide-app/Examples/Modal.elm | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/forbidden-imports.toml b/forbidden-imports.toml
index afc00bc5..a07f23e8 100644
--- a/forbidden-imports.toml
+++ b/forbidden-imports.toml
@@ -33,11 +33,7 @@ hint = 'Use Accessibility.Widgetd.Widget'
 
 [forbidden.Html]
 hint = 'Use Html.Styled'
-usages = [
-    'styleguide-app/../src/Nri/Ui/Button/V8.elm',
-    'styleguide-app/Examples/Modal.elm',
-    'styleguide-app/Main.elm',
-]
+usages = ['styleguide-app/../src/Nri/Ui/Button/V8.elm']
 
 [forbidden."Nri.Ui.Accordion.V1"]
 hint = 'upgrade to V3'
diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm
index 03eebf35..1c3a53da 100644
--- a/styleguide-app/Examples/Modal.elm
+++ b/styleguide-app/Examples/Modal.elm
@@ -14,7 +14,6 @@ import Css exposing (..)
 import Debug.Control as Control exposing (Control)
 import Debug.Control.Extra as ControlExtra
 import Example exposing (Example)
-import Html as Root
 import Html.Styled.Attributes as Attributes exposing (css)
 import KeyboardSupport exposing (Direction(..), Key(..))
 import Nri.Ui.Button.V10 as Button