playbook_ui 6.1.0 → 6.4.0

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionVariants = () => {
+  return (
+    <div>
+      <Caption
+          size="xs"
+          text="Subcaption (link)"
+          variant="link"
+      />
+    </div>
+  )
+}
+
+export default CaptionVariants

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md

@@ -0,0 +1,3 @@
+Wrap anchor tags around the kit to make it clickable.
+
+Link variant can only be applied to size `xs`.

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

@@ -1,7 +1,9 @@
 examples:
   rails:
   - caption_light: Light UI
+  - caption_variants: Variants
   - caption_dark: Dark UI
   react:
   - caption_light: Light UI
+  - caption_variants: Variants
   - caption_dark: Dark UI

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

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

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,
@@ -53,6 +53,7 @@ $pb_card_padding:(
 }
 
 @mixin pb_card_dark {
+  color: $white;
   @include pb_card($card_dark, $border_dark);
 }
 
@@ -67,6 +68,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>
   )
 }

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

@@ -1 +1 @@
-Card headers passes category colors only. List of all category colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card headers passes category and product colors only. List of all category and product colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -11,6 +11,6 @@
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
     </span>
 <% end %>

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

@@ -9,17 +9,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CheckboxProps = {
   aria?: object,
-  checked?: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  error?: Boolean,
-  id?: String,
-  name: String,
-  text: String,
-  value: String,
+  error?: boolean,
+  id?: string,
+  name: string,
+  text: string,
+  value: string,
   children: Node,
-  onChange: (Boolean) => void,
+  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {

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

@@ -1,8 +1,10 @@
 @import "../tokens/colors";
+@import "../tokens/transition";
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
   display: inline-flex;
+  cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
     cursor: pointer;
@@ -15,7 +17,8 @@ $transition: $transition_cubic;
     width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    .check_icon{
+    transition: background $transition_default ease, border-color $transition_default ease;
+    .check_icon {
       opacity: 0;
       position: relative;
       top: -2px;
@@ -26,9 +29,10 @@ $transition: $transition_cubic;
 
     }
   }
-
-  &:hover input ~ .pb_checkbox_checkmark {
-    border-color: $primary_action;
+  @media (hover:hover) {
+    &:hover input ~ .pb_checkbox_checkmark {
+      border-color: $primary_action;
+    }
   }
 
   input {
@@ -58,8 +62,10 @@ $transition: $transition_cubic;
       border-color: $primary_action;
     }
 
-    &:hover .pb_checkbox_checkmark {
-      border-color: $primary_action;
+    @media (hover:hover) {
+      &:hover .pb_checkbox_checkmark {
+        border-color: $primary_action;
+      }
     }
 
     &.error {

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

@@ -15,6 +15,11 @@ module Playbook
       prop :value
       prop :name
 
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :form_spacing, type: Playbook::Props::Boolean,
+                          default: false
+
       def checked_html
         checked ? "checked='true'" : nil
       end

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

@@ -15,15 +15,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CircleIconButtonProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  disabled?: Boolean,
-  icon: String,
-  id?: String,
-  link?: String,
+  disabled?: boolean,
+  icon: string,
+  id?: string,
+  link?: string,
   onClick?: Callback,
-  newWindow?: Boolean,
+  newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }