playbook_ui 15.4.0.pre.alpha.play254712379 → 15.4.0.pre.alpha.testing6712538

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1e3a2f13c99348c91029efd118b7491a3d70554286780980620dbc4bf2746121
-  data.tar.gz: 10b6b15d921600eee4fd1b9b631bdd0571e49680b00af25358a1d32cbaa30fb2
+  metadata.gz: ba3c087c2d2427377e05cc7552c2e72b2ed5f661d5e68fb41e4b476878cb299e
+  data.tar.gz: bda64fa599febb5aa7720b356a36c4a8eeb8932f35107261e200213c5e998355
 SHA512:
-  metadata.gz: f9df2ad880a4df9bf2cbccc107ff3a15493728dc179b39f23ebc023cde0a17d47bad0f132624de43dd8667d45177ea2f4ca9db887cdb33235eefb5ee9c1c5f0a
-  data.tar.gz: 9827d30f93a07f258b162845c427cddf43960bc780e29ceb6d656be669a66e9e5b2a1d13478dbacb1392ce25fb6147772f8d711ff647c62aa5964ac620042098
+  metadata.gz: 6e5969dfec2524550306d50dff0d360efcb10a851b0016cbae743cea3554226a90721f79455c1088f58506e8009ac573a72ac9e731a47252d20d36fc7a7027d9
+  data.tar.gz: 5686d6ca3e4a7fead6dc35c9333e3b7d445a5d96315fdb3bb98057f1b4f1e46aa32a908aa6f1db17f19643d2a19cfdfd4b8c5c38d468eccafe08467bc7552c5c

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
+import colors from '../../tokens/exports/_colors.module.scss'
+
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -5,6 +5,7 @@ import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
+import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 
 import usePBCopy from './usePBCopy'
 
@@ -18,6 +19,7 @@ type CopyButtonProps = {
   tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
   tooltipText?: string
   value?: string
+  variant?: 'button' | 'icon'
   timeout?: number
 }
 
