playbook_ui 6.5.0 → 6.7.0

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

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
@@ -76,6 +78,7 @@ const DatePicker = (props: DatePickerProps) => {
 
   useEffect(() => {
     datePickerHelper({
+      allowInput: allowInput,
       defaultDate: defaultDate,
       disableDate: disableDate,
       disableRange: disableRange,
@@ -86,7 +89,6 @@ const DatePicker = (props: DatePickerProps) => {
       minDate: minDate,
       mode: mode,
       pickerId: pickerId,
-      readOnly: readOnly,
       yearRange: yearRange,
     })
   }, [])
@@ -124,6 +126,7 @@ 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.scss

@@ -31,7 +31,3 @@
     }
   }
 }
-// Ensures picker remains visible inside filter kit
-.pb_popover_body {
-  overflow: visible !important;
-}

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -7,6 +7,8 @@ module Playbook
 
       partial "pb_date_picker/date_picker"
 
+      prop :allow_input, type: Playbook::Props::Boolean,
+                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,
@@ -40,8 +42,6 @@ module Playbook
       prop :picker_id, type: Playbook::Props::String,
                        required: true
       prop :placeholder, type: Playbook::Props::String
-      prop :read_only, type: Playbook::Props::Boolean,
-                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :type, type: Playbook::Props::String
@@ -54,6 +54,7 @@ module Playbook
 
       def date_picker_config
         {
+          allowInput: allow_input,
           defaultDate: default_date,
           disableDate: disable_date,
           disableRange: disable_range,
@@ -64,7 +65,6 @@ module Playbook
           minDate: min_date,
           mode: mode,
           pickerId: picker_id,
-          readOnly: read_only,
           yearRange: year_range,
         }.to_json.html_safe
       end

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

@@ -2,17 +2,16 @@ import flatpickr from 'flatpickr'
 
 const datePickerHelper = (config) => {
   const {
+    allowInput,
     defaultDate,
     disableDate,
     disableRange,
     disableWeekdays,
     format,
-    hideIcon,
     maxDate,
     minDate,
     mode,
     pickerId,
-    readOnly,
     yearRange,
   } = config
 
@@ -65,7 +64,6 @@ const datePickerHelper = (config) => {
 
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    allowInput: !readOnly,
     dateFormat: format,
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
@@ -141,13 +139,6 @@ const datePickerHelper = (config) => {
   }
   picker.config.onYearChange.push(yearChangeHook)
 
-  // click handling for Calendar Icon
-  if (!hideIcon){
-    document.querySelector(`#cal-icon-${pickerId}`).addEventListener('click', () => {
-      picker.toggle()
-    })
-  }
-
   // Adding dropdown icons to year and month selects
   picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
@@ -166,6 +157,9 @@ const datePickerHelper = (config) => {
       dropdown.value = picker.currentYear
     }
   })
+  if (allowInput){
+    picker.input.removeAttribute('readonly')
+  }
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_date_picker/docs/{_date_picker_read_only.html.erb → _date_picker_allow_input.html.erb}

@@ -1,4 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  read_only: true,
+  allow_input: true,
   picker_id: "date-picker-read-only"
 }) %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../..'
+
+const DatePickerAllowInput = () => (
+  <div>
+    <DatePicker
+        allowInput
+        pickerId="date-picker-read-only"
+    />
+  </div>
+)
+
+export default DatePickerAllowInput

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

@@ -0,0 +1 @@
+By default the date picker input can only be modified by picking a date on the calendar.  This prop allows your users to manually type in the date.

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

@@ -12,7 +12,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  - date_picker_read_only: Read Only
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
   - date_picker_dark: Dark
   
@@ -29,7 +29,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  - date_picker_read_only: Read Only
+  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
   - date_picker_dark: Dark