playbook_ui 9.10.0 → 9.14.1.alpha.highcharts9

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,
-                  default: ::DateTime.current
+      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

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}"
-        else
-          "align_items_#{horizontal}" if align == "none"
+        elsif align == "none"
+          "align_items_#{horizontal}"
         end
       end
 
@@ -102,8 +102,8 @@ module Playbook
       def vertical_class
         if orientation == "row"
           "align_items_#{vertical}"
-        else
-          "justify_content_#{vertical}" if justify == "none"
+        elsif justify == "none"
+          "justify_content_#{vertical}"
         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_form_pill/_form_pill.jsx

@@ -14,6 +14,7 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  size?: string,
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -21,11 +22,20 @@ type FormPillProps = {
   },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
+  const {
+    className,
+    text,
+    name,
+    onClick = () => {},
+    avatarUrl,
+    closeProps = {},
+    size = '',
+  } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
-    className
+    className,
+    size === 'small' ? 'small' : null,
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -51,4 +51,23 @@ $form_pill_colors: (
       }
     }
   }
+  &.small {
+    height: fit-content;
+    height: -moz-fit-content;
+    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .pb_form_pill_text, .pb_form_pill_tag {
+      line-height: 1.7;
+      padding-left: $space_xs;
+      padding-right: 2px;
+    }
+    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
+      width: 20px;
+      height: 20px;
+      flex-basis: 20px;
+      &::before { line-height: 21px; }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   size: "small",
+}) %>
+
+<br />
+<br />
+
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   size: "small",
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillSize = (props) => {
+  return (
+
+    <div>
+      <FormPill
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormPill
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FormPillSize