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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27cd1418907251e1ac5b3f234dcbf01e8ee6ab30e179511e82139fe9a912cbf7
-  data.tar.gz: 8b37fe666405f0b156341f4bcbe7e338341800bf9b3b4c9f9793fcfca515211f
+  metadata.gz: b9945857d72557eecdaac3f4cff4f8d02d7941118ea741fa43eb13a7fb8af86f
+  data.tar.gz: 9a8c82315215fce86c9b34e6418f9a44a4656d7afebc2a0e15a2ec94ba4fdf0b
 SHA512:
-  metadata.gz: 32e94d16d64743934c313661b1f4e86f8cd8768cb9e52576fd10d4c089cd9ca2ece7ec13549cd6a37304d1afb1b137c56bb3acf03a950ac31166f1d277e8311d
-  data.tar.gz: 7a835ec81990710a3638f15f9a4ef1b9abdb57a942a9e993e718523cfe880c940febee3b4f1c02e0155de076032b3551550383d6018a198aab839519c00ff801
+  metadata.gz: f2da5e8f1f95b18fd53919a99c18ff28e2039eb5dd2cb1ce30939db84f1abf46358279a63993e71eb5c2151bfb3812797b49984fab77537ffe5cdf82bc9623d7
+  data.tar.gz: cf5b9ff8408fb77863c81bb1ddaf4668835f5a97cd926729e743c6845e3c4a283c7148355186c24dcbfb2316b5d0800ef0ada9747387a112828701f27bfef32f

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,16 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: {
-    label: string,
-  },
+  aria?: object,
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -55,20 +53,9 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const buttonAriaProps = (props: ButtonPropTypes) => {
-  const { aria } = props
-  if (typeof aria !== 'object') return {}
-  const { label } = aria
-
-  const ariaProps = {}
-
-  if (label !== null) ariaProps['aria-label'] = label
-
-  return ariaProps
-}
-
 const Button = (props: ButtonPropTypes) => {
   const {
+    aria = {},
     children,
     className,
     data = {},
@@ -84,7 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const buttonAria = buttonAriaProps(props)
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -114,11 +101,12 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           href={link}
           id={id}
+          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -126,12 +114,13 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           disabled={disabled}
           id={id}
           onClick={onClick}
+          role="button"
           type={htmlType}
           value={value}
       >

data/app/pb_kits/playbook/pb_button/button.rb

@@ -21,11 +21,12 @@ module Playbook
 
       def options
         {
-          id: id,
-          data: data,
+          aria: aria,
           class: classname,
+          data: data,
           disabled: disabled,
-          aria: aria,
+          id: id,
+          role: "button",
           type: type,
           value: value,
         }.compact
@@ -34,7 +35,8 @@ module Playbook
       def link_options
         options.merge(
           href: link,
-          target: new_window ? "_blank" : "_self"
+          role: "link",
+          target: new_window ? "_blank" : "_self",
         )
       end
 

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

@@ -4,7 +4,7 @@ import { Button } from '../../'
 const ButtonAccessibility = (props) => (
   <div>
     <Button
-        aria={{ label: 'button' }}
+        aria={{ label: 'Go to Google' }}
         link="https://google.com"
         tag="a"
         text="Button with ARIA"

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLink = (props) => (
   <div>
     <Button
+        aria={{ label: 'Link to Google' }}
         link="https://google.com"
         text="A Tag Button"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
         newWindow
         text="Open in New Window"
@@ -17,6 +19,7 @@ const ButtonLink = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
         text="A Tag Button Disabled"

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
-<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -4,12 +4,14 @@ import { Button } from '../../'
 const ButtonLoading = (props) => (
   <div>
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Primary"
         {...props}
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="Button Secondary"
         variant="secondary"
@@ -17,6 +19,7 @@ const ButtonLoading = (props) => (
     />
     {' '}
     <Button
+        aria={{ label: 'Loading' }}
         loading
         text="A Tag Button Disabled"
         variant="link"

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

@@ -9,7 +9,6 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
-  bold?: boolean,
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
@@ -27,7 +26,6 @@ const sizes = {
 const DateStacked = (props: DateStackedProps) => {
   const {
     align = 'left',
-    bold = false,
     reverse = false,
     className,
     dark = false,
@@ -48,51 +46,19 @@ const DateStacked = (props: DateStackedProps) => {
   const inputYear = dateTimestamp.toYear().toString()
 
   return (
-
-    <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>
-
-        </>
+    <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>
-
   )
 }
 

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

@@ -3,22 +3,11 @@
     data: object.data,
     class: object.classname) do %>
 
-    <% 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 %>
+    <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" }) %>
 
 <% end %>

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

@@ -14,11 +14,9 @@ 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, bold, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
       end
 
       def title_size
@@ -33,7 +31,10 @@ module Playbook
       end
 
       def month
-        pb_date_time.to_month.capitalize
+        month = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month.to_iso) do
+          "#{month.to_month}"
+        end
       end
 
       def year
@@ -47,16 +48,8 @@ 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/example.yml

@@ -6,12 +6,10 @@ 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_bold: Bold
+  - date_stacked_align: Alignment

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

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

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

@@ -1,25 +1,6 @@
-[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;
-    }
-  }
+@import "../pb_title/title";
+@import "../pb_body/body";
 
+.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,17 +1,13 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    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 }) %>
+    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 }) %>
       <% end %>
-      <%= 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 }) %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
       <% end %>
-  <% end %>
-
-<% end %>
+    <% end %>
+<% end %>

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

@@ -3,17 +3,10 @@
 module Playbook
   module PbDateTimeStacked
     class DateTimeStacked < Playbook::KitBase
-      prop :date, deprecated: true
-      prop :date_time, type: Playbook::Props::Date,
+      prop :date, 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/docs/_date_time_stacked_default.html.erb

@@ -1,8 +1 @@
-<%= 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" }) %>
-
+<%= pb_rails("date_time_stacked") %>

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

@@ -4,28 +4,10 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = (props) => (
   <div>
     <DateTimeStacked
-        datetime={new Date()}
+        date={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('Kit renders Dialog', () => {
+test('generated scaffold test - update me', () => {
   const testId = 'test1'
 
   render(

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

@@ -2,12 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } 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,
@@ -28,7 +27,6 @@ const Flex = (props: FlexProps) => {
     align = 'none',
     children,
     className,
-    data = {},
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -53,8 +51,6 @@ 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(
@@ -74,7 +70,6 @@ const Flex = (props: FlexProps) => {
         globalProps(props),
         className
       )}
-        {...dataProps}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -15,9 +15,9 @@ export default function useZxcvbn(options) {
 
   useEffect(() => {
     if (confirmation) return
-
-    setResult(calculator(passphrase))
-    const str = result.score
+    const newResult = calculator(passphrase)
+    setResult(newResult)
+    const str = newResult.score
 
     const noPassphrase = passphrase.length <= 0
     const commonPassphrase = common || isPwned

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

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

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

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.10.0.pre.date.time.stacked.1
+  version: 9.10.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-27 00:00:00.000000000 Z
+date: 2021-04-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -809,8 +809,6 @@ 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
@@ -840,7 +838,6 @@ 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
@@ -2137,9 +2134,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

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

@@ -1,5 +0,0 @@
-<%= 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

@@ -1,38 +0,0 @@
-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_time_stacked/date_time_stacked.test.js

@@ -1,35 +0,0 @@
-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)
-})