playbook_ui 10.15.0 → 10.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: faae90de5528b9f023fd6824aa39c518ce892c36c60a212e5e4f7638d56f84ce
-  data.tar.gz: bbd980bc0d205b346fa150aced925e080c8ac8d3239e5edbccb4d3c9c3d6f556
+  metadata.gz: d1e8104e2057e245727105de8a2dc411bb0a82b03e44412429b9335b6493c242
+  data.tar.gz: 0332c556cdb6636b2faac2466ade547b58c38faed3bf08ca682f807acefbd2f7
 SHA512:
-  metadata.gz: 7df412eddb0717bb3166971a857cbc47df4d14f487eb34939e0e1a8e230dd95b101e19481b4eed793c5a5c01be6a65fdb1b57c7df288b65606a44c94c0f0ee92
-  data.tar.gz: 5b2dd670d04f69b59c7d6150b94dbfe547d7ef9ac39e7973489463de9759c8a81aa23af5a0e0867a85fd20ae2eedb3b60cbdf2a5370b8a470d5d35fed2c6bc91
+  metadata.gz: a0e1e774a8e2a0eebea5b07c03713ff74219e8eaa9d2fa6d1937d21192828db996c19ea381cb7a991d678e0dfaefe5ed121e72a20704a4fc386962afffaf5a45
+  data.tar.gz: f4ab414ba1ea7a825432df55853752307b5cba59c133f939f896ba28facf39293b2faa30bb596ea769d9aa442ecfbdda416d597a8a5a168251dacf345abea0ee

data/app/pb_kits/playbook/_playbook.scss

@@ -96,3 +96,4 @@
 @import './utilities/max_width';
 @import './utilities/positioning';
 @import './utilities/number_spacing';
+@import './utilities/shadow';

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -0,0 +1,22 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+
+import Background from './_background'
+
+const props = {
+  data: { testid: 'background' },
+  backgroundColor: null,
+}
+
+it('Should be accessible', async () => {
+  ensureAccessible(Background, props)
+})
+
+test('backgroundColor = success', () => {
+  const kit = renderKit(Background, props, { backgroundColor: 'success' })
+  expect(kit).toHaveClass('pb_background_kit pb_background_color_success')
+})
+
+test('backgroundColor = category_1', () => {
+  const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
+  expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
+})

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

@@ -24,6 +24,7 @@ type BarGraphProps = {
   legend?: boolean,
   toggleLegendClick?: boolean,
   height?: string,
+  colors: array,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {
@@ -50,11 +51,13 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       legend,
       height,
       toggleLegendClick,
+      colors  = [],
     } = this.props
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
       chartData: chartData,
+      colors: colors,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :toggle_legend_click, type: Playbook::Props::Boolean,
                                  default: true
       prop :height
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
@@ -42,6 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
+          colors: colors,
         }
       end
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-colors",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Custom Data Colors',
+    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+const BarGraphColors = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="bar-colors"
+        title="Bar Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md

@@ -0,0 +1,2 @@
+Custom data `colors` allow for color customization to match the needs of business requirements.
+Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array.

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

@@ -6,6 +6,7 @@ examples:
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
+  - bar_graph_colors: Color Overrides
 
 
   react:
@@ -14,3 +15,4 @@ examples:
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
+  - bar_graph_colors: Color Overrides

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

@@ -3,3 +3,4 @@ export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
+export { default as BarGraphColors } from './_bar_graph_colors.jsx'

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

@@ -15,13 +15,15 @@ type CaptionProps = {
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-}
+  color?: "default" | "link" | "light",
+};
 
 const Caption = (props: CaptionProps) => {
   const {
     aria = {},
     className,
     children,
+    color,
     data = {},
     id,
     size = 'md',
@@ -29,15 +31,26 @@ const Caption = (props: CaptionProps) => {
     text,
     variant = null,
   } = props
-  const tagOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'caption']
+  const tagOptions = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+    'span',
+    'div',
+    'caption',
+  ]
   const Tag = tagOptions.includes(tag) ? tag : 'div'
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, variant),
+    buildCss('pb_caption_kit', size, variant, color),
     globalProps(props),
