playbook_ui 10.16.0 → 10.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8cb62e7e4c4ce0582f7c7af3baec2eb4b35cb022ca13dc4b373e768f69bbbd32
-  data.tar.gz: 94a24d2c6cc426fcde35a23e33dafe44aec865a0913acba42fa716590eaaedb2
+  metadata.gz: d1e8104e2057e245727105de8a2dc411bb0a82b03e44412429b9335b6493c242
+  data.tar.gz: 0332c556cdb6636b2faac2466ade547b58c38faed3bf08ca682f807acefbd2f7
 SHA512:
-  metadata.gz: 9629982686a67ac50d4a4687ab2cb8194e5796982ba91459842efb615b2167fd92342cb3e60e645da24dc6291e944059248d38a50f85a8b746bd820b6f8d53ea
-  data.tar.gz: 05e31457c3ace5f05fa663d5031cc5d3367e0eb3b58f61c00df6b9d5df495ed91254335f74e10eaee5f807f611e70c3c408fb14248d60e2777dc93975ce3eb68
+  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.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
@@ -90,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}]{

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb

@@ -1,5 +1,16 @@
-<%= pb_rails("title", props: {size: 4, text: "Grow"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
 <br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %>
+    <%= pb_rails("flex/flex_item") do %>We<% end %>
+    <%= pb_rails("flex/flex_item") do %>Are<% end %>
+    <%= pb_rails("flex/flex_item") do %>Being<% end %>
+    <%= pb_rails("flex/flex_item") do %>Flexed<% end %>
+  <% end %>
+</div>
+
+<br/><br/>
+
 <div class="flex-doc-example">
   <%= pb_rails("flex",props: { gap:"sm" }) do %>
     <%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %>

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md

@@ -1,5 +1,6 @@
 ##### Props
 
+*  `display_flex` | **Type**: Boolean
 *  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 *  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
 *  `grow` | **Type**: Boolean
@@ -10,3 +11,4 @@
 - Setting Flex to 1 is equal to setting the grow & shrink prop to true
 - Setting Flex to 0 is equal to setting the grow & shrink prop to false
 - If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
+- display_flex will either be true or false. If true, then the class will be applied to the kit