playbook_ui 10.15.1 → 10.18.1

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

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -52,9 +52,9 @@ $pb_icon_circle_sizes: (
   @each $color_name, $color_value in $colors {
     &[class*=_#{$color_name}] {
       color: $color_value;
-      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {
-        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_5);
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
       }
     }
   }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -5,7 +5,7 @@
 }) %>
 <%= pb_rails("icon_circle", props: {
   icon: "archive",
-  variant: "blue",
+  variant: "orange",
   size: "sm"
 }) %>
 <%= pb_rails("icon_circle", props: {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -15,7 +15,7 @@ const IconCircleColor = (props) => {
       <IconCircle
           icon="rocket"
           size="sm"
-          variant="blue"
+          variant="orange"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -0,0 +1 @@
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -8,7 +8,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green],
+                     values: %w[default royal blue orange purple teal red yellow green],
                      default: "default"
 
       def classname

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_image/_image.jsx

@@ -14,6 +14,7 @@ type ImageProps = {
   onError?: () => {},
   size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
+  transition: "blur" | "fade" | "scale",
   url: string,
 }
 
@@ -27,6 +28,7 @@ const Image = (props: ImageProps) => {
     onError = null,
     rounded = false,
     size = '',
+    transition = 'fade',
     url = '',
   } = props
 
@@ -34,7 +36,7 @@ const Image = (props: ImageProps) => {
   const classes = classnames(
     buildCss('pb_image_kit', size),
     'lazyload',
-    'blur_up',
+    transition,
     { rounded },
     globalProps(props),
     className
@@ -53,6 +55,7 @@ const Image = (props: ImageProps) => {
           onError={onError}
           rounded={+rounded}
           src={url}
+          transition={transition}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -28,15 +28,31 @@ $image-sizes: (
       border-radius: $border-rad-heaviest;
     }
 
-    .blur_up {
-      -webkit-filter: blur(6px);
-      filter: blur(6px);
-      transition: filter 550ms, -webkit-filter 550ms;
+    &.fade {
+      opacity: 0;
+      &.lazyloaded {
+        opacity: 1;
+        transition: opacity 300ms ease-in;
+      }
     }
-
-    .blur_up.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
+    
+    &.blur {
+      filter: blur(5px);
+      &.lazyloaded {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        transition: filter 300ms ease-in;
+      }
+    }
+    
+    &.scale {
+      opacity: 0;
+      transform: scale(0.9);
+      &.lazyloaded {
+        opacity: 1;
+        transform: scale(1);
+        transition: 700ms ease-in;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
+    <%= pb_rails("select", props: {
+    id: "transition-dropdown",
+    label: "",
+    blank_selection: "Select a Transition...",
+    options: [
+        {
+          value: 'fade',
+        },
+        {
+          value: 'blur',
+        },
+        {
+          value: 'scale',
+        },
+    ]
+    }) %>
+  <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
+    <% end %>
+<% end %>
+<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const button = document.querySelector(".button")
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            button.className = button.className + ' _disabled'
+          } else {
+            button.removeAttribute("disabled");
+            button.className = button.className.replace(/\_disabled/gi, '')
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.transition-image')
+            imageTransition.removeAttribute("style")
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")
+            imageTransition.src = "https://unsplash.it/500/400/?image=634"
+        }
+      
+        button.addEventListener('click', function() {
+          updateTransition(option)
+        })
+    });
+</script>

data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+
+import Image from '../_image'
+import Select from '../../pb_select/_select'
+import FlexItem from '../../pb_flex/_flex_item'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
+
+const TransitionImage = (props) => {
+  const [transition, setTransition] = useState('')
+  const [apply, setApply] = useState({
+    url: '',
+    transition: '',
+  })
+
+  const loadImage = () => {
+    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
+    setApply({
+      url: 'https://unsplash.it/500/400/?image=634',
+      transition: transition,
+    },
+    document.querySelector('.image').classList.add(transition, 'lazyload')
+    )
+  }
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Flex>
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              onChange={handleTransition}
+              options={options}
+              {...props}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Button
+              disabled={transition === '' ? true : false}
+              marginLeft="sm"
+              onClick={loadImage}
+              text="Load Image"
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+      <div style={{ display: apply.url === '' ? 'none' : 'block' }}>
+        <Image
+            alt="picture of a misty forest"
+            className="image"
+            transition={apply.transition}
+            url={apply.url}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TransitionImage

data/app/pb_kits/playbook/pb_image/docs/_transition_image.md

@@ -0,0 +1 @@
+To add a transition, simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

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

@@ -3,7 +3,9 @@ examples:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition
   react:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition

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

@@ -1,3 +1,4 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
 export { default as CustomErrorImage } from './_custom_error_image.jsx'
+export { default as TransitionImage } from './_transition_image.jsx'

data/app/pb_kits/playbook/pb_image/image.html.erb

@@ -7,4 +7,4 @@
     alt: object.alt,
     onerror: object.on_error,
     )
-%>
+%>

data/app/pb_kits/playbook/pb_image/image.rb

@@ -11,10 +11,13 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg xl none],
                   default: "none"
+      prop :transition, type: Playbook::Props::Enum,
+                        values: %w[blur fade scale none],
+                        default: "fade"
       prop :url
 
       def classname
-        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
+        generate_classname("pb_image_kit#{size_class} #{transition_class} lazyload") + rounded_class
       end
 
     private
@@ -26,6 +29,10 @@ module Playbook
       def size_class
         size == "none" ? nil : "_#{size}"
       end
+
+      def transition_class
+        transition == "none" ? nil : transition
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -7,6 +7,7 @@ const props = {
   data: { testid: 'avatar' },
   size: null,
   url: 'https://unsplash.it/500/400/?image=634',
+  transition: 'blur',
 }
 
 it('Should be accessible', async () => {
@@ -20,16 +21,20 @@ test('alt attribute', () => {
 
 test('default classname', () => {
   const kit = renderKit(Image, props)
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit lazyload')
 })
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+})
+
+test('transition = blur', () => {
+  const kit = renderKit(Image, props, { transition: 'blur' })
+  expect(kit).toHaveClass('pb_image_kit lazyload blur')
 })
 
 test('rounded = true', () => {
   const kit = renderKit(Image, props, { rounded: true })
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
+  expect(kit).toHaveClass('pb_image_kit lazyload rounded')
 })
-

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. Hex colors are also available `eg: #CA0095`

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