playbook_ui 7.0.1.pre.alpha12 → 7.0.1.pre.alpha14

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/date.rb

@@ -13,6 +13,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm xs],
                   default: "sm"
+      prop :timezone, default: "America/New_York"
 
       def classname
         generate_classname("pb_date_kit")
@@ -33,7 +34,7 @@ module Playbook
     private
 
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(date, timezone)
       end
     end
   end

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -12,6 +12,13 @@
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: Date.new(2010, 11, 12),
   size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb

@@ -0,0 +1,51 @@
+<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/New_York"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "West Coast"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/Los_Angeles"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
+
+<%= pb_rails("date", props: {
+  date: Date.today,
+  timezone: "Australia/Sydney"
+}) %>
+<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
+
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Australia/Sydney"
+}) %>
+
+<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
+
+<br>
+
+<%= pb_rails("caption", props: { text: "String Dates"}) %>
+<%= pb_rails("date", props: {
+  date: "2012-08-02T00:49:29Z",
+}) %>
+
+<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md

@@ -0,0 +1,6 @@
+Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
+
+Don't care about timezones? Use `Date`.
+
+If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
+

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1 +1,3 @@
 Use to display the date. Year will not display if it is the current year.
+
+`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.

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

@@ -2,6 +2,7 @@ examples:
   
   rails:
   - date_default: Default
+  - date_timezone: Timezones
   
   
   react:

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

@@ -8,6 +8,7 @@ import { Icon, TextInput } from '../'
 import datePickerHelper from './date_picker_helper.js'
 
 type DatePickerProps = {
+  allowInput?: Boolean,
   aria?: object,
   className?: String,
   dark?: Boolean,
@@ -29,14 +30,15 @@ type DatePickerProps = {
   minDate: String,
   mode?: String,
   name: String,
+  onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  readOnly?: Boolean,
   type?: String,
   yearRange?: Array,
 }
 const DatePicker = (props: DatePickerProps) => {
   const {
+    allowInput = false,
     aria = {},
     className,
     dark = false,
@@ -58,9 +60,9 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
+    onChange = () => {},
     pickerId,
     placeholder,
-    readOnly = false,
     type,
     yearRange = [ 1900, 2100 ],
   } = props
@@ -69,13 +71,14 @@ const DatePicker = (props: DatePickerProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    className,
     globalProps(props),
     error ? 'error' : null,
+    className
   )
 
   useEffect(() => {
     datePickerHelper({
+      allowInput: allowInput,
       defaultDate: defaultDate,
       disableDate: disableDate,
       disableRange: disableRange,
@@ -85,8 +88,8 @@ const DatePicker = (props: DatePickerProps) => {
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
+      onChange: onChange,
       pickerId: pickerId,
-      readOnly: readOnly,
       yearRange: yearRange,
     })
   }, [])