playbook_ui 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10545 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10693

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPbCircleChart
+    class PbCircleChart < ::Playbook::KitBase
+      prop :options, default: {}
+      prop :container_props, default: {}
+
+      def react_props
+        {
+          options: options,
+          containerProps: container_props_hash,
+        }
+      end
+
+      def container_props_hash
+        container_props.merge({
+                                id: id,
+                                className: classname,
+                              }).compact
+      end
+
+      def classname
+        generate_classname("pb_pb_circle_chart")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { PbCircleChart } from 'playbook-ui'
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const chartOptions = {
+  series: [
+    {
+      data: [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ],
+    },
+  ],
+};
+
+const testId = 'pbcirclechart1';
+
+test('Kit to exist', () => {
+  render(
+  <PbCircleChart 
+      data={{testid: testId}} 
+      options={chartOptions} 
+  />
+)
+  expect(screen.getByTestId(testId)).toBeInTheDocument()
+})
+

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -53,10 +53,13 @@ $section_colors_dark: (
 .pb_section_separator_vertical {
   margin-left: $space_xs;
   margin-right: $space_xs;
+  flex-direction: column;
   &::before {
-    display: none;
+    flex: 1;
+    @include section_separator_vertical(false);
   }
   &::after {
+    flex: 1;
     @include section_separator_vertical(false);
   }
 }
@@ -87,7 +90,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::after {
+        &::before, &::after {
           border: 1px dashed $color_value;
           background: none;
         }
@@ -106,7 +109,7 @@ $section_colors_dark: (
   }
   
   &.pb_section_separator_vertical {
-    &::after {
+    &::before, &::after {
       @include section_separator_vertical(true);
     }
   }
@@ -115,6 +118,11 @@ $section_colors_dark: (
     &::before, &::after {
       @include section_separator_dashed(true);
     }
+    &.pb_section_separator_vertical {
+      &::before, &::after {
+        @include section_separator_dashed(true);
+      }
+    }
   }
 }
 
@@ -126,7 +134,7 @@ $section_colors_dark: (
     }
 
     &.pb_section_separator_vertical {
-      &::after {
+      &::before, &::after {
         @include section_separator_vertical(false);
         background: $color_value;
       }
@@ -138,7 +146,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::after {
+        &::before, &::after {
           border: 1px dashed $color_value;
           background: none;
         }

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,4 +11,27 @@
             padding_right: "xs" 
         }) %>
     <% end %>
+<% end %>
+
+<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
+    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
+        <%= pb_rails("card", props: {
+            border_radius: "rounded",
+            justify_content: "center",
+            padding: "none"
+        })  do %>
+            <%= pb_rails("caption", props: {
+                text: "TODAY",
+                size: "xs",
+                padding_left: "xs",
+                padding_right: "xs" 
+            }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,8 +2,25 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
-const children = (
+const childrenHorizontal = (
+    <Card
+        borderRadius="rounded"
+        justifyContent="center"
+        padding="none"
+    >
+        <Caption
+            paddingLeft="xs"
+            paddingRight="xs"
+            size="xs"
+            text="TODAY"
+        />
+    </Card>
+)
+
+const childrenVertical = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -20,12 +37,33 @@ const children = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <SectionSeparator
-            {...props}
-            lineStyle='dashed'
-        >
-            {children}
-        </SectionSeparator>
+        <>
+            <SectionSeparator
+                {...props}
+                lineStyle='dashed'
+            >
+                {childrenHorizontal}
+            </SectionSeparator>
+            <Flex
+                inline="flex-container"
+                marginTop="lg"
+                vertical="stretch"
+            >
+                <FlexItem>
+                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+                </FlexItem>
+                    <SectionSeparator
+                        orientation="vertical"
+                        {...props}
+                    >
+                        {childrenVertical}
+                    </SectionSeparator>
+                <FlexItem>
+                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+                </FlexItem>
+            </Flex>
+        </>
+        
     )
 }
 

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -7,7 +7,10 @@
         <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
-        <%= pb_rails("flex", props: { orientation: "column"}) do %>
+        <% if content %>
+            <%= content %>
+        <% elsif object.text %>
+            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
         <% end %>
     <%end%>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js

@@ -0,0 +1,165 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import SectionSeparator from './_section_separator'
+
+const testId = "section-separator-kit"
+
+describe("Section Separator Kit", () => {
+    test("renders basic section separator with default props", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders with text prop", () => {
+        const text = "Section Title"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                text={text}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const textElement = screen.getByText(text)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit")
+        expect(textElement).toBeInTheDocument()
+    })
+
+    test("renders with children", () => {
+        const childText = "Custom Content"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+            >
+                <span>{childText}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(childText)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit")
+        expect(childElement).toBeInTheDocument()
+    })
+
+    test("renders vertical orientation", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                orientation="vertical"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders background variant", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                variant="background"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders dashed line style", () => {
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                lineStyle="dashed"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_dashed pb_section_separator_color_default")
+    })
+
+    test("renders primary color", () => {
+        render(
+            <SectionSeparator
+                color="primary"
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_primary")
+    })
+
+    test("renders dark mode", () => {
+        render(
+            <SectionSeparator
+                dark
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
+    })
+
+    test("renders with custom className", () => {
+        const customClass = "custom-class"
+        render(
+            <SectionSeparator
+                className={customClass}
+                data={{ testid: testId }}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default custom-class")
+    })
+
+    test("renders vertical with children", () => {
+        const childText = "Vertical Content"
+        render(
+            <SectionSeparator
+                data={{ testid: testId }}
+                orientation="vertical"
+            >
+                <span>{childText}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(childText)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
+        expect(childElement).toBeInTheDocument()
+    })
+
+    test("renders all props combined", () => {
+        const text = "Combined Props"
+        render(
+            <SectionSeparator
+                color="primary"
+                dark
+                data={{ testid: testId }}
+                lineStyle="dashed"
+                orientation="vertical"
+                variant="background"
+            >
+                <span>{text}</span>
+            </SectionSeparator>
+        )
+
+        const kit = screen.getByTestId(testId)
+        const childElement = screen.getByText(text)
+        
+        expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_vertical pb_section_separator_dashed pb_section_separator_color_primary")
+        expect(childElement).toBeInTheDocument()
+    })
+})

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -18,9 +18,11 @@ type TimestampProps = {
   timezone: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  showCurrentYear?: boolean,
   showDate?: boolean,
   showUser?: boolean,
   hideUpdated?: boolean,
+  showTime?: boolean,
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
@@ -37,9 +39,11 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     text,
     timezone,
     timestamp,
+    showCurrentYear = false,
     showDate = true,
     showUser = false,
     hideUpdated = false,
+    showTime = true,
     showTimezone = false,
     unstyled = false,
     variant = 'default',
@@ -55,7 +59,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   )
 
   const currentYear = new Date().getFullYear().toString()
-  const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
   const shouldShowUser = showUser == true && text.length > 0
   const shouldShowTimezone = showTimezone == true && timezone.length > 0
   const updatedText = hideUpdated ? "" : "Last updated"
@@ -70,16 +73,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     return timeDisplay
   }
 
+  const baseDateDisplay = () => {
+  let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
+  if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
+    display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
+  }
+  return display
+}
+
   const fullDateDisplay = () => {
-    let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
-    if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
-      fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
-    }
-    return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
+    const fullDisplay = baseDateDisplay()
+    return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
   }
 
   const formatUpdatedString = () => {
-    return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
+    const finalUpdatedString = []
+    if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
+    if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
+    if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
+    if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
+    return `Last updated ${finalUpdatedString.join(' ')}`
   }
 
   const formatElapsedString = () => {
@@ -93,7 +106,10 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
     case 'elapsed':
       return formatElapsedString()
     default:
-      return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
+      if (showDate && showTime) return timestamp ? fullDateDisplay() : text
+      if (showDate && !showTime) return baseDateDisplay()
+      if (!showDate && showTime) return fullTimeDisplay()
+      return text
     }
   }
 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb

@@ -8,7 +8,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   align: "left"
 }) %>
 
