playbook_ui 9.12.0.pre.text.addon → 9.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f94c4155e43cfcdf17c58b5afce6b032c570576aff59506dc1751cb4f0763010
-  data.tar.gz: 24b67df04fa47777d4c4f8ec6d43c648e61e7b1f2325c15acd4b125045d45012
+  metadata.gz: b1460f77a2ef88bf84e6e7388b473d73517373e9ef0d690418f318bf13eb49f6
+  data.tar.gz: 814d426340141a35d9286a0df82747538023dde241b7ec662c68bdfe6ef59585
 SHA512:
-  metadata.gz: f5bd3d916766662441b2e5ca737747554866e2ee519669bdb557da95faccab27a5dcaf1f28b8fa1764cdf5b5687f9972739323e2b97e8aa1bc3516893eb1e4a1
-  data.tar.gz: c4ae6e848dbea60dcc6e6b990579223d65c10fb6fc1b30ceb22769e3d4c95d24338b4086cde2464743db270be9330fc4950cc3b801d0671894e8dac87f1a25e5
+  metadata.gz: e2c7ca89a529a1b173ac9cdd097813f342024c0428bac7830a6c0fa2fedc8e2951e6f7eea46bcaadbf85d8a65d5cd53d329c9d3c13abf5b0db0b001f11610bed
+  data.tar.gz: 73a48d081d1f1db44d7b788816ccc4e6c02657cf7e0b3107da11d18e1889bb716810717ab0259cb6385a31dd02b90c6ff8162896998732b97c2936f7f821a85f

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,7 @@
 @import 'tokens/fonts';
 @import 'pb_background/background';
 @import 'pb_body/body';
+@import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';

data/app/pb_kits/playbook/data/menu.yml

@@ -2,6 +2,7 @@ kits:
   - avatar
   - avatar_action_button
   - background
+  - bread_crumbs
   - buttons:
     - button
     - button_toolbar

data/app/pb_kits/playbook/index.js

@@ -10,6 +10,7 @@ export Background from './pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
+export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs.jsx'
 export Button from './pb_button/_button.jsx'
 export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type BreadCrumbItemProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  id?: string,
+  component?: element
+}
+const BreadCrumbItem = (props: BreadCrumbItemProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    component = 'a',
+    ...rest
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(
+    buildCss('pb_bread_crumb_item_kit'),
+    globalProps(props),
+    className
+  )
+  const Component = component || 'span'
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Component
+          className="pb_bread_crumb_item"
+          {...rest}
+      />
+    </div>
+  )
+}
+export default BreadCrumbItem

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx

