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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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');
 });