playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha11

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

@@ -1,7 +1,6 @@
 examples:
   rails:
   - card_light: Default
-  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
@@ -12,7 +11,6 @@ examples:
   - card_border_none: No Border
   react:
   - card_light: Default
-  - card_dark: Dark Cards
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected

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

@@ -6,5 +6,4 @@ export { default as CardPadding } from './_card_padding.jsx'
 export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
-export { default as CardDark } from './_card_dark.jsx'
 export { default as CardBorderNone } from './_card_border_none.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -40,8 +40,11 @@ const Checkbox = (props: CheckboxProps) => {
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_checkbox_kit',
-    { checked: checked, error: error }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_checkbox_kit', { checked, error }),
+    globalProps(props),
+    className
+  )
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :value
       prop :name
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
@@ -29,7 +31,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked)
+        check_box_tag(name, value, checked, input_options)
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxChecked = () => {
+const CheckboxChecked = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           checked
           name="checkbox-name"
           text="Checked Checkbox"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxCustom = () => {
+const CheckboxCustom = (props) => {
   const [checked, setChecked] = useState(false)
 
   const handleOnChange = () => {
@@ -14,7 +14,10 @@ const CheckboxCustom = () => {
       <br />
       <br />
       <div>
-        <Checkbox text="Toggle Me">
+        <Checkbox
+            {...props}
+            text="Toggle Me"
+        >
           <input
               checked={checked}
               name="custom-name"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../../'
 
-const CheckboxDefault = () => {
+const CheckboxDefault = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           name="default name"
           text="Checkbox label"
           value="default value"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Checkbox } from '../..'
 
-const CheckboxError = () => {
+const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
+          {...props}
           error
           name="default name"
           text="Checkbox label"

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("checkbox" , props: {
+  text: "Checkbox with Options",
+  input_options: {
+    id: "checkbox-id",
+    name: "checkbox-name",
+    value: "checkbox-value",
+    class: "checkbox-class",
+    checked: true
+  }
+}) %>

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

@@ -2,15 +2,12 @@ examples:
   rails:
     - checkbox_default: Default
     - checkbox_checked: Load as checked
-    - checkbox_dark: Dark
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
-    - checkbox_dark_error: Dark w/ Error
+    - checkbox_options: Checkbox w/ Options
 
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_dark: Dark
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
-  - checkbox_dark_error: Dark w/ Error

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

@@ -1,6 +1,4 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
-export { default as CheckboxDark } from './_checkbox_dark.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
-export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -15,7 +15,7 @@
   <% end %>
 
   <% if object.children %>
-    <div class="pb_circle_chart_block">
+    <div class="pb-circle-chart-block">
       <%= capture(&object.children) %>
     </div>
   <% end %>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -0,0 +1,130 @@
+/* @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, buildDataProps } from '../utilities/props'
+
+type CircleChartProps = {
+  aria: Object,
+  chartData?: array,
+  children: Node,
+  className?: string,
+  colors: array,
+  data?: Object,
+  dataLabelHtml: string,
+  dataLabels: boolean,
+  headerFormat: string,
+  id?: string,
+  innerSize: "sm" | "md" | "lg" | "none",
+  legend: boolean,
+  maxPointSize: number,
+  minPointSize: number,
+  rounded: boolean,
+  startAngle: number,
+  style: string,
+  title: string,
+  tooltipHtml: string,
+  useHtml: boolean,
+  zMin: number,
+}
+
+const CircleChart = (props: CircleChartProps) => {
+  const {
+    aria = {},
+    chartData = [{}],
+    children,
+    className,
+    colors = [],
+    data = {},
+    dataLabelHtml = '<div>{point.name}</div>',
+    dataLabels = false,
+    headerFormat = null,
+    id,
+    innerSize = 'md',
+    legend = false,
+    maxPointSize = null,
+    minPointSize = null,
+    rounded = false,
+    startAngle = null,
+    style = 'pie',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      '<b>{point.y}</b>',
+    useHtml = false,
+    zMin = null,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
+  const innerSizeFormat = (size) => innerSizes[size]
+  const roundedBorderWidth = rounded ? 20 : null
+  const roundedBorderColor = rounded ? null : ''
+
+  // Runs first time component Renders
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj) => {
+      obj.y = obj.value
+      delete obj.value
+      return obj
+    })
+
+    new pbChart('.selector', {
+      id,
+      colors,
+      borderColor: roundedBorderColor,
+      borderWidth: roundedBorderWidth,
+      chartData: formattedChartData,
+      title,
+      type: style,
+      showInLegend: legend,
+      dataLabelHtml,
+      dataLabels,
+      headerFormat,
+      tooltipHtml,
+      useHTML: useHtml,
+      minPointSize,
+      maxPointSize,
+      innerSize: innerSizeFormat(innerSize),
+      zMin,
+      startAngle,
+    })
+  }, [])
+
+  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) {
+          const updatedValueArray = chartData.map((obj) => {
+            return obj.value
+          })
+          chart.series[0].setData(updatedValueArray)
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  }, [chartData])
+  return (
+    <div id={`wrapper-circle-chart-${id}`}>
+      <div
+          id={id}
+          {...ariaProps}
+          {...dataProps}
+          className={classnames('pb_circle_chart', globalProps(props), className)}
+      />
+      <If condition={children}>
+        <div className="pb-circle-chart-block">{children}</div>
+      </If>
+    </div>
+  )
+}
+
+export default CircleChart

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss

@@ -5,7 +5,7 @@
 
 }
 
-.pb_circle_chart_block {
+.pb-circle-chart-block {
     position:absolute;
     display: flex;
     justify-content: center;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { CircleChart, Title } from '../../'
+
+const dataWithABlock = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartBlock = () => (
+
+  <div>
+    <CircleChart
+        chartData={dataWithABlock}
+        id="chart-with-a-block"
+        innerSize="lg"
+        marginTop="xl"
+        rounded
+    >
+      <Title
+          size={1}
+          tag="div"
+      >
+        {'83'}
+      </Title>
+    </CircleChart>
+  </div>
+)
+
+export default CircleChartBlock

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithColors = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartColors = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithColors}
+        colors={['data-6', 'data-4', 'data-2']}
+        id="colors-example"
+    />
+  </div>
+)
+
+export default CircleChartColors

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartDefault = () => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+    />
+  </div>
+)
+
+export default CircleChartDefault

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataFirst = [
+  {
+    name: 'Bugs',
+    value: 8,
+  },
+  {
+    name: 'Chores',
+    value: 1,
+  },
+  {
+    name: 'Stories',
+    value: 12,
+  },
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+]
+
+const dataThird = [
+  {
+    name: '1 Point Tickets',
+    value: 2,
+  },
+  {
+    name: '3 Point Tickets',
+    value: 5,
+  },
+  {
+    name: '5 Point Tickets',
+    value: 6,
+  },
+  {
+    name: '8 Point Tickets',
+    value: 3,
+  },
+  {
+    name: '13 Point Tickets',
+    value: 1,
+  },
+]
+const dataFourth = [
+  {
+    name: 'Facebook',
+    value: 2498,
+  },
+  {
+    name: 'YouTube',
+    value: 2000,
+  },
+  {
+    name: 'WhatsApp',
+    value: 2000,
+  },
+  {
+    name: 'Facebook Messenger',
+    value: 1300,
+  },
+  {
+    name: 'WeChat',
+    value: 1165,
+  },
+  {
+    name: 'Instagram',
+    value: 1000,
+  },
+  {
+    name: 'Tik Tok',
+    value: 800,
+  },
+]
+
+const CircleChartInnerSizes = () => (
+  <div>
+    <CircleChart
+        chartData={dataFirst}
+        id="with-innersize-sm"
+        innerSize="sm"
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="with-innersize-md"
+        innerSize="md"
+    />
+    <CircleChart
+        chartData={dataThird}
+        id="with-innersize-lg"
+        innerSize="lg"
+    />
+    <CircleChart
+        chartData={dataFourth}
+        className="poop"
+        id="with-innersize-none "
+        innerSize="none"
+    />
+  </div>
+)
+
+export default CircleChartInnerSizes