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

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