playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266913088

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

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