playbook_ui 15.6.0 → 15.7.0.pre.alpha.play258013248

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/_text_input.tsx

@@ -9,6 +9,7 @@ import Card from '../pb_card/_card'
 import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import colors from '../tokens/exports/_colors.module.scss'
 
 import { INPUTMASKS } from './inputMask'
 
@@ -28,6 +29,7 @@ type TextInputProps = {
   onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
   placeholder: string,
   required?: boolean,
+  requiredIndicator?: boolean,
   type: string,
   value: string | number,
   children: React.ReactElement,
@@ -60,6 +62,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     type = 'text',
     value = '',
     children = null,
+    requiredIndicator = false,
     autoComplete = true,
   } = props
 
@@ -208,9 +211,18 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     >
       {label && (
         <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
+          {
+            requiredIndicator ? (
+              <Caption className="pb_text_input_kit_label">
+                {label} <span style={{ color: `${colors.error}` }}>*</span>
+              </Caption>
+            ) : (
+              <Caption className="pb_text_input_kit_label" 
+                  text={label} 
+              />
+            )
+          }
+
         </label>
       )}
       <div className={`${addOnCss} text_input_wrapper`}>

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_text_input/docs/_text_input_required_indicator.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("text_input", props: {
+  label: "First Name",
+  placeholder: "Enter first name",
+  id: "text_input_required_indicator",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_required_indicator.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
+  const handleOnChangeFirstName = ({ target }) => {
+    setFirstName(target.value)
+  }
+
+  return (
+      <TextInput
+          id="text_input_required_indicator"
+          label="First Name"
+          name="firstName"
+          onChange={handleOnChangeFirstName}
+          placeholder="Enter first name"
+          requiredIndicator
+          value={firstName}
+          {...props}
+      />
+  )
+}
+
+export default TextInputDefault

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

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop. 

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

@@ -10,6 +10,8 @@ examples:
   - text_input_options: Input Options
   - text_input_mask: Mask
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
+
   
   react:
   - text_input_default: Default
@@ -22,6 +24,7 @@ examples:
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
   - text_input_autocomplete: Autocomplete
+  - text_input_required_indicator: Required Indicator
 
 
   swift:

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

@@ -8,3 +8,4 @@ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
 export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'
+export { default as TextInputRequiredIndicator } from './_text_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,7 +1,13 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
   <label for="<%= object.input_options[:id] || object.id %>" >
+    <% if object.required_indicator %>
+      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= object.label %><span style="color: #DA0014;"> *</span>
+      <% end %>
+    <% else %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+    <% end %>
   </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -38,6 +38,8 @@ module Playbook
       prop :mask, type: Playbook::Props::Enum,
                   values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
                   default: nil
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -344,3 +344,19 @@ test('does not add autocomplete attribute otherwise', () => {
   const input = within(kit).getByRole('textbox')
   expect(input).not.toHaveAttribute("autocomplete")
 })
+
+test('renders required indicator asterisk when requiredIndicator is true', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="Email Address"
+        requiredIndicator
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Email Address/)
+  
+  expect(label).toBeInTheDocument()
+  expect(kit).toHaveTextContent('*') 
+})

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_time_picker/_time_picker.scss

