playbook_ui 6.0.1.pre.alpha3 → 6.1.0

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

@@ -0,0 +1,31 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleCustom = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            className="my custom checkbox"
+            name="custom checkbox"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="ABC"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustom

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb

@@ -2,21 +2,21 @@
 
 <br>
 
-<%= pb_rails("caption", props: { text: "Male" }) %>
+<%= pb_rails("caption", props: { text: "Walk" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="male">
+  <input type="radio" name="modes of transportation" value="walk">
 <% end %>
 
 <br/>
 
-<%= pb_rails("caption", props: { text: "Female" }) %>
+<%= pb_rails("caption", props: { text: "Bike" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="female">
+  <input type="radio" name="modes of transportation" value="bike">
 <% end %>
 
 <br/>
 
-<%= pb_rails("caption", props: { text: "Other" }) %>
+<%= pb_rails("caption", props: { text: "Ride" }) %>
 <%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="gender" value="other">
+  <input type="radio" name="modes of transportation" value="ride">
 <% end %>

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

@@ -0,0 +1,72 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Caption, Title, Toggle } from '../..'
+
+const ToggleCustomRadio = () => {
+  const [choice, setChoice] = useState('walk')
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value)
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          text="Select one option:"
+      />
+
+      <br />
+
+      <Caption
+          text="Walk"
+      />
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="walk"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Bike"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="bike"
+        />
+      </Toggle>
+
+      <br />
+
+      <Caption
+          text="Ride"
+      />
+      <Toggle
+          size="sm"
+      >
+        <input
+            name="modes of transportation"
+            onChange={handleOnChange}
+            type="radio"
+            value="ride"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleCustomRadio

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb

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

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, {