-    className
+    className,
   )
 
   return (

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

@@ -1,19 +1,36 @@
+@import "../tokens/colors";
 @import "caption_mixin";
 
-[class^=pb_caption_kit] {
+[class^="pb_caption_kit"] {
   @include caption;
 
-  &[class^=pb_caption_kit_lg] {
+  &[class^="pb_caption_kit_lg"] {
     @include caption_lg;
   }
 
-  &[class^=pb_caption_kit_xs] {
+  &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
-    &[class*=_link]  {
-      color: $primary;
-    }
+    &[class*="_link"] {
+      color: $primary;}
+  }
+
+  &[class*="light"] {
+    color: $text_lt_light;
+  }
+
+  &[class*="default"] {
+    color: $text_lt_default;
   }
-  &[class*=dark]{
-    @include caption_dark
+
+  &[class*="link"] {
+    color: $primary;
+  }
+
+  &[class*="dark"] {
+    @each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
+      &[class*="_#{$dark_color_name}"][class*="dark"] {
+      @include caption_color($dark_color_value);
+      }
+    }
   }
 }

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

@@ -1,6 +1,19 @@
 @import "../tokens/colors";
 @import "../tokens/typography";
 
+$pb_caption_colors: (
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  link:           $primary-action,
+);
+
+$pb_dark_caption_colors: (
+  default:        #fff,
+  light:          $text_dk_light,
+  link:           $primary-action,
+);
+
+
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
   color: $text_lt_light;
@@ -9,6 +22,10 @@
   letter-spacing: $lspace_looser;
 }
 
+@mixin caption_color($color: $text_lt_light) {
+  color: $color;
+}
+
 @mixin caption_lg {
   @include caption($font_large, $regular);
 }

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -14,8 +14,12 @@ module Playbook
                      values: [nil, "link"],
                      default: nil
 
+      prop :color, type: Playbook::Props::Enum,
+                   values: [nil, "light", "default", "link"],
+                   default: nil
+
       def classname
-        generate_classname("pb_caption_kit", size, variant)
+        generate_classname("pb_caption_kit", size, variant, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("caption", props: { color: "default", text: "text default" }) %>
+<%= pb_rails("caption", props: { color: "light", text: "text light" }) %> 
+<%= pb_rails("caption", props: { color: "link", text: "text link" }) %>

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

@@ -0,0 +1,27 @@
+
+import React from 'react'
+import Caption from '../_caption'
+
+const CaptionExample = (props) => {
+  return (
+    <div>
+      <Caption
+          color="default"
+          text="text default"
+          {...props}
+      />
+      <Caption
+          color="light"
+          text="text light"
+          {...props}
+      />
+      <Caption
+          color="link"
+          text="text link"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CaptionExample

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

@@ -0,0 +1 @@
+The above examples accept different prop values for color. Those can be `default`,`link` and `light`.  Passing the `light` color prop is optional as it will apply this color when no prop is being passed. The same applies to any of the variations on the Caption kit.

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

@@ -1,7 +1,10 @@
 examples:
   rails:
-  - caption_light: Default
-  - caption_block: Block
+    - caption_light: Default
+    - caption_block: Block
+    - caption_example: Color Variations
+
   react:
-  - caption_light: Default
-  - caption_block: Block
+    - caption_light: Default
+    - caption_block: Block
+    - caption_example: Color Variations

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

@@ -1,3 +1,4 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'
+export { default as CaptionExample } from './_caption_example.jsx'

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

@@ -20,7 +20,6 @@ type CardPropTypes = {
   },
   padding?: string,
   selected?: boolean,
-  shadow?: "none" | "deep" | "deeper" | "deepest",
   tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
 }
 
@@ -75,14 +74,13 @@ const Card = (props: CardPropTypes) => {
     data = {},
     highlight = {},
     selected = false,
-    shadow = 'none',
     tag = 'div',
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
   const backgroundCSS = background == 'none' ? '' : `background_${background}`
-  const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
+  const cardCss = buildCss('pb_card_kit', selectedCSS, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })

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

@@ -45,12 +45,6 @@
     border: 0;
   }
 
-  @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
-      box-shadow: $shadow;
-    }
-  }
-
   &[class*=_highlight] {
     overflow: hidden;
   }

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

@@ -11,14 +11,7 @@ $pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors),
 $pb_card_highlight_size: 4px;
 $pb_card_header_colors: map-merge($category_colors, $product_colors);
 $pb_card_header_border_radius: $border_rad_heavy;
