playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266013023

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b01617dcbc1a314898f562b32892261daddf8ccf2629bd9aade3ddb46fbb3d64
-  data.tar.gz: 15e4c66a6efa09791d1cd72f4bd229beb21fffbc533cf5cc91ea4dfdac5c2588
+  metadata.gz: a6db43d3a7fb9e0f943643cf6bcfdb94d3aec4ac7d76204cb9b3d37977d0b266
+  data.tar.gz: a4633939ff364118352b782652738e3d0d1ada1c9af1bdfac6fa3ab9fbea0eff
 SHA512:
-  metadata.gz: f5f4be93a8dac412cc0d97881c302a7ee5e794d5bf57964625a5b7f596853c1e5974fca8451548da63a2fe2977d1354a907e30fe3f0975931483f609aae816d0
-  data.tar.gz: df6e483f09dcf147fc3920665fda47e37de87318fa7db4709e8216297c570e99b9683b61f368ddcea903a6c2b314bc93b7e11241953479218ac11cd26b0ef014
+  metadata.gz: 94a35af5bd9592f899fc5b0d4d92bfdad87fe9056f104910a01bd827f6f53871aeaceffd5e78b05296fb3b8c1ba075548b312016cc8f89fb863aa35cba084d33
+  data.tar.gz: b5c1c948b583c32209cba3fc3514d3f0f08d9537c33c7174b6b3c02afa954452972c3f881f3d313defb1d05afc0172ade58726a42f778004381b2d157a4c4a8c

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { deprecatedKitWarning } from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -169,11 +168,6 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
 
   const [options, setOptions] = useState({});
 
-  useEffect(() => {
-    // Warn about deprecated kit (only once per page load, dev mode only)
-    deprecatedKitWarning('BarGraph', 'Please use "PbBarGraph" instead.');
-  }, []);
-
   useEffect(() => {
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -51,6 +51,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     cancelButton,
     confirmButton,
     className,
+    closeable,
     data = {},
     htmlOptions = {},
     id,
@@ -187,7 +188,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             style={{ content: dynamicInlineProps }}
         >
           <>
-            {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
+            {title && !status ? <Dialog.Header closeable={closeable}>{title}</Dialog.Header> : null}
             {!status && text ? <Dialog.Body>{text}</Dialog.Body> : null}
             {status && (
               <Dialog.Body

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -14,7 +14,7 @@
 >
     <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
-                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
+                <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id, closeable: object.closeable }) %>
             <% end %>
             <% if object.status === "" && object.text %>
                 <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -23,6 +23,7 @@ module Playbook
                     default: ""
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :closeable, type: Playbook::Props::Boolean, default: true
 
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}_#{placement}")

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -129,3 +129,17 @@ test('renders loading dialog with disabled buttons', async () => {
 
   cleanup()
 })
+
+test('renders dialog without close button when closeable is false', async () => {
+
+  const { queryByText, container } = render(<DialogTest closeable={false} />);
+
+  fireEvent.click(queryByText('Open Dialog'));
+
+  await waitFor(() => expect(queryByText("Header Title is the Title Prop")));
+
+  const closeBtn = container.querySelector('.pb_dialog_close_icon');
+  expect(closeBtn).not.toBeInTheDocument();
+
+  cleanup()
+})

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,10 +1,11 @@
 <%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
-
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
-            </button>
+            <% if object.closeable %>
+                <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
+                </button>
+            <% end %>
         <% end %>
         <%= pb_rails("section_separator") %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbDialog
     class DialogHeader < Playbook::KitBase
       prop :title
+      prop :closeable, type: Playbook::Props::Boolean,
+                       default: true
 
       def classname
         generate_classname("dialog_header")

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("flex", props:{wrap:true}) do %>
+<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
+<% end %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-simple", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "Hello Body Text, Nice to meet ya.", 
+    cancel_button: "Cancel Button", 
+    closeable: false,
+    confirm_button: "Okay", 
+    confirm_button_id: "confirm-button-simple"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-complex2", 
+    size: "sm"
+}) do %>
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
+    <%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+
+
+const DialogCloseable = () => {
+  // Simple example 
+  const [isOpenSimple, setIsOpenSimple] = useState(false)
+  const closeSimple = () => setIsOpenSimple(false)
+  const openSimple = () => setIsOpenSimple(true)
+
+    // Complex example
+  const [isOpenComplex, setIsOpenComplex] = useState(false)
+  const closeComplex = () => setIsOpenComplex(false)
+  const openComplex = () => setIsOpenComplex(true)
+
+  return (
+    <>
+      <Button 
+          marginRight='md'
+          onClick={openSimple}
+      >
+        {'Open Simple Dialog'}
+      </Button>
+      <Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
+
+      <Dialog
+          cancelButton="Cancel Button"
+          closeable={false}
+          confirmButton="Okay"
+          onCancel={closeSimple}
+          onClose={closeSimple}
+          onConfirm={closeSimple}
+          opened={isOpenSimple}
+          size="sm"
+          text="Hello Body Text, Nice to meet ya."
+          title="Header Title is the Title Prop"
+      />
+      <Dialog
+          onClose={closeComplex}
+          opened={isOpenComplex}
+          size="sm"
+      >
+        <Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
+        <Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
+        <Dialog.Footer>
+          <Button onClick={closeComplex}>{'Okay'}</Button>
+          <Button
+              onClick={closeComplex}
+              variant="link"
+          >
+            {'Cancel Button'}
+          </Button>
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  )
+}
+
+export default DialogCloseable

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md

@@ -0,0 +1,3 @@
+The `closeable` prop can be set to false to optionally render the Dialog header without the close “X” button. `closeable` is set to true by default. 
+
+This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.

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

