playbook_ui 15.7.0.pre.rc.0 → 15.7.0.pre.rc.1

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.jsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react"
+import { Button, Date as DateKit, DatePicker, Dropdown, Pagination, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
+
+
+// Mock Data for Table
+  const users = [
+    { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
+    { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
+    { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
+    { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
+    { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
+    { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
+    { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
+    { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
+    { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
+    { id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", startDate: "2025-01-10" },
+    { id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-11" },
+    { id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-12" },
+    { id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-13" },
+    { id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-14" },
+    { id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", startDate: "2025-01-15" },
+    { id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-16" },
+    { id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-17" },
+    { id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", startDate: "2025-01-18" },
+    { id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-19" },
+    { id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", startDate: "2025-01-20" },
+    { id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", startDate: "2025-01-21" },
+    { id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", startDate: "2025-01-22" },
+    { id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", startDate: "2025-01-23" },
+    { id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", startDate: "2025-01-24" },
+    { id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-25" },
+    { id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", startDate: "2025-01-26" },
+  ]
+
+
+const TableWithFilterVariantWithPagination = () => {
+  const [territory, setTerritory] = useState("")
+  // ------Pagination-----
+  const [activePage, setActivePage] = useState(1)
+    // Calculate pagination
+  const itemsPerPage = 20
+  const totalPages = Math.ceil(users.length / itemsPerPage)
+  const startIndex = (activePage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentData = users.slice(startIndex, endIndex)
+  
+  const onPageChange = (page) => {
+    setActivePage(page)
+  }
+  // ------End Pagination-----
+  
+// -------Filter content example ------
+  const filterContent = ({ closePopover }) => (
+          <>
+            <TextInput
+                label="Territory ID"
+                onChange={event => setTerritory(event.target.value)}
+                value={territory}
+            />
+            <Typeahead
+                label="Title"
+                options={[
+                  { key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
+                  { key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
+                  { key: "ux-designer", label: "UX Designer", value: "ux-designer" }
+                ]}
+            />
+
+            <Select
+                blankSelection="All Departments"
+                label="Department"
+                options={[
+                  { value: "Business Technology", label: "Business Technology", key: "business-technology" },
+                  { value: "Customer Development", label: "Customer Development", key: "customer-development" },
+                  { value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
+                ]}
+            />
+
+            <Dropdown
+                label="Branch"
+                options={[
+                  { key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
+                  { key: "New York", label: "New York", value: "new-york" },
+                  { key: "Austin", label: "Austin", value: "austin" }
+                ]}
+            />
+
+            <DatePicker
+                label="Start Date"
+                paddingY="sm"
+                pickerId="startedOn"
+            />
+            <Flex spacing="between">
+            <Button
+                onClick={() => {
+                  alert("No filtering functionality - just a pattern demo!")
+                  closePopover()
+                }}
+                text="Filter"
+            />
+            <Button
+                text="Defaults"
+                variant="secondary"
+            />
+            </Flex>
+          </>
+        )
+  // -------End Filter content example ------
+
+  // -------Pagination element example ------
+  const paginationElement = (
+    <Pagination
+        current={activePage}
+        key={`pagination-${activePage}`}
+        marginLeft="lg"
+        onChange={onPageChange}
+        paddingY="xs"
+        range={5}
+        total={totalPages}
+    />
+  )
+  // -------End Pagination element example ------
+
+  return (
+    <Table 
+        filterContent={filterContent}
+        filterProps={{
+          results: 50,
+          sortOptions: {
+            territory_id: "Territory ID",
+            first_name: "Name",
+            started_on: "Start Date",
+            department_name: "Department",
+            title_name: "Title",
+            branch_branch_name: "Branch",
+          },
+          sortValue: [{ name: 'started_on', dir: 'asc' }],
+        }}
+        pagination={paginationElement}
+        title="Table Title Here"
+        variant="withFilter"
+    >
+      <Table.Head>
+        <Table.Row>
+          <Table.Header>{'Territory ID'}</Table.Header>
+          <Table.Header>{'Name'}</Table.Header>
+          <Table.Header>{'Title'}</Table.Header>
+          <Table.Header>{'Department'}</Table.Header>
+          <Table.Header>{'Branch'}</Table.Header>
+          <Table.Header textAlign="right">{'Start Date'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        {currentData.map((user) => (
+          <Table.Row key={user.id}>
+            <Table.Cell 
+                marginX={{ xs: "sm" }}
+                numberSpacing="tabular"
+            >
+                {user.id}
+            </Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
+            <Table.Cell marginX={{ xs: "sm" }}>
+              <DateKit 
+                  alignment="right"
+                  showCurrentYear
+                  value={user.startDate}
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithFilterVariantWithPagination

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md

@@ -0,0 +1,3 @@
+The `withFilter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
+
+For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/react)

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb

@@ -0,0 +1,122 @@
+    <% users = [
+        { id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
+        { id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
+        { id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
+        { id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
+        { id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
+        { id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
+        { id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
+        { id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
+        { id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
+        { id: 10, name: "Sarah", title: "Senior Product Manager", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 10) },
+        { id: 11, name: "Michael", title: "Software Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 11) },
+        { id: 12, name: "Emma", title: "Data Analyst II", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 12) },
+        { id: 13, name: "David", title: "QA Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 13) },
+        { id: 14, name: "Lisa", title: "UX Researcher", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 14) },
+        { id: 15, name: "James", title: "DevOps Engineer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 15) },
+        { id: 16, name: "Anna", title: "Product Designer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 16) },
+        { id: 17, name: "Robert", title: "Backend Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 17) },
+        { id: 18, name: "Maria", title: "Frontend Developer", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 18) },
+        { id: 19, name: "William", title: "Tech Lead", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 19) },
+        { id: 20, name: "Jessica", title: "Scrum Master", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 20) },
+        { id: 21, name: "Daniel", title: "Software Architect", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 21) },
+        { id: 22, name: "Laura", title: "Business Analyst", department: "Customer Development", branch: "Philadelphia", start_date: Date.new(2025, 1, 22) },
+        { id: 23, name: "Chris", title: "Security Engineer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 23) },
+        { id: 24, name: "Ashley", title: "UX Engineer III", department: "Business Technology", branch: "Austin", start_date: Date.new(2025, 1, 24) },
+        { id: 25, name: "Kevin", title: "Platform Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 25) },
+        { id: 26, name: "Michelle", title: "Content Designer", department: "Business Technology", branch: "New York", start_date: Date.new(2025, 1, 26) },
+    ] %>
+
+<% filter_content = 
+    pb_rails("text_input", props: {
+      label: "Territory ID",
+      placeholder: "Enter Territory ID"
+    }) +
+    pb_rails("typeahead", props: {
+      label: "Title",
+      options: [
+        { label: "Senior UX Engineer", value: "senior-ux-engineer" },
+        { label: "UX Engineer", value: "ux-engineer" },
+        { label: "UX Designer", value: "ux-designer" }
+      ]
+    }) +
+    pb_rails("select", props: {
+      blank_selection: "All Departments",
+      label: "Department",
+      options: [
+        { value: "Business Technology", text: "Business Technology" },
+        { value: "Customer Development", text: "Customer Development" },
+        { value: "Talent Acquisition", text: "Talent Acquisition" }
+      ]
+    }) +
+    pb_rails("dropdown", props: {
+      label: "Branch",
+      options: [
+        { label: "Philadelphia", value: "philadelphia" },
+        { label: "New York", value: "new-york" },
+        { label: "Austin", value: "austin" }
+      ]
+    }) +
+    pb_rails("date_picker", props: {
+      label: "Start Date",
+      padding_y: "sm",
+      picker_id: "startedOn"
+    }) +
+    pb_rails("flex", props: { spacing: "between" }) do
+      pb_rails("button", props: {
+        text: "Filter",
+      }) +
+      pb_rails("button", props: {
+        text: "Defaults",
+        variant: "secondary"
+      })
+    end
+%>
+
+<%# Replace "model" in pagination here with your specific data source %>
+<% pagination_element = pb_rails("pagination", props: { model: @users, view: self, padding_y:"xs", margin_left:"lg" }) %>
+
+<%= pb_rails("table", props: {
+  variant: "with_filter",
+  title: "Table Title Here",
+  filter_content: filter_content,
+  pagination: pagination_element,
+  filter_props: {
+    id: "user-table-filters-2",
+    results: users.length,
+    sort_menu: [
+        { item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
+        { item: "First Name", link: "?q[sorts]=name+asc", active: false },
+        { item: "Title", link: "?q[sorts]=title+asc", active: false },
+        { item: "Department", link: "?q[sorts]=department+asc", active: false },
+        { item: "Branch", link: "?q[sorts]=branch+asc", active: false },
+        { item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
+    ],
+  }
+}) do %>
+  <%= pb_rails("table/table_head") do %>
+    <%= pb_rails("table/table_row") do %>
+      <%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Name" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Title" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Department" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Branch" }) %>
+      <%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("table/table_body") do %>
+    <% users.each do |user| %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
+        <%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
+           <%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>        
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md

@@ -0,0 +1,3 @@
+The `with_filter` variant can also be used with the Pagination kit as shown here. Simply set up your Pagination as normal, and pass the Pagination kit to the prop `pagination` as shown.
+
+**IMPORTANT NOTE**: This is NOT a working example of pagination, please set up your use case with the relevant data in your controller. For more information on the Pagination Kit and how to use it, see the documentation [here](https://playbook.powerapp.cloud/kits/pagination/rails)

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

@@ -40,6 +40,8 @@ examples:
     - table_with_selectable_rows: Table with Selectable Rows
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
+    - table_with_filter_variant_rails: Variant with Filter
+    - table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
 
   react:
     - table_sm: Small
@@ -81,3 +83,5 @@ examples:
     - table_with_selectable_rows: Table with Selectable Rows
     - table_with_header_style_borderless: Header Style Borderless
     - table_with_header_style_floating: Header Style Floating
+    - table_with_filter_variant: Variant with Filter
+    - table_with_filter_variant_with_pagination: Variant with Filter and Pagination

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

@@ -38,3 +38,5 @@ export { default as TableWithSelectableRows } from './_table_with_selectable_row
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
 export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
 export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
+export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
+export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,17 +1,73 @@
-<% if object.responsive_classname %>
-  <% responsive_class = object.responsive_classname %>
-<% else %>
-  <% responsive_class = nil %>
-<% end %>
-
-<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
-  <% if object.tag == "table" %>
-    <%= pb_content_tag(:table) do %>
-      <%= content.presence %>
+<%# ------------ variant = 'withFilter' rendering  ------------ %>
+<% if object.with_filter_variant? %>
+  <%= pb_rails("title", props: {
+    padding_left: { xs: "sm", sm: "sm", md: "xl", lg: "xl", xl: "xl", default: "xl" },
+    padding_y: "md",
+    size: 3,
+    text: object.title
+  }) if object.title.present? %>
+  <%= pb_rails("card", props: {
+    margin_x: { xs: "sm", sm: "sm", md: "xl", lg: "xl", xl: "xl", default: "xl" },
+    padding: "none"
+  }) do %>
+    <%= pb_rails("flex", props: {
+      align: "stretch",
+      flex_direction: "column",
+      gap: "none"
+    }) do %>
+      <% if object.filter_content.present? %>
+        <%
+          default_filter_props = {
+            background: false,
+            max_height: "50vh",
+            min_width: "xs",
+            popover_props: { width: "350px" },
+            template: 'single'
+          }
+          merged_filter_props = default_filter_props.merge(object.filter_props)
+        %>
+        <%= pb_rails("filter", props: merged_filter_props) do %>
+          <%= object.filter_content %>
+        <% end %>
+      <% end %>
+      <%= pb_rails("section_separator") if object.filter_content.present? %>
+      <% if object.pagination.present? %>
+        <%= object.pagination %>
+        <%= pb_rails("section_separator") %>
+      <% end %>
+      <% if object.tag == "table" %>
+        <%= pb_content_tag(:table) do %>
+          <%= content.presence %>
+        <% end %>
+      <% else %>
+        <%= pb_content_tag do %>
+          <%= content.presence %>
+        <% end %>
+      <% end %>
+      <% if object.pagination.present? %>
+        <%= object.pagination %>
+      <% end %>
     <% end %>
+  <% end %>
+<%# ------------ End variant = 'withFilter' rendering  ------------ %>
+<% else %>
+  <%# ------------ Default Table (non-filter variant rendering)  ------------ %>
+  <% if object.responsive_classname %>
+    <% responsive_class = object.responsive_classname %>
   <% else %>
-    <%= pb_content_tag do %>
-      <%= content.presence %>
+    <% responsive_class = nil %>
+  <% end %>
+
+  <%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
+    <% if object.tag == "table" %>
+      <%= pb_content_tag(:table) do %>
+        <%= content.presence %>
+      <% end %>
+    <% else %>
+      <%= pb_content_tag do %>
+        <%= content.presence %>
+      <% end %>
     <% end %>
   <% end %>
+  <%# ------------ End Default Table (non-filter variant rendering)  ------------ %>
 <% end %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -40,10 +40,23 @@ module Playbook
       prop :header_style, type: Playbook::Props::Enum,
                           values: %w[default borderless floating],
                           default: "default"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default with_filter],
+                     default: "default"
+      prop :filter_props, type: Playbook::Props::HashProp,
+                          default: {}
+      prop :filter_content
+      prop :pagination
+      prop :title, type: Playbook::Props::String,
+                   default: nil
+
+      def size_class
+        variant === "with_filter" && size == "md" ? "sm" : size
+      end
 
       def classname
         generate_classname(
-          "pb_table", "table-#{size}", single_line_class, dark_class,
+          "pb_table", "table-#{size_class}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", header_style_class, separator: " "
@@ -54,6 +67,10 @@ module Playbook
         responsive ? "table-responsive-#{responsive}" : nil
       end
 
+      def with_filter_variant?
+        variant == "with_filter"
+      end
+
     private
 
       def dark_class
@@ -73,11 +90,13 @@ module Playbook
       end
 
       def container_class
-        container ? "table-card" : nil
+        effective_container = variant == "with_filter" ? false : container
+        effective_container ? "table-card" : nil
       end
 
       def collapse_class
-        responsive != "none" ? "table-collapse-#{collapse}" : ""
+        effective_collapse = variant == "with_filter" && collapse == "sm" ? "md" : collapse
+        responsive != "none" ? "table-collapse-#{effective_collapse}" : ""
       end
 
       def sticky_class

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_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"
               />
             )}