-$pb_card_padding:(
-  none: 0,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
+
 $additional_colors: (
   "dark": $bg_dark,
   "light": $bg_light,

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -8,3 +8,5 @@
     <%= content %>
   <% end if content.present? %>
 <% end %>
+
+

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

@@ -4,9 +4,6 @@ module Playbook
   module PbCard
     class Card < Playbook::KitBase
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :shadow, type: Playbook::Props::Enum,
-                    values: %w[none deep deeper deepest],
-                    default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}
       prop :tag, type: Playbook::Props::Enum,
@@ -24,7 +21,6 @@ module Playbook
       def classname
         generate_classname("pb_card_kit",
                            selected_class,
-                           shadow_class,
                            border_class,
                            border_radius_class,
                            background_class,
@@ -46,10 +42,6 @@ module Playbook
         selected ? "selected" : "deselected"
       end
 
-      def shadow_class
-        shadow != "none" ? "shadow_#{shadow}" : nil
-      end
-
       def highlight_position_class
         highlight[:position].present? ? "highlight_#{highlight[:position]}" : nil
       end

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -18,6 +18,7 @@ type CircleChartProps = {
   dataLabelHtml: string,
   dataLabels: boolean,
   headerFormat: string,
+  height?: string,
   id?: string,
   innerSize: "sm" | "md" | "lg" | "none",
   legend: boolean,
@@ -43,6 +44,7 @@ const CircleChart = (props: CircleChartProps) => {
     dataLabelHtml = '<div>{point.name}</div>',
     dataLabels = false,
     headerFormat = null,
+    height,
     id,
     innerSize = 'md',
     legend = false,
@@ -85,6 +87,7 @@ const CircleChart = (props: CircleChartProps) => {
       dataLabelHtml,
       dataLabels,
       headerFormat,
+      height: height,
       tooltipHtml,
       useHTML: useHtml,
       minPointSize,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
@@ -25,6 +27,7 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ""
+      prop :height
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
@@ -67,6 +70,7 @@ module Playbook
           borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
           title: title,
+          height: height,
           type: chart_type,
           showInLegend: legend,
           dataLabelHtml: data_label_html,
@@ -88,3 +92,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/CaseLikeIf
+
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
@@ -44,3 +46,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/CaseLikeIf

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbFixedConfirmationToast
     class FixedConfirmationToast < Playbook::KitBase
@@ -53,3 +55,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -21,6 +21,7 @@ type FlexProps = {
   rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
   wrap?: boolean,
+  alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 }
 
 const Flex = (props: FlexProps) => {
@@ -40,6 +41,7 @@ const Flex = (props: FlexProps) => {
     reverse = false,
     vertical = 'top',
     wrap = false,
+    alignSelf = 'none',
   } = props
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
@@ -53,6 +55,7 @@ const Flex = (props: FlexProps) => {
   const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
+  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
 
   return (
@@ -70,6 +73,7 @@ const Flex = (props: FlexProps) => {
           gapClass,
           rowGapClass,
           columnGapClass,
+          alignSelfClass
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -77,7 +77,6 @@ $gapTypes: (
     align-items: flex-start;
   }
 
-
   &[class*=align_items_right],
   &[class*=align_items_bottom],
   &[class*=align_items_end] {
@@ -96,6 +95,23 @@ $gapTypes: (
     align-items: baseline;
   }
 
+  // Alignment: Align Self - Rails & React
+  &[class*=align_self_start] {
+    align-self: flex-start;
+  }
+  
+  &[class*=align_self_end] {
+    align-self: flex-end;
+  }
+  
+  &[class*=align_self_center] {
+    align-self: center;
+  }
+  
+  &[class*=align_self_stretch] {
+    align-self: stretch;
+  }
+
   // Spacing
   &[class*=spacing_around],
   &[class*=justify_content_around] {

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -12,21 +12,25 @@ type FlexItemPropTypes = {
   className: string,
   overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
   order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  alignSelf?: "start" | "end" | "center" | "stretch",
+  displayFlex: boolean
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
   const growClass = grow === true ? 'grow' : ''
+  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
+  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `order_${order}` : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -12,6 +12,28 @@
     flex-shrink: 1;
   }
 
+  // Display Flex - Rails & React
+  &[class*=display_flex] {
+    display: flex;
+  }
+
+  // Alignment: Align Self - Rails & React
+  &[class*=align_self_start] {
+    align-self: flex-start;
+  }
+  
+  &[class*=align_self_end] {
+    align-self: flex-end;
+  }
+  
+  &[class*=align_self_center] {
+    align-self: center;
+  }
+  
+  &[class*=align_self_stretch] {
+    align-self: stretch;
+  }
+
   //Order Items
   @for $i from 0 through 12 {
     &[class*=order_#{$i}]{