playbook_ui 6.0.1.pre.alpha6 → 6.0.1

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -7,7 +7,7 @@ import { Caption } from '../'
 
 import { buildCss, buildDataProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TimestampProps = {
   id?: String,
@@ -24,7 +24,7 @@ const Timestamp = (props: TimestampProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Caption

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
   aria?: object,
@@ -35,7 +35,7 @@ const Title = (props: TitleProps) => {
   const themeStyle = dark === true ? 'dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, globalProps(props))
+  const classes = classnames(buildCss('pb_title_kit', size, themeStyle, variant), className, spacing(props))
   const Tag = `${tag}`
 
   return (

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import { Body, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleCountProps = {
   align: "center" | "left" | "right",
@@ -32,7 +32,7 @@ const TitleCount = (props: TitleCountProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = classnames(buildCss('pb_title_count_kit', align, size), className, globalProps(props))
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, spacing(props))
 
   const formatCount = count.toLocaleString()
 

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import { Body, Title } from '../'
 
@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Title

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -11,7 +11,7 @@ import {
   noop,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type Props = {
   aria: object,
@@ -51,7 +51,7 @@ const Toggle = ({
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props))}
+        className={classnames(css, spacing(props))}
     >
       <label className="pb_toggle_wrapper">
         <input

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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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}`, globalProps(props))}>
+    <div className={classnames(`pb_user_kit_${align}_${orientation}_${size}`, spacing(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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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}`, globalProps(props))}>
+    <div className={classnames(`pb_user_badge_kit_${size}`, spacing(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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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,
-        globalProps(props)
+        spacing(props)
       )}
     >
       <Caption dark={dark}>{getDayOfWeek(date, compact)}</Caption>

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

@@ -4,8 +4,6 @@ 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) => {
@@ -69,83 +67,11 @@ 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,16 +43,11 @@ 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
 
@@ -86,7 +81,6 @@ 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/props.js

@@ -46,4 +46,3 @@ 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/utilities/{globalProps.js → spacing.js}

@@ -1,5 +1,4 @@
-// Prop categories
-const spacingProps = ({
+export const spacing = ({
   marginRight,
   marginLeft,
   marginTop,
@@ -32,15 +31,3 @@ const spacingProps = ({
   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/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 { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.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, globalProps(props))
+  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), className, spacing(props))
 
   return (
     <div

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.0.1.pre.alpha6
+  version: 6.0.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-06 00:00:00.000000000 Z
+date: 2020-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -829,7 +829,6 @@ files:
 - app/pb_kits/playbook/pb_form/form/simple_form_form.rb
 - 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/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_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
@@ -847,31 +846,6 @@ 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
@@ -1123,7 +1097,6 @@ 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
@@ -1760,8 +1733,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
@@ -1839,12 +1812,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbForm
-    module FormBuilder
-      module CheckboxField
-        def check_box(name, data: {}, props: {})
-          value = props[:value] ||= 1
-          input = super(name, { required: props[:required], data: data }, value)
-          label_text = name.to_s.gsub("_", " ")
-
-          if props[:label]
-            @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
-              @template.pb_rails("checkbox", props: props) do
-                input
-              end
-          else
-            @template.pb_rails("checkbox", props: props) do
-              input
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb

@@ -1,12 +0,0 @@
-<%= content_tag(:div, "",
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
-