playbook_ui 6.0.0 → 6.0.1.pre.alpha6

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing as spacingFunc } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
@@ -52,7 +52,7 @@ const Flex = (props: FlexProps) => {
           wrapClass
         ),
         className,
-        spacingFunc(props)
+        globalProps(props)
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type FlexItemPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   fixedSize: String,
@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, spacing(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,6 +24,7 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true, value: "test-val" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -27,6 +27,7 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
+  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
+  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,9 +14,11 @@ module Playbook
         prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+        # prepend(FormFieldBuilder.new(:check_box, kit_name: "checkbox"))
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
+        prepend(CheckboxField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -0,0 +1,26 @@
+# 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_form/form_builder/form_field_builder.rb

@@ -12,6 +12,7 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
+            options[:value] = props[:value]
 
             if props.key?(:validation)
               validation = props[:validation]

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar.jsx'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type FormPillProps = {
   className?: String,
@@ -19,7 +19,7 @@ const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
     [`pb_form_pill_kit_${'primary'}`, className],
-    spacing(props)
+    globalProps(props)
   )
   return (
     <div className={css}>

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

@@ -0,0 +1,12 @@
+<%= 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 %>
+

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -0,0 +1,110 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import { pbChart } from '../'
+import { globalProps } from '../utilities/globalProps'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type GaugeProps = {
+  aria: Object,
+  className?: String,
+  chartData?: Array,
+  data?: Object,
+  disableAnimation: Boolean,
+  fullCircle: Boolean,
+  height: String,
+  id?: String,
+  max: Number,
+  min: Number,
+  prefix: String,
+  showLabels: Boolean,
+  style: String,
+  suffix: String,
+  title: String,
+  tooltipHtml: String,
+}
+
+const Gauge = (props: GaugeProps) => {
+  const {
+    aria = {},
+    className,
+    chartData = [{ name: 'Name', value: 0 }],
+    data = {},
+    disableAnimation = false,
+    fullCircle = false,
+    height = null,
+    id,
+    max = 100,
+    min = 0,
+    prefix = '',
+    showLabels = false,
+    style = 'solidgauge',
+    suffix = '',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_gauge_kit': true,
+  })
+  // Runs first time component Renders
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj) => {
+      obj.y = obj.value
+      delete obj.value
+      return obj
+    })
+
+    new pbChart('.selector', {
+      id: id,
+      chartData: formattedChartData,
+      circumference: fullCircle ? [0, 360] : [-100, 100],
+      disableAnimation: disableAnimation,
+      height: height,
+      min: min,
+      max: max,
+      prefix: prefix,
+      title: title,
+      suffix: suffix,
+      showLabels: showLabels,
+      style: style,
+      tooltipHtml: tooltipHtml,
+      type: 'gauge',
+    })
+  }, [])
+
+  const componentDidMount = useRef(false)
+  // Doesn't run the first time but runs every subsequent render
+  useEffect(() => {
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart) => {
+        if (chart.renderTo.id === id) {
+          chart.series[0].setData([chartData[0].value])
+          chart.series[0].data[0].name = chartData[0].name
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  }, [chartData])
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className, globalProps(props))}
+        id={id}
+    />
+  )
+}
+
+export default Gauge

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -0,0 +1,11 @@
+[class^=pb_gauge_kit] {
+
+  .suffix {
+    fill: $text_lt_light;
+    font: $regular $font_larger $font_family_base;
+  }
+  .prefix {
+    fill: $text_lt_light;
+    font: $regular $font_base $font_family_base;
+  }
+}

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb

@@ -0,0 +1,11 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 45,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-default",
+  chart_data: data,
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Name', value: 45 },
+]
+
+const GaugeDefault = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+    />
+  </div>
+)
+
+export default GaugeDefault

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb

@@ -0,0 +1,12 @@
+<% data = [
+  {
+    name: 'Participants',
+    value: 84,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-disable-animation",
+  chart_data: data,
+  disable_animation: true,
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Participants', value: 84 },
+]
+
+const GaugeDisableAnimation = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        disableAnimation
+        id="gauge-disable-animation"
+    />
+  </div>
+)
+
+export default GaugeDisableAnimation

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Capacity',
+    value: 75,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "full-circle",
+  chart_data: data,
+  full_circle: true,
+  title: "Seating Capacity",
+  suffix: "%"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Capacity', value: 75 },
+]
+
+const GaugeFullCircle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        fullCircle
+        id="gauge-full-circle"
+        suffix="%"
+        title="Seating Capacity"
+    />
+  </div>
+)
+
+export default GaugeFullCircle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb

@@ -0,0 +1,15 @@
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-px",
+  chart_data: [{ name: "Pixels", value: 400 }],
+  height: '400',
+  title: "Fixed Height in Pixels",
+  suffix: "px"
+}) %>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-percent",
+  chart_data: [{ name: "Percentage", value: 45 }],
+  height: '45%',
+  title: "Height as Percentage of Width",
+  suffix: "%"
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const GaugeHeight = () => (
+  <div>
+    <Gauge
+        chartData={[ { name: 'Pixels', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+    />
+    <Gauge
+        chartData={[ { name: 'Percentage', value: 45 } ]}
+        height="45%"
+        id="gauge-height-percent"
+        suffix="%"
+        title="Height as Percentage of Width"
+    />
+  </div>
+)
+
+export default GaugeHeight

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Button, Gauge } from '../../'
+
+const GaugeLiveData = () => {
+  const [value, setValue] = useState(50)
+  const [name, setName] = useState('Name')
+
+  const updateValue = () => {
+    setValue(Math.floor(Math.random() * 100))
+  }
+  const updateName = () => {
+    let index = namesArray.indexOf(name)
+    if (namesArray.indexOf(name) == 5) {
+      index = 0
+    } else {
+      index += 1
+    }
+    setName(namesArray[index])
+  }
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <Button
+          onClick={updateName}
+          text="Update Name"
+      />
+      <Gauge
+          chartData={[{ name: name, value: value }]}
+          id="gauge-live-data"
+      />
+    </div>
+  )
+}
+
+export default GaugeLiveData