playbook_ui 6.2.0 → 7.0.0.pre.alpha3

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,2 +1,27 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
+
+[class^=pb_date_kit] {  
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    > div {
+        margin-right: 4px !important;
+    }
+
+    &[class*=_center] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px !important;
+    }
+
+    &[class*=_right] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        margin-left: 4px !important;
+    }
+}

data/app/pb_kits/playbook/pb_date/date.rb

@@ -10,30 +10,39 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg sm xs],
-                  default: "sm"
+      prop :timezone, default: "America/New_York"
+      prop :alignment, type: Playbook::Props::Enum,
+                       values: %w[left center right],
+                       default: "left"
+      prop :show_icon, type: Playbook::Props::Boolean,
+                       default: false
+      prop :show_day_of_week, type: Playbook::Props::Boolean,
+                              default: false
 
       def classname
-        generate_classname("pb_date_kit")
+        generate_classname("pb_date_kit", alignment)
       end
 
-      def xs_date
-        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
+      def date_day_of_week
+        pb_date_time.to_day_of_week
       end
 
-      def lg_date
-        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
+      def day
+        pb_date_time.to_day
       end
 
-      def sm_date
-        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
+      def month
+        pb_date_time.to_month.capitalize
+      end
+
+      def year
+        pb_date_time.to_year
       end
 
     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_alignment.html.erb

@@ -0,0 +1,24 @@
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "center"
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "right"
+  }) %>

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

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateAlignment = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="1995-12-25"
+          dayOfWeek
+          icon
+      />
+
+      <br />
+
+      <FormattedDate
+          alignment="center"
+          date="2020-12-25"
+          dayOfWeek
+          icon
+      />
+
+      <br />
+
+      <FormattedDate
+          alignment="right"
+          date={new Date()}
+      />
+    </div>
+  )
+}
+
+export default DateAlignment

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

@@ -1,17 +1,9 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "lg"
 }) %>
 
-<br>
-
-<%= pb_rails("date", props: {
-  date: DateTime.now
-}) %>
-
-<br>
+<br />
 
 <%= pb_rails("date", props: {
   date: "2012-08-02T15:49:29Z",
-  size: "xs"
 }) %>

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

@@ -1,25 +1,15 @@
 import React from 'react'
-import { Date } from '../../'
+import { Date as FormattedDate } from '../../'
 
 const DateDefault = () => {
   return (
     <div>
-      <Date
-          size="lg"
-          value="1995-12-25"
+      <FormattedDate
+          date="2012-12-25"
       />
 
-      <br />
-
-      <Date
-          value="17 Mar 69"
-      />
-
-      <br />
-
-      <Date
-          size="xs"
-          value="2020-04-20T04:20:00.000Z"
+      <FormattedDate
+          date={new Date()}
       />
     </div>
   )

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+
+const DateDefault = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="2012-12-25"
+      />
+
+      <br />
+
+      <FormattedDate
+          date={new Date()}
+      />
+    </div>
+  )
+}
+
+export default DateDefault

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,13 @@ examples:
   
   rails:
   - date_default: Default
+  - date_timezone: Timezones
   
+  - date_variants: Variants
+  - date_alignment: Alignment
   
   react:
   - date_default: 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 DateVariants } from './_date_variants.jsx'
+export { default as DateAlignment } from './_date_alignment.jsx'

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

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

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/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