playbook_ui 6.0.1 → 6.1.0.pre.alpha1

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

@@ -0,0 +1,101 @@
+@import "../pb_button/button";
+@import "../pb_button/button_mixins";
+@import "../tokens/colors";
+
+[class^=pb_button_toolbar]{
+    // Orientation =========
+    &[class*=_horizontal]  {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+  
+      & > [class^=pb_button]  {
+        margin-right: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    &[class*=_vertical]  {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+  
+      & > [class^=pb_button]  {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        width: 100%;
+        margin-bottom: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // Connect =============
+    &[class*=_connected]  {
+      & > [class^=pb_button]  {
+        margin: 0;
+      }
+  
+      &[class*=_horizontal] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+  
+      &[class*=_vertical] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+            border-top-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+    }
+  }

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbButtonToolbar
+    class ButtonToolbar
+      include Playbook::Props
+
+      partial "pb_button_toolbar/button_toolbar"
+
+      prop :connected, type: Playbook::Props::Boolean, default: false
+
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[horizontal vertical],
+                         default: "horizontal"
+
+      prop :text
+
+      def classname
+        generate_classname("pb_button_toolbar_kit", orientation, connected_class)
+      end
+
+    private
+
+      def connected_class
+        connected == true ? "connected" : nil
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= 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 %>

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarDefault = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="horizontal"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarDefault

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

@@ -0,0 +1,7 @@
+<%= 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 %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="horizontal"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarSecondary

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

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", 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>
+</div>

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVertical = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVertical

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

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", 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>
+</div>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVerticalSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVerticalSecondary

data/app/pb_kits/playbook/pb_button_toolbar/docs/_description.md

@@ -0,0 +1 @@
+This kit should primarily hold the most commonly used buttons.

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

@@ -0,0 +1,15 @@
+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
+  
+  
+  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
+  

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

@@ -0,0 +1,4 @@
+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.jsx

@@ -3,13 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
-  dark?: Boolean,
   data?: object,
   id?: String,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
@@ -22,7 +21,6 @@ const Caption = (props: CaptionProps) => {
     aria = {},
     className,
     children,
-    dark = false,
     data = {},
     id,
     size = 'md',
@@ -34,11 +32,9 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, {
-      dark: dark,
-    }),
+    buildCss('pb_caption_kit', size),
     className,
-    spacing(props)
+    globalProps(props)
   )
 
   return (

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

@@ -10,8 +10,4 @@
   &[class^=pb_caption_kit_xs] {
     @include caption_xs;
   }
-
-  &[class*=_dark] {
-    @include caption_dark;
-  }
 }

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -7,7 +7,6 @@ module Playbook
 
       partial "pb_caption/caption"
 
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md base lg xl],
                   default: "md"
@@ -17,13 +16,7 @@ module Playbook
       prop :text
 
       def classname
-        generate_classname("pb_caption_kit", size, dark_class)
-      end
-
-    private
-
-      def dark_class
-        dark ? "dark" : nil
+        generate_classname("pb_caption_kit", size)
       end
     end
   end

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -4,38 +4,41 @@ import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
+  borderNone?: Boolean,
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
     position?: "side" | "top",
     color?: String,
   },
+  padding?: String,
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
-  dark?: Boolean,
-  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
+  categoryColor?: Number,
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  categoryColor?: Number,
+  padding?: String,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
+  padding?: String,
 }
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, categoryColor = 1 } = props
+  const { children, className, categoryColor = 1, padding = 'sm' } = props
   const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
 
-  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const headerSpacing = globalProps(props, { padding })
+
   return (
     <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
@@ -45,9 +48,11 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className } = props
+  const { children, className, padding = 'md' } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
+
+  const bodySpacing = globalProps(props, { padding })
+
   return (
     <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
@@ -57,24 +62,22 @@ const Body = (props: CardBodyProps) => {
 
 const Card = (props: CardPropTypes) => {
   const {
+    borderNone = false,
     children,
     className,
-    dark = false,
     highlight = {},
     selected = false,
     shadow = 'none',
-    borderNone = false,
+    padding = 'md',
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
   const borderCSS = borderNone == true ? 'border_none' : ''
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
-    dark: dark,
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
-  const cardSpacing = spacing(props) ? spacing(props) : 'p_md'
 
   // coerce to array
   const cardChildren =
@@ -91,9 +94,9 @@ const Card = (props: CardPropTypes) => {
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
-    <div className={classnames(cardCss, className)}>
+    <div className={classnames(cardCss, globalProps(props), className)}>
       {subComponentTags('Header')}
-      <div className={classnames(bodyCSS, cardSpacing)}>
+      <div className={classnames(bodyCSS, globalProps({ padding }))}>
         {nonHeaderChildren}
       </div>
     </div>