playbook_ui 6.1.0.pre.alpha4 → 6.3.0

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -12,11 +12,11 @@ import {
 
 type BadgeProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  rounded?: Boolean,
-  text?: String,
+  id?: string,
+  rounded?: boolean,
+  text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
@@ -32,12 +32,8 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    className,
-    buildCss('pb_badge_kit', variant, {
-      rounded: rounded,
-    }),
-    globalProps(props)
-  )
+    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
+    globalProps(props))
 
   return (
     <div

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

@@ -0,0 +1 @@
+Badges can be used for notification, tags, and status. They are used for count and numbers.

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -6,23 +6,23 @@ import { pbChart } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type BarGraphProps = {
-  axisTitle: String,
-  xAxisCategories: Array,
-  yAxisMin: Number,
-  yAxisMax: Number,
-  chartData: Array<{
-    name: String,
-    data: Array<Number>,
+  axisTitle: string,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: array<{
+    name: string,
+    data: array<number>,
   }>,
-  className?: String,
-  id: Number,
-  pointStart: Number,
-  subTitle?: String,
-  title: String,
-  type?: String,
-  legend?: Boolean,
-  toggleLegendClick?: Boolean,
-  height?: String,
+  className?: string,
+  id: number,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -8,17 +8,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type BodyProps = {
   aria?: object,
-  className?: String,
-  children?: Array<React.ReactChild>,
-  color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
-  dark?: Boolean,
+  className?: string,
+  children?: array<React.ReactChild>,
+  color?: 'default' | 'light' | 'lighter',
+  dark?: boolean,
   data?: object,
-  highlightedText?: Array<String>,
-  highlighting?: Boolean,
-  id?: String,
+  highlightedText?: array<string>,
+  highlighting?: boolean,
+  id?: string,
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  text?: String,
+  text?: string,
 }
 
 const Body = (props: BodyProps) => {
@@ -26,12 +26,12 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = '',
+    color = 'default',
     data = {},
     highlightedText = [],
     highlighting = false,
     id,
-    status = '',
+    status,
     tag = 'div',
     text,
   } = props

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,22 +1,25 @@
 @import "./body_mixins";
 
-.pb_body_kit {
-  &.dark {
-    @include pb_body_dark;
-  }
-}
-
 [class^=pb_body_kit]{
-  @include pb_body;
-
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{$color_name}] {
       @include pb_body($color_value);
     }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_default_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
   }
 
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_body($dark_color_value); 
+    }
+  }
+  
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=_#{$status_name}] {
+    &[class*=_default_#{$status_name}][class*=dark] {
       @include pb_body($status_value);
     }
   }

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -6,9 +6,12 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
-  dark:           $text_dk_default,
-  light_dark:     $text_dk_light,
-  lighter_dark:   $text_dk_lighter,
+);
+
+$pb_dark_body_colors: (
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
 );
 
 // Order is important here!

data/app/pb_kits/playbook/pb_body/body.rb

@@ -9,7 +9,7 @@ module Playbook
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter dark light_dark lighter_dark],
+                   values: %w[default light lighter],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],
@@ -41,11 +41,11 @@ module Playbook
       end
 
       def color_class
-        color != "default" ? color : nil
+        color
       end
 
       def status_class
-        status != "neutral" ? status : nil
+        status == "neutral" ? nil : status
       end
     end
   end

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

@@ -9,26 +9,26 @@ import Icon from '../pb_icon/_icon.jsx'
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
-    label: String,
+    label: string,
   },
-  children?: Array<React.ReactChild>,
-  className?: String | Array<String>,
-  disabled?: Boolean,
-  fixedWidth?: Boolean,
-  fullWidth?: Boolean,
-  icon?: String,
-  id?: String,
-  link?: String,
-  loading?: Boolean,
-  newWindow?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string | array<string>,
+  disabled?: boolean,
+  fixedWidth?: boolean,
+  fullWidth?: boolean,
+  icon?: string,
+  id?: string,
+  link?: string,
+  loading?: boolean,
+  newWindow?: boolean,
   onClick?: EventHandler,
   size: 'large' | 'medium' | 'small',
-  text?: String,
+  text?: string,
   type: 'inline' | null,
-  htmlType: String | 'button',
-  value?: String | null,
+  htmlType: string | 'button',
+  value?: string | null,
   variant: 'primary' | 'secondary' | 'link',
