playbook_ui 14.8.0 → 14.9.0.pre.alpha.PBNTR686advancedtablepaginationpoc4747

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+type ModifiedGlobalProps = Omit<GlobalProps, 'width'>
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -16,7 +18,7 @@ type ProgressSimpleProps = {
   value: number,
   variant?: "default" | "positive" | "negative" | "warning",
   width: string,
-}
+} & ModifiedGlobalProps
 
 const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
@@ -56,7 +58,7 @@ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   )
 
   return (
-    <div 
+    <div
         {...dataProps}
         {...htmlProps}
         className={wrapperClass}

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,9 +1,10 @@
-<%= content_tag(:div, class: object.wrapper_classname) do %>
+<%= content_tag(:div,
+class: object.wrapper_classname,
+style: object.style) do %>
   <%= content_tag(:div,
   id: object.id,
   data: object.data_values,
   class: object.classname,
-  style: object.style,
   **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -21,6 +21,11 @@ module Playbook
                      values: %w[default positive negative warning],
                      default: "default"
 
+      # Explicitly defining the width prop here so the local prop takes precedence over global width prop
+      def width
+        prop(:width)
+      end
+
       def number_value
         validate_required_progress_props
 

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

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -38,6 +38,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
+  const dynamicInlineProps = globalInlineProps(props)
 
   return (
 
@@ -47,6 +48,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
         {...htmlProps}
         className={classes}
         id={id}
+        style={dynamicInlineProps}
     >
       {
         children && children ||

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb

@@ -6,6 +6,7 @@
     value: "selected_with_icon",
     checked: true,
     icon: true,
+
   }) do %>
     Selected, with icon
   <% end %>
@@ -36,4 +37,4 @@
     Disabled
   <% end %>
 
-</div>
+</div>

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
 import PbTable from '.'
 import {
-  TableHead,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableCell,
+    TableHead,
+    TableHeader,
+    TableBody,
+    TableRow,
+    TableCell,
 } from "./subcomponents";
 
 type TableProps = {
@@ -28,6 +28,7 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
+    stickyLeftcolumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -51,6 +52,7 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
+        stickyLeftcolumn = [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -64,6 +66,7 @@ const Table = (props: TableProps): React.ReactElement => {
     const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
+    const dynamicInlineProps = globalInlineProps(props)
 
     const classNames = classnames(
         'pb_table',
@@ -76,6 +79,7 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'sticky-left-column': stickyLeftcolumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -85,6 +89,56 @@ const Table = (props: TableProps): React.ReactElement => {
         className
     )
 
+    useEffect(() => {
+        const handleStickyColumns = () => {
+            let accumulatedWidth = 0;
+    
+            stickyLeftcolumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftcolumn.length - 1;
+                const header = document.querySelector(`th[id="${colId}"]`);
+                const cells = document.querySelectorAll(`td[id="${colId}"]`);
+    
+                if (header) {
+                    header.classList.add('sticky');
+                    (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+    
+                    if (!isLastColumn) {
+                        header.classList.add('with-border');
+                        header.classList.remove('sticky-shadow');
+                    } else {
+                        header.classList.remove('with-border');
+                        header.classList.add('sticky-shadow');
+                    }
+    
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+    
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border');
+                        cell.classList.remove('sticky-shadow');
+                    } else {
+                        cell.classList.remove('with-border');
+                        cell.classList.add('sticky-shadow');
+                    }
+                });
+            });
+        };
+
+        setTimeout(() => {
+            handleStickyColumns();
+        }, 10);
+
+        window.addEventListener('resize', handleStickyColumns);
+
+        return () => {
+            window.removeEventListener('resize', handleStickyColumns);
+        };
+    }, [stickyLeftcolumn]);
+
     useEffect(() => {
         const instance = new PbTable()
         instance.connect()
@@ -92,26 +146,56 @@ const Table = (props: TableProps): React.ReactElement => {
 
     return (
         <>
-            {isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                >
-                    {children}
+            {responsive === 'scroll' ? (
+                <div className='table-responsive-scroll'>
+                    {isTableTag ? (
+                        <table
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                            style={dynamicInlineProps}
+                        >
+                            {children}
+                        </table>
+                    ) : (
+                        <div
+                            {...ariaProps}
+                            {...dataProps}
+                            {...htmlProps}
+                            className={classNames}
+                            id={id}
+                            style={dynamicInlineProps}
+                        >
+                            {children}
+                        </div>
+                    )}
                 </div>
+            ) : (
+                isTableTag ? (
+                    <table
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </table>
+                ) : (
+                    <div
+                        {...ariaProps}
+                        {...dataProps}
+                        {...htmlProps}
+                        className={classNames}
+                        id={id}
+                        style={dynamicInlineProps}
+                    >
+                        {children}
+                    </div>
+                )
             )}
         </>
     )

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyLeftColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftcolumn={["1", "2", "3"]}
+        >
+            <thead>
+                <tr>
+                    <th id="1">{'Column 1'}</th>
+                    <th id="2">{'Column 2'}</th>
+                    <th id="3">{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th>{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyLeftColumns

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

@@ -0,0 +1,2 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
+export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -20,3 +20,5 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
+@import "sticky_columns";
+@import "scroll";

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -0,0 +1,4 @@
+    .table-responsive-scroll {
+        display: block;
+        overflow-x: auto;
+    }

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss

@@ -0,0 +1,18 @@
+@import "../../tokens/colors";
+
+[class^="pb_table"] {
+    .sticky {
+        position: sticky !important;
+        left: 0;
+        z-index: 1;
+        background-color: white;
+    }
+
+    .with-border {
+        border-right: 1px solid $border_light !important;
+    }
+
+    .sticky-shadow {
+        box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
+    }
+}

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -41,3 +41,50 @@
       }) %>
     <% end %>
 <% end %>
+
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+  <%= pb_rails("timeline/item") do |item| %>
+
+    <% item.label do %>
+      <%= pb_rails("timeline/label") do %>
+        <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
+      <% end %>
+    <% end %>
+  
+    <% item.step do %>
+      <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
+    <% end %>
+  
+    <% item.detail do %>
+      <%= pb_rails("title_detail", props: {
+        title: "Jackson Heights",
+        detail: "37-27 74th Street"
+      }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
+    <%= pb_rails("title_detail", props: {
+        title: "Society Hill",
+        detail: "72 E St Astoria"
+    }) %>
+  <% end %>
+
+  <%= pb_rails("timeline/item") do |item| %>
+
+    <% item.step do %>
+      <%= pb_rails("timeline/step") do %>
+        <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
+      <% end %>
+    <% end %>
+  
+    <% item.detail do %>
+      <%= pb_rails("title_detail", props: {
+        title: "Greenpoint",
+        detail: "81 Gate St Brooklyn"
+      }) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -62,6 +62,65 @@ const TimelineWithChildren = (props) => (
         </Timeline.Detail>
       </Timeline.Item>
     </Timeline>
+
+    <br />
+    <br />
+    <br />
+
+    <Timeline orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label>
+          <Title size={4}
+              text='Any Kit'
+          />
+        </Timeline.Label>
+        <Timeline.Step icon="user"
+            iconColor="royal"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="dotted"
+          {...props}
+      >
+        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <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.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Step>
+          <Pill text="3"
+              variant="success"
+          />
+        </Timeline.Step>
+        <Timeline.Detail>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -2,6 +2,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
+@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -99,6 +100,7 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
+      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -182,6 +184,7 @@
   }
  
   .typeahead-kit-select__menu {
+    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }

data/app/pb_kits/playbook/pb_typeahead/index.ts

@@ -4,11 +4,12 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: Function
+  _debouncedSearch: () => void
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
+  _validSelection: boolean
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -86,6 +87,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
+    this._validSelection = true
+    this.removeValidationError()
+
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
@@ -93,6 +97,28 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
 
+  removeValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'none'
+      }
+      this.searchInput.classList.remove('error')
+    }
+  }
+
+  showValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'block'
+      }
+      this.searchInput.classList.add('error')
+    }
+  }
+
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -201,8 +227,8 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    var visibilityProperty = '0'
+    let visibilityProperty = '0'
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -17,11 +17,14 @@
       <%= pb_rails("text_input", props: {
         type: "search",
         input_options: object.input_options,
-        label: object.label,
         name: object.name,
         value: object.value,
         placeholder: object.placeholder,
         margin_bottom: "none",
+        required: object.required,
+        validation: object.validation,
+        label: object.label,
+        id: object.input_options[:id],
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
@@ -33,4 +36,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -40,6 +40,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :validation, type: Playbook::Props::HashProp,
+                        default: {}
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/tokens/_height.scss

@@ -0,0 +1,19 @@
+
+$height_auto: auto !default;
+$height_xs: 320px !default;
+$height_sm: 480px !default;
+$height_md: 768px !default;
+$height_lg: 1024px !default;
+$height_xl: 1280px !default;
+$height_2xl: 1440px !default;
+$height_3xl: 1920px !default;
+$heights: (
+  height_auto: $height_auto,
+  height_xs: $height_xs,
+  height_sm: $height_sm,
+  height_md: $height_md,
+  height_lg: $height_lg,
+  height_xl: $height_xl,
+  height_xxl: $height_2xl,
+  height_xxxl: $height_3xl
+);