playbook_ui 6.7.0 → 6.8.0

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { Button, CircleChart } from '../../'
+
+const CircleChartLiveData = () => {
+  const [data, setData] = useState([
+    {
+      name: 'Waiting for Calls',
+      value: 41,
+    },
+    {
+      name: 'On Call',
+      value: 49,
+    },
+    {
+      name: 'After call',
+      value: 10,
+    },
+  ])
+
+  const data2 = [
+    {
+      name: 'Waiting for Calls',
+      value: 48,
+    },
+    {
+      name: 'On Call',
+      value: 12,
+    },
+    {
+      name: 'After call',
+      value: 140,
+    },
+  ]
+
+  const updateValue = () => {
+    setData(data2)
+  }
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+      />
+      <CircleChart
+          chartData={data}
+          id="circle-chart-live-data"
+      />
+    </div>
+  )
+}
+
+export default CircleChartLiveData

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataRounded = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartRounded = () => (
+  <div>
+    <CircleChart
+        chartData={dataRounded}
+        id="default-test-rounded"
+        innerSize="lg"
+        rounded
+    />
+  </div>
+)
+
+export default CircleChartRounded

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithLabels = [
+  {
+    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 CircleChartWithLabels = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithLabels}
+        dataLabels
+        id="with-labels-example"
+    />
+  </div>
+)
+
+export default CircleChartWithLabels

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithLegend = [{
+  name: 'Bugs',
+  value: 8,
+
+},
+{
+  name: 'Chores',
+  value: 1,
+
+},
+{
+  name: 'Stories',
+  value: 12,
+},
+]
+
+const CircleChartWithLegendKit = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithLegend}
+        id="with-legend-example"
+        legend
+    />
+  </div>
+)
+
+export default CircleChartWithLegendKit

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { CircleChart } from '../../'
+
+const dataWithTitle = [
+  {
+    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 CircleChartWithLegendKit = () => (
+  <div>
+    <CircleChart
+        chartData={dataWithTitle}
+        id="with-title-example"
+        title="Active Users on Social Media"
+    />
+  </div>
+)
+
+export default CircleChartWithLegendKit

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

@@ -10,4 +10,15 @@ examples:
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 
+  react:
+  - circle_chart_default: Default Style
+  - circle_chart_live_data: Live Data
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
+  - circle_chart_with_labels: Data Labels
+  - circle_chart_with_legend_kit: Legend
+  - circle_chart_with_title: Title
+  - circle_chart_inner_sizes: Inner Circle Size Options  
+
 

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

@@ -0,0 +1,9 @@
+export { default as CircleChartDefault } from './_circle_chart_default.jsx'
+export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
+export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
+export { default as CircleChartBlock } from './_circle_chart_block.jsx'
+export { default as CircleChartColors } from './_circle_chart_colors.jsx'
+export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
+export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
+export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
+export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -46,7 +46,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_circle_icon_button_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -58,7 +58,11 @@ const Contact = (props: ContactProps) => {
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_contact_kit'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_contact_kit'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -45,7 +45,11 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_currency_kit', align, size, { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_currency_kit', align, size, { dark }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -41,7 +41,11 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_dashboard_value_kit', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -71,9 +71,9 @@ const DatePicker = (props: DatePickerProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    className,
     globalProps(props),
     error ? 'error' : null,
+    className
   )
 
   useEffect(() => {
@@ -88,6 +88,7 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
+      onChange: onChange,
       pickerId: pickerId,
       yearRange: yearRange,
     })
@@ -126,7 +127,6 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={onChange}
             placeholder={placeholder}
             type={type}
         />

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -11,6 +11,7 @@ const datePickerHelper = (config) => {
     maxDate,
     minDate,
     mode,
+    onChange,
     pickerId,
     yearRange,
   } = config
@@ -99,6 +100,9 @@ const datePickerHelper = (config) => {
     onClose: [() => {
       window.removeEventListener('resize', calendarResizer)
     }],
+    onChange: [(selectedDates, dateStr) => {
+      onChange(dateStr, selectedDates)
+    }],
     onYearChange: [],
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import { DatePicker, LabelValue } from '../..'
+
+const DatePickerOnChange = () => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const changeHandler = (dateStr, selectedDates) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+  return (
+    <div>
+      <DatePicker
+          defaultDate={dateString}
+          marginBottom="lg"
+          onChange={changeHandler}
+          pickerId="date-picker-onchange"
+      />
+      <LabelValue
+          label="Date Object"
+          marginBottom="lg"
+          value={dateObj[0] ? dateObj[0].toString() : ''}
+      />
+      <LabelValue
+          label="Date String"
+          value={dateString}
+      />
+    </div>
+  )
+}
+export default DatePickerOnChange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -0,0 +1,3 @@
+Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

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

@@ -23,6 +23,7 @@ examples:
   - date_picker_default_date: Default Date
   - date_picker_input: Input Field
   - date_picker_label: Label
+  - date_picker_on_change: onChange
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates

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

@@ -3,6 +3,7 @@ export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
 export { default as DatePickerInput } from './_date_picker_input.jsx'
 export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
 export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerOnChange } from './_date_picker_on_change.jsx'
 export { default as DatePickerRange } from './_date_picker_range.jsx'
 export { default as DatePickerFormat } from './_date_picker_format.jsx'
 export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -18,7 +18,11 @@ type DateRangeStackedProps = {
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_range_stacked'),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
-    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -20,7 +20,11 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_year_stacked', align),
+    globalProps(props),
+    className
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]