-  wrapperClass: String,
+  wrapperClass: string,
 }
 
 const buttonClassName = (props: ButtonPropTypes) => {

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

@@ -9,15 +9,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ButtonToolbarProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  connected?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  connected?: boolean,
   data?: object,
-  id?: String,
+  id?: string,
   onClick?: EventHandler,
   orientation?: "horizontal" | "vertical",
-  text?: String,
-  variant?: String,
+  text?: string,
+  variant?: string,
 }
 
 const ButtonToolbar  = (props: ButtonToolbarProps) => {

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

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
-  className?: String,
-  children: Array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  children: array<React.ReactNode> | React.ReactNode,
   data?: object,
-  id?: String,
+  id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
-  text?: String,
+  text?: string,
 }
 
 const Caption = (props: CaptionProps) => {

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

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

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

@@ -7,40 +7,40 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
-  borderNone?: Boolean,
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  borderNone?: boolean,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   highlight?: {
     position?: "side" | "top",
-    color?: String,
+    color?: string,
   },
-  padding?: String,
-  selected?: Boolean,
+  padding?: string,
+  selected?: boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
 
 type CardHeaderProps = {
-  categoryColor?: Number,
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
-  padding?: String,
+  headerColor?: string,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  padding?: string,
 }
 
 type CardBodyProps = {
-  children: Array<React.ReactNode> | React.ReactNode | String,
-  className?: String,
-  padding?: String,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  padding?: string,
 }
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, categoryColor = 1, padding = 'sm' } = props
-  const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
+  const { children, className, headerColor = 'category_1', padding = 'sm' } = props
+  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`)
 
   const headerSpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(headerCSS, className, headerSpacing)}>
+    <div className={classnames(headerCSS, headerSpacing, className)}>
       {children}
     </div>
   )
@@ -48,13 +48,12 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className, padding = 'md' } = props
+  const { children, padding = 'md', className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-
   const bodySpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(bodyCSS, className, bodySpacing)}>
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
       {children}
     </div>
   )
@@ -70,7 +69,6 @@ const Card = (props: CardPropTypes) => {
     shadow = 'none',
     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}`, {
     selected,
@@ -94,11 +92,9 @@ const Card = (props: CardPropTypes) => {
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
-    <div className={classnames(cardCss, globalProps(props), className)}>
+    <div className={classnames(cardCss, globalProps(props, { padding }), className)}>
       {subComponentTags('Header')}
-      <div className={classnames(bodyCSS, globalProps({ padding }))}>
-        {nonHeaderChildren}
-      </div>
+      {nonHeaderChildren}
     </div>
   )
 }

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

@@ -27,7 +27,7 @@
     min-height: 1px;
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;  
-    @each $color_name, $color_value in $category_colors {
+    @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
       }

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

@@ -9,7 +9,7 @@ $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_colors: map-merge($category_colors, $product_colors);
 $pb_card_header_border_radius: $border_rad_heavy;
 $pb_card_padding:(
   none: 0,
@@ -67,6 +67,6 @@ $pb_card_padding:(
   z-index: 10;
 }
 
-@mixin pb_card_header_color($category_color) {
-  background: $category_color;
-}
+@mixin pb_card_header_color($header_color) {
+  background: $header_color;
+}

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

@@ -7,11 +7,11 @@ module Playbook
   
         partial "pb_card/child_kits/card_header"
   
-        prop :category_color, type: Playbook::Props::Numeric,
-                              default: 1
+        prop :header_color, type: Playbook::Props::String,
+                            default: "category_1"
 
         def classname
-          generate_classname("pb_card_header_kit", padding, "category_#{category_color}")
+          generate_classname("pb_card_header_kit", header_color)
         end
       end
     end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -1,19 +1,50 @@
+<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
+ 
+<br>  
+
+  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+    <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
+      <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
+    <% end %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      Body
+    <% end %>
+  <% end %>
+
+<br> 
+
+  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
+    <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
+      <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
+
+    <% end %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      Body
+    <% end %>
+  <% end %>
+
+<br>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %> 
+
+<br>
+
 <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
-      <%= pb_rails("body", props: { text: "Header", dark: true }) %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
+    <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
   <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>
 
-<br />
+<br>
 
 <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "md", category_color: 2 }) do %>
-    <%= pb_rails("body", props: { text: "Header", dark: true }) %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
+    <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
   <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "lg" }) do %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>