playbook_ui 15.0.0.pre.alpha.PLAY2453formtextfieldtextinputprops10419 → 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -110,18 +110,41 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null); // Add wrapper ref
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
 
+  // Function to update validation state on the wrapper element
+  // Only applies when input is required
+  const updateValidationState = (hasError: boolean) => {
+    if (wrapperRef.current && required) {
+      if (hasError) {
+        wrapperRef.current.classList.add('pb_phone_number_validation_error')
+        wrapperRef.current.setAttribute('data-pb-phone-validation-error', 'true')
+      } else {
+        wrapperRef.current.classList.remove('pb_phone_number_validation_error')
+        wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
+      }
+    } else if (wrapperRef.current && !required) {
+      // Always clear validation state if field is not required
+      wrapperRef.current.classList.remove('pb_phone_number_validation_error')
+      wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
+    }
+  }
+
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    const hasError = (error ?? '').length > 0
+    if (hasError) {
       onValidate(false)
     } else {
       onValidate(true)
     }
+
+    // Update validation state whenever error changes
+    updateValidationState(hasError)
   }, [error, onValidate])
 
   /*
@@ -135,6 +158,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         setInputValue("")
         setError("")
         setHasTyped(false)
+        // Only clear validation state if field was required
+        if (required) {
+          updateValidationState(false)
+        }
       },
       inputNode() {
         return inputRef.current
@@ -212,10 +239,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }
 
+  // Validation for required empty fields
+  const validateRequiredField = () => {
+    if (required && (!inputValue || inputValue.trim() === '')) {
+      setError('Missing phone number')
+      return true
+    }
+    return false
+  }
 
   const validateErrors = () => {
     if (!hasTyped && !error) return
 
+    // First check if required field is empty
+    if (validateRequiredField()) return
+
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -310,7 +348,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     value: inputValue
   }
 
-  let wrapperProps: Record<string, unknown> = { className: classes }
+  let wrapperProps: Record<string, unknown> = {
+    className: classes,
+    ref: wrapperRef // Add ref to wrapper
+  }
 
   if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
   if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
-        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
+      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
+        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
 
       const editorElement = editorContainer?.querySelector('trix-editor')
       const inputId = editorElement?.getAttribute('input')

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