playbook_ui 6.1.0 → 6.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 24d77ce736432481783b53597f57c59453de3b20f97b7e7ae5120b9a1ef9dd14
-  data.tar.gz: e282c218ef0a9232cf0efe601ba674bf5e14d3456d0be20ae01c6a0d8fdeb03e
+  metadata.gz: 5d415890b11b05501775bfebbe96e1aa671a9d29fe3858c26b8479d25f5a10f5
+  data.tar.gz: 6a2e5f7e180f8dab84fdffdd78b14a2a8d7b68056c2dacb78303d95c0344f6f0
 SHA512:
-  metadata.gz: 5c2983f8a5539e725e04b3b4cbf6b06259bfd2097695da37e939d0a626aa568857e09093d0f9e27f1e56724b00a418501f54f864d573c789c98e88d02e798b03
-  data.tar.gz: cdc566a16f731aabac512d56b4165102781a95acd0274af6f55612bcb284c5de17671b3d5f5d93b21790286e361af0eca254327dbdcfdcbf11d18bfce736a141
+  metadata.gz: 9b12f49556b91fbb08119f0e90a8224219c9e9c764aa9fe6406ee38e123d31616723f561ff464484c2ce93f8db68529eb113b6b85d052289a2ec552c982fbbf6
+  data.tar.gz: 36758fee9b0226ba5fa81a6a5327750e40123afbb31ceb3b67d4f66dfc9c904ea8b3a8e59ea9d17294a4c5c08a2e1b5f8dc3598019b375d7ce0f17b925ef067a

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -11,11 +11,11 @@ import { Image } from '../'
 
 type AvatarProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  imageUrl: String,
-  name: String,
+  id?: string,
+  imageUrl: string,
+  name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs",
   status: "away" | "offline" | "online",
 }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -11,17 +11,17 @@ import {
 } from '../utilities/props'
 
 type AvatarActionButtonProps = {
-  action?: String,
+  action?: string,
   aria: Object,
-  className?: String,
+  className?: string,
   data?: Object,
-  id?: String,
-  imageUrl?: String,
-  linkUrl?: String,
-  name?: String,
-  onClick?: String,
-  placement?: String,
-  size?: String,
+  id?: string,
+  imageUrl?: string,
+  linkUrl?: string,
+  name?: string,
+  onClick?: string,
+  placement?: string,
+  size?: string,
 }
 
 const AvatarActionButton = ({

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) => {

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>,
+  className?: string,
+  children?: array<React.ReactChild>,
   color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
-  dark?: Boolean,
+  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) => {

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_card/_card.jsx

@@ -7,35 +7,35 @@ 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 })
 
@@ -50,7 +50,6 @@ const Header = (props: CardHeaderProps) => {
 const Body = (props: CardBodyProps) => {
   const { children, className, padding = 'md' } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-
   const bodySpacing = globalProps(props, { padding })
 
   return (

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 %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -1,14 +1,22 @@
 import React from 'react'
-import { Body, Card } from '../../'
+import { Body, Card, Title } from '../../'
 
 const CardHeader = () => {
   return (
     <div>
+      <Title
+          size={4}
+          tag="h4"
+          text="Category Colors"
+      />
+
+      <br />
+
       <Card padding="none">
         <Card.Header>
           <Body
               dark
-              text="Header"
+              text="category_1"
           />
         </Card.Header>
         <Card.Body>
@@ -20,20 +28,60 @@ const CardHeader = () => {
 
       <Card padding="none">
         <Card.Header
-            categoryColor={2}
-            padding="md"
+            headerColor="category_2"
         >
           <Body
               dark
-              text="Header"
+              text="category_2"
           />
         </Card.Header>
         <Card.Body
-            padding="lg"
+            padding="md"
         >
           <Body text="Body" />
         </Card.Body>
       </Card>
+
+      <br />
+
+      <Title
+          size={4}
+          tag="h4"
+          text="Product Colors"
+      />
+
+      <br />
+
+      <Card padding="none">
+        <Card.Header
+            headerColor="siding"
+        >
+          <Body
+              dark
+              text="Siding"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
+
+      <br />
+
+      <Card padding="none">
+        <Card.Header
+            headerColor="gutters"
+        >
+          <Body
+              dark
+              text="Gutters"
+          />
+        </Card.Header>
+        <Card.Body>
+          <Body text="Body" />
+        </Card.Body>
+      </Card>
+
     </div>
   )
 }