playbook_ui 9.10.0.pre.alpha2 → 9.10.0.pre.date.time.stacked.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 210dfcb2a5011173148bd19f95f1295fa55e69a26814da550b09e85b64025d81
-  data.tar.gz: 7b79476f36d303bcd6d992c5239c29faae33d8f1068674bbef0365af9ff6b9bc
+  metadata.gz: 27cd1418907251e1ac5b3f234dcbf01e8ee6ab30e179511e82139fe9a912cbf7
+  data.tar.gz: 8b37fe666405f0b156341f4bcbe7e338341800bf9b3b4c9f9793fcfca515211f
 SHA512:
-  metadata.gz: fd106f6e9df0b198ef6b46729612c215e0ce06e7e0228135b006a91b8a08bca39410558c62b993745596b6366331a2790301a7565afed611aec2da196c9290fe
-  data.tar.gz: 8892f5c04d2cfd31a6f229807a8a61c10f4eb059feefff3c6ec5b0ec2cbf8fd8cb2846227f5c395cc33ff9f411158e6dfd07cb30dfc3fa9880a5d30755c26a2a
+  metadata.gz: 32e94d16d64743934c313661b1f4e86f8cd8768cb9e52576fd10d4c089cd9ca2ece7ec13549cd6a37304d1afb1b137c56bb3acf03a950ac31166f1d277e8311d
+  data.tar.gz: 7a835ec81990710a3638f15f9a4ef1b9abdb57a942a9e993e718523cfe880c940febee3b4f1c02e0155de076032b3551550383d6018a198aab839519c00ff801

data/app/pb_kits/playbook/pb_background/background.rb

@@ -12,6 +12,7 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
+
       def classname
         generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -6,36 +6,37 @@ module Playbook
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
-                   values: %w[pie],
-                   default: "pie"
+                         values: %w[pie],
+                         default: "pie"
 
       prop :data_labels, type: Playbook::Props::Boolean, default: false
       prop :min_point_size, type: Playbook::Props::Numeric
       prop :max_point_size, type: Playbook::Props::Numeric
       prop :inner_size, type: Playbook::Props::Enum,
-                        values: %w[sm md lg none],
-                        default: "md"
+                              values: %w[sm md lg none],
+                              default: "md"
       prop :z_min, type: Playbook::Props::Numeric
       prop :start_angle, type: Playbook::Props::Numeric
       prop :header_format
-      prop :data_label_html, default: "<div>{point.name}</div>"
+      prop :data_label_html, default: '<div>{point.name}</div>'
       prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
                                       {point.name}: ' + '<b>{point.y}
                                     </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
-      prop :title, default: ""
+      prop :title, default: ''
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
 
+
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
       end
 
       def chart_data_formatted
-        chart_data.map { |hash| hash[:y] = hash.delete :value }
-        chart_data
+        chart_data.map{ |hash| hash[:y] = hash.delete :value}
+        return chart_data
       end
 
       def inner_size_format
@@ -56,7 +57,7 @@ module Playbook
       end
 
       def rounded_border_color
-        rounded == true ? "null" : nil
+        rounded == true ? 'null' : nil
       end
 
       def chart_options

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 module Playbook
   module PbCircleIconButton
     class CircleIconButton < Playbook::KitBase
@@ -10,11 +8,11 @@ module Playbook
                      values: %w[primary secondary link],
                      default: "primary"
       prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
+                     default: false
       prop :icon, required: true
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
+                     default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

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

