playbook_ui 8.0.0.pre.alpha4 → 8.2.0.pre.alpha1

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss

@@ -1,3 +1,21 @@
 @import "../pb_title/title";
 @import "../pb_caption/caption";
 @import "../tokens/colors";
+
+[class^=pb_time_stacked_kit] {
+ &[class*=_center]  {
+   text-align: center;
+ }
+
+ &[class*=_right]  {
+   text-align: right;
+ }
+
+}
+
+.time-spacing {
+  time {
+    display: inline-grid;
+    margin-bottom: $space_xs - 6px;
+  }
+}

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb

@@ -1,5 +1,18 @@
-<%= pb_rails("time_stacked", props: { date: DateTime.now }) %>
-<br/>
-<%= pb_rails("time_stacked", props: { align: "center", date: DateTime.now }) %>
-<br/>
-<%= pb_rails("time_stacked", props: { align: "right", date: DateTime.now }) %>
+<%= pb_rails("time_stacked", props: {
+  time: DateTime.now,
+  align: "left",
+}) %>
+
+<br>
+
+<%= pb_rails("time_stacked", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("time_stacked", props: {
+  time: Time.now,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx

@@ -5,18 +5,23 @@ const TimeStackedDefault = (props) => {
   return (
     <div>
       <TimeStacked
+          time={new Date()}
+          timeZone="America/New_York"
           {...props}
-          date={new Date()}
       />
+      <br />
       <TimeStacked
-          {...props}
           align="center"
-          date={new Date()}
+          time={new Date()}
+          timeZone="America/New_York"
+          {...props}
       />
+      <br />
       <TimeStacked
-          {...props}
           align="right"
-          date={new Date()}
+          time={new Date()}
+          timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,8 +1,12 @@
 <%= content_tag(:div,
-    align: object.align,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-      <%= pb_rails("body", props: { text: object.format_time_string, color: "light" }) %>
-      <%= pb_rails("caption", props: { text: object.format_timezone, color: "light" }) %>
+
+    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+      <time>
+        <%= object.format_time_string %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+      </time>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb

@@ -3,49 +3,27 @@
 module Playbook
   module PbTimeStacked
     class TimeStacked < Playbook::KitBase
+      prop :time, required: true
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :classnames, type: Playbook::Props::String,
-                        default: nil
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :date, type: Playbook::Props::Date, required: true
+      prop :timezone, default: "America/New_York"
 
       def classname
-        generate_classname("pb_time_stacked_kit", dark_class)
-      end
-
-      def day
-        day = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: day.to_iso) do
-          day.to_day.to_s
-        end
-      end
-
-      def month
-        month = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: month.to_iso) do
-          month.to_month.to_s
-        end
+        # convert deprecated prop values
+        generate_classname("pb_time_stacked_kit", align)
       end
 
       def format_time_string
-        "#{pb_date_time.to_full_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
+        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
       end
 
-      def format_timezone
-        pb_date_time.to_timezone
-      end
-
-    private
-
-      def dark_class
-        dark ? "dark" : nil
+      def format_timezone_string
+        pb_date_time.to_timezone.to_s
       end
 
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(time, timezone)
       end
     end
   end

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js

@@ -0,0 +1,33 @@
+import { renderKit, screen } from '../utilities/test-utils'
+
+import TimeStacked from './_time_stacked'
+
+/*eslint no-multiple-empty-lines: 0*/
+
+test('returns the namespaced class', () => {
+  const props = {
+    data: { testid: 'default' },
+    time: new Date,
+  }
+
+  renderKit(TimeStacked, props)
+  expect(screen.getByTestId('default')).toHaveClass('pb_time_stacked_kit_left')
+
+  renderKit(TimeStacked, props, {
+    align: 'center',
+    data: { testid: 'center' },
+  })
+  expect(screen.getByTestId('center')).toHaveClass('pb_time_stacked_kit_center')
+
+  renderKit(TimeStacked, props, {
+    align: 'right',
+    data: { testid: 'right' },
+  })
+  expect(screen.getByTestId('right')).toHaveClass('pb_time_stacked_kit_right')
+
+  renderKit(TimeStacked, props, {
+    dark: true,
+    data: { testid: 'dark' },
+  })
+  expect(screen.getByTestId('dark')).toHaveClass('pb_time_stacked_kit_left dark')
+})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -46,7 +46,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       content: " ";
       position: absolute;
       top: 100%;
-      left: 50%;
+      left: calc(50% - 10px);
       border-color: $white transparent transparent transparent;
       border-style: solid;
       border-width: 10px;
@@ -95,9 +95,10 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
     margin: 0 0 0 $space_sm;
     .arrow {
-      left: -#{$space_xs};
-      top: $arrow_vertical_offset;
+      left: -18px;
+      right: auto;
       margin-bottom: 0;
+      top: $arrow_vertical_offset;
       transform: rotate(90deg);
     }
     &.flipped .arrow {

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,7 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
-import colors from '../tokens/_colors.scss'
+import colors from '../tokens/exports/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
 import highchartsMore from 'highcharts/highcharts-more.js'

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -32,13 +32,3 @@ $border_radius: (
   border_radius_none:    $border_radius_none,
   border_radius_rounded: $border_radius_rounded
 );
-
-
-:export {
-  @mixin export_border_radius($border_radius_list) {
-    @each $name, $size in $border_radius_list {
-      #{$name}: $size;
-    }
-  }
-  @include export_border_radius($border_radius);
-}

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -250,28 +250,3 @@ $transparent: transparent;
   background: linear-gradient(135deg,  $start 0%, $end 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1);
 }
-
-:export {
-  @mixin export-colors($colors-list) {
-    @each $name, $color in $colors-list {
-      #{$name}: $color;
-    }
-  }
-  @include export-colors($product_colors);
-  @include export-colors($status_colors);
-  @include export-colors($data_colors);
-  @include export-colors($shadow_colors);
-  @include export-colors($colors);
-  @include export-colors($interface_colors);
-  @include export-colors($main_colors);
-  @include export-colors($background_colors);
-  @include export-colors($card_colors);
-  @include export-colors($active_colors);
-  @include export-colors($action_colors);
-  @include export-colors($hover_colors);
-  @include export-colors($border_colors);
-  @include export-colors($text_colors);
-  @include export-colors($category_colors);
-  gradient_start: $gradient_start;
-  gradient_end: $gradient_end;
-}

data/app/pb_kits/playbook/tokens/_line_height.scss

@@ -14,12 +14,3 @@ $line_height: (
   looser: $lh_looser,
   loosest: $lh_loosest
 );
-
-:export {
-  @mixin export_line_height($line_height_list) {
-    @each $name, $settings in $line_height_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_line_height($line_height);
-}

data/app/pb_kits/playbook/tokens/_opacity.scss

@@ -19,12 +19,3 @@ $opacity: (
   opacity_8: $opacity_8,
   opacity_9: $opacity_9,
 );
-
-:export {
-  @mixin export_opacity($opacity_list) {
-    @each $name, $settings in $opacity_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_opacity($opacity);
-}

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -34,12 +34,3 @@ $offscreen: -9999px;
   }
   @return map-get($z_layers, $layer);
 }
-
-:export {
-  @mixin export_z_index($z_index_list) {
-    @each $name, $settings in $z_index_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_z_index($z_index);
-}

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -28,12 +28,3 @@ $breakpoints: (
     @content;
   }
 }
-
-:export {
-  @mixin export_breakpoints($breakpoints_list) {
-    @each $name, $settings in $breakpoints_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_breakpoints($breakpoints);
-}

data/app/pb_kits/playbook/tokens/_shadows.scss

@@ -11,12 +11,3 @@ $box_shadows: (
   shadow_deeper: $shadow_deeper,
   shadow_deepest: $shadow_deepest
 );
-
-:export {
-  @mixin export_shadows($shadows_list) {
-    @each $name, $settings in $shadows_list {
-      #{$name}: $settings;
-    }
-  }
-  @include export_shadows($box_shadows);
-}

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -11,13 +11,3 @@ $spaces:(
   space_xl:   $space_xl,
   none: 0
 );
-
-
-:export {
-  @mixin export_spacing($spacing_list) {
-    @each $name, $size in $spacing_list {
-      #{$name}: $size;
-    }
-  }
-  @include export_spacing($spaces);
-}

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -62,28 +62,3 @@ $boldest:       800;
 $bolder:        700;
 $light:         300;
 $lighter:       100;
-
-
-
-:export {
-  font_family_base: $font_family_base;
-  text_jumbo: $text_jumbo;
-  text_largest: $text_largest;
-  text_larger: $text_larger;
-  text_large: $text_large;
-  text_base: $text_base;
-  text_default: $text_default;
-  text_normal: $text_normal;
-  text_medium: $text_medium;
-  text_small: $text_small;
-  text_smaller: $text_smaller;
-  text_smallest: $text_smallest;
-  heading_1: $heading_1;
-  heading_2: $heading_2;
-  heading_3: $heading_3;
-  heading_4: $heading_4;
-  lighter: $lighter;
-  light: $light;
-  bold: $bold;
-  regular: $regular;
-}

data/app/pb_kits/playbook/tokens/exports/_border_radius.scss

@@ -0,0 +1,10 @@
+@import "../border_radius";
+
+:export {
+  @mixin export_border_radius($border_radius_list) {
+    @each $name, $size in $border_radius_list {
+      #{$name}: $size;
+    }
+  }
+  @include export_border_radius($border_radius);
+}

data/app/pb_kits/playbook/tokens/exports/_colors.scss

@@ -0,0 +1,26 @@
+@import "../colors";
+
+:export {
+  @mixin export-colors($colors-list) {
+    @each $name, $color in $colors-list {
+      #{$name}: $color;
+    }
+  }
+  @include export-colors($product_colors);
+  @include export-colors($status_colors);
+  @include export-colors($data_colors);
+  @include export-colors($shadow_colors);
+  @include export-colors($colors);
+  @include export-colors($interface_colors);
+  @include export-colors($main_colors);
+  @include export-colors($background_colors);
+  @include export-colors($card_colors);
+  @include export-colors($active_colors);
+  @include export-colors($action_colors);
+  @include export-colors($hover_colors);
+  @include export-colors($border_colors);
+  @include export-colors($text_colors);
+  @include export-colors($category_colors);
+  gradient_start: $gradient_start;
+  gradient_end: $gradient_end;
+}

data/app/pb_kits/playbook/tokens/exports/_line_height.scss

@@ -0,0 +1,10 @@
+@import "../line_height";
+
+:export {
+  @mixin export_line_height($line_height_list) {
+    @each $name, $settings in $line_height_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_line_height($line_height);
+}

data/app/pb_kits/playbook/tokens/exports/_opacity.scss

@@ -0,0 +1,10 @@
+@import "../opacity";
+
+:export {
+  @mixin export_opacity($opacity_list) {
+    @each $name, $settings in $opacity_list {
+      #{$name}: $settings;
+    }
+  }
+  @include export_opacity($opacity);
+}