playbook_ui 14.6.2 → 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454

data/app/pb_kits/playbook/pb_timeline/label.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class Label < Playbook::KitBase
+      prop :date
+
+      def classname
+        generate_classname("pb_timeline_item_left_block")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/step.html.erb

@@ -0,0 +1,14 @@
+<%= pb_content_tag do %>
+  <% if object.icon.present? %>
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %>
+  <% else %>
+    <%= content.presence %>
+  <% end %>
+  <div class="pb_timeline_item_connector"></div>
+<% end %>
+
+

data/app/pb_kits/playbook/pb_timeline/step.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class Step < Playbook::KitBase
+      prop :icon, type: Playbook::Props::String
+      prop :icon_color, type: Playbook::Props::Enum,
+                        values: %w[default royal blue purple teal red yellow green],
+                        default: "default"
+
+      def classname
+        generate_classname("pb_timeline_item_step")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+
+type TimelineDetailProps = {
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineDetail: React.FC<TimelineDetailProps> = ({
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_right_block', globalProps(props), className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TimelineDetail

data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import DateStacked from '../../pb_date_stacked/_date_stacked'
+
+type TimelineLabelProps = {
+  date?: Date,
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineLabel: React.FC<TimelineLabelProps> = ({
+  date,
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_left_block', globalProps(props), className)}
+    >
+      {children}
+      {date && (
+        <DateStacked align="center"
+            date={date}
+            size="sm"
+        />
+      )}
+    </div>
+  )
+}
+
+export default TimelineLabel

data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildHtmlProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from "../../utilities/globalProps"
+import IconCircle from '../../pb_icon_circle/_icon_circle'
+
+type TimelineStepProps = {
+  icon?: string,
+  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+  children?: React.ReactNode,
+  className?: string,
+  htmlOptions?: { [key: string]: any },
+} & GlobalProps
+
+const TimelineStep: React.FC<TimelineStepProps> = ({
+  icon = 'user',
+  iconColor = 'default',
+  children,
+  className,
+  htmlOptions = {},
+  ...props
+}) => {
+  const htmlProps = buildHtmlProps(htmlOptions)
+  return (
+    <div
+        {...htmlProps}
+        className={classnames('pb_timeline_item_step', globalProps(props), className)}
+    >
+      {children ? (
+        children
+      ) : (
+        <IconCircle icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+      )}
+      <div className="pb_timeline_item_connector" />
+    </div>
+  )
+}
+
+export default TimelineStep

data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx

@@ -0,0 +1,3 @@
+export { default as TimelineLabel } from './Label';
+export { default as TimelineDetail } from './Detail';
+export { default as TimelineStep } from './Step';

data/app/pb_kits/playbook/pb_timeline/timeline.test.js

@@ -2,6 +2,10 @@ import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
 import Timeline from './_timeline'
+import TimelineItem from './_item'
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
 import TitleDetail from '../pb_title_detail/_title_detail'
 
 const testId = 'timeline'
@@ -43,18 +47,91 @@ const TimelineDefault = (props) => (
     </>
 )
 
+const TimelineWithChildren = (props) => (
+  <>
+    <Timeline
+        className={className}
+        data={{ testid: testId }}
+        orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel date={new Date()} />
+        <TimelineStep icon="user"
+            iconColor="royal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="dotted"
+          {...props}
+      >
+        <TimelineStep icon="check"
+            iconColor="teal"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+
+      <TimelineItem lineStyle="solid"
+          {...props}
+      >
+        <TimelineLabel
+            date={new Date(new Date().setDate(new Date().getDate() + 1))}
+        />
+        <TimelineStep icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <TimelineDetail>
+          <TitleDetail
+              detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </TimelineDetail>
+      </TimelineItem>
+    </Timeline>
+  </>
+)
+
 test('should pass data prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toBeInTheDocument()
 })
 
+test('should pass data prop using children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+
 test('should pass className prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass(className)
 })
 
+test('should pass className prop with children', () => {
+    render(<TimelineWithChildren />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+
 test('should pass aria prop', () => {
     render(<TimelineDefault />)
     const kit = screen.getByTestId(testId)
@@ -86,3 +163,10 @@ test('should pass showDate prop', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
 })
+
+test('should pass showDate prop with Children', () => {
+    const props = { showDate: true }
+    render(<TimelineWithChildren {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
+})

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]'
@@ -19,6 +20,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
+    this.element.closest('form')?.addEventListener('submit', (event) => this.handleFormSubmission(event))
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -86,6 +88,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 +98,35 @@ 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')
+    }
+  }
+
+  handleFormSubmission(event: Event) {
+    if (!this._validSelection) {
+      this.showValidationError()
+      event.preventDefault()
+    }
+  }
+
   clearResults() {
     this.resultsElement.innerHTML = ''
   }
@@ -201,7 +235,7 @@ 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/_typography.scss

@@ -1,3 +1,5 @@
+@import "../tokens/colors";
+
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -51,3 +53,36 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
+
+/* Link Colors */
+$pb_link_colors: (
+  default:        $primary_action,
+  body:           $text_lt_default,
+  muted:          $text_lt_light,
+  destructive:    $error,
+);
+
+$pb_link_hover_colors: (
+  default:        $text_lt_default,
+  body:           $primary_action,
+  muted:          $text_lt_default,
+  destructive:    $text_lt_default,
+);
+
+$pb_dark_link_colors: (
+  default:        $active_dark,
+  body:           $text_dk_default,
+  muted:          $text_dk_light,
+  destructive:    $error_dark,
+);
+
+$pb_dark_link_hover_colors: (
+  default:        $text_dk_default,
+  body:           $active_dark,
+  muted:          $text_dk_default,
+  destructive:    $text_dk_default,
+);
+
+@mixin pb_link($color: $primary_action) {
+  color: $color;
+}

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -1,51 +1,54 @@
 @import "../tokens/exports/scale.module";
 
-@mixin hover-color-classes($colors-list) {
-    @each $name, $color in $colors-list {
-      .hover_background_#{"" + $name}:hover {
-        background-color: $color !important;
-        transition: background-color $transition-speed ease;
-      }
-      .hover_color_#{"" + $name}:hover {
-        color: $color !important;
-        transition: color $transition-speed ease;
-      }
+@mixin hover-scale-classes($scales-list) {
+  @each $name, $scale in $scales-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_#{"" + $name} {
+      transform: $scale;
+      transition: transform $transition-speed ease;
     }
   }
-  
-  @mixin hover-shadow-classes($shadows-list) {
-    @each $name, $shadow in $shadows-list {
-      .hover_#{"" + $name}:hover {
-        box-shadow: $shadow;
-        transition: box-shadow $transition-speed ease;
-      }
+}
+
+@mixin hover-shadow-classes($shadows-list) {
+  @each $name, $shadow in $shadows-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_#{"" + $name} {
+      box-shadow: $shadow;
+      transition: box-shadow $transition-speed ease;
     }
   }
-  
-  @mixin hover-scale-classes($scales-list) {
-    @each $name, $scale in $scales-list {
-      .hover_#{"" + $name}:hover {
-        transform: $scale;
-        transition: transform $transition-speed ease;
-      }
+}
+
+@mixin hover-color-classes($colors-list) {
+  @each $name, $color in $colors-list {
+    .hover_background_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_background_#{"" + $name} {
+      background-color: $color !important;
+      transition: background-color $transition-speed ease;
+    }
+    .hover_color_#{"" + $name}:hover,
+    .group_hover:hover .group_hover.hover_color_#{"" + $name} {
+      color: $color !important;
+      transition: color $transition-speed ease;
     }
   }
-  
-  
-  @include hover-scale-classes($scales);
-  @include hover-shadow-classes($box_shadows);
-  @include hover-color-classes($product_colors);
-  @include hover-color-classes($status_colors);
-  @include hover-color-classes($data_colors);
-  @include hover-color-classes($shadow_colors);
-  @include hover-color-classes($colors);
-  @include hover-color-classes($interface_colors);
-  @include hover-color-classes($main_colors);
-  @include hover-color-classes($background_colors);
-  @include hover-color-classes($card_colors);
-  @include hover-color-classes($active_colors);
-  @include hover-color-classes($action_colors);
-  @include hover-color-classes($hover_colors);
-  @include hover-color-classes($border_colors);
-  @include hover-color-classes($text_colors);
-  @include hover-color-classes($category_colors);
+}
+
+@include hover-scale-classes($scales);
+@include hover-shadow-classes($box_shadows);
+@include hover-color-classes($product_colors);
+@include hover-color-classes($status_colors);
+@include hover-color-classes($data_colors);
+@include hover-color-classes($shadow_colors);
+@include hover-color-classes($colors);
+@include hover-color-classes($interface_colors);
+@include hover-color-classes($main_colors);
+@include hover-color-classes($background_colors);
+@include hover-color-classes($card_colors);
+@include hover-color-classes($active_colors);
+@include hover-color-classes($action_colors);
+@include hover-color-classes($hover_colors);
+@include hover-color-classes($border_colors);
+@include hover-color-classes($text_colors);
+@include hover-color-classes($category_colors);

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -1,9 +1,13 @@
 export default [
+  "minHeight",
+  "maxHeight",
+  "height",
   "left",
   "bottom",
   "right",
   "top",
   "hover",
+  "groupHover",
   "zIndex",
   "verticalAlign",
   "truncate",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -66,6 +66,10 @@ type Hover = Shadow & {
   scale?: "sm" | "md" | "lg"
 }
 
+type GroupHover  = {
+  groupHover?: boolean,
+}
+
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -170,12 +174,24 @@ type ZIndex = {
   zIndex?: ZIndexType,
 } | ZIndexResponsiveType
 
+type Height = {
+  height?: string 
+}
+
+type MaxHeight = {
+  maxHeight?: string
+}
+
+type MinHeight = {
+  minHeight?: string
+}
+
 // keep this as the last type definition
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -209,6 +225,7 @@ const filterClassName = (value: string): string => {
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
 
+  groupHoverProps: ({ groupHover }: GroupHover ) => groupHover ? 'group_hover ' : '',
   hoverProps: ({ hover }: { hover?: Hover }) => {
       let css = '';
       if (!hover) return css;
@@ -498,7 +515,22 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
     }
-  }
+  },
+
+}
+
+const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
+  heightProps: ({ height }: Height) => {
+    return height ? { height } : {}; 
+  },
+
+  maxHeightProps: ({ maxHeight }: MaxHeight) => {
+    return maxHeight ? { maxHeight } : {};
+  },
+
+  minHeightProps: ({ minHeight }: MinHeight) => {
+    return minHeight ? { minHeight } : {}; 
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>
@@ -510,6 +542,16 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
   }).filter((value) => value?.length > 0).join(" ")
 }
 
+// New function for inline styles
+export const globalInlineProps = (props: GlobalProps): React.CSSProperties => {
+  const styles = Object.keys(PROP_INLINE_CATEGORIES).reduce((acc, key) => {
+    const result = PROP_INLINE_CATEGORIES[key](props);
+    return { ...acc, ...(typeof result === 'object' ? result : {}) }; // Ensure result is an object before spreading
+  }, {});
+
+  return styles; // Return the styles object directly
+}
+
 
 export const deprecatedProps = (): void => {
   // if (process.env.NODE_ENV === 'development') {