FBCM-5076 Demonstrate pill buttons in UI Guide

With the addition of pill buttons, we demonstrate some of the different
variations that are possible from the UI Guide. Worth noting is that
while with the old "block" pattern we were forced to use `<button>`
elements, with the new pattern we not only offer a `<button>` and an
`<a>` option, but we could actually use any HTML element we want.

Author: Dave Zuch

ui-guide/Components/Button.purs

@@ -12,6 +12,7 @@ import Halogen as H
 import Halogen.HTML as HH
 import Halogen.HTML.Properties as HP
 import Ocelot.Block.Format as Format
+import Ocelot.Block.Icon as Ocelot.Block.Icon
 import Ocelot.Button as Button
 import Ocelot.Clipboard as Ocelot.Clipboard
 import Ocelot.HTML.Properties (css)
@@ -71,6 +72,7 @@ render _ =
   [ renderButtons
   , renderButtonGroups
   , renderClipboardButtons
+  , renderPills
   ]
 
 renderButtons :: forall m. ComponentHTML m
@@ -418,3 +420,95 @@ renderClipboardButtons =
         ]
       ]
     ]
+
+renderPills :: forall m. ComponentHTML m
+renderPills =
+  Documentation.customBlock_
+    { header: "Pills"
+    , subheader: "These might be used for displaying selected filters."
+    }
+    [ Documentation.callout_
+      [ Backdrop.backdrop_
+        [ Backdrop.content_
+          [ HH.div
+            [ css "mb-6 flex" ]
+            [ HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Standard Button" ]
+              , Button.pillButton
+                { decorator: Button.Left Ocelot.Block.Icon.plus_ }
+                [ HH.text "Add Filter" ]
+              ]
+            , HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Disabled Button" ]
+              , Button.pillButton
+                { decorator: Button.Left Ocelot.Block.Icon.plus_ 
+                , props: [ HP.disabled true ]
+                }
+                [ HH.text "Add Filter" ]
+              ]
+            ]
+          , HH.div
+            [ css "mb-6 flex" ]
+            [ HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Primary Anchor" ]
+              , Button.pillAnchor
+                { decorator: Button.Right Ocelot.Block.Icon.delete_
+                , style: Button.Primary
+                }
+                [ HH.text "Color: Primary" ]
+              ]
+            , HH.div 
+              [ css "flex-1" ]
+              []
+            ]
+          ]
+        ]
+      , Backdrop.backdropWhite_
+        [ Backdrop.content_
+          [ HH.div
+            [ css "mb-6 flex" ]
+            [ HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Standard Button" ]
+              , Button.pillButton
+                { decorator: Button.Left Ocelot.Block.Icon.plus_ }
+                [ HH.text "Add Filter" ]
+              ]
+            , HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Disabled Button" ]
+              , Button.pillButton
+                { decorator: Button.Left Ocelot.Block.Icon.plus_ 
+                , props: [ HP.disabled true ]
+                }
+                [ HH.text "Add Filter" ]
+              ]
+            ]
+          , HH.div
+            [ css "mb-6 flex" ]
+            [ HH.div 
+              [ css "flex-1" ]
+              [ Format.caption_
+                [ HH.text "Primary Anchor" ]
+              , Button.pillAnchor
+                { decorator: Button.Right Ocelot.Block.Icon.delete_
+                , style: Button.Primary
+                }
+                [ HH.text "Color: Primary" ]
+              ]
+            , HH.div 
+              [ css "flex-1" ]
+              []
+            ]
+          ]
+        ]
+      ]
+    ]