playbook_ui 6.5.2 → 6.8.0

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"

data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyMedium = () => {
+const CurrencyMedium = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="md"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencyMedium = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = () => {
+const CurrencySmall = (props) => {
   return (
     <>
       <Currency
+          {...props}
           amount="2,000.50"
           label="Caption"
           size="sm"
       />
       <Currency
+          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -17,6 +19,7 @@ const CurrencySmall = () => {
           symbol="€"
       />
       <Currency
+          {...props}
           align="right"
           amount="45"
           label="Caption"

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

@@ -4,9 +4,8 @@ examples:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark
+
   react:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-  - currency_dark: Dark

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

@@ -1,4 +1,3 @@
 export { default as CurrencySmall } from './_currency_small.jsx'
 export { default as CurrencyLarge } from './_currency_large.jsx'
 export { default as CurrencyMedium } from './_currency_medium.jsx'
-export { default as CurrencyDark } from './_currency_dark.jsx'

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_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueAlign = () => {
+const DashboardValueAlign = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
@@ -24,6 +26,7 @@ const DashboardValueAlign = () => {
       <br />
 
       <DashboardValue
+          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueDefault = () => {
+const DashboardValueDefault = (props) => {
   return (
     <div>
       <DashboardValue
+          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -14,6 +15,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
@@ -23,6 +25,7 @@ const DashboardValueDefault = () => {
       <br />
 
       <DashboardValue
+          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}

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."}) %>