playbook_ui 15.6.0.pre.alpha.play2552collapsibleiconrefactor12903 → 15.6.0.pre.alpha.play261013050

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -184,3 +184,146 @@ test("when headerStyle is floating", () => {
   const kit = renderKit(Table, props, { headerStyle: "floating" })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
 })
+
+test("renders withFilter variant with Card wrapper", () => {
+  const { container } = render(
+    <Table
+        data={{testid: "table-with-filter"}}
+        filterContent={<div>{"Mock Filter"}</div>}
+        title="Test Table"
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  const card = container.querySelector('.pb_card_kit')
+  expect(card).toBeInTheDocument()
+  const filter = container.querySelector('.pb_filter_kit')
+  expect(filter).toBeInTheDocument()
+})
+
+test("renders title when provided with withFilter variant", () => {
+  render(
+    <Table
+        filterContent={<div>{"Mock Filter"}</div>}
+        title="Test Title"
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  expect(screen.getByText("Test Title")).toBeInTheDocument()
+})
+
+test("renders filter component in withFilter variant", () => {
+  const { container } = render(
+    <Table
+        filterContent={<div data-testid="test-filter">{"Filter inputs"}</div>}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  const filter = container.querySelector('.pb_filter_kit')
+  expect(filter).toBeInTheDocument()
+})
+
+test("renders SectionSeparator between filter and table in withFilter variant", () => {
+  const { container } = render(
+    <Table
+        filterContent={<div>{"Filter content"}</div>}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  const separator = container.querySelector('.pb_section_separator_kit')
+  expect(separator).toBeInTheDocument()
+})
+
+test("does not render title when not provided with withFilter variant", () => {
+  const { container } = render(
+    <Table
+        filterContent={<div>{"Filter content"}</div>}
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  const title = container.querySelector('.pb_title_kit')
+  expect(title).not.toBeInTheDocument()
+})
+
+test("renders default variant without Card wrapper", () => {
+  render(
+    <Table
+        data={{testid: "default-table"}}
+        variant="default"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{"Column 1"}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>{"Value 1"}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+
+  const table = screen.getByTestId("default-table")
+  expect(table).toBeInTheDocument()
+  expect(table.closest('.pb_card_kit')).not.toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md

@@ -1 +1 @@
-Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Text Input w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md

@@ -1 +1 @@
-Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Textarea w/ Error shows that the input must be filled out (i.e. when used in a form it signals a user to fix an error).

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)
+})

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -0,0 +1,73 @@
+/**
+ * Tracks which deprecated kits have already logged warnings in this session
+ * to ensure we only log once per page load per kit
+ */
+const warnedKits = new Set<string>();
+
+/**
+ * Logs a deprecation warning for a Playbook kit
+ * - Only logs once per kit per page load (prevents spam on re-renders)
+ * - Only logs in development mode (not in production or test environments)
+ * 
+ * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
+ * @param message - Optional custom deprecation message. If not provided, uses a default message.
+ * 
+ * @example
+ * // In your kit component:
+ * useEffect(() => {
+ *   deprecatedKitWarning('BarGraph');
+ * }, []);
+ */
+export const deprecatedKitWarning = (
+  kitName: string,
+  message?: string
+): void => {
+  // Skip in test environments (Jest sets NODE_ENV to 'test')
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
+    return;
+  }
+
+  // In browser environments, check if we're on localhost/dev
+  if (typeof window !== 'undefined') {
+    const hostname = window.location?.hostname;
+    const isLocalDev = hostname === 'localhost' || 
+                       hostname === '127.0.0.1' ||
+                       hostname?.endsWith('.local') ||
+                       hostname?.includes('local.') ||
+                       !hostname; // file:// protocol
+    
+    // Only show warnings in local development
+    if (!isLocalDev) {
+      return;
+    }
+  }
+
+  // Only warn once per kit per page load
+  if (warnedKits.has(kitName)) {
+    return;
+  }
+
+  // Mark this kit as warned
+  warnedKits.add(kitName);
+
+  // Build the warning message
+  const baseMessage = `PLAYBOOK DEPRECATION WARNING
+  ----------------------------
+  The "${kitName}" kit is deprecated and will be removed in a future version.`;
+  
+  const fullMessage = message 
+    ? `${baseMessage} ${message}`
+    : `${baseMessage} Please migrate to the recommended alternative
+ 
+  `;
+  
+  console.warn(fullMessage);
+};
+
+/**
+ * Resets the warned kits tracker (useful for testing)
+ * @internal
+ */
+export const resetDeprecationWarnings = (): void => {
+  warnedKits.clear();
+};