@@ -0,0 +1,296 @@
+@import "../tokens/typography";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+@import "../tokens/positioning";
+@import "../pb_body/body_mixins";
+
+.pb_time_picker {
+  > label {
+    cursor: pointer;
+    display: block;
+  }
+
+  .time_picker_wrapper {
+    position: relative;
+  }
+
+  .text_input_wrapper_add_on .add-on-card {
+    transition: background-color 0.3s ease-in-out 0s;
+    border-color: $border_light;
+  }
+
+  .text_input_wrapper_add_on:focus-within .add-on-card {
+    transition: background-color 0.3s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
+    border-color: $primary;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .text_input_wrapper_add_on .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light, $opacity_5);
+      }
+    }
+  }
+
+  .text_input_wrapper_add_on .add-on-right .text_input {
+    cursor: pointer;
+  }
+
+  &.error {
+    .text_input_wrapper_add_on .add-on-card {
+      border-color: $error;
+    }
+    
+    .text_input_wrapper_add_on:focus-within .add-on-card {
+      transition: background-color 0.3s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
+      border-color: $error;
+    }
+  }
+
+  &.disabled {
+    > label {
+      cursor: not-allowed;
+    }
+
+    .text_input_wrapper_add_on .add-on-card {
+      background-color: shade($white, 5%);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .text_input_wrapper_add_on .add-on-right .text_input {
+      cursor: not-allowed;
+    }
+
+  }
+
+  .pb_time_picker_container {
+    position: absolute;
+    top: 100%;
+    background-color: $white;
+    overflow: visible;
+    box-shadow: $shadow_deep;
+    border-radius: $border_rad_heavier;
+    border: 1px solid $border_light;
+    margin-top: $space_xxs;
+    z-index: $z_1;
+    width: 314.2px;
+
+    &.pb_time_picker_container_24hour {
+      width: 170.4px;
+    }
+
+    .pb_time_selection {
+      color: inherit;
+      text-align: left;
+      margin: $space_sm;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      .time_input_wrapper {
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        > label {
+          margin-bottom: $space_xxs;
+          cursor: pointer;
+        }
+
+        input.time_input {
+          border: 1px solid $border_light;
+          border-radius: $border_radius_md;
+          text-align: center;
+          width: 60px;
+          margin-left: 0;
+          padding: $space_xs;
+          height: 45px;
+          font-size: 14px;
+          font-weight: $bolder;
+          background-color: $white;
+          cursor: pointer;
+          transition: border-color 0.2s ease, background-color 0.2s ease;
+          color: $text_lt_default;
+
+          appearance: textfield;
+          -moz-appearance: textfield;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            appearance: none;
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          &:focus {
+            border-color: $primary;
+            outline: none;
+          }
+
+          &:hover {
+            background-color: $focus_input_light;
+          }
+
+          &.invalid {
+            border-color: $error;
+            background-color: rgba($error, 0.05);
+          }
+        }
+
+        // Time Selection Dropdowns
+        .time_dropdown {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          background-color: $white;
+          border: 1px solid $border_light;
+          border-radius: $border_rad_heavier;
+          box-shadow: $shadow_deep;
+          margin-top: $space_xxs;
+          max-height: 200px;
+          overflow-y: auto;
+          overflow-x: hidden;
+          z-index: $z_1;
+          width: 60px;
+
+          // Firefox Scrollbar Styles
+          scrollbar-width: thin;
+          scrollbar-color: rgba($text_lt_lighter, 0.5) transparent;
+
+          // Chrome/Safari/Edge (WebKit) Scrollbar Styles
+          &::-webkit-scrollbar {
+            width: 6px;
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent;
+          }
+          &::-webkit-scrollbar-thumb {
+            background-color: rgba($text_lt_lighter, 0.5);
+            border-radius: 3px;
+            
+            &:hover {
+              background-color: rgba($text_lt_lighter, 0.7);
+            }
+          }
+
+          .time_dropdown_option {
+            @include pb_body;
+            padding: $space_xs $space_sm;
+            text-align: center;
+            cursor: pointer;
+            transition: background-color 0.15s ease;
+            white-space: nowrap;
+
+            &:hover {
+              background-color: $bg_light;
+            }
+
+            &.selected {
+              background-color: $primary;
+              color: $white;
+
+              &:hover {
+                background-color: $product_1_background;
+              }
+            }
+          }
+        }
+      }
+
+      .time_range_error {
+        width: 100%;
+        flex-basis: 100%;
+        .time_range_error_text {
+          color: $error;
+        }
+      }
+      .pb_caption_kit_xs {
+        clear: both;
+        display: block;
+        width: 100%;
+        flex-basis: 100%;
+      }
+      .time-separator {
+        padding: 20px 6px 0 6px;
+        font-size: 14px;
+        font-weight: $bolder;
+      }
+      .meridiem {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-left: $space_md;
+        
+        > .time_input_label {
+          margin-bottom: $space_xxs;
+        }
+        
+        .pb_form_group_kit {
+          margin-left: 0;
+          display: flex;
+          gap: 0;
+        }
+
+        .datePicker-AMPM {
+          display: none;
+        }
+        &:focus, &:hover {
+          background: transparent;
+        }
+
+        // Override SelectableCard's display:none to make radio inputs keyboard accessible using visually-hidden pattern to keep inputs focusable but not visible
+        .pb_selectable_card_kit_enabled,
+        .pb_selectable_card_kit_checked_enabled,
+        .pb_selectable_card_kit_disabled,
+        .pb_selectable_card_kit_checked_disabled {
+          > input[type="radio"] {
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+          }
+
+          > input[type="radio"]:focus + label {
+            border-color: $primary;
+          }
+        }
+
+        .pb_selectable_card_kit_enabled > label,
+        .pb_selectable_card_kit_checked_enabled > label,
+        .pb_selectable_card_kit_disabled > label,
+        .pb_selectable_card_kit_checked_disabled > label {
+          padding: 0;
+          margin: 0;
+          width: 60px;
+          height: 45px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: $bolder;
+        }
+
+        .disabled_meridiem > label,
+        .pb_selectable_card_kit_disabled > label,
+        .pb_selectable_card_kit_checked_disabled > label {
+          opacity: 0.5;
+          cursor: not-allowed;
+          background-color: $bg_light;
+          &:hover {
+            background-color: $bg_light;
+          }
+        }
+      }
+    }
+  }
+}