playbook_ui 10.16.0 → 10.17.0

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_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

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -33,6 +33,7 @@ module Playbook
       end
 
       def title_size
+        # rubocop:disable Style/CaseLikeIf
         if size == "lg"
           1
         elsif size == "md"
@@ -40,6 +41,7 @@ module Playbook
         else
           3
         end
+        # rubocop:enable Style/CaseLikeIf
       end
     end
   end

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -25,7 +25,8 @@ type LineGraphProps = {
   legend?: boolean,
   toggleLegendClick?: boolean,
   height?: string,
-}
+  colors: array,
+  }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
   static defaultProps = {
@@ -52,11 +53,13 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       legend,
       toggleLegendClick,
       height,
+      colors = [],
     } = this.props
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
       chartData: chartData,
+      colors: colors,
       id: id,
       pointStart: pointStart,
       subtitle: subTitle,

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
+}, {
+    name: 'Project Development',
+    data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
+}, {
+    name: 'Other',
+    data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-colors", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Line Graph with Custom Data Colors', 
+    axis_title: 'Number of Employees',
+    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
+}) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import LineGraph from '../_line_graph'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
+}, {
+  name: 'Project Development',
+  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
+}, {
+  name: 'Other',
+  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
+}]
+
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_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_line_graph/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - line_graph_legend: Legend
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
+  - line_graph_colors: Color Overrides
 
 
   react:
@@ -12,3 +13,4 @@ examples:
   - line_graph_legend: Legend
   - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
+  - line_graph_colors: Color Overrides

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

@@ -2,3 +2,4 @@ export { default as LineGraphDefault } from './_line_graph_default.jsx'
 export { default as LineGraphLegend } from './_line_graph_legend.jsx'
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
+export { default as LineGraphColors } from './_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -20,6 +20,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
         gradient ? "area" : "line"
@@ -41,6 +43,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
+          colors: colors,
         }
       end
 

data/app/pb_kits/playbook/pb_list/list.rb

@@ -43,6 +43,7 @@ module Playbook
         dark ? "dark" : nil
       end
 
+      # rubocop:disable Style/CaseLikeIf
       def layout_class
         if layout == "right"
           "layout_right"
@@ -52,6 +53,7 @@ module Playbook
           ""
         end
       end
+      # rubocop:enable Style/CaseLikeIf
 
       def size_class
         size ? "large" : nil

data/app/pb_kits/playbook/pb_select/select.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/StringConcatenation
 require "action_view"
 
 module Playbook
@@ -72,3 +73,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/StringConcatenation

data/app/pb_kits/playbook/pb_source/source.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig, Style/HashLikeCase
 module Playbook
   module PbSource
     class Source < Playbook::KitBase
@@ -59,3 +60,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/SingleArgumentDig, Style/HashLikeCase

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
@@ -86,3 +87,4 @@ module Playbook
     end
   end
 end
+# rubocop:enable Style/SingleArgumentDig