playbook_ui 6.1.0 → 6.4.0

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

@@ -0,0 +1,3 @@
+*Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
+
+To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'`

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/_date_variants.html.erb

@@ -0,0 +1,27 @@
+<div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_day_of_week: true
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateVariants = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="1995-12-25"
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          date="1995-12-25"
+          showIcon
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          date="1995-12-25"
+          showDayOfWeek
+      />
+
+      <br />
+      <br />
+
+      <FormattedDate
+          date="1995-12-25"
+          showDayOfWeek
+          showIcon
+      />
+    </div>
+  )
+}
+
+export default DateVariants

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,8 +2,12 @@ examples:
   
   rails:
   - date_default: Default
-  
+  - date_timezone: Timezones
+  - date_variants: Variants
+  - date_alignment: Alignment
   
   react:
-  - date_default: Default
+  - date_default_react: Default
+  - date_variants: Variants
+  - date_alignment: Alignment
   

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

@@ -1 +1,3 @@
-export { default as DateDefault } from './_date_default.jsx'
+export { default as DateDefaultReact } from './_date_default_react.jsx'
+export { default as DateVariants } from './_date_variants.jsx'
+export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -7,11 +7,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DateRangeInlineProps = {
-  className?: String,
-  data?: String,
-  endDate?: Date,
-  id?: String,
-  startDate?: Date,
+  className?: string,
+  data?: string,
+  endDate?: date,
+  id?: string,
+  startDate?: date,
 }
 
 const dateTimestamp = (dateValue) => {

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

@@ -8,12 +8,12 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 
 type DateRangeStackedProps = {
-  className?: String | Array<String>,
-  data?: String,
-  dark?: Boolean,
-  endDate: String,
-  id?: String,
-  startDate: String,
+  className?: string | array<string>,
+  data?: string,
+  dark?: boolean,
+  endDate: string,
+  id?: string,
+  startDate: string,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {

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

@@ -9,13 +9,13 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
   size?: "sm" | "md",
-  id?: String,
-  reverse?: Boolean,
+  id?: string,
+  reverse?: boolean,
 }
 
 const sizes = {

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -5,10 +5,10 @@ import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DateTimeStackedProps = {
-  data?: String,
-  id?: String,
-  date: Date,
-  dark: Boolean,
+  data?: string,
+  id?: string,
+  date: date,
+  dark: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -5,7 +5,7 @@ const DateTimeStackedDark = () => (
   <div>
     <DateTimeStacked
         dark
-        date={new Date}
+        date={new Date()}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -3,7 +3,7 @@ import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = () => (
   <div>
-    <DateTimeStacked date={new Date} />
+    <DateTimeStacked date={new Date()} />
   </div>
 )
 

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

@@ -10,11 +10,11 @@ import { Body, Title } from '../'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -5,11 +5,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DistributionBarProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   size?: "lg" | "sm",
-  widths?: Array<Number>,
+  widths?: array<number>,
 }
 
 const normalizeCharacters = (widths) => {

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -11,8 +11,8 @@ import type { Callback } from '../types.js'
 import { Body, Card } from '..'
 
 type FileUploadProps = {
-  accept?: Array<String>,
-  className?: String,
+  accept?: array<string>,
+  className?: string,
   onFilesAccepted: Callback,
 }
 
@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
+        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
         {...getRootProps()}
     >
       <Card>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -13,11 +13,11 @@ const iconMap = {
 }
 
 type FixedConfirmationToastProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   status?: "success" | "error" | "neutral" | "tip",
-  text: String,
+  text: string,
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Error Message",
+  status: "error"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../..'
+
+const FixedConfirmationToastDark = () => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="error"
+            text="Error Message"
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="success"
+            text="Items Successfully Moved"
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastDark

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
+  status: "tip",
+}) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastMultiLineDark = () => {
+  return (
+    <div>
+      <FixedConfirmationToast
+          dark
+          status="tip"
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastMultiLineDark

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

@@ -3,9 +3,12 @@ examples:
   rails:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
-  
+  - fixed_confirmation_toast_dark: Dark
+  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
+  - fixed_confirmation_toast_dark: Dark
+  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   

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

@@ -1,2 +1,4 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
+export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
+export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -5,16 +5,16 @@ import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   horizontal?: "left" | "center" | "right" | "stretch",
-  id?: String,
-  inline?: Boolean,
+  id?: string,
+  inline?: boolean,
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
-  reverse?: Boolean,
+  reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch",
-  wrap?: Boolean,
+  wrap?: boolean,
 }
 
 const Flex = (props: FlexProps) => {