RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.rc.18 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 - Mend

playbook_ui 14.9.0.pre.rc.18 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160

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 (137) 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/_table.tsx CHANGED Viewed

@@ -28,7 +28,8 @@ type TableProps = {
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
     sticky?: boolean,
-    stickyLeftcolumn?: string[],
+    stickyLeftColumn?: string[],
+    stickyRightColumn?: string[],
     striped?: boolean,
     tag?: "table" | "div",
     verticalBorder?: boolean,
@@ -52,7 +53,8 @@ const Table = (props: TableProps): React.ReactElement => {
         singleLine = false,
         size = 'sm',
         sticky = false,
-        stickyLeftcolumn = [],
+        stickyLeftColumn = [],
+        stickyRightColumn= [],
         striped = false,
         tag = 'table',
         verticalBorder = false,
@@ -79,7 +81,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftcolumn,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             'striped': striped,
             [outerPaddingCss]: outerPadding !== '',
         },
@@ -90,54 +93,100 @@ const Table = (props: TableProps): React.ReactElement => {
     )
     useEffect(() => {
-        const handleStickyColumns = () => {
+        const handleStickyLeftColumns = () => {
+            if (!stickyLeftColumn.length) return;
             let accumulatedWidth = 0;
-            stickyLeftcolumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftcolumn.length - 1;
+            stickyLeftColumn.forEach((colId, index) => {
+                const isLastColumn = index === stickyLeftColumn.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');
+                        header.classList.add('with-border-right');
+                        header.classList.remove('sticky-left-shadow');
                     } else {
-                        header.classList.remove('with-border');
-                        header.classList.add('sticky-shadow');
+                        header.classList.remove('with-border-right');
+                        header.classList.add('sticky-left-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');
+                        cell.classList.add('with-border-right');
+                        cell.classList.remove('sticky-left-shadow');
                     } else {
-                        cell.classList.remove('with-border');
-                        cell.classList.add('sticky-shadow');
+                        cell.classList.remove('with-border-right');
+                        cell.classList.add('sticky-left-shadow');
                     }
                 });
             });
         };
         setTimeout(() => {
-            handleStickyColumns();
+            handleStickyLeftColumns();
         }, 10);
-        window.addEventListener('resize', handleStickyColumns);
+        window.addEventListener('resize', handleStickyLeftColumns);
         return () => {
-            window.removeEventListener('resize', handleStickyColumns);
+            window.removeEventListener('resize', handleStickyLeftColumns);
         };
-    }, [stickyLeftcolumn]);
+    }, [stickyLeftColumn]);
+    useEffect(() => {
+        const handleStickyRightColumns = () => {
+            if (!stickyRightColumn.length) return;
+            let accumulatedWidth = 0;
+            stickyRightColumn.reverse().forEach((colId, index) => {
+                const isLastColumn = index === stickyRightColumn.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.right = `${accumulatedWidth}px`;
+                    if (!isLastColumn) {
+                        header.classList.add('with-border-left');
+                        header.classList.remove('sticky-right-shadow');
+                    } else {
+                        header.classList.remove('with-border-left');
+                        header.classList.add('sticky-right-shadow');
+                    }
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
+                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');
+                    }
+                });
+            });
+        };
+        setTimeout(() => {
+            handleStickyRightColumns();
+        }, 10);
+    }, [stickyRightColumn]);
     useEffect(() => {
         const instance = new PbTable()

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx ADDED Viewed

@@ -0,0 +1,88 @@
+import React from 'react'
+import Table from '../_table'
+const TableStickyColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftColumn={["a"]}
+            stickyRightColumn={["b"]}
+        >
+            <thead>
+                <tr>
+                    <th id="a">{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'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 id="b">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="a">{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td id="b">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+export default TableStickyColumns

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -0,0 +1,77 @@
+<%= 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>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 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>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 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>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td>Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftcolumn={["1", "2", "3"]}
+            stickyLeftColumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md ADDED Viewed

@@ -0,0 +1,3 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md CHANGED Viewed

@@ -1,2 +1,5 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx ADDED Viewed

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+const TableStickyRightColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyRightColumn={["13", "14", "15"]}
+        >
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'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 id="13">{'Column 13'}</th>
+                    <th id="14">{'Column 14'}</th>
+                    <th id="15">{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td>{'Value 1'}</td>
+                    <td>{'Value 2'}</td>
+                    <td>{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td id="13">{'Value 13'}</td>
+                    <td id="14">{'Value 14'}</td>
+                    <td id="15">{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+export default TableStickyRightColumns

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md ADDED Viewed

@@ -0,0 +1,5 @@
+The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx ADDED Viewed

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+const TableWithCollapsible = (props) => {
+  const Content = () => {
+    return (
+      <Card
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+export default TableWithCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.