playbook_ui 5.3.0.pre.alpha1 → 5.5.1

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);
+    }
+  }
 }

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

@@ -36,3 +36,5 @@
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,9 +16,12 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                    values: [nil, "primary"],
+                    default: nil
 
       def classname
-        generate_classname("pb_title_kit", size, dark_class)
+        generate_classname("pb_title_kit", size, dark_class, variant)
       end
 
     private

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -3,8 +3,6 @@ import Highcharts from 'highcharts'
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
 
 require('highcharts/modules/variable-pie')(Highcharts)
-import highchartsMore from 'highcharts/highcharts-more.js'
-import solidGauge from 'highcharts/modules/solid-gauge.js'
 
 class pbChart {
   defaults = {
@@ -33,80 +31,11 @@ class pbChart {
 
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart()
-    } else if (this.options.type == 'gauge') {
-      this.setupGauge()
     } else {
       this.setupChart()
     }
   }
 
-  setupGauge() {
-    highchartsMore(Highcharts)
-    solidGauge(Highcharts)
-    Highcharts.setOptions(highchartsTheme)
-
-    Highcharts.chart(this.defaults.id, {
-      chart: {
-        type: this.defaults.style,
-        height: this.defaults.height,
-      },
-      title: {
-        text: this.defaults.title,
-      },
-      yAxis: {
-        min: this.defaults.min,
-        max: this.defaults.max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: null,
-        tickAmount: 2,
-        tickPositions: [this.defaults.min, this.defaults.max],
-        labels: {
-          y: 26,
-          enabled: this.defaults.showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: this.defaults.chartData,
-        },
-      ],
-      pane: {
-        center: ['50%', '50%'],
-        size: '90%',
-        startAngle: this.defaults.circumference[0],
-        endAngle: this.defaults.circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: '90%',
-          outerRadius: '90%',
-          shape: 'arc',
-          className: 'gauge-pane',
-        },
-      },
-      tooltip: {
-        headerFormat: '',
-        pointFormat: this.defaults.tooltipHtml,
-        followPointer: true,
-      },
-      plotOptions: {
-        solidgauge: {
-          dataLabels: {
-            format: `<span class="prefix">${this.defaults.prefix}</span>` +
-            '<span class="fix">{y:,f}</span>' +
-            `<span class="suffix">${this.defaults.suffix}</span>`,
-          },
-        },
-      },
-    })
-    document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
-    if (document.querySelector('.prefix')) {
-      document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
-      document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
-    }
-  }
-
   setupPieChart() {
     Highcharts.setOptions(highchartsTheme)