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

playbook_ui 14.9.0.pre.alpha.pbntr700newresettodefaultprop4736 → 14.9.0.pre.alpha.play1703errorstatealignment4889

Files changed (55) hide show

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

@@ -1,40 +1,46 @@
-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,
-  icon?: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  value?: string | number,
+  change?: "increase" | "decrease" | "neutral"
+  className?: string
+  dark?: boolean
+  icon?: string
+  id?: string
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  value?: string | number
 }
 const StatChange = (props: StatChangeProps): React.ReactElement => {
-  const {
-    change = 'neutral',
-    className,
+  const {
+    change = "neutral",
+    className,
+    dark = false,
     htmlOptions = {},
-    icon,
-    id,
-    value
+    icon,
+    id,
+    value,
   } = props
   const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ 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 status={status}>
-            {returnedIcon &&
+          <Body dark={dark}
+              status={status}
+          >
+            {" "}
+            {returnedIcon && (
               <>
-                <Icon
+                <Icon dark={dark}
                     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 }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
-        <%= "#{object.value}%" if object.value %>
-      <% end %>
+  <%= 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 %>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb ADDED Viewed

@@ -0,0 +1,95 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
+  <thead>
+    <tr>
+      <th id="1">Column 1</th>
+      <th id="2">Column 2</th>
+      <th id="3">Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th>Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -1,32 +1,106 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 export default class PbTable extends PbEnhancedElement {
-  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 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);
+          }
         }
       });
+    }
-      // 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])
-        })
-      })
-    })
-  }
-}
+    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);
+      }
+    }
+}

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,6 +23,8 @@ 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,
@@ -37,8 +39,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, collapse_class,
-          vertical_border_class, striped_class, outer_padding_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,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -73,6 +75,19 @@ 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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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