playbook_ui 15.4.0.pre.alpha.testing6712538 → 15.4.0.pre.alpha.testingseparation12395

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -6,6 +6,7 @@ import ProgressStepItem from '../_progress_step_item.tsx'
 const ProgressStepDefault = (props) => (
   <div>
     <ProgressStep
+        icon
         {...props}
     >
       <ProgressStepItem status="complete" />
@@ -18,24 +19,12 @@ const ProgressStepDefault = (props) => (
 
     <ProgressStep {...props}>
       <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
+      <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
+      <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
     </ProgressStep>
 
     <br />
     <br />
-
-    <ProgressStep 
-        icon
-        {...props}
-    >
-      <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-      <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
-      <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
-      <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
-    </ProgressStep>
   </div>
 )
 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -25,7 +25,13 @@
     Child
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
-    Child
+    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
+<br>
+<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
+  Card content
+<% end %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
     Child

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

@@ -3,7 +3,6 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
   - progress_step_custom_icon: Custom Icon
   - progress_step_tooltip: Tooltip
 
@@ -11,6 +10,4 @@ examples:
   - progress_step_default: Default
   - progress_step_vertical: Vertical
   - progress_step_tracker: Tracker
-  - progress_step_color: Color
-  - progress_step_custom_icon: Custom Icon
   - progress_step_tracker_click_events: Using State

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

@@ -2,5 +2,3 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
 export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
 export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
 export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
-export { default as ProgressStepColor } from './_progress_step_color.jsx'
-export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'

data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js

@@ -107,44 +107,3 @@ test('should render the children elements', () => {
   expect(step2Kit).toHaveClass('pb_progress_step_item_active')
   expect(step3Kit).toHaveClass('pb_progress_step_item_inactive')
 })
-
-test('should render info color', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            color="info"
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker_info')
-})
-
-test('should render custom icon', () => {
-render( 
-        <ProgressStep
-            aria={{ label: testId }}
-            data={{ testid: testId }} 
-            variant="tracker"
-        >
-          <ProgressStepItem icon="exclamation-triangle" 
-              status="complete"
-          >
-            {'Step 1'}
-          </ProgressStepItem>
-          <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
-          <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
-        </ProgressStep> 
-        )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('pb_progress_step_kit_horizontal_tracker')
-  const icon = kit.getAttribute('aria-label', "exclamation-triangle-icon")
-  expect(icon).toBeDefined()
-})

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

@@ -119,22 +119,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
+                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-right');
-                            cell.classList.remove('sticky-left-shadow');
-                        } else {
-                            cell.classList.remove('with-border-right');
-                            cell.classList.add('sticky-left-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
+                    } else {
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
+                    }
+                });
             });
         };
 
@@ -171,22 +170,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-                        if (!isLastColumn) {
-                            cell.classList.add('with-border-left');
-                            cell.classList.remove('sticky-right-shadow');
-                        } else {
-                            cell.classList.remove('with-border-left');
-                            cell.classList.add('sticky-right-shadow');
-                        }
-                    });
-                }
+                    if (!isLastColumn) {
+                        cell.classList.add('with-border-left');
+                        cell.classList.remove('sticky-right-shadow');
+                    } else {
+                        cell.classList.remove('with-border-left');
+                        cell.classList.add('sticky-right-shadow');
+                    }
+                });
             });
         };
 

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

@@ -161,10 +161,6 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
-  .pb_badge_kit_primary {
-    margin-bottom: 2px;
-    margin-top: 2px;
-  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,7 +62,6 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
-            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

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

@@ -11,8 +11,6 @@ $truncate-styles: (
   display: -webkit-box;
   -webkit-line-clamp: $number;
   -webkit-box-orient: vertical;
-  overflow-wrap: anywhere;
-  word-break: break-all;
 }
 
 @each $class, $number in $truncate-styles {

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

@@ -213,24 +213,10 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
-  let classResult = ''
-  
-  // Handle default value separately (generates base class without size prefix)
-  if (prop.default !== undefined) {
-    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
-    classResult += `${classPrefix}_${defaultValue} `
-  }
-  
-  // Handle responsive sizes (generates classes with size prefix)
-  keys.forEach((key) => {
-    if (screenSizeValues.includes(key)) {
-      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
-      classResult += `${classPrefix}_${key}_${propValue} `
-    }
-  })
-  
-  return classResult.trim()
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
 }
 
 //reusable function for top, bottom, right and left props
@@ -450,11 +436,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = value.toString()
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -479,11 +463,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(displayEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_content_space_around`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_content_xs_center`)
-  expect(kit).toHaveClass(`align_content_sm_space_around`)
-  expect(kit).toHaveClass(`align_content_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -34,21 +34,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_items_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_items_xs_center`)
-  expect(kit).toHaveClass(`align_items_sm_end`)
-  expect(kit).toHaveClass(`align_items_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_self_xs_center`)
-  expect(kit).toHaveClass(`align_self_sm_end`)
-  expect(kit).toHaveClass(`align_self_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -36,21 +36,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`display_none`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`display_xs_block`)
-  expect(kit).toHaveClass(`display_sm_none`)
-  expect(kit).toHaveClass(`display_md_block`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -62,21 +62,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_3`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_xs_1`)
-  expect(kit).toHaveClass(`flex_sm_3`)
-  expect(kit).toHaveClass(`flex_md_1`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexDirection={{ default: "column", xs: "row", sm: "column", md: "row" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_direction_column`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_direction_xs_row`)
-  expect(kit).toHaveClass(`flex_direction_sm_column`)
-  expect(kit).toHaveClass(`flex_direction_md_row`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexGrow={{ default: 1, xs: 0, sm: 1, md: 0 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_grow_1`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_grow_xs_0`)
-  expect(kit).toHaveClass(`flex_grow_sm_1`)
-  expect(kit).toHaveClass(`flex_grow_md_0`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexShrink={{ default: 0, xs: 1, sm: 0, md: 1 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_shrink_0`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_shrink_xs_1`)
-  expect(kit).toHaveClass(`flex_shrink_sm_0`)
-  expect(kit).toHaveClass(`flex_shrink_md_1`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flexWrap={{ default: "wrap", xs: "nowrap", sm: "wrap", md: "nowrap" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_wrap_wrap`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_wrap_xs_nowrap`)
-  expect(kit).toHaveClass(`flex_wrap_sm_wrap`)
-  expect(kit).toHaveClass(`flex_wrap_md_nowrap`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        justifyContent={{ default: "spaceBetween", xs: "start", sm: "spaceBetween", md: "start" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`justify_content_space_between`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`justify_content_xs_start`)
-  expect(kit).toHaveClass(`justify_content_sm_space_between`)
-  expect(kit).toHaveClass(`justify_content_md_start`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js

@@ -35,21 +35,3 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        justifySelf={{ default: "end", xs: "start", sm: "end", md: "center" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`justify_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`justify_self_xs_start`)
-  expect(kit).toHaveClass(`justify_self_sm_end`)
-  expect(kit).toHaveClass(`justify_self_md_center`)
-})

data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js

@@ -33,21 +33,3 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
-
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        order={{ default: 3, xs: 1, sm: 3, md: 1 }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_order_3`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_order_xs_1`)
-  expect(kit).toHaveClass(`flex_order_sm_3`)
-  expect(kit).toHaveClass(`flex_order_md_1`)
-})