Begins adding preview content

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

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"

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

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

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"