playbook_ui 6.0.1 → 6.1.0.pre.alpha1

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,33 +1,20 @@
 // @flow
 
-import React, { useState } from 'react'
-import { Toggle } from '../../'
-
-const Example = () => {
-  const [toggle1, setToggle1] = useState(false)
-  const [toggle2, setToggle2] = useState(false)
+import React from 'react'
+import { Toggle } from '../..'
 
+const ToggleDefault = () => {
   return (
     <>
       <Toggle
-          checked={toggle1}
-          name="toggle1"
-          onChange={(event) => setToggle1(event.target.value)}
-          onCheck={(event) => alert(`${event.target.name} checked!`)}
-          onUncheck={(event) => alert(`${event.target.name} unchecked!`)}
+          checked
       />
 
       <br />
 
-      <Toggle
-          checked={toggle2}
-          name="toggle2"
-          onChange={(event) => setToggle2(event.target.value)}
-          onCheck={(event) => alert(`${event.target.name} checked!`)}
-          onUncheck={(event) => alert(`${event.target.name} unchecked!`)}
-      />
+      <Toggle />
     </>
   )
 }
 
-export default Example
+export default ToggleDefault

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -0,0 +1,57 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Caption, Title, Toggle } from '../..'
+
+const ToggleName = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          text="Which of the following vehicles do you own?"
+      />
+
+      <br />
+
+      <Caption
+          text="Car"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="vehicle"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="car"
+        />
+      </Toggle>
+
+      <br />
+      <Caption
+          text="Bike"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="vehicle"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="bike"
+        />
+      </Toggle>
+
+    </>
+  )
+}
+
+export default ToggleName

data/app/pb_kits/playbook/pb_toggle/docs/{_toggle_checked.html.erb → _toggle_size.html.erb}

@@ -1,6 +1,6 @@
 <%= pb_rails("toggle", props: {
-  size: "md",
-  checked: true
+  size: "sm",
+  checked: false
 }) %>
 
 <br>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleSize = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="toggleSmall"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleSmall"
+        />
+      </Toggle>
+
+      <br />
+
+      <Toggle
+          checked={choice}
+          size="md"
+      >
+        <input
+            name="toggleMedium"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleMedium"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleSize

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

@@ -1,13 +1,16 @@
 examples:
 
   rails:
-  - toggle_default: Sizes
-  - toggle_checked: Default State
+  - toggle_default: Default State
+  - toggle_size: Sizes
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
   react:
-  - toggle_default: Default
-  - toggle_accessibility: Toggle Accessibility
-  - toggle_data: Toggle Data Props
+  - toggle_default: Default State
+  - toggle_size: Sizes
+  - toggle_name: Name and Value
+  - toggle_custom: Custom checkbox input
+  - toggle_custom_radio: Custom radio inputs
+

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

@@ -1,3 +1,5 @@
 export { default as ToggleDefault } from './_toggle_default'
-export { default as ToggleAccessibility } from './_toggle_accessibility'
-export { default as ToggleData } from './_toggle_data'
+export { default as ToggleSize } from './_toggle_size'
+export { default as ToggleCustom } from './_toggle_custom'
+export { default as ToggleName } from './_toggle_name'
+export { default as ToggleCustomRadio } from './_toggle_custom_radio'