@@ -16,7 +15,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   align: "left"
 }) %>
 
@@ -24,7 +22,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   align: "left"
 }) %>
 
@@ -40,7 +37,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   align: "center"
 }) %>
 
@@ -48,7 +44,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   align: "center"
 }) %>
 
@@ -56,7 +51,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   align: "center"
 }) %>
 
@@ -64,7 +58,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: false,
   align: "right"
 }) %>
 
@@ -72,7 +65,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now,
-  show_date: true,
   align: "right"
 }) %>
 
@@ -80,7 +72,6 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now + 4.years,
-  show_date: true,
   align: "right"
 }) %>
 
@@ -88,6 +79,5 @@
 
 <%= pb_rails("timestamp", props: {
   timestamp: DateTime.now - 1.year,
-  show_date: true,
   align: "right"
 }) %>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx

@@ -25,7 +25,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -34,7 +33,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -43,7 +41,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="left"
-          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -62,7 +59,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -71,7 +67,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -80,7 +75,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="center"
-          showDate
           timestamp={pastDate}
           {...props}
       />
@@ -99,7 +93,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate
           timestamp={todaysDate}
           {...props}
       />
@@ -108,7 +101,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate
           timestamp={futureDate}
           {...props}
       />
@@ -117,7 +109,6 @@ const TimestampAlign = (props) => {
 
       <Timestamp
           align="right"
-          showDate
           timestamp={pastDate}
           {...props}
       />

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md

@@ -0,0 +1 @@
+The `align` prop can be used to set alignment. This prop is set to 'left' by default. 

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb

@@ -1,29 +1,15 @@
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
-  show_date: false,
-  align: "left"
+  timestamp: DateTime.now
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
-  show_date: true,
-  align: "left"
+  timestamp: DateTime.now + 4.years
 }) %>
 
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now + 4.years,
-  show_date: true,
-  align: "left"
-}) %>
-
-<br>
-
-<%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now - 1.year,
-  show_date: true,
-  align: "left"
+  timestamp: DateTime.now - 1.year
 }) %>