playbook_ui 10.17.0 → 10.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1e8104e2057e245727105de8a2dc411bb0a82b03e44412429b9335b6493c242
-  data.tar.gz: 0332c556cdb6636b2faac2466ade547b58c38faed3bf08ca682f807acefbd2f7
+  metadata.gz: b6fbbfa10d2162c02d5c0e145411bc6c425b6c9d637e058797da617ac6249270
+  data.tar.gz: 2649996be5ab0d966b38f542b8db7a23b6d095a1043f8d93e1cf68fed3dfda29
 SHA512:
-  metadata.gz: a0e1e774a8e2a0eebea5b07c03713ff74219e8eaa9d2fa6d1937d21192828db996c19ea381cb7a991d678e0dfaefe5ed121e72a20704a4fc386962afffaf5a45
-  data.tar.gz: f4ab414ba1ea7a825432df55853752307b5cba59c133f939f896ba28facf39293b2faa30bb596ea769d9aa442ecfbdda416d597a8a5a168251dacf345abea0ee
+  metadata.gz: c512fa4a05695fbecddb4cc4e1c2df8b79b8021b18bc2676ed3ca9c4844a9fa6b0ca81182b73ce0db194ee8ea083cc4e65db8db98ef3a42d554b2017a98e4d0b
+  data.tar.gz: 18405cbcd539c6c0f6b17be09fe5362711a2c63bc93450d0534758c1fd48f34c8f04cef485ce333292f9d62fa9d4e475fc8534bbd095a314443886326b70a98c

data/app/pb_kits/playbook/_playbook.scss

@@ -93,7 +93,9 @@
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+@import './utilities/cursor';
 @import './utilities/max_width';
 @import './utilities/positioning';
 @import './utilities/number_spacing';
 @import './utilities/shadow';
+@import './utilities/display';

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md

@@ -1,2 +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.
+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_button/_button.jsx

@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size: 'large' | 'medium' | 'small',
+  size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,16 +36,16 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
-    size = null,
     type = 'inline',
     variant = 'primary',
+    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
+  className += `${size !== null ? `_${size}` : ''}`
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,24 @@
 @import "./button_mixins";
 
