playbook_ui 5.2.0 → 5.5.0

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Checkbox } from '../../'
+
+const CheckboxChecked = () => {
+  return (
+    <div>
+      <Checkbox
+          checked
+          name="checkbox-name"
+          text="Checked Checkbox"
+          value="check-box value"
+      />
+    </div>
+  )
+}
+
+export default CheckboxChecked

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

@@ -9,6 +9,7 @@ examples:
 
   react:
   - checkbox_default: Default
+  - checkbox_checked: Load as checked
   - checkbox_dark: Dark
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error

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

@@ -3,3 +3,4 @@ export { default as CheckboxDark } from './_checkbox_dark.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'
+export { default as CheckboxChecked } from './_checkbox_checked.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+  aria: object.aria, 
   id: object.id,
   data: object.data,
   class: object.classname) do %>

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

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Button, Icon } from '../'
 
 import type { Callback } from '../types'
@@ -13,8 +14,10 @@ import {
 import { spacing } from '../utilities/spacing.js'
 
 type CircleIconButtonProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   disabled?: Boolean,
   icon: String,
   id?: String,
@@ -27,9 +30,13 @@ type CircleIconButtonProps = {
 
 const CircleIconButton = (props: CircleIconButtonProps) => {
   const {
+    aria = {},
+    className,
     dark,
+    data = {},
     disabled,
     icon,
+    id,
     onClick = noop,
     type,
     link,
@@ -37,8 +44,17 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
     variant,
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, spacing(props))
+
   return (
-    <div className={classnames('pb_circle_icon_button_kit', spacing(props))}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <Button
           dark={dark}
           disabled={disabled}

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 import {
   Body,
@@ -11,7 +12,9 @@ import {
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
+  aria?: object,
   className?: String,
+  data?: object,
   id?: String,
   statChange?: {
     change?: String,
@@ -24,27 +27,27 @@ type DashboardValueProps = {
   }
 }
 
-const dashboardValueCSS = ({
-  align = 'left',
-
-}: DashboardValueProps) => {
-  const alignStyle = align !== '' ? `_${align}` : ''
-
-  return 'pb_dashboard_value_kit' + alignStyle
-}
-
 const DashboardValue = (props: DashboardValueProps) => {
   const {
+    align = 'left',
+    aria = {},
     className,
+    data = {},
     id,
-    statChange,
+    statChange = {},
     statLabel,
-    statValue,
+    statValue = {},
   } = props
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, spacing(props))
+
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className, spacing(props))}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
         id={id}
     >
       <If condition={statLabel}>

data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb

@@ -10,7 +10,7 @@ This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
 <br>
 <br>
 <%= pb_rails("title", props: {text: "Search",size: 4})%>
-</br>
+<br>
 <%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
 
 <br>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -14,7 +14,7 @@ const Image = (props: ImageProps) => {
   return (
     <img
         alt={alt}
-        className={classnames('pb_image lazyload blur_up', spacing(props))}
+        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
         data-src={url}
     />
   )

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -35,10 +35,25 @@ $card-border-radius: $border_rad_lightest;
       display: grid;
       width: 100%;
       height: 100%;
+      padding: $space_lg;
       grid-template-areas: 
       "side-bar collection";
       grid-template-columns: .25fr 1fr;
       grid-column-gap: $space_sm;
+      div.layout_body{
+        @media screen and (min-width: $screen-md-min) {
+        margin-left: $space_md;        
+        }
+        @media screen and (max-width: $screen-lg-min) {
+          grid-template-columns: repeat(3, 1fr);
+        }
+        @media screen and (max-width: $screen-md-min) {
+          grid-template-columns: repeat(2, 1fr) !important;
+        }
+         @media screen and (max-width: $screen-xs-min) {
+          grid-template-columns: repeat(1, 1fr) !important;
+        }
+      }
 
       @media screen and (max-width: $screen-md-min) {
         grid-template-areas: "side-bar"
@@ -46,6 +61,7 @@ $card-border-radius: $border_rad_lightest;
         grid-template-columns: 1fr;
         grid-row-gap: $space_sm;
       }
+      
   }
 
   &[class*=_kanban]{

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div, object.text,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -2,12 +2,14 @@
 
 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'
 
 import { Body, Title } from '../'
 
 type LegendProps = {
+  aria?: object,
+  className?: String,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -16,20 +18,39 @@ type LegendProps = {
     | "data_6"
     | "data_7",
   dark?: Boolean,
+  data?: object,
+  id?: String,
   prefixText?: String,
   text: String,
 }
 
 const Legend = (props: LegendProps) => {
-  const { color = 'data_1', dark = false, prefixText, text } = props
+  const {
+    aria = {},
+    className,
+    color = 'data_1',
+    dark = false,
+    data = {},
+    id,
+    prefixText,
+    text,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass),
+    buildCss('pb_legend_kit', color, darkClass), className,
     spacing(props)
   )
 
   return (
-    <div className={bodyCSS}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={bodyCSS}
+        id={id}
+    >
       <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -32,21 +32,31 @@ const NavItem = ({
           onClick={onClick}
       >
         <If condition={iconLeft}>
-          <Icon
-              className="pb_nav_list_item_icon_left"
-              fixedWidth
-              icon={iconLeft}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconLeft}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
+            />
+          </div>
         </If>
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
         <If condition={iconRight}>
-          <Icon
-              className="pb_nav_list_item_icon_right"
-              fixedWidth
-              icon={iconRight}
-          />
+          <div
+              className="pb_nav_list_item_icon_section"
+              key={iconRight}
+          >
+            <Icon
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight}
+            />
+          </div>
         </If>
       </Tag>
     </li>

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -32,6 +32,7 @@ $selector: ".pb_nav_list";
           }
           [class*=_item_text] {
             color: $primary;
+            font-weight: $bold;
           }
         }
       }
@@ -90,6 +91,7 @@ $selector: ".pb_nav_list";
         text-decoration: none;
         display: flex;
         align-items: center;
+        border: none;
         padding: $space_xs ($space_sm - 2px);
         transition-property: color, background-color;
         transition-duration: 0.15s;
@@ -106,6 +108,7 @@ $selector: ".pb_nav_list";
         }
         [class*=_text] {
           flex: 1;
+          font-weight: $regular;
         }
         &:hover {
           background-color: rgba($primary, 0.03);

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -3,7 +3,7 @@
   data: object.data,
   class: object.classname) do %>
     <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+      <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -59,6 +59,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props
 
   const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
+  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
     return Object.assign(
@@ -96,7 +97,8 @@ const Popover = (props: PbPopoverProps) => {
               <div
                   className={classnames(
                   'pb_popover_body',
-                  popoverSpacing
+                  popoverSpacing,
+                  overflowHandling
                 )}
                   style={widthHeightStyles()}
               >

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -23,6 +23,8 @@
     @include pb_card;
     border: 0;
     box-shadow: $shadow_deeper;
+  }
+  .overflow_handling {
     overflow: auto;
   }
 }
@@ -49,6 +51,8 @@
   @include pb_card;
   border: 0;
   box-shadow: $shadow_deeper;
+}
+.overflow_handling {
   overflow: auto;
 }
 

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -42,6 +42,10 @@ module Playbook
         out
       end
 
+      def width_height_class_helper
+        "overflow_handling" if max_height || max_width
+      end
+
       def data
         Hash(values[:data]).merge(
           pb_popover_kit: true,

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -7,14 +7,15 @@ import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
   aria?: object,
-  className?: String,
   children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
   dark?: Boolean,
   data?: object,
   id?: String,
   size?: 1 | 2 | 3 | 4,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div",
   text?: String,
+  variant?: null | "primary",
 }
 
 const Title = (props: TitleProps) => {
@@ -27,12 +28,14 @@ const Title = (props: TitleProps) => {
     id,
     size = 3,
     tag = 'h3',
-    text } = props
+    text,
+    variant = null,
+  } = props
 
-  const themeStyle = dark === true ? '_dark' : ''
+  const themeStyle = dark === true ? 'dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, themeStyle), className, spacing(props))
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, spacing(props))
   const Tag = `${tag}`
 
   return (

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,4 +1,5 @@
 @import "title_mixin";
+@import "../tokens/colors";
 
 [class^=pb_title_kit]{
   &[class*=_1] {
@@ -20,4 +21,10 @@
   &[class*=_dark] {
     @include pb_title_dark;
   }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      color: map-get($status_color_text, $color_name);
+    }
+  }
 }