playbook_ui 6.3.1 → 6.4.0

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_react.jsx

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

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_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_form_pill/_form_pill.scss

@@ -18,13 +18,16 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
-      &:hover {
-        background-color: rgba($color_value, $opacity-2);
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($color_value, $opacity-2);
+        }
       }
       #{$selector}_text {
         color: $color_value;

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb

@@ -1 +1,3 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("body", props: { dark: true }) %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import { Icon } from '../../'
+import { Body, Icon } from '../../'
 
 const IconDefaultDark = () => {
   return (
     <div>
-      <Icon
-          fixedWidth
-          icon="user"
-      />
+      <Body dark>
+        <Icon
+            fixedWidth
+            icon="user"
+        />
+      </Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -45,11 +45,13 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
 
-      &:hover {
-        color: $primary;
-        #{$selector}_item_icon,
-        #{$selector}_item_text {
+      @media (hover:hover) {
+        &:hover {
           color: $primary;
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
         }
       }
     }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -46,13 +46,15 @@ $selector: ".pb_nav_list";
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
         [class*=_icon_left] {
@@ -110,13 +112,15 @@ $selector: ".pb_nav_list";
           flex: 1;
           font-weight: $regular;
         }
-        &:hover {
-          background-color: rgba($primary, 0.03);
-          [class*=_icon] {
-            color: $primary;
-          }
-          [class*=_text] {
-            color: $primary;
+        @media (hover:hover) {
+          &:hover {
+            background-color: rgba($primary, 0.03);
+            [class*=_icon] {
+              color: $primary;
+            }
+            [class*=_text] {
+              color: $primary;
+            }
           }
         }
       }