@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
+  bold?: boolean,
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
@@ -26,6 +27,7 @@ const sizes = {
 const DateStacked = (props: DateStackedProps) => {
   const {
     align = 'left',
+    bold = false,
     reverse = false,
     className,
     dark = false,
@@ -46,19 +48,51 @@ const DateStacked = (props: DateStackedProps) => {
   const inputYear = dateTimestamp.toYear().toString()
 
   return (
-    <div className={classes}>
-      <div className="pb_date_stacked_day_month">
-        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
-        <Title
-            dark={dark}
-            size={sizes[size]}
-            text={dateTimestamp.toDay()}
-        />
-      </div>
-      <If condition={currentYear != inputYear}>
-        <Caption size="xs">{inputYear}</Caption>
+
+    <div>
+      <If condition={bold == false}>
+
+        <div className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+                dark={dark}
+                size={sizes[size]}
+                text={dateTimestamp.toDay()}
+            />
+          </div>
+          <If condition={currentYear != inputYear}>
+            <Caption size="xs">{inputYear}</Caption>
+          </If>
+        </div>
+        <Else />
+        <>
+          <div className={classes}>
+            <div className="pb_date_stacked_day_month">
+
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toMonth()}
+              />
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toDay()}
+              />
+              <If condition={currentYear != inputYear}>
+                <Title size="4">{inputYear}</Title>
+              </If>
+            </div>
+
+          </div>
+
+        </>
       </If>
     </div>
+
   )
 }
 

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -3,11 +3,22 @@
     data: object.data,
     class: object.classname) do %>
 
-    <div class="pb_date_stacked_day_month">
-      <%= pb_rails("caption", props: { text: object.month }) %>
-      <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
-      <% end %>
-    </div>
-    <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+    <% if object.bold == false %>
+
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("caption", props: { text: object.month }) %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+      </div>
+
+    <% else %>
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.year, size:4 }) %>
+
+      </div>
+
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -5,36 +5,35 @@ module Playbook
     class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
-                   values: %w[left center right],
-                   default: "left"
+                  values: %w[left center right],
+                  default: "left"
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
                   default: "sm"
       prop :reverse, type: Playbook::Props::Boolean,
-                     default: false
+                  default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
       end
 
       def title_size
-        size == "md" ? 3 : 4
+        size == "md" ? 3: 4
       end
 
       def day
         day = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: day.to_iso) do
-          day.to_day.to_s
+          "#{day.to_day}"
         end
       end
 
       def month
-        month = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: month.to_iso) do
-          month.to_month.to_s
-        end
+        pb_date_time.to_month.capitalize
       end
 
       def year
@@ -42,13 +41,22 @@ module Playbook
         year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
         if current_year != year
           content_tag(:time, datetime: year) do
-            year.to_s
+            "#{year}"
           end
+        else
         end
       end
 
+      def bold_class
+        bold ? "bold" : nil
+      end
+
     private
 
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(date)
+      end
+
       def reverse_class
         reverse ? "reverse" : nil
       end
@@ -56,6 +64,7 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
     end
   end
 end

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
+
+const DateStackedBold = (props) => {
+  return (
+    <div>
+      <DateStacked
+          align="left"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="center"
+          bold
+          date={new Date('20 Mar 2018')}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="right"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+    </div>
+  )
+}
+
+export default DateStackedBold

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

@@ -6,10 +6,12 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
+  - date_stacked_bold: Bold
+
 
   react:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
-  - date_stacked_align: Alignment
+  - date_stacked_bold: Bold

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

@@ -1,3 +1,4 @@
+export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
 export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'

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

@@ -1,43 +1,59 @@
+
 /* @flow */
 
 import React from 'react'
