playbook_ui 14.6.2.pre.alpha.PLAY15814384 → 14.7.0.pre.alpha.PBNTR667railstypeaheadformintegration4454

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingHeightWidth = (props) => (
+  <div>
+    <SkeletonLoading
+        height="100px"
+        width="50%"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        height="20px"
+        marginY="md"
+        stack="3"
+        width="50px"
+        {...props}
+    />
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        marginBottom="md"
+        padding="none" 
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="50%"
+          width="300px"
+          {...props}
+      />
+    </Card>
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
+        padding="none"
+    >
+      <SkeletonLoading
+          borderRadius="md"
+          gap="xl"
+          height="30%"
+          stack="2"
+          width="70%"
+          {...props}
+      />
+    </Card>
+    <SkeletonLoading 
+        height="150px"
+        marginY="md"
+        width="150px"
+        {...props}
+    />
+    <SkeletonLoading 
+        borderRadius="rounded"
+        height="150px"
+        width="150px"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingHeightWidth

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.md

@@ -0,0 +1,3 @@
+The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
+
+Set the `height` and `width` props to the same value to make a square. A `rounded` borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { SkeletonLoading } from "playbook-ui"
+
+
+const SkeletonLoadingLayout = (props) => (
+  <div>
+    <SkeletonLoading
+        stack="5"
+        {...props}
+    />
+    <SkeletonLoading
+        gap="md"
+        paddingTop="xl"
+        stack="3"
+        {...props}
+    />
+  </div>
+)
+
+export default SkeletonLoadingLayout

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.md

@@ -0,0 +1,3 @@
+Use the `stack` and `gap` props in conjunction to layer multiple Skeleton loading bars on top of each other.
+
+`stack` accepts a number that correlates to the number of rows (1 is default), and `gap` accepts a portion of our [spacing props](https://playbook.powerapp.cloud/visual_guidelines/spacing) (`xxs` as default, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`) to set the pixel distance between each row. `gap` will not do anything if there is no corresponding `stack` prop set.

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

@@ -0,0 +1,13 @@
+examples:
+  
+  rails:
+  # - skeleton_loading_default: Default
+  
+  
+  react:
+  - skeleton_loading_default: Default
+  - skeleton_loading_color: Color
+  - skeleton_loading_layout: Layout
+  - skeleton_loading_border_radius: Border Radius
+  - skeleton_loading_height_width: Height & Width
+  

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

@@ -0,0 +1,5 @@
+export { default as SkeletonLoadingDefault } from './_skeleton_loading_default.jsx'
+export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
+export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
+export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
+export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.html.erb

@@ -0,0 +1,12 @@
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>SKELETON_LOADING CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSkeletonLoading
+    class SkeletonLoading < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_skeleton_loading/skeleton_loading.test.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ensureAccessible } from '../utilities/test-utils'
+import { SkeletonLoading } from 'playbook-ui'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+describe('SkeletonLoading', () => {
+  const defaultProps = {
+    data: { testid: 'skeleton-loading' }
+  }
+
+  it('should be accessible', async () => {
+    ensureAccessible(SkeletonLoading, defaultProps)
+  })
+
+  it('renders with default props', () => {
+    const { container } = render(<SkeletonLoading {...defaultProps} />)
+    const skeleton = screen.getByTestId('skeleton-loading')
+    
+    expect(skeleton).toBeInTheDocument()
+    expect(skeleton).toHaveClass('pb_skeleton_loading')
+    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(1)
+  })
+
+  it('renders multiple skeleton items based on stack prop', () => {
+    const props = {
+      ...defaultProps,
+      stack: 3
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    
+    expect(container.querySelectorAll('div[class*="border_radius_"]')).toHaveLength(3)
+  })
+
+  it('applies custom styles correctly', () => {
+    const props = {
+      ...defaultProps,
+      height: '24px',
+      width: '50%',
+      borderRadius: 'lg',
+      color: 'light',
+      dark: true
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItem = container.querySelector('div[class*="border_radius_"]')
+
+    expect(skeletonItem).toHaveClass('border_radius_lg')
+    expect(skeletonItem).toHaveClass('dark')
+  })
+
+  it('applies gap class to items after first one', () => {
+    const props = {
+      ...defaultProps,
+      stack: 3,
+      gap: 'md'
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+    
+    expect(skeletonItems[0]).not.toHaveClass('gap_md')
+    expect(skeletonItems[1]).toHaveClass('gap_md')
+    expect(skeletonItems[2]).toHaveClass('gap_md')
+  })
+
+  it('handles no gap properly', () => {
+    const props = {
+      ...defaultProps,
+      stack: 2,
+      gap: 'none'
+    }
+    const { container } = render(<SkeletonLoading {...props} />)
+    const skeletonItems = container.querySelectorAll('div[class*="border_radius_"]')
+    
+    expect(skeletonItems[0]).not.toHaveClass('gap_none')
+    expect(skeletonItems[1]).not.toHaveClass('gap_none')
+  })
+})

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/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

@@ -7,6 +7,7 @@ export default [
   "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
 }
@@ -221,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;