playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -0,0 +1,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+$primary_border:      rgba($white, $opacity_1);
+$secondary_border:    rgba($white, $opacity_10);
+$primary_dark:        rgba($bg_dark, $opacity_2);
+$secondary_dark:      rgba($bg_dark, $opacity_2);
+
+@mixin toolbar_border($horizontal: true, $color: $color) {
+    @if $horizontal == true {
+        height: 2px;
+        width: calc(100% + #{$space_md} + #{$space_md});
+        top: calc(-#{$space_xs} - 1px);
+        left: -$space_md;
+    } @else {
+        width: 2px;
+        height: $space_md;
+        top: 0;
+        right: calc(#{$space_lg} + 2px);
+    }
+    background-color: $color;
+    content: '';
+    position: relative;
+    bottom: 0;
+    display: block;
+}

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -12,11 +12,13 @@ module Playbook
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[horizontal vertical],
                          default: "horizontal"
-
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[primary secondary],
+                     default: "primary"
       prop :text
 
       def classname
-        generate_classname("pb_button_toolbar_kit", orientation, connected_class)
+        generate_classname("pb_button_toolbar_kit", orientation, variant)
       end
 
     private

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb

@@ -1,7 +1,17 @@
-<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
-  <%= pb_rails("button", props: { text: "Field" }) %>
-  <%= pb_rails("button", props: { text: "Retail"}) %>
-  <%= pb_rails("button", props: { text: "Event"}) %>
-  <%= pb_rails("button", props: { text: "Training"}) %>
-  <%= pb_rails("button", props: { text: "Not Working"}) %>
-<% end %>
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("button_toolbar", props: { orientation: "vertical" }) do %>
+    <%= pb_rails("button", props: { text: "Create" }) %>
+    <%= pb_rails("button", props: { text: "Edit"}) %>
+    <%= pb_rails("button", props: { text: "Copy"}) %>
+    <%= pb_rails("button", props: { text: "Cut"}) %>
+  <% end %>
+
+  <%= pb_rails("button_toolbar", props: { orientation: "horizontal" }) do %>
+    <%= pb_rails("button", props: { text: "Create" }) %>
+    <%= pb_rails("button", props: { text: "Edit" }) %>
+    <%= pb_rails("button", props: { text: "Copy" }) %>
+    <%= pb_rails("button", props: { text: "Cut" }) %>
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,26 +1,49 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarDefault = () => (
-  <div>
+const ButtonToolbarDefault = (props) => (
+  <div className="pb--doc-demo-row">
     <ButtonToolbar
-        connected
-        orientation="horizontal"
+        {...props}
+        orientation="vertical"
     >
       <Button
-          text="Field"
+          {...props}
+          text="Create"
+      />
+      <Button
+          {...props}
+          text="Edit"
+      />
+      <Button
+          {...props}
+          text="Copy"
+      />
+      <Button
+          {...props}
+          text="Cut"
       />
+    </ButtonToolbar>
+
+    <ButtonToolbar
+        {...props}
+        orientation="horizontal"
+    >
       <Button
-          text="Retail"
+          {...props}
+          text="Create"
       />
       <Button
-          text="Event"
+          {...props}
+          text="Edit"
       />
       <Button
-          text="Training"
+          {...props}
+          text="Copy"
       />
       <Button
-          text="Not Working"
+          {...props}
+          text="Cut"
       />
     </ButtonToolbar>
   </div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb

@@ -1,7 +1,18 @@
-<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
-    <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
-    <%= pb_rails("button", props: { text: "Retail", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Event", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Training", variant: "secondary"}) %>
-    <%= pb_rails("button", props: { text: "Not Working", variant: "secondary"}) %>
-  <% end %>
+
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("button_toolbar", props: { orientation: "vertical", variant: "secondary" }) do %>
+    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
+  <% end %>
+
+  <%= pb_rails("button_toolbar", props: { orientation: "horizontal", variant: "secondary" }) do %>
+    <%= pb_rails("button", props: { text: "Create", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Edit", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Copy", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Cut", variant: "secondary" }) %>
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,30 +1,58 @@
 import React from 'react'
 import { Button, ButtonToolbar } from '../..'
 
-const ButtonToolbarSecondary = () => (
-  <div>
+const ButtonToolbarSecondary = (props) => (
+  <div className="pb--doc-demo-row">
     <ButtonToolbar
-        connected
-        orientation="horizontal"
+        {...props}
+        orientation="vertical"
+        variant="secondary"
     >
       <Button
-          text="Field"
+          {...props}
+          text="Create"
+          variant="secondary"
+      />
+      <Button
+          {...props}
+          text="Edit"
           variant="secondary"
       />
       <Button
-          text="Retail"
+          {...props}
+          text="Copy"
+          variant="secondary"
+      />
+      <Button
+          {...props}
+          text="Cut"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+
+    <ButtonToolbar
+        {...props}
+        orientation="horizontal"
+        variant="secondary"
+    >
+      <Button
+          {...props}
+          text="Create"
           variant="secondary"
       />
       <Button
-          text="Event"
+          {...props}
+          text="Edit"
           variant="secondary"
       />
       <Button
-          text="Training"
+          {...props}
+          text="Copy"
           variant="secondary"
       />
       <Button
-          text="Not Working"
+          {...props}
+          text="Cut"
           variant="secondary"
       />
     </ButtonToolbar>

data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml

@@ -1,15 +1,11 @@
 examples:
   
   rails:
-  - button_toolbar_default: Horizontal Button Toolbar
-  - button_toolbar_vertical: Vertical Button Toolbar
-  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
-  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
+  - button_toolbar_default: Default
+  - button_toolbar_secondary: Secondary
   
   
   react:
   - button_toolbar_default: Default
-  - button_toolbar_vertical: Vertical Button Toolbar
-  - button_toolbar_secondary: Horizontal Secondary Button Toolbar
-  - button_toolbar_vertical_secondary: Vertical Secondary Button Toolbar
+  - button_toolbar_secondary: Secondary
   

data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js

@@ -1,4 +1,2 @@
 export { default as ButtonToolbarDefault } from './_button_toolbar_default.jsx'
-export { default as ButtonToolbarVertical } from './_button_toolbar_vertical.jsx'
 export { default as ButtonToolbarSecondary } from './_button_toolbar_secondary.jsx'
-export { default as ButtonToolbarVerticalSecondary } from './_button_toolbar_vertical_secondary.jsx'

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -35,8 +35,8 @@ const Caption = (props: CaptionProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, variant),
-    className,
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+
+export default CaptionBlock

data/app/pb_kits/playbook/pb_caption/docs/example.yml

@@ -1,5 +1,7 @@
 examples:
   rails:
   - caption_light: Default
+  - caption_block: Block
   react:
   - caption_light: Default
+  - caption_block: Block

data/app/pb_kits/playbook/pb_caption/docs/index.js

@@ -1,2 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -40,8 +40,11 @@ const Checkbox = (props: CheckboxProps) => {
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_checkbox_kit',
-    { checked: checked, error: error }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_checkbox_kit', { checked, error }),
+    globalProps(props),
+    className
+  )
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :value
       prop :name
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
@@ -29,7 +31,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked)
+        check_box_tag(name, value, checked, input_options)
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("checkbox" , props: {
+  text: "Checkbox with Options",
+  input_options: {
+    id: "checkbox-id",
+    name: "checkbox-name",
+    value: "checkbox-value",
+    class: "checkbox-class",
+    checked: true
+  }
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml

@@ -4,6 +4,7 @@ examples:
     - checkbox_checked: Load as checked
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
+    - checkbox_options: Checkbox w/ Options
 
   react:
   - checkbox_default: Default

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -101,7 +101,7 @@ const CircleChart = (props: CircleChartProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
+        if (chart && chart.renderTo.id === id) {
           const updatedValueArray = chartData.map((obj) => {
             return obj.value
           })

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -46,7 +46,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_circle_icon_button_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -58,7 +58,11 @@ const Contact = (props: ContactProps) => {
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_contact_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_contact_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -45,7 +45,11 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_currency_kit', align, size, { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_currency_kit', align, size, { dark }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -41,7 +41,11 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_dashboard_value_kit', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div