@@ -12,6 +12,7 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
+  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -25,6 +26,7 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
+  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,4 +8,5 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'
+export { default as DialogCloseable } from './_dialog_closeable.jsx'

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import { deprecatedKitWarning } from '../utilities/deprecated'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -33,10 +32,6 @@ const Legend = (props: LegendProps) => {
     text,
   } = props
 
-  useEffect(() => {
-    deprecatedKitWarning('Legend')
-  }, [])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_legend/legend.html.erb

@@ -1,4 +1,3 @@
-<%== deprecated_kit_warning('Legend') %>
 <%= pb_content_tag do %>
   <%= pb_rails("body", props: {color: object.body_color}) do %>
     <span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -18,6 +18,7 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
+  showCurrentYear?: boolean,
 } & GlobalProps
 
 function isElementOfType<P>(
@@ -35,6 +36,7 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
+  showCurrentYear = false,
   ...props
 }: ItemProps): React.ReactElement => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
@@ -73,6 +75,7 @@ const TimelineItem = ({
               <DateStacked
                   align="center"
                   date={date}
+                  showCurrentYear={showCurrentYear}
                   size="sm"
               />
             )}

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.html.erb

@@ -0,0 +1,60 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.today, show_current_year: true }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+      <% item.label do %>
+        <%= pb_rails("timeline/label", props: { date: Date.today, show_current_year: true }) %>
+      <% end %>
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'map-marker-alt', icon_color: 'purple' }) %>
+      <% end %>
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+        }) %>
+      <% end %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.jsx

@@ -0,0 +1,118 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineShowCurrentYear = (props) => (
+  <div>
+    <Timeline
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+
+    <br />
+    <br />
+    <br />
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date()}
+          icon="user"
+          iconColor="royal"
+          showCurrentYear
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label
+            date={new Date()}
+            showCurrentYear
+        />
+        <Timeline.Step
+            icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineShowCurrentYear

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Timeline 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. Pass it to `Timeline.Item`/`timeline/item` when using its `date` prop, or to `Timeline.Label`/`timeline/label` if following the "With Children" pattern.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -1 +1 @@
-Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.
+Use the optional `showDate` prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.

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

@@ -5,6 +5,7 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap
 
 
@@ -13,4 +14,5 @@ examples:
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
   - timeline_with_children: With Children
+  - timeline_show_current_year: Show Current Year
   - timeline_with_gap: With Gap

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

@@ -3,4 +3,5 @@ export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
 export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
 export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
+export { default as TimelineShowCurrentYear } from './_timeline_show_current_year.jsx'
 

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -2,7 +2,7 @@
   <% if label %>
     <%= label %>
   <% else %>
-    <%= pb_rails("timeline/label", props: { date: date }) %>
+    <%= pb_rails("timeline/label", props: { date: date, show_current_year: show_current_year }) %>
   <% end %>
 
   <% if step %>

data/app/pb_kits/playbook/pb_timeline/item.rb

@@ -12,6 +12,8 @@ module Playbook
       prop :line_style, type: Playbook::Props::Enum,
                         values: %w[solid dotted],
                         default: "solid"
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       renders_one :label
       renders_one :step

data/app/pb_kits/playbook/pb_timeline/label.html.erb

@@ -3,7 +3,8 @@
     <%= pb_rails("date_stacked", props: {
         date: object.date,
         size: "sm",
-        align: "center"
+        align: "center",
+        show_current_year: object.show_current_year
     }) %>
   <% else %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_timeline/label.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbTimeline
     class Label < Playbook::KitBase
       prop :date
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def classname
         generate_classname("pb_timeline_item_left_block")

data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx

@@ -9,6 +9,7 @@ type TimelineLabelProps = {
   children?: React.ReactNode,
   className?: string,
   htmlOptions?: { [key: string]: any },
+  showCurrentYear?: boolean,
 } & GlobalProps
 
 const TimelineLabel: React.FC<TimelineLabelProps> = ({
@@ -16,6 +17,7 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
   children,
   className,
   htmlOptions = {},
+  showCurrentYear = false,
   ...props
 }) => {
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -28,6 +30,7 @@ const TimelineLabel: React.FC<TimelineLabelProps> = ({
       {date && (
         <DateStacked align="center"
             date={date}
+            showCurrentYear={showCurrentYear}
             size="sm"
         />
       )}

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -170,3 +170,54 @@ test('should pass showDate prop with Children', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('pb_timeline_kit_horizontal_with_date')
 })
+
+test('should pass showCurrentYear prop to items with date', () => {
+    const currentYear = new Date().getFullYear().toString()
+    render(
+        <Timeline
+            data={{ testid: testId }}
+            showDate
+        >
+            <Timeline.Item
+                date={new Date()}
+                icon="user"
+                iconColor="royal"
+                showCurrentYear
+            >
+                <TitleDetail
+                    detail="37-27 74th Street"
+                    title="Jackson Heights"
+                />
+            </Timeline.Item>
+        </Timeline>
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+    const yearCaption = kit.querySelector('.pb_caption_kit_xs')
+    expect(yearCaption).toBeInTheDocument()
+    expect(yearCaption.textContent).toEqual(currentYear)
+})
+
+test('should not show current year by default', () => {
+    const currentYear = new Date().getFullYear().toString()
+    render(
+        <Timeline
+            data={{ testid: testId }}
+            showDate
+        >
+            <Timeline.Item
+                date={new Date()}
+                icon="user"
+                iconColor="royal"
+            >
+                <TitleDetail
+                    detail="37-27 74th Street"
+                    title="Jackson Heights"
+                />
+            </Timeline.Item>
+        </Timeline>
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+    expect(kit).not.toHaveTextContent(currentYear)
+})