playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -83,7 +84,7 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className)
+  const css = classnames(buttonClassName(props), className, spacing(props))
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -22,7 +22,13 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
     />
+    <Button
+        disabled
+        onClick={() => alert('button clicked!')}
+        text="Button Disabled"
+    />
   </div>
+
 )
 
 export default ButtonDefault

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

@@ -2,33 +2,52 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
+  aria?: object,
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  tag: String,
-  text: String,
+  data?: object,
+  id?: String,
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
+  text?: String,
 }
 
-const Caption = ({
-  className,
-  children,
-  dark = false,
-  size = 'md',
-  tag = 'div',
-  text,
-}: CaptionProps) => {
+const Caption = (props: CaptionProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    dark = false,
+    data = {},
+    id,
+    size = 'md',
+    tag = 'div',
+    text,
+  } = props
   const Tag = `${tag}`
 
-  const css = classnames(buildCss('pb_caption_kit', size, {
-    'dark': dark,
-  }), className)
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(
+    buildCss('pb_caption_kit', size, {
+      dark: dark,
+    }),
+    className,
+    spacing(props)
+  )
 
   return (
-    <Tag className={css}>
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
       {text || children}
     </Tag>
   )

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -5,6 +5,6 @@
     aria: object.aria,
     dark: object.dark) do %>
   <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.padding, children: object.children }) %>
+    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
   <% end %>
 <% end %>

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

@@ -1,99 +1,96 @@
 /* @flow */
 
 import React from 'react'
+import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CardPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
-    position?: 'side' | 'top',
-    color?: String
+    position?: "side" | "top",
+    color?: String,
   },
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   selected?: Boolean,
-  shadow?: 'none' | 'deep' | 'deeper' | 'deepest',
+  shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
 }
 
 type CardHeaderProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   categoryColor?: Number,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
 }
 
 // Header component
