playbook_ui 6.0.1.pre.alpha3 → 6.1.0.pre.alpha1

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

@@ -50,7 +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.date_picker :example_date_picker_field, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker3" } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -50,7 +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.date_picker :example_date_picker_field, props: { default_date: 'blank', name: "example[example_date_picker]", picker_id: "example_example_date_picker4", required: true } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -25,7 +25,14 @@ module Playbook
 
         #   @template.pb_rails("date_picker", props: props)
         # end
-        def date_picker(_name, props: {})
+        def date_picker(name, props: {})
+          prefix = @object_name
+          html_attribute_name = "#{prefix}[#{name}]"
+          html_id = "#{prefix}_#{name}"
+
+          props[:name] = html_attribute_name
+          props[:picker_id] = html_id
+
           @template.pb_rails("date_picker", props: props)
         end
       end

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

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

@@ -0,0 +1,15 @@
+<% data = [
+  {
+    name: 'Rating',
+    value: 4.5,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-min-max",
+  chart_data: data,
+  min: 0,
+  max: 5,
+  show_labels: true,
+  title: "Product Rating"
+}) %>

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [{
+  name: 'Rating', value: 4.5,
+}]
+
+const GaugeMinMax = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-min-max"
+        max={5}
+        min={0}
+        showLabels
+        title="Product Rating"
+    />
+  </div>
+)
+
+export default GaugeMinMax

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md

@@ -0,0 +1 @@
+### Min defaults to 0, Max to 100.

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

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: {wrap: true}) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "400px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing4",
+        chart_data: [{ name: "Point 1", value: 100 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "300px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing3",
+        chart_data: [{ name: "Point 2", value: 75 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "200px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing2",
+        chart_data: [{ name: "Point 3", value: 50 }],
+      }) %>
+  <% end %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "125px"}) do %>
+      <%= pb_rails("gauge", props: {
+        id: "gauge-sizing1",
+        chart_data: [{ name: "Point 4", value: 25 }],
+      }) %>
+  <% end %>
+<% end %>