@@ -0,0 +1,49 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type BreadCrumbsProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  id?: string,
+  text?: string,
+  children?: node
+}
+const BreadCrumbs = (props: BreadCrumbsProps) => {
+  const {
+    aria = { label: 'Breadcrumb Navigation' },
+    className,
+    data = {},
+    id,
+    children,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(
+    buildCss('pb_bread_crumbs_kit'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <nav
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      {children}
+    </nav>
+  )
+}
+
+export default BreadCrumbs

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -0,0 +1,55 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/spacing";
+@import "../tokens/typography";
+
+[class^=pb_bread_crumbs_kit] {
+  $pb_badge_height: 18px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border_rad_light;
+  padding: 0 $space_xs/2;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $card_light;
+
+  svg {
+   margin-right: 8px;
+  }
+    .pb_bread_crumb_item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+    }
+    .pb_bread_crumb_item_kit {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .pb_bread_crumb_item_kit:not(:last-child):after {
+      content: '/';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
+    }
+  }
+
+  &.dark {
+    border-width: 0;
+
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -0,0 +1,9 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) do%>
+<%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
+    <%= content.presence %>
+<% end %>
+<%end%>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBreadCrumbs
+    class BreadCrumbItem < Playbook::KitBase
+      prop :link, type: Playbook::Props::String
+      def classname
+        generate_classname("pb_bread_crumb_item_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:nav,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBreadCrumbs
+    class BreadCrumbs < Playbook::KitBase
+      def classname
+        generate_classname("pb_bread_crumbs_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import BreadCrumbs from './_bread_crumbs'
+import BreadCrumbItem from './_bread_crumb_item'
+import { Icon, Title } from '../'
+
+it('should render bread crumbs', () => {
+  const testId = 'breadCrumbs'
+  render(
+    <BreadCrumbs
+        data={{ testid: testId }}
+        name={name}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          dark
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+    </BreadCrumbs>
+  )
+  const kit = screen.getByTestId(testId)
+  const label = screen.getByText('Home')
+
+  expect(kit).toHaveClass('pb_bread_crumbs_kit')
+  expect(label).toHaveTextContent('Home')
+})

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb

@@ -0,0 +1,17 @@
+
+<div>
+  <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
+    <%= pb_rails("icon", props: { icon: "home"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: 'users'}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: "user"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+      <%= pb_rails("title", props: { size: 4, text: "User", tag: "span" }) %>
+     <%end%>
+    <%end%>
+</div>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import BreadCrumbs from '../_bread_crumbs.jsx'
+import { Icon, Title } from '../../'
+import BreadCrumbItem from '../_bread_crumb_item'
+
+const Link = (props) => <BreadCrumbItem {...props} />
+const BreadCrumbsDefault = (props) => {
+  return (
+    <BreadCrumbs
+        text="+1"
+        {...props}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          {...props}
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+      <Icon
+          icon="users"
+          size="1x"
+      />
+      <Link
+          {...props}
+          href="/users"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Users"
+        />
+      </Link>
+      <Icon
+          icon="user"
+          size="1x"
+      />
+      <Link {...props}>
+        <Title
+            size="4"
+            tag="span"
+            text="User"
+        />
+      </Link>
+    </BreadCrumbs>
+  )
+}
+
+export default BreadCrumbsDefault

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md

@@ -0,0 +1 @@
+BreadCrumbs can be used for keeping a user aware of there route location.

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

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - bread_crumbs_default: Default
+ 
+  react:
+  - bread_crumbs_default: Default
+ 

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

@@ -0,0 +1 @@
+export { default as BreadCrumbsDefault } from './_bread_crumbs_default.jsx'

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

@@ -14,9 +14,11 @@ module Playbook
                      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
@@ -31,10 +33,7 @@ module Playbook
       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
@@ -47,8 +46,16 @@ module Playbook
         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

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,
-                  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_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_passphrase/_passphrase.jsx

@@ -7,7 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'
-import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+import { Body, Caption, CircleIconButton, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
 
 type PassphraseProps = {
   aria?: object,
@@ -69,6 +69,10 @@ const Passphrase = (props: PassphraseProps) => {
 
   const [showPopover, setShowPopover] = useState(false)
   const toggleShowPopover = () => setShowPopover(!showPopover)
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
   const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
 
@@ -85,7 +89,7 @@ const Passphrase = (props: PassphraseProps) => {
   }, [strength])
 
   const tipClass = classnames(
-    (dark ? 'dark' : null),
+    'passphrase-popover',
     (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
   )
   const dataProps = useMemo(
@@ -94,17 +98,13 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   const popoverReference = (
-    <a
+    <CircleIconButton
         className={tipClass}
+        dark={dark}
+        icon="info-circle"
         onClick={toggleShowPopover}
-    >
-      <Icon
-          dark={dark}
-          icon="info-circle"
-          size="xs"
-          variant="link"
-      />
-    </a>
+        variant="link"
+    />
   )
 
   return (
@@ -122,8 +122,10 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
+                closeOnClick="outside"
                 placement="right"
                 reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
               <Flex

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -9,20 +9,13 @@
     display: inline;
   }
 
-  a.dark {
-    color: $white;
+  [class*=show-below-] {
+    display: none;
   }
-
-  a {
-
-    &[class*=show-below-] {
-      display: none;
-    }
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &.show-below-#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          display: inline;
-        }
+  @each $breakpoint_name, $breakpoint in $breakpoints {
+    .show-below-#{$breakpoint_name} {
+      @include break_at($breakpoint) {
+        display: inline;
       }
     }
   }
@@ -70,4 +63,16 @@
       visibility: hidden;
     }
   }
+  .passphrase-popover {
+    position: relative;
+    left: -($space_xs * 1.25);
+  }
+  @-moz-document url-prefix() {
+    .passphrase-popover {
+      position: relative;
+      top: $space_sm;
+      left: -($space_xs * 1.5);
+    }
+  }
 }
+

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_text_input/text_input.rb

@@ -33,7 +33,7 @@ module Playbook
       end
 
       def add_on_class
-        has_add_on? ? 'text_input_wrapper_add_on' : nil
+        has_add_on? ? "text_input_wrapper_add_on" : nil
       end
 
       def add_on_props
@@ -54,7 +54,7 @@ module Playbook
           placeholder: placeholder,
           required: required,
           type: type,
-          value: value
+          value: value,
         }
       end
 

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/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.12.0.pre.text.addon"
+  VERSION = "9.12.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.12.0.pre.text.addon
+  version: 9.12.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-05 00:00:00.000000000 Z
+date: 2021-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -516,6 +516,19 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
 - app/pb_kits/playbook/pb_body/docs/index.js
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.rb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.rb
+- app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx
+- app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md
+- app/pb_kits/playbook/pb_bread_crumbs/docs/example.yml
+- app/pb_kits/playbook/pb_bread_crumbs/docs/index.js
 - app/pb_kits/playbook/pb_button/_button.jsx
 - app/pb_kits/playbook/pb_button/_button.scss
 - app/pb_kits/playbook/pb_button/_button_mixins.scss
@@ -809,6 +822,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 +853,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
@@ -2139,9 +2155,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3