-import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
-import { buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { buildCss } from '../utilities/props'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+
+import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
 
 type DateTimeStackedProps = {
-  data?: string,
   id?: string,
-  date: date,
+  date: string,
+  datetime: string,
   dark: boolean,
+  timeZone?: string,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {
-  const { date, data = {}, dark } = props,
-    dataProps = buildDataProps(data)
+  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
+
+  const {
+    date,
+    datetime,
+    dark,
+    timeZone = 'America/New_York',
+  } = props
+
+  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
 
   return (
     <Flex
-        className={globalProps(props)}
-        orientation="row"
-        vertical="center"
-        {...dataProps}
+        inline="flex-container"
+        vertical="stretch"
+        {...props}
     >
       <FlexItem>
         <DateStacked
             align="right"
+            bold
             dark={dark}
-            date={date}
-            reverse
-            size="sm"
+            date={date || datetime}
+            timeZone={timeZone}
         />
       </FlexItem>
+
+      <SectionSeparator
+          className="date-time-padding"
+          orientation="vertical"
+      />
       <FlexItem>
         <TimeStacked
-            className="pb_date_time_stacked_kit"
+            className={classes}
             dark={dark}
+            date={date || datetime}
             tag="caption"
-            time={date}
+            timeZone={timeZone}
         />
       </FlexItem>
     </Flex>

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

@@ -1,6 +1,25 @@
-@import "../pb_title/title";
-@import "../pb_body/body";
+[class^=pb_date_time_stacked] {
+
+  [class^=padding_month] {
+    padding-bottom: ($space_xs + 2) !important;
+    }
+
+  [class^=padding_day] {
+    padding-bottom: ($space_xs + 2) !important;
+  }
+
+  &[class*=_dark] {
+    & > * [class^=pb_title_kit] {
+      color: $text_dk_default;
+    }
+    & > * [class^=pb_caption_kit] {
+      color: $text_dk_light;
+    }
+  }
 
-.pb_date_time_stacked_kit {
-  padding-left: $space-xs;
 }
+.date-time-padding {
+  padding-right: ($space_xs / 2);
+  padding-left: ($space_xs / 2);
+}
+

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,13 +1,17 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-    <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
+    class: object.classname,
+    aria: object.aria) do %>
+
+  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
+      <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
       <% end %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
+      <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
+      <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+        <%= pb_rails("time_stacked", props: { time: object.date_time_value, dark: object.dark, timezone: object.timezone }) %>
       <% end %>
-    <% end %>
-<% end %>
+  <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -3,10 +3,17 @@
 module Playbook
   module PbDateTimeStacked
     class DateTimeStacked < Playbook::KitBase
-      prop :date, type: Playbook::Props::Date,
+      prop :date, deprecated: true
+      prop :date_time, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :timezone, type: Playbook::Props::String,
+                  default: "America/New_York"
+
+    def date_time_value
+      date || date_time
+    end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -0,0 +1,35 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+import { DateTimeStacked } from '../'
+
+/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+
+const props = {
+  data: { testid: 'datetimestacked' },
+  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+}
+
+test('Kit renders date time', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toBeInTheDocument()
+})
+
+it('Should be accessible', async () => {
+  ensureAccessible(DateTimeStacked, props)
+})
+
+test('renders time in default timezone', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'Asia/Tokyo'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'America/Denver'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+})

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb

@@ -1 +1,8 @@
-<%= pb_rails("date_time_stacked") %>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
+

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

@@ -4,10 +4,28 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = (props) => (
   <div>
     <DateTimeStacked
-        date={new Date()}
+        datetime={new Date()}
         {...props}
     />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="Asia/Tokyo"
+
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        timeZone="America/Denver"
+
+        {...props}
+    />
+
   </div>
 )
 
 export default DateTimeStackedDefault
+
+// *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_dialog/dialog.test.jsx

@@ -9,7 +9,7 @@ import { Dialog } from '../'
   - https://jestjs.io/docs/en/using-matchers
 */
 
-test('generated scaffold test - update me', () => {
+test('Kit renders Dialog', () => {
   const testId = 'test1'
 
   render(

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -7,9 +7,9 @@ module Playbook
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                    default: [1]
+                  default: [1]
       prop :colors, type: Playbook::Props::Array,
-                    default: []
+                  default: []
 
       def classname
         generate_classname("pb_distribution_bar", size)

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -3,7 +3,7 @@
 module Playbook
   module PbFilter
     class Filter < Playbook::KitBase
-      prop :filters, type: Playbook::Props::HashArray, default: [{ name: "" }]
+      prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
       prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
       prop :results, type: Playbook::Props::Numeric
       prop :template, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -8,7 +8,7 @@ module Playbook
                     default: "neutral"
       prop :text, type: Playbook::Props::String
       prop :multi_line, type: Playbook::Props::Boolean,
-                        default: false
+                       default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
 

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

@@ -2,11 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   id?: string,
@@ -27,6 +28,7 @@ const Flex = (props: FlexProps) => {
     align = 'none',
     children,
     className,
+    data = {},
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -51,6 +53,8 @@ const Flex = (props: FlexProps) => {
   const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
+  const dataProps = buildDataProps(data)
+
   return (
     <div
         className={classnames(
@@ -70,6 +74,7 @@ const Flex = (props: FlexProps) => {
         globalProps(props),
         className
       )}
+        {...dataProps}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -74,8 +74,8 @@ module Playbook
       def horizontal_class
         if orientation == "row"
           "justify_content_#{horizontal}"
-        elsif align == "none"
-          "align_items_#{horizontal}"
+        else
+          "align_items_#{horizontal}" if align == "none"
         end
       end
 
@@ -102,8 +102,8 @@ module Playbook
       def vertical_class
         if orientation == "row"
           "align_items_#{vertical}"
-        elsif justify == "none"
-          "justify_content_#{vertical}"
+        else
+          "justify_content_#{vertical}" if justify == "none"
         end
       end
 

data/app/pb_kits/playbook/pb_form/form.rb

@@ -23,7 +23,7 @@ module Playbook
           class: classname,
           data: data,
           validate: validate,
-        }.merge(prop(:options) || prop(:form_system_options) || {})
+        }.merge(prop(:options) || prop(:form_system_options) || { })
       end
     end
   end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -24,6 +24,7 @@ module Playbook
 
       prop :value, type: Playbook::Props::Numeric
 
+
       def classname
         generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -23,12 +23,11 @@ module Playbook
       end
 
       def active_step(step)
-        step <= active ? "_active" : "_inactive"
+         step <= active ? "_active" : "_inactive"
       end
 
       def aria_attributes
         return aria if aria.present?
-
         { hidden: true }
       end
 

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :icon, type: Playbook::Props::Boolean,
                   default: false
       prop :show_icon, type: Playbook::Props::Boolean,
-                       default: false
+                  default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default tracker],
                      default: "default"

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :icon, required: false, default: "check"
 
       def name_icon
-        icon || "check"
+        icon ? icon : "check"
       end
 
       def classname

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -10,7 +10,7 @@ module Playbook
                     default: false
 
       prop :sticky, type: Playbook::Props::Boolean,
-                    default: false
+                   default: false
 
       prop :value
       prop :template
@@ -41,7 +41,7 @@ module Playbook
           sticky: sticky,
           value: value,
           template: template,
-          placeholder: placeholder,
+          placeholder: placeholder
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -38,9 +38,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-      <span>
-        <Caption text={text} />
-      </span>
+
+      <If condition={text}>
+        <span>
+          <Caption text={text} />
+        </span>
+      </If>
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -22,7 +22,7 @@ module Playbook
       prop :value
 
       prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
+                                      default: {}
 
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -20,7 +20,7 @@ module Playbook
       prop :value
 
       prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
+                                      default: {}
 
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -21,14 +21,18 @@ module Playbook
       end
 
       def returned_icon
-        icon || case change
-                when "increase"
-                  "arrow-up"
-                when "decrease"
-                  "arrow-down"
-                else
-                  false
-                end
+        if icon
+          icon
+        else
+          case change
+          when "increase"
+            "arrow-up"
+          when "decrease"
+            "arrow-down"
+          else
+            false
+          end
+        end
       end
 
       def classname

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

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark, 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" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -20,7 +20,7 @@ module Playbook
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id
+          pb_tooltip_tooltip_id: tooltip_id,
         )
       end
 

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -15,7 +15,7 @@ module Playbook
       end
 
       def display_badge
-        @display_badge ||= begin
+        @badge ||= begin
           badge_path = File.join(
             File.dirname(self.class.source_location),
             "badges",

data/lib/playbook/forms/builder/action_area.rb

@@ -16,7 +16,7 @@ module Playbook
           button(value, props: props)
         end
 
-        def button(_value = nil, props:)
+        def button(value = nil, props:)
           view_context.content_tag(:li) do
             view_context.pb_rails("button", props: props)
           end
@@ -28,4 +28,4 @@ module Playbook
       end
     end
   end
-end
+end

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -3,9 +3,9 @@
 module Playbook
   module Forms
     class Builder
-      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {})
+      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {} )
         props[:label] = @template.label(@object_name, name) if props[:label] == true
-        options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
+        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
         input = super(name, collection, value_method, text_method, options, html_options)

data/lib/playbook/forms/builder/select_field.rb

@@ -5,7 +5,7 @@ module Playbook
     class Builder
       def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
         props[:label] = @template.label(@object_name, name) if props[:label] == true
-        options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
+        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
         input = super(name, choices, options, html_options, &block)

data/lib/playbook/kit_resolver.rb

@@ -8,7 +8,7 @@ module Playbook
     end
 
     def initialize
-      @cache = Hash.new do |_cache, kit_name|
+      @cache = Hash.new do |cache, kit_name|
         is_subkit = kit_name.match(%r{[/\\]})
         folder = is_subkit ? kit_name.split("/")[0] : kit_name
         item = is_subkit ? kit_name.split("/")[-1] : kit_name

data/lib/playbook/markdown/template_handler.rb

@@ -1,6 +1,4 @@
-# frozen_string_literal: true
-
-require "redcarpet"
+require 'redcarpet'
 
 module Playbook
   module Markdown
@@ -22,7 +20,7 @@ module Playbook
           markdown.render(template).html_safe
         end
 
-      private
+        private
 
         def md_options
           @md_options ||= {

data/lib/playbook/pb_doc_helper.rb

@@ -16,7 +16,7 @@ module Playbook
           example_key: example.keys.first,
           show_code: show_code,
           type: type,
-          dark: dark_mode,
+          dark: dark_mode
         }
       end.join.yield_self(&method(:raw))
     end
@@ -41,12 +41,10 @@ module Playbook
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
 
-    # rubocop:disable Naming/AccessorMethodName
     def get_kits
       menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
       menu["kits"]
     end
-    # rubocop:enable Naming/AccessorMethodName
 
     def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
       title = pb_doc_render_clickable_title(kit, type)
@@ -80,7 +78,7 @@ module Playbook
               else
                 kit_show_path(kit)
               end
-      # FIXME: this is here because this helper generates a link for playbook website,
+      # FIXME this is here because this helper generates a link for playbook website,
       #       but shouldn't do anything when used elsewhere
       rescue
         puts "Kit Path Not Avaliable"

data/lib/playbook/props.rb

@@ -36,6 +36,9 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
+    attr_accessor :values
+    private :values, :values=
+
     included do
       class_attribute :props, default: {}
     end
@@ -47,7 +50,7 @@ module Playbook
       end
 
       def prop(name, type: Playbook::Props::String, **options)
-        self.props = props.merge(name => type.new(options.merge(name: name, kit: self)))
+        self.props = self.props.merge(name => type.new(options.merge(name: name, kit: self)))
 
         define_method(name) { prop(name) }
       end

data/lib/playbook/props/base.rb

@@ -20,7 +20,7 @@ module Playbook
       end
 
       def validate!(input_value)
-        warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated && input_value # TODO: add some color for pop
+        warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated && input_value #TODO: add some color for pop
 
         raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
 
@@ -40,6 +40,7 @@ module Playbook
 
       def log(message)
         logger = ActiveSupport::Logger.new(STDOUT)
+        log_formatter = ::Logger::Formatter.new
         @logger ||= ActiveSupport::TaggedLogging.new(logger)
         @logger.log(0, message)
       end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.10.0.pre.alpha2"
+  VERSION = "9.10.0.pre.date.time.stacked.1"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.10.0.pre.alpha2
+  version: 9.10.0.pre.date.time.stacked.1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-26 00:00:00.000000000 Z
+date: 2021-04-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -17,7 +17,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -27,7 +27,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -37,7 +37,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -47,7 +47,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -57,7 +57,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -67,7 +67,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 5.2.4.5
+        version: 5.2.4.4
     - - "<"
       - !ruby/object:Gem::Version
         version: '7.0'
@@ -282,39 +282,39 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.2.2
 - !ruby/object:Gem::Dependency
-  name: rspec-html-matchers
+  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.9.1
+        version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.9.1
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
+        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
-    - - "~>"
+- !ruby/object:Gem::Dependency
+  name: rspec-html-matchers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
       - !ruby/object:Gem::Version
-        version: '3.8'
+        version: 0.9.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
-    - - "~>"
+    - - '='
       - !ruby/object:Gem::Version
-        version: '3.8'
+        version: 0.9.1
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
@@ -809,6 +809,8 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -838,6 +840,7 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
+- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -2123,7 +2126,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2138,8 +2141,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubyforge_project:
+rubygems_version: 2.7.3
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []