playbook_ui 14.9.0.pre.alpha.PBNTR686advancedtablepaginationpoc4747 → 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -7,14 +7,21 @@ import {
   buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
+import Collapsible from "../../pb_collapsible/_collapsible";
+import useCollapsible from "../../pb_collapsible/useCollapsible";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
+  collapsible?: boolean;
+  collapsibleContent?: React.ReactNode[] | React.ReactNode;
+  collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
+  dark?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
+  toggleCellId?: string;
   sideHighlightColor: string;
   tag?: "table" | "div";
 };
@@ -23,10 +30,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
+    collapsible,
+    collapsibleContent,
+    collapsibleSideHighlight = true,
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
+    toggleCellId,
     sideHighlightColor = "none",
     tag = "table",
   } = props;
@@ -36,17 +48,110 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
+  
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
+
+  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
+    collapsibleRow,
     globalProps(props),
     className
   );
   const isTableTag = tag === "table";
 
+  // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
+
+  const colSpan = React.Children.count(children);
+
+  const handleRowClick = (event: React.MouseEvent) => {
+    if (toggleCellId) {
+      const target = event.target as HTMLElement;
+      const clickedCell = target.closest(`#${toggleCellId}`);
+      const isIconClick =
+      target instanceof SVGElement &&
+      (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
+
+        if (clickedCell || isIconClick) { 
+      setIsCollapsed(!isCollapsed);
+      }
+    } else {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+    
   return (
     <>
-      {isTableTag ? (
+      {collapsible ? (
+        isTableTag ? (
+          <>
+            <tr
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                onClick={(e)=>handleRowClick(e)}
+                style={{ cursor: toggleCellId ? "default" : "pointer" }}
+            >
+              {children}
+            </tr>
+            <tr>
+              <Collapsible
+                  collapsed={isCollapsed}
+                  dark={dark}
+                  htmlOptions={{ colSpan: colSpan }}
+                  padding="none"
+                  tag="td"
+              >
+                <tr/>
+                <Collapsible.Content 
+                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
+                    dark={dark}
+                    margin="none"
+                    padding="none"
+                >
+                 {collapsibleContent}
+                </Collapsible.Content>
+              </Collapsible>
+            </tr>
+          </>
+        ) : (
+          <>
+            <div
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                onClick={handleRowClick}
+                style={{ cursor: "pointer" }}
+            >
+              {children}
+            </div>
+            <tr>
+              <Collapsible
+                  collapsed={isCollapsed}
+                  dark={dark}
+                  htmlOptions={{ colSpan: colSpan }}
+                  padding="none"
+                  tag="td"
+              >
+                <tr/>
+                <Collapsible.Content 
+                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
+                    dark={dark}
+                    margin="none"
+                    padding="none"
+                >
+                 {collapsibleContent}
+                </Collapsible.Content>
+              </Collapsible>
+            </tr>
+          </>
+        )
+      ) : isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,10 +49,11 @@
   }
 
   &.dark {
-    @include pb_title_dark; 
-  }
-
-  &.dark[class*=_link] { 
-    @include pb_title_dark_link; 
+    @include title_dark;
+    @each $name, $color in $pb_dark_title_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -9,6 +9,15 @@ $pb_title_colors: (
   link: $primary
 );
 
+$pb_dark_title_colors: (
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  success: $success,
+  error: $error_dark,
+  link: $active_dark
+);
+
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
     &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
     }
   }
 }
+
+@mixin title_dark {
+  color: $text_dk_default;
+}

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

@@ -33,14 +33,6 @@
   @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
-@mixin pb_title_dark {
-    color: $text_dk_default;
-} 
-
-@mixin pb_title_dark_link {
-    color: $active_dark;
-}
-
 @mixin pb_title_bold {
   font-weight: $bolder;
 }

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

@@ -20,6 +20,13 @@
   }
 }
 
+@mixin hover-underline {
+  .hover_underline:hover {
+    text-decoration: underline;
+    transition: text-decoration $transition-speed ease;
+  }
+}
+
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
       .hover_background-#{"" + $name}:hover {
@@ -32,7 +39,9 @@
       }
     }
   }
-  
+
+
+  @include hover-underline;
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -64,4 +73,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}

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

@@ -64,6 +64,7 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
+  underline?: boolean,
   visibility?: boolean,
 }
 
@@ -236,6 +237,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background-${hover.background } ` : '';
+      css += hover.underline ? `hover_underline ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
       css += hover.visibility ? `hover_visibility` : '';

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

@@ -57,6 +57,19 @@ test('Hover Props: returns proper class name', () => {
   expectedClassName = `hover_scale_xl`;
   expect(kit).toHaveClass(expectedClassName);
 
+  const testIdUnderline = `${testSubject}-hover-underline`;
+  render(
+    <Body
+        data={{ testid: testIdUnderline }}
+        hover={{ underline: true }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdUnderline);
+  expectedClassName = `hover_underline`;
+  expect(kit).toHaveClass(expectedClassName);
+
   const testIdMultiple = `${testSubject}-hover-multiple`;
   render(
     <Body
@@ -66,6 +79,7 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
+        underline: true,
       }}
         text="Hi"
     />
@@ -76,4 +90,5 @@ test('Hover Props: returns proper class name', () => {
   expect(kit).toHaveClass('hover_background-error');
   expect(kit).toHaveClass('hover_shadow_deeper');
   expect(kit).toHaveClass('hover_scale_xl');
+  expect(kit).toHaveClass('hover_underline');
 });