RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 - Mend

playbook_ui 14.9.0.pre.alpha.PLAY16264952 → 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736

Files changed (88) hide show

data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx CHANGED Viewed

@@ -1,46 +1,40 @@
-import React from "react"
-import classnames from "classnames"
+import React from 'react'
+import classnames from 'classnames'
-import { buildCss, buildHtmlProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
+import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
-import Body from "../pb_body/_body"
-import Icon from "../pb_icon/_icon"
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
-const statusMap: {
-  neutral: "neutral"
-  decrease: "negative"
-  increase: "positive"
-} = {
-  increase: "positive",
-  decrease: "negative",
-  neutral: "neutral",
+const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
+  increase: 'positive',
+  decrease: 'negative',
+  neutral: 'neutral',
 }
 const iconMap = {
-  increase: "arrow-up",
-  decrease: "arrow-down",
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
 }
 type StatChangeProps = {
-  change?: "increase" | "decrease" | "neutral"
-  className?: string
-  dark?: boolean
-  icon?: string
-  id?: string
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
-  value?: string | number
+  change?: 'increase' | 'decrease' | 'neutral',
+  className?: string,
+  icon?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  value?: string | number,
 }
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const {
-    change = "neutral",
-    className,
-    dark = false,
+  const {
+    change = 'neutral',
+    className,
     htmlOptions = {},
-    icon,
-    id,
-    value,
+    icon,
+    id,
+    value
   } = props
   const status = statusMap[change as keyof typeof statusMap]
@@ -53,32 +47,30 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
   return (
     <>
-      {value && (
+      {value &&
         <div
             className={classnames(
-            buildCss("pb_stat_change_kit", status),
-            globalProps(props),
-            className
-          )}
+              buildCss('pb_stat_change_kit', status),
+              globalProps(props),
+              className
+              )}
             id={id}
             {...htmlProps}
         >
-          <Body dark={dark}
-              status={status}
-          >
-            {" "}
-            {returnedIcon && (
+          <Body status={status}>
+            {returnedIcon &&
               <>
-                <Icon dark={dark}
+                <Icon
                     fixed_width
                     icon={returnedIcon}
-                />{" "}
+                />
+                {' '}
               </>
-            )}
+            }
             {`${value}%`}
           </Body>
         </div>
-      )}
+      }
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb CHANGED Viewed

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
-    <%= "#{object.value}%" if object.value %>
-  <% end %>
+      <%= pb_rails("body", props: { status: object.status }) do %>
+        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
+        <%= "#{object.value}%" if object.value %>
+      <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED Viewed

@@ -55,8 +55,3 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_table/docs/index.js CHANGED Viewed

@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
-export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
-export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
-export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

data/app/pb_kits/playbook/pb_table/index.ts CHANGED Viewed

@@ -1,106 +1,32 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyColumnsRef: () => void;
-    static get selector(): string {
-      return '.table-responsive-collapse'
-    }
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
-        const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-            const colSpan = header.colSpan
-            for (let i = 0; i < colSpan; i++) {
-              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-            }
-        });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
-          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
-            cell.setAttribute('data-title', headers[headerIndex])
-          })
-        })
-      });
-      // New sticky columns logic
-      this.initStickyColumns();
-    }
-    private initStickyColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
-        const classList = Array.from(table.classList);
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
-        if (stickyColumnClass) {
-          // Extract the IDs from the class name
-          this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
-          if (this.stickyLeftColumns.length > 0) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
-          }
+  static get selector(): string {
+    return '.table-responsive-collapse'
+  }
+  connect(): void {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+      // Header Titles
+      const headers: string[] = [];
+      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        const colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
         }
       });
-    }
-    private handleStickyColumns(): void {
-      let accumulatedWidth = 0;
-      this.stickyLeftColumns.forEach((colId, index) => {
-        const isLastColumn = index === this.stickyLeftColumns.length - 1;
-        const header = document.querySelector(`th[id="${colId}"]`);
-        const cells = document.querySelectorAll(`td[id="${colId}"]`);
-        if (header) {
-          header.classList.add('sticky');
-          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-          if (!isLastColumn) {
-            header.classList.add('with-border');
-            header.classList.remove('sticky-shadow');
-          } else {
-            header.classList.remove('with-border');
-            header.classList.add('sticky-shadow');
-          }
-          accumulatedWidth += (header as HTMLElement).offsetWidth;
-        }
-        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');
-            cell.classList.remove('sticky-shadow');
-          } else {
-            cell.classList.remove('with-border');
-            cell.classList.add('sticky-shadow');
-          }
-        });
-      });
-    }
-    // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyColumnsRef);
-      }
-    }
-}
+      // for each row in tbody
+      [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+        // for each cell
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+          // apply the attribute
+          cell.setAttribute('data-title', headers[headerIndex])
+        })
+      })
+    })
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_all.scss CHANGED Viewed

@@ -21,5 +21,4 @@
 @import "striped";
 @import "outer_padding";
 @import "sticky_columns";
-@import "scroll";
-@import "collapsible";
+@import "scroll";

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

@@ -7,21 +7,14 @@ 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";
 };
@@ -30,15 +23,10 @@ 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;
@@ -48,110 +36,17 @@ 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 (
     <>
-      {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 ? (
+      {isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_table/table.html.erb CHANGED Viewed

@@ -18,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table.rb CHANGED Viewed

@@ -23,8 +23,6 @@ module Playbook
       prop :text
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
-      prop :sticky_left_column, type: Playbook::Props::Array,
-                                default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -39,8 +37,8 @@ module Playbook
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
+          vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -75,19 +73,6 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
-      def sticky_left_column_class
-        if sticky_left_column.empty?
-          nil
-        else
-          sticky_col_classname = "sticky-left-column sticky-columns"
-          sticky_left_column.each do |id|
-            sticky_col_classname += "-#{id}"
-          end
-          sticky_col_classname
-        end
-      end
       def striped_class
         striped ? "striped" : nil
       end

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

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

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

@@ -9,15 +9,6 @@ $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}] {
@@ -25,7 +16,3 @@ $pb_dark_title_colors: (
     }
   }
 }
-@mixin title_dark {
-  color: $text_dk_default;
-}

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

@@ -33,6 +33,14 @@
   @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 CHANGED Viewed

@@ -20,13 +20,6 @@
   }
 }
-@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 {
@@ -39,9 +32,7 @@
       }
     }
   }
-  @include hover-underline;
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -73,4 +64,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}

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

@@ -64,7 +64,6 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
-  underline?: boolean,
   visibility?: boolean,
 }
@@ -237,7 +236,6 @@ 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 CHANGED Viewed

@@ -57,19 +57,6 @@ 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
@@ -79,7 +66,6 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
-        underline: true,
       }}
         text="Hi"
     />
@@ -90,5 +76,4 @@ 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');
 });