-const Header = ({
-  children,
-  className,
-  padding = 'sm',
-  categoryColor = 1,
-}: CardHeaderProps) => {
-  const headerCSS = buildCss('pb_card_header_kit', padding, `category_${categoryColor}`)
+const Header = (props: CardHeaderProps) => {
+  const { children, className, categoryColor = 1 } = props
+  const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
+
+  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
   return (
-    <div className={classnames(headerCSS, className)}>
+    <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
     </div>
   )
 }
 
 // Body component
-const Body = ({
-  children,
-  className,
-  padding = 'sm',
-}: CardBodyProps) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Body = (props: CardBodyProps) => {
+  const { children, className } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
+  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
   return (
-    <div className={classnames(bodyCSS, className)}>
+    <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
     </div>
   )
 }
 
-const Card = ({
-  children,
-  className,
-  dark = false,
-  highlight = {},
-  padding = 'md',
-  selected = false,
-  shadow = 'none',
-}: CardPropTypes) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Card = (props: CardPropTypes) => {
+  const {
+    children,
+    className,
+    dark = false,
+    highlight = {},
+    selected = false,
+    shadow = 'none',
+  } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
-    'dark': dark,
+    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 = typeof(children) === 'object' && children.length ? children : [children]
+  const cardChildren =
+    typeof children === 'object' && children.length ? children : [children]
 
   const subComponentTags = (tagName) => {
-    return cardChildren.filter((c) => {
-      return c.type && c.type.displayName === tagName
-    }).map((child, i) => {
+    return cardChildren.filter((c) => (
+      get(c, 'type.displayName') === tagName
+    )).map((child, i) => {
       return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
     })
   }
 
-  const nonHeaderChildren = cardChildren.filter((child) => !child.type || child.type.displayName !== 'Header')
+  const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
     <div className={classnames(cardCss, className)}>
       {subComponentTags('Header')}
-      <div className={bodyCSS}>
+      <div className={classnames(bodyCSS, cardSpacing)}>
         {nonHeaderChildren}
       </div>
     </div>

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

@@ -1,75 +1,4 @@
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/transition";
-@import "../tokens/animation-curves";
-
-$pb_card_border_width: 1px;
-$pb_card_border_radius: $border_rad_heavier;
-$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
-$pb_card_highlight_size: 4px;
-$pb_card_header_colors: $category_colors;
-$pb_card_header_border_radius: $border_rad_heavy;
-$pb_card_padding:(
-  none: 0,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-
-@mixin pb_card_selected($border_color: $primary) {
-  border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
-}
-
-@mixin pb_card_selected_dark {
-  @include pb_card_selected($primary_action);
-}
-
-@mixin pb_card($background: $card_light, $border_color: $border_light) {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: $background;
-  background-clip: border-box;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_color;
-  border-radius: $pb_card_border_radius;
-  transition-property: all;
-  transition-duration: $transition_short;
-  transition-timing-function: $easeIn;
-
-  @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
-      box-shadow: $shadow;
-    }
-  }
-}
-
-@mixin pb_card_dark {
-  @include pb_card($card_dark, $border_dark);
-}
-
-@mixin pb_card_highlight($width, $height, $background){
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: $width;
-  height: $height;
-  background: $background;
-  z-index: 10;
-}
-
-@mixin pb_card_header_color($category_color) {
-  background: $category_color;
-}
+@import "card_mixin";
 
 
 [class^=pb_card_kit] {
@@ -99,11 +28,6 @@ $pb_card_padding:(
         @include pb_card_header_color($color_value);
       }
     }
-    @each $padding_name, $padding_value in $pb_card_padding {
-      &[class*=_#{$padding_name}] {
-          padding: $padding_value;
-      }
-    }
   }
 
   [class^=pb_card_body_kit] {
@@ -112,11 +36,6 @@ $pb_card_padding:(
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    @each $name, $padding_size in $pb_card_padding {
-      &[class*=_#{$name}] {
-        padding: $padding_size;
-      }
-    }
   }
   
   @each $name, $shadow in $box_shadows {

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -0,0 +1,72 @@
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/transition";
+@import "../tokens/animation-curves";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
+$pb_card_highlight_size: 4px;
+$pb_card_header_colors: $category_colors;
+$pb_card_header_border_radius: $border_rad_heavy;
+$pb_card_padding:(
+  none: 0,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+@mixin pb_card_selected($border_color: $primary) {
+  border-color: $border_color;
+  border-width: $pb_card_border_width * 2;
+}
+
+@mixin pb_card_selected_dark {
+  @include pb_card_selected($primary_action);
+}
+
+@mixin pb_card($background: $card_light, $border_color: $border_light) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: $background;
+  background-clip: border-box;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_color;
+  border-radius: $pb_card_border_radius;
+  transition-property: all;
+  transition-duration: $transition_short;
+  transition-timing-function: $easeIn;
+
+  @each $name, $shadow in $box_shadows {
+    &[class*=_#{$name}] {
+      box-shadow: $shadow;
+    }
+  }
+}
+
+@mixin pb_card_dark {
+  @include pb_card($card_dark, $border_dark);
+}
+
+@mixin pb_card_highlight($width, $height, $background){
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $width;
+  height: $height;
+  background: $background;
+  z-index: 10;
+}
+
+@mixin pb_card_header_color($category_color) {
+  background: $category_color;
+}

data/app/pb_kits/playbook/pb_card/card.rb

@@ -8,9 +8,6 @@ module Playbook
       partial "pb_card/card"
 
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
                     default: "none"
@@ -28,8 +25,17 @@ module Playbook
                            dark_class)
       end
 
+      def body_padding
+        if padding.present? 
+           ""
+        else 
+          "p_md"
+        end
+      end
+
     private
 
+
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -7,12 +7,8 @@ module Playbook
 
       partial "pb_card/child_kits/card_body"
 
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
-
       def classname
-        generate_classname("pb_card_body_kit", padding)
+        generate_classname("pb_card_body_kit", padding, separator: " ")
       end
     end
   end