data/app/pb_kits/playbook/pb_user/_user.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Avatar, Body, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type UserProps = {
   className?: String,
@@ -30,7 +30,7 @@ const User = (props: UserProps) => {
     avatarUrl,
   } = props
   return (
-    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, spacing(props))}>
+    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, globalProps(props))}>
       <If condition={avatar || avatarUrl}>
         <Avatar
             imageUrl={avatarUrl}

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type UserBadgeProps = {
   className?: String,
@@ -15,7 +15,7 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
 
   return (
-    <div className={classnames(`pb_user_badge_kit_${size}`, spacing(props))}>
+    <div className={classnames(`pb_user_badge_kit_${size}`, globalProps(props))}>
       <div className="pb_user_badge_wrapper">
         <img src={image} />
       </div>

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildCss } from '../utilities/props'
 
 import { Caption, Title } from '../'
@@ -52,7 +52,7 @@ const WeekdayStacked = (props: WeekdayStackedProps) => {
         className={classnames(
         buildCss('pb_weekday_stacked_kit', align),
         className,
-        spacing(props)
+        globalProps(props)
       )}
     >
       <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>

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

@@ -4,6 +4,8 @@ import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
 import colors from '../tokens/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
+import highchartsMore from 'highcharts/highcharts-more.js'
+import solidGauge from 'highcharts/modules/solid-gauge.js'
 
 // Map Data Color String Props to our SCSS Variables
 const mapColors = (array) => {
@@ -67,11 +69,83 @@ class pbChart {
 
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart(options)
+    } else if (this.options.type == 'gauge') {
+      this.setupGauge()
     } else {
       this.setupChart()
     }
   }
 
+  setupGauge() {
+    highchartsMore(Highcharts)
+    solidGauge(Highcharts)
+    Highcharts.setOptions(highchartsTheme)
+
+    Highcharts.chart(this.defaults.id, {
+      chart: {
+        type: this.defaults.style,
+        height: this.defaults.height,
+      },
+      title: {
+        text: this.defaults.title,
+      },
+      yAxis: {
+        min: this.defaults.min,
+        max: this.defaults.max,
+        lineWidth: 0,
+        tickWidth: 0,
+        minorTickInterval: null,
+        tickAmount: 2,
+        tickPositions: [this.defaults.min, this.defaults.max],
+        labels: {
+          y: 26,
+          enabled: this.defaults.showLabels,
+        },
+      },
+      credits: false,
+      series: [
+        {
+          data: this.defaults.chartData,
+        },
+      ],
+      pane: {
+        center: ['50%', '50%'],
+        size: '90%',
+        startAngle: this.defaults.circumference[0],
+        endAngle: this.defaults.circumference[1],
+        background: {
+          borderWidth: 20,
+          innerRadius: '90%',
+          outerRadius: '90%',
+          shape: 'arc',
+          className: 'gauge-pane',
+        },
+      },
+      tooltip: {
+        headerFormat: '',
+        pointFormat: this.defaults.tooltipHtml,
+        followPointer: true,
+      },
+      plotOptions: {
+        series: {
+          animation: !this.defaults.disableAnimation,
+        },
+        solidgauge: {
+          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'))
+      document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
+    }
+  }
+
   setupPieChart(options) {
     Highcharts.setOptions(highchartsTheme)
     Highcharts.chart(this.defaults.id, {

data/app/pb_kits/playbook/props.rb

@@ -43,11 +43,16 @@ module Playbook
       end.compact.join(" ")
     end
 
+    def dark_props
+      dark ? "dark" : nil
+    end
+
     def generate_classname(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
         prop(:classname),
         spacing_props,
+        dark_props
       ].compact.join(" ")
     end
 
@@ -81,6 +86,7 @@ module Playbook
       prop :padding_top
       prop :padding_x
       prop :padding_y
+      prop :dark, type: Playbook::Props::Boolean, default: false
     end
 
     def spacing_options

data/app/pb_kits/playbook/utilities/{spacing.js → globalProps.js}

@@ -1,4 +1,5 @@
-export const spacing = ({
+// Prop categories
+const spacingProps = ({
   marginRight,
   marginLeft,
   marginTop,
@@ -31,3 +32,15 @@ export const spacing = ({
   css += padding ? `p_${padding} ` : ''
   return css
 }
+
+const darkProps = ({ dark }) => {
+  let css = ''
+  css += dark ? 'dark' : ''
+  return css
+}
+
+// All Exported as a single function
+export const globalProps = (props, defaultProps = {}) => {
+  const allProps = { ...props, ...defaultProps }
+  return spacingProps(allProps) + darkProps(allProps)
+}

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

@@ -46,3 +46,4 @@ export const buildDataProps = (data) => buildPrefixedProps('data', data)
  * @returns {String} the derived root className value.
  */
 export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')
+

data/app/pb_kits/playbook/vendor.js

@@ -5,6 +5,10 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+window.datePickerHelper = datePickerHelper
+
 // Lazy image loading
 import 'lazysizes'
 
@@ -19,3 +23,5 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
+
+import 'flatpickr'

data/lib/generators/kit/templates/kit_jsx.erb.tt

@@ -38,7 +38,7 @@ props_names = @kit_props.keys.map do |key|
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type <%= type_name %> = {
   <%= break_lines.call(props_types) %>
@@ -51,7 +51,7 @@ const <%= @kit_name_pascal %> = (props: <%= type_name %>) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), className, spacing(props))
+  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), className, globalProps(props))
 
   return (
     <div

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "6.0.1"
+  VERSION = "6.1.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.0.1
+  version: 6.1.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-30 00:00:00.000000000 Z
+date: 2020-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -522,6 +522,21 @@ files:
 - 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
+- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
+- app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
+- app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb
+- app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx
+- app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
+- app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
+- app/pb_kits/playbook/pb_button_toolbar/docs/index.js
 - app/pb_kits/playbook/pb_caption/_caption.html.erb
 - app/pb_kits/playbook/pb_caption/_caption.jsx
 - app/pb_kits/playbook/pb_caption/_caption.scss
@@ -665,6 +680,29 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
+- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
+- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/example.yml
+- app/pb_kits/playbook/pb_date_picker/docs/index.js
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -830,6 +868,7 @@ files:
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
+- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb
@@ -846,6 +885,31 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
+- app/pb_kits/playbook/pb_gauge/_gauge.html.erb
+- app/pb_kits/playbook/pb_gauge/_gauge.jsx
+- app/pb_kits/playbook/pb_gauge/_gauge.scss
+- 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
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
+- app/pb_kits/playbook/pb_gauge/docs/example.yml
+- app/pb_kits/playbook/pb_gauge/docs/index.js
+- app/pb_kits/playbook/pb_gauge/gauge.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
@@ -1097,6 +1161,7 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
+- app/pb_kits/playbook/pb_logistic/_logistic.jsx
 - app/pb_kits/playbook/pb_message/_message.html.erb
 - app/pb_kits/playbook/pb_message/_message.jsx
 - app/pb_kits/playbook/pb_message/_message.scss
@@ -1529,9 +1594,13 @@ files:
 - app/pb_kits/playbook/pb_time/_time.scss
 - app/pb_kits/playbook/pb_time/docs/_description.md
 - app/pb_kits/playbook/pb_time/docs/_footer.md
+- app/pb_kits/playbook/pb_time/docs/_time_align.jsx
+- app/pb_kits/playbook/pb_time/docs/_time_dark.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.html.erb
+- app/pb_kits/playbook/pb_time/docs/_time_default.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_default.md
 - app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb
+- app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx
 - app/pb_kits/playbook/pb_time/docs/example.yml
 - app/pb_kits/playbook/pb_time/docs/index.js
 - app/pb_kits/playbook/pb_time/time.rb
@@ -1626,14 +1695,16 @@ files:
 - app/pb_kits/playbook/pb_toggle/_toggle.scss
 - app/pb_kits/playbook/pb_toggle/docs/_description.md
 - app/pb_kits/playbook/pb_toggle/docs/_footer.md
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_accessibility.jsx
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_checked.html.erb
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb
+- app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb
-- app/pb_kits/playbook/pb_toggle/docs/_toggle_data.jsx
+- app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb
+- app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx
+- app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb
+- app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
 - app/pb_kits/playbook/pb_toggle/toggle.rb
@@ -1733,8 +1804,8 @@ files:
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
+- app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/props.js
-- app/pb_kits/playbook/utilities/spacing.js
 - app/pb_kits/playbook/utilities/text.js
 - app/pb_kits/playbook/vendor.js
 - app/views/layouts/playbook/_mobile_hamburger.html.erb
@@ -1812,11 +1883,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System