+$pb_button_sizes: (
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
+);
+
 [class^=pb_button_kit]{
   @include pb_button;
+  // Size =================
+  @each $name, $size in $pb_button_sizes {
+    &[class*=_#{$name}] {
+      font-size: $size;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+    }
+  }
+  &[class*=_sm] {
+    min-height: 0;
+  }
+
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,9 @@ module Playbook
       prop :text
       prop :type
       prop :value
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["sm", "md", "lg", nil],
+                  default: nil
 
       def options
         {
@@ -44,12 +47,12 @@ module Playbook
         link ? "a" : "button"
       end
 
-    private
-
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        generate_classname("pb_button_kit", size, variant, full_width_class, disabled_class, loading_class)
       end
 
+    private
+
       def disabled_class
         disabled ? "disabled" : "enabled"
       end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,3 +89,16 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
+
+test('size prop', () => {
+  render(
+    <Button
+        data={{ testid: 'size-test' }}
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('size-test')
+
+  expect(kit).toHaveClass('pb_button_kit_sm_primary_inline_enabled')
+})

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonSize = (props) => (
+  <div>
+    <Button
+        size="sm"
+        text="Button sm size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="md"
+        text="Button md size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="lg"
+        text="Button lg size"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonSize

data/app/pb_kits/playbook/pb_button/docs/_button_size.md

@@ -0,0 +1 @@
+By default button has the `md` size style, even if you don't explicitly pass a size prop.

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

@@ -7,6 +7,7 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
+  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -15,3 +16,4 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
+  - button_size: Button Size

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

@@ -5,3 +5,4 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
+export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -19,7 +19,7 @@
 
 <br>
 
-<%= pb_rails("card", props: { background: "light"})  do %>
+<%= pb_rails("card", props: { background: "light" })  do %>
   <%= pb_rails("body", props: {
   text: "Light"
 }) %>

data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb

@@ -1,4 +1,6 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: { 
+  cursor: "pointer" 
+}) do %>
   Card Content
 <% end %>
 

data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx

@@ -5,9 +5,16 @@ import Card from '../_card'
 const CardContent = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          cursor="pointer"
+          {...props}
+      >
+        {'Card content'}
+      </Card>
       <br />
-      <Card {...props}>
+      <Card
+          {...props}
+      >
         {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
 
 Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_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_date_picker/docs/_date_picker_default_date.md

@@ -1,3 +1,5 @@
 The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
 
-If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+
+

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -2,10 +2,19 @@ import { ensureAccessible, renderKit } from '../utilities/test-utils'
 import { DateTimeStacked } from '../'
 
 /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+const currentDate = new Date()
+
+const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  monthName = datetime.toLocaleString('en-US', { month: 'short' }),
+  day = datetime.getDate(),
+  fullYear = datetime.getFullYear(),
+  optionalYear = currentDate.getFullYear() !== fullYear ? fullYear : ''
+
+const monthDayYear = `${monthName}${day}${optionalYear}`
 
 const props = {
   data: { testid: 'datetimestacked' },
-  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  datetime,
 }
 
 test('Kit renders date time', () => {
@@ -19,17 +28,17 @@ it('Should be accessible', async () => {
 
 test('renders time in default timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}1:00pEDT`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'America/Denver'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })

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_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` `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 orange purple teal red yellow green],
                      default: "default"
 
       def classname

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/docs/_line_graph_colors.md

@@ -1,2 +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.
+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_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(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'))

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 -----------------*/

data/app/pb_kits/playbook/utilities/_cursor.scss

@@ -0,0 +1,3 @@
+.cursor_pointer {
+  cursor: pointer;
+}

data/app/pb_kits/playbook/utilities/_display.scss

@@ -0,0 +1,23 @@
+.display_block {
+    display: block;
+}
+
+.display_inline_block {
+    display: inline-block;
+}
+
+.display_inline {
+    display: inline;
+}
+
+.display_flex {
+    display: flex;
+}
+
+.display_inline_flex {
+    display: inline-flex;
+}
+
+.display_hidden {
+    display: none;
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -63,10 +63,22 @@ const shadowProps = ({ shadow }) => {
   return css
 }
 
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + displayProps(allProps) + cursorProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/lib/playbook/classnames.rb

@@ -17,6 +17,8 @@ module Playbook
         z_index_props,
         number_spacing_props,
         shadow_props,
+        display_props,
+        cursor_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/cursor.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Cursor
+    def self.included(base)
+      base.prop :cursor
+    end
+
+    def cursor_props
+      selected_props = cursor_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        cursor_value = send(k)
+        "cursor_#{cursor_value}" if cursor_values.include? cursor_value
+      end.compact.join(" ")
+    end
+
+    def cursor_options
+      {
+        cursor: "cursor",
+      }
+    end
+
+    def cursor_values
+      %w[pointer]
+    end
+  end
+end

data/lib/playbook/display.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Display
+    def self.included(base)
+      base.prop :display
+    end
+
+    def display_props
+      selected_props = display_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        display_value = send(k)
+        "display_#{display_value}" if display_values.include? display_value
+      end.compact.join(" ")
+    end
+
+    def display_options
+      {
+        display: "display",
+      }
+    end
+
+    def display_values
+      %w[block inline_block inline flex inline_flex hidden]
+    end
+  end
+end

data/lib/playbook/engine.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
-require "view_component/engine"
 require "webpacker/react"
 
 module Playbook

data/lib/playbook/kit_base.rb

@@ -5,6 +5,8 @@ require "playbook/spacing"
 require "playbook/z_index"
 require "playbook/number_spacing"
 require "playbook/shadow"
+require "playbook/display"
+require "playbook/cursor"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -15,6 +17,8 @@ module Playbook
     include Playbook::ZIndex
     include Playbook::NumberSpacing
     include Playbook::Shadow
+    include Playbook::Display
+    include Playbook::Cursor
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.17.0"
-  VERSION = "10.17.0"
+  VERSION = "10.18.0"
 end

data/lib/playbook.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "view_component"
+
 require "playbook/version"
 require "playbook/engine"
 require "playbook/props"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.17.0
+  version: 10.18.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-12-10 00:00:00.000000000 Z
+date: 2022-01-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -101,14 +101,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.23'
+        version: '2.47'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.23'
+        version: '2.47'
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -424,6 +424,9 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
+- app/pb_kits/playbook/pb_button/docs/_button_size.md
 - app/pb_kits/playbook/pb_button/docs/_footer.md
 - app/pb_kits/playbook/pb_button/docs/example.yml
 - app/pb_kits/playbook/pb_button/docs/index.js
@@ -528,6 +531,7 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
@@ -940,6 +944,9 @@ files:
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
 - app/pb_kits/playbook/pb_gauge/_gauge.jsx
 - app/pb_kits/playbook/pb_gauge/_gauge.scss
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
@@ -1034,6 +1041,7 @@ files:
 - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx
+- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb
@@ -1076,6 +1084,9 @@ files:
 - app/pb_kits/playbook/pb_image/docs/_description.md
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
+- app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb
+- app/pb_kits/playbook/pb_image/docs/_transition_image.jsx
+- app/pb_kits/playbook/pb_image/docs/_transition_image.md
 - app/pb_kits/playbook/pb_image/docs/example.yml
 - app/pb_kits/playbook/pb_image/docs/index.js
 - app/pb_kits/playbook/pb_image/image.html.erb
@@ -2033,6 +2044,8 @@ files:
 - app/pb_kits/playbook/types.js
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
+- app/pb_kits/playbook/utilities/_cursor.scss
+- app/pb_kits/playbook/utilities/_display.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
@@ -2047,6 +2060,8 @@ files:
 - fonts/regular-min.js
 - lib/playbook.rb
 - lib/playbook/classnames.rb
+- lib/playbook/cursor.rb
+- lib/playbook/display.rb
 - lib/playbook/engine.rb
 - lib/playbook/forms.rb
 - lib/playbook/forms/builder.rb