@@ -28,11 +30,12 @@ const CopyButton = (props: CopyButtonProps) => {
     data = {},
     from = '',
     id,
-    text= 'Copy',
+    text = 'Copy',
     timeout = 1000,
-    tooltipPlacement= 'bottom',
+    tooltipPlacement = 'bottom',
     tooltipText = 'Copied!',
     value = '',
+    variant = 'icon',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })
@@ -42,7 +45,8 @@ const CopyButton = (props: CopyButtonProps) => {
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
-    <div {...ariaProps}
+    <div 
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
@@ -53,11 +57,20 @@ const CopyButton = (props: CopyButtonProps) => {
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
-            onClick={copy}
-        >
-          {text}
-        </Button>
+        {variant === 'icon' ? (
+          <CircleIconButton 
+              icon="copy" 
+              onClick={copy} 
+              variant="link" 
+          />
+        ) : (
+          <Button 
+              icon="copy"
+              onClick={copy}
+          >
+            {text}
+          </Button>
+        )}
       </Tooltip>
     </div>
   )

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -1,6 +1,10 @@
 <%= pb_content_tag do %>
-    <%= pb_rails("button", props: { icon: "copy" }) do %>
-      <%= object.text %>
+    <% if object.variant == "icon" %>
+      <%= pb_rails("circle_icon_button", props: { icon: "copy", variant: "link" }) %>
+    <% else %>
+      <%= pb_rails("button", props: { icon: "copy" }) do %>
+        <%= object.text %>
+      <% end %>
     <% end %>
   <% if object.id %> 
   <%= pb_rails("tooltip", props: {

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -12,6 +12,9 @@ module Playbook
                           default: "Copied!"
       prop :value
       prop :from
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[button icon],
+                     default: "icon"
 
       def classname
         generate_classname("pb_copy_button_kit")

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -37,6 +37,29 @@ it('copies the value to clipboard and pastes it into an input', async () => {
   expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
 })
 
+test('passes text and tooltip props to icon variant', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'text-test' }}
+          tooltipPlacement="right"
+          tooltipText="Text copied!"
+          value="copy"
+      />
+  )
+
+  const kit = screen.getByTestId('text-test')
+  const button = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
+  expect(button).toBeInTheDocument()
+
+  fireEvent.click(button)
+  const tooltipContent = screen.getByText("Text copied!")
+  expect(tooltipContent).toHaveTextContent("Text copied!")
+
+  const tooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(tooltip).toBeInTheDocument()
+})
+
+
 test('passes text and tooltip props to button', () => {
   render(
       <CopyButton
@@ -45,6 +68,7 @@ test('passes text and tooltip props to button', () => {
           tooltipPlacement="right"
           tooltipText="Text copied!"
           value="copy"
+          variant="button"
       />
   )
 

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("copy_button", props: {
+  text: "Copy Text",
+  tooltip_position: "right",
+  tooltip_text: "Text copied!",
+  value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
+  variant: "button",
+}) %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import CopyButton from '../_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
+
+const CopyButtonVariant = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="Text copied!"
+        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
+        variant="button"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyButtonVariant

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md

@@ -0,0 +1 @@
+Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md

@@ -0,0 +1 @@
+Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -7,7 +7,6 @@ const CopyButtonDefault = (props) => (
   <div>
     <CopyButton
         {...props}
-        text="Copy Text"
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
@@ -15,7 +14,7 @@ const CopyButtonDefault = (props) => (
 
     <Textarea
         {...props}
-        placeholder="Copy and paste here"
+        placeholder="Click the icon above to copy and paste here"
     />
   </div>
 )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -21,6 +21,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Body text"
         tooltipPlacement="right"
         tooltipText="Body text copied!"
+        variant="button"
     />
 
     <TextInput
@@ -36,6 +37,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Text Input"
         tooltipPlacement="right"
         tooltipText="Text input copied!"
+        variant="button"
     />
 
     <Textarea

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

@@ -1,10 +1,12 @@
 examples:
   rails:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook

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

@@ -1,3 +1,4 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md

@@ -0,0 +1 @@
+Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T). 

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md

@@ -0,0 +1 @@
+Use `decimals: "matching"` when you want the full decimal amount displayed as a single number rather than split visually.

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md

@@ -0,0 +1 @@
+Use `decimals="matching"` when you want the full decimal amount displayed as a single number rather than split visually.

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -1,4 +1,14 @@
 <%= pb_rails("currency", props: {
   amount: "-2,000.50",
   size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "lg",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -9,6 +9,16 @@ const CurrencyNegative = (props) => {
           amount="-2,000.50"
           {...props}
       />
+      <Currency
+          amount="-2,000.50"
+          size="md"
+          {...props}
+      />
+      <Currency
+          amount="-2,000.50"
+          size="lg"
+          {...props}
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md

@@ -0,0 +1 @@
+Small `Currency` kits have the negative sign on the lefthand side of the "$" symbol.

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol: ""`.

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol=""`.

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -1,3 +1,10 @@
+<%= pb_rails("currency", props: {
+  amount: "30,327.43",
+  label: "Default",
+  size: "sm",
+  margin_bottom: "md",
+}) %>
+
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   emphasized: false,

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,6 +5,13 @@ import Currency from '../_currency'
 const CurrencyVariants = (props) => {
   return (
     <>
+      <Currency
+          amount="30,327.43"
+          label="Default"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
       <Currency
           amount="2,000.50"
           emphasized={false}

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

@@ -1,2 +1,2 @@
-Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
-Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).
+Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
+Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -17,6 +17,7 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
+  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -32,6 +33,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
+    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -59,6 +61,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
+            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,6 +9,7 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
+        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
+      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import DateTime from '../_date_time'
+
+const DateTimeShowCurrentYear = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeShowCurrentYear

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md

@@ -0,0 +1 @@
+Pass in `show_current_year` to show this date's current year.

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md

@@ -0,0 +1 @@
+Pass in `showCurrentYear` to show this date's current year.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
+export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

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

@@ -17,6 +17,7 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
+  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -28,6 +29,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
+    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -46,6 +48,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
+            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

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

@@ -1,8 +1,8 @@
-<%= pb_content_tag do %>
+  <%= pb_content_tag 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 }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

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

@@ -10,6 +10,8 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def date_time_value
         date || date_time

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

@@ -41,3 +41,36 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
+
+test('renders current year when showCurrentYear is true', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-current-year' },
+    datetime: currentYearDate,
+    dark: false,
+    showCurrentYear: true,
+  })
+  expect(kit).toHaveTextContent(currentYear.toString())
+})
+
+test('hides current year by default', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-hide-year' },
+    datetime: currentYearDate,
+    dark: false,
+  })
+ 
+  const yearElement = kit.querySelector('.pb_caption_kit_xs')
+
+  if (yearElement) {
+    expect(yearElement.textContent).not.toBe(currentYear.toString())
+  } else {
+
+    expect(yearElement).toBeNull()
+  }
+})

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

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
+

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import DateTimeStacked from '../_date_time_stacked'
+
+const DateTimeStackedShowCurrentYear = (props) => (
+  <div>
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        timeZone="America/Denver"
+        {...props}
+    />
+  </div>
+);
+
+export default DateTimeStackedShowCurrentYear;

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  
+  - date_time_stacked_show_current_year: Show Current Year
+
   react:
   - date_time_stacked_default: Default
+  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

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

@@ -1 +1,2 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
+export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'