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

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_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../..'
 
-const CircleIconButtonClick = () => (
+const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../../'
 
-const CircleIconButtonDefault = () => (
+const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="plus"
         variant="primary"
     />
@@ -11,6 +12,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="pen"
         variant="secondary"
     />
@@ -18,6 +20,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         disabled
         icon="times"
     />
@@ -25,6 +28,7 @@ const CircleIconButtonDefault = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="user"
         variant="link"
     />

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import { CircleIconButton } from '../../'
 
-const CircleIconButtonLink = () => (
+const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
+        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
@@ -13,6 +14,7 @@ const CircleIconButtonLink = () => (
     <br />
 
     <CircleIconButton
+        {...props}
         icon="window"
         link="https://google.com"
         newWindow

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

@@ -2,11 +2,9 @@ examples:
   
   rails:
   - circle_icon_button_default: Default
-  - circle_icon_button_dark: Dark
   - circle_icon_button_link: Link
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
-  - circle_icon_button_dark: Dark
   - circle_icon_button_link: Link

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

@@ -1,4 +1,3 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
-export { default as CircleIconButtonDark } from './_circle_icon_button_dark.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'

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_contact/docs/_contact_default.jsx

@@ -1,26 +1,31 @@
 import React from 'react'
 import { Contact } from '../../'
 
-const ContactDefault = () => {
+const ContactDefault = (props) => {
   return (
     <div>
       <Contact
+          {...props}
           contactType="cell"
           contactValue="349-185-9988"
       />
       <Contact
+          {...props}
           contactValue="5555555555"
       />
       <Contact
+          {...props}
           contactType="email"
           contactValue="email@example.com"
       />
       <Contact
+          {...props}
           contactType="work"
           contactValue="3245627482"
 
       />
       <Contact
+          {...props}
           contactType="work-cell"
           contactValue="3245627482"
       />

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,24 +1,28 @@
 import React from 'react'
 import { Contact } from '../../'
 
-const ContactDefault = () => {
+const ContactDefault = (props) => {
   return (
     <div>
       <Contact
+          {...props}
           contactDetail="Cell"
           contactType="cell"
           contactValue="349-185-9988"
       />
       <Contact
+          {...props}
           contactDetail="Home"
           contactValue="5555555555"
       />
       <Contact
+          {...props}
           contactDetail="Work"
           contactType="work"
           contactValue="3245627482"
       />
       <Contact
+          {...props}
           contactDetail="Work-Cell"
           contactType="work-cell"
           contactValue="3245627482"

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_currency/docs/_currency_large.jsx

@@ -1,14 +1,16 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyLarge = () => {
+const CurrencyLarge = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           size="lg"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -16,6 +18,7 @@ const CurrencyLarge = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"