playbook_ui 10.16.0 → 10.18.2

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

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

@@ -0,0 +1,89 @@
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<br/>
+  <div class="flex-doc-example">
+    <%= pb_rails("flex") do %>
+      <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
+<br/>
+  <div class="flex-doc-example">
+    <%= pb_rails("flex", props: {orientation: "column"}) do %>
+      <%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+      <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+    <% end %>
+  </div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+ <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>
+
+  <br/><br/>
+
+   <div class="flex-doc-example">
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx

@@ -0,0 +1,210 @@
+import React from 'react'
+import { Flex, FlexItem, Title } from  '../..'
+
+const FlexItemAlignSelf = (props) => {
+  return (
+    <>
+      <Title
+          size={4}
+          text="Row"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="start">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="end">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="center">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            {...props}
+        >
+          <FlexItem alignSelf="stretch">
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="md">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+      <br />
+
+      <Title
+          size={4}
+          text="Column"
+          {...props}
+      />
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="start"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="end"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="center"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+      <br />
+
+      <div className="flex-doc-example ">
+        <Flex
+            orientation="column"
+            {...props}
+        >
+          <FlexItem
+              alignSelf="stretch"
+              padding="sm"
+          >
+            {'1'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'2'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'3'}
+          </FlexItem>
+          <FlexItem padding="sm">
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
+
+    </>
+  )
+}
+
+export default FlexItemAlignSelf

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

@@ -0,0 +1,5 @@
+##### Prop
+
+* `align_self` | **Type**: String | **Values**: start | end | center | stretch 
+
+- Align-self aligns the Flex Item on the cross axis. This prop may also be applied to the Flex kit and will act the same way.

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -4,6 +4,33 @@ import { Flex, FlexItem, Title } from  '../..'
 const FlexItemExample = (props) => {
   return (
     <>
+      <Title
+          size={4}
+          text="Display Flex"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <FlexItem
+            displayFlex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem>
+            {'We'}
+          </FlexItem>
+          <FlexItem>
+            {'Are'}
+          </FlexItem>
+          <FlexItem>
+            {'Being'}
+          </FlexItem>
+          <FlexItem>
+            {'Flexed'}
+          </FlexItem>
+        </FlexItem>
+      </div>
+
+      <br />
       <Title
           size={4}
           text="Grow"

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.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

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

@@ -10,6 +10,7 @@ examples:
   - flex_align: Align
   - flex_gap: Gap
   - flex_item: Flex Item
+  - flex_item_align_self: Flex Item - Align Self
 
 
 
@@ -24,3 +25,4 @@ examples:
   - flex_align: Align
   - flex_gap: Gap
   - flex_item_example: Flex Item
+  - flex_item_align_self: Flex Item - Align Self

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

@@ -7,3 +7,4 @@ export { default as FlexJustify } from './_flex_justify.jsx'
 export { default as FlexAlign } from './_flex_align.jsx'
 export { default as FlexGap } from './_flex_gap.jsx'
 export { default as FlexItemExample } from './_flex_item_example.jsx'
+export { default as FlexItemAlignSelf } from './_flex_item_align_self.jsx'

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -48,6 +48,10 @@ module Playbook
                    values: %w[start center end stretch baseline none],
                    default: "none"
 
+      prop :align_self, type: Playbook::Props::Enum,
+                        values: %w[start end center stretch none],
+                        default: "none"
+
       prop :wrap, type: Playbook::Props::Boolean,
                   default: false
 
@@ -62,7 +66,8 @@ module Playbook
                            spacing_class,
                            gap_class,
                            row_gap_class,
-                           column_gap_class)
+                           column_gap_class,
+                           align_self_class)
       end
 
     private
@@ -115,6 +120,14 @@ module Playbook
         end
       end
 
+      def align_self_class
+        if align_self == "none"
+          nil
+        else
+          "align_self_#{align_self}"
+        end
+      end
+
       def wrap_class
         wrap ? "wrap" : nil
       end

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -19,8 +19,15 @@ module Playbook
                    values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
                    default: "none"
 
+      prop :align_self, type: Playbook::Props::Enum,
+                        values: %w[start center end stretch] + [nil],
+                        default: nil
+
+      prop :display_flex, type: Playbook::Props::Boolean,
+                          default: false
+
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
       end
 
       def style_value
@@ -29,6 +36,14 @@ module Playbook
 
     private
 
+      def align_self_class
+        align_self ? "align_self_#{align_self}" : ""
+      end
+
+      def display_flex_class
+        display_flex ? "display_flex" : nil
+      end
+
       def fixed_size_class
         fixed_size.present? ? "fixed_size" : nil
       end

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -25,6 +25,7 @@ type GaugeProps = {
   suffix: string,
   title: string,
   tooltipHtml: string,
+  colors: array,
 }
 
 const Gauge = (props: GaugeProps) => {
@@ -45,6 +46,7 @@ const Gauge = (props: GaugeProps) => {
     suffix = '',
     title = '',
     tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+    colors = [],
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -76,6 +78,7 @@ const Gauge = (props: GaugeProps) => {
       style: style,
       tooltipHtml: tooltipHtml,
       type: 'gauge',
+      colors: colors,
     })
   }, [])
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

@@ -0,0 +1,12 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 67,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-colors",
+  chart_data: data,
+  colors: ['data-7']
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Name', value: 67 },
+]
+
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
+
+export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_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 **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -9,6 +9,7 @@ examples:
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
+  - gauge_colors: Color Overrides
 
 
   react:
@@ -21,3 +22,4 @@ examples:
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_live_data: Live Data
+  - gauge_colors: Color Overrides

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

@@ -7,3 +7,4 @@ export { default as GaugeSizing } from './_gauge_sizing.jsx'
 export { default as GaugeTitle } from './_gauge_title.jsx'
 export { default as GaugeUnits } from './_gauge_units.jsx'
 export { default as GaugeLiveData } from './_gauge_live_data.jsx'
+export { default as GaugeColors } from './_gauge_colors.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -20,6 +20,7 @@ module Playbook
       prop :disable_animation, type: Playbook::Props::Boolean, default: false
       prop :min, type: Playbook::Props::Numeric, default: 0
       prop :max, type: Playbook::Props::Numeric, default: 100
+      prop :colors, type: Playbook::Props::Array, default: []
 
       def chart_data_formatted
         chart_data.map { |hash| hash[:y] = hash.delete :value }
@@ -42,6 +43,7 @@ module Playbook
           style: style,
           tooltipHtml: tooltip_html,
           type: "gauge",
+          colors: colors,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/StringConcatenation, Style/HashLikeCase
+
 require "open-uri"
 
 module Playbook
@@ -135,3 +137,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/StringConcatenation, Style/HashLikeCase