Adds breadcrumb preview

styleguide-app/Examples/BreadCrumbs.elm

@@ -6,9 +6,16 @@ module Examples.BreadCrumbs exposing (example, State, Msg)
 
 -}
 
+import Accessibility.Styled exposing (..)
 import Category exposing (Category(..))
+import Css
 import Example exposing (Example)
+import Html.Styled.Attributes exposing (css)
+import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Fonts.V1 as Fonts
+import Nri.Ui.Svg.V1 as Svg
 import Nri.Ui.Text.V6 as Text
+import Nri.Ui.UiIcon.V1 as UiIcon
 
 
 {-| -}
@@ -31,9 +38,42 @@ example =
     , state = {}
     , update = \_ m -> ( m, Cmd.none )
     , subscriptions = \_ -> Sub.none
-    , preview = []
+    , preview =
+        [ previewContainer [ previewText "🏠 Home" ]
+        , previewContainer [ previewText "🏠 Home", previewArrowRight, previewText "🟠 Category " ]
+        , previewContainer [ previewText "🏠", previewArrowRight, previewText "🟠", previewArrowRight, previewText "🟣 Sub-Category " ]
+        ]
     , view =
         \ellieLinkConfig settings ->
             [ Text.mediumBody [ Text.plaintext "🚧 Example coming soon! 🚧" ]
             ]
     }
+
+
+previewContainer : List (Html msg) -> Html msg
+previewContainer =
+    span
+        [ css
+            [ Css.displayFlex
+            , Css.alignItems Css.center
+            , Fonts.baseFont
+            , Css.fontSize (Css.px 10)
+            , Css.fontWeight (Css.int 600)
+            , Css.color Colors.navy
+            ]
+        ]
+
+
+previewText : String -> Html msg
+previewText name =
+    span [ css [ Css.margin (Css.px 2) ] ] [ text name ]
+
+
+previewArrowRight : Html msg
+previewArrowRight =
+    UiIcon.arrowRight
+        |> Svg.withColor Colors.gray75
+        |> Svg.withHeight (Css.px 10)
+        |> Svg.withWidth (Css.px 8)
+        |> Svg.withCss [ Css.flexShrink Css.zero ]
+        |> Svg.toHtml