playbook_ui 10.16.0 → 10.18.2

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
 

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

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -1,4 +1,7 @@
-<%= pb_rails("title", props: { text: "Default Title" }) %>
+<%= pb_rails("title", props: {
+})  do %>
+    Default Title
+<% end %>
 
 <br/>
 

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
+<%= content_tag(object.tag,
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) %>
+    class: object.classname) do %>
+        <%= content.presence || object.text %>
+<% end %>

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -10,25 +10,14 @@ import solidGauge from 'highcharts/modules/solid-gauge'
 pie(Highcharts)
 
 // Map Data Color String Props to our SCSS Variables
+
 const mapColors = (array) => {
+  const regex = /(data)\-[1-8]/ //eslint-disable-line
+
   const newArray = array.map((item) => {
-    return item == 'data-1'
-      ? `${colors.data_1}`
-      : item == 'data-2'
-        ? `${colors.data_2}`
-        : item == 'data-3'
-          ? `${colors.data_3}`
-          : item == 'data-4'
-            ? `${colors.data_4}`
-            : item == 'data-5'
-              ? `${colors.data_5}`
-              : item == 'data-6'
-                ? `${colors.data_6}`
-                : item == 'data-7'
-                  ? `${colors.data_7}`
-                  : item == 'data-8'
-                    ? `${colors.data_8}`
-                    : ''
+    return regex.test(item)
+      ? `${colors[`data_${item[item.length - 1]}`]}`
+      : item
   })
   return newArray
 }
@@ -72,13 +61,13 @@ class pbChart {
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
-      this.setupGauge()
+      this.setupGauge(options)
     } else {
-      this.setupChart()
+      this.setupChart(options)
     }
   }
 
-  setupGauge() {
+  setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
     Highcharts.setOptions(highchartsTheme)
@@ -128,19 +117,21 @@ class pbChart {
         pointFormat: this.defaults.tooltipHtml,
         followPointer: true,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           animation: !this.defaults.disableAnimation,
         },
         solidgauge: {
+          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
           dataLabels: {
             format: `<span class="prefix">${this.defaults.prefix}</span>` +
             '<span class="fix">{y:,f}</span>' +
             `<span class="suffix">${this.defaults.suffix}</span>`,
-          },
-        },
+          }        },
       },
-    })
+    },
+    )
     document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
     if (document.querySelector('.prefix')) {
       document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
@@ -195,7 +186,7 @@ class pbChart {
     })
   }
 
-  setupChart() {
+  setupChart(options) {
     Highcharts.setOptions(highchartsTheme)
 
     const configOptions = {
@@ -222,6 +213,7 @@ class pbChart {
       legend: {
         enabled: this.defaults.legend,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -12,6 +12,7 @@ $red:                 #FF2229;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
+$default:             #93a8b8;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -19,7 +20,8 @@ $colors: (
   red:                $red,
   yellow:             $yellow,
   green:              $green,
-  orange:             $orange
+  orange:             $orange,
+  default:            $default,
 );
 
 /* Specialty Gradient -----------------*/