Adds Button examples

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)
+                   ]
             )
         ]
 

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.")
         ]

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 = []

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
         )
     ]