playbook_ui 7.11.1 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import StatValue from '../_stat_value.jsx'
 
-const StatValueUnit = () => {
+const StatValueUnit = (props) => {
   return (
     <StatValue
         unit="appt"
         value="5,294"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -4,11 +4,13 @@ import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
+import PbTable from './'
 
 type TableProps = {
   aria?: object,
   children: array<Node> | Node,
   className: string,
+  collapse?: "sm" | "md" | "lg",
   container: boolean,
   dark?: boolean,
   data?: object,
@@ -25,6 +27,7 @@ const Table = (props: TableProps) => {
     aria = {},
     children,
     className,
+    collapse = 'sm',
     container = true,
     dark,
     data = {},
@@ -38,6 +41,10 @@ const Table = (props: TableProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
+
+  const instance = new PbTable()
+  instance.connect()
 
   return (
     <table
@@ -55,6 +62,7 @@ const Table = (props: TableProps) => {
           'no-hover': disableHover,
         },
         globalProps(props),
+        tableCollapseCss,
         className
       )}
         id={id}

data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../../'
 import { Button } from '../../'
 
-const TableActionMiddle = () => {
+const TableActionMiddle = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -25,6 +28,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>
@@ -40,6 +44,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>
@@ -55,6 +60,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableAlignmentColumn = () => {
+const TableAlignmentColumn = (props) => {
   return (
-    <Table>
+    <Table
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableAlignmentRow = () => {
+const TableAlignmentRow = (props) => {
   return (
-    <Table>
+    <Table
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableAlignmentShiftData = () => {
+const TableAlignmentShiftData = (props) => {
   return (
-    <Table>
+    <Table
+        {...props}
+    >
       <thead>
         <tr>
           <th>&nbsp;</th>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableAlignmentShiftRow = () => {
+const TableAlignmentShiftRow = (props) => {
   return (
-    <Table>
+    <Table
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_container.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableContainer = () => {
+const TableContainer = (props) => {
   return (
     <Table
         container={false}
         size="md"
+        {...props}
     >
       <thead>
         <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_data_table.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableDataTable = () => {
+const TableDataTable = (props) => {
   return (
-    <Table dataTable>
+    <Table
+        dataTable
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableDisableHover = () => {
+const TableDisableHover = (props) => {
   return (
     <Table
         disableHover
         size="md"
+        {...props}
     >
       <thead>
         <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { CircleIconButton, Flex, FlexItem } from '../../'
 
-const TableIconButtons = () => {
+const TableIconButtons = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -26,12 +29,14 @@ const TableIconButtons = () => {
                 <CircleIconButton
                     icon="trash-alt"
                     variant="link"
+                    {...props}
                 />
               </FlexItem>
               <FlexItem>
                 <CircleIconButton
                     icon="pencil"
                     variant="secondary"
+                    {...props}
                 />
               </FlexItem>
             </Flex>
@@ -48,12 +53,14 @@ const TableIconButtons = () => {
                 <CircleIconButton
                     icon="trash-alt"
                     variant="link"
+                    {...props}
                 />
               </FlexItem>
               <FlexItem>
                 <CircleIconButton
                     icon="pencil"
                     variant="secondary"
+                    {...props}
                 />
               </FlexItem>
             </Flex>
@@ -70,12 +77,14 @@ const TableIconButtons = () => {
                 <CircleIconButton
                     icon="trash-alt"
                     variant="link"
+                    {...props}
                 />
               </FlexItem>
               <FlexItem>
                 <CircleIconButton
                     icon="pencil"
                     variant="secondary"
+                    {...props}
                 />
               </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_table/docs/_table_lg.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableLg = () => {
+const TableLg = (props) => {
   return (
-    <Table size="lg">
+    <Table
+        size="lg"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_md.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableMd = () => {
+const TableMd = (props) => {
   return (
-    <Table size="md">
+    <Table
+        size="md"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Table } from '../../'
 
-const TableMultiline = () => {
+const TableMultiline = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>

data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../..'
 import { Button } from '../../'
 
-const TableOneAction = () => {
+const TableOneAction = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -26,6 +29,7 @@ const TableOneAction = () => {
                 onClick={() => alert('button clicked!')}
                 text="Action"
                 variant="secondary"
+                {...props}
             />
             {' '}
           </td>
@@ -41,6 +45,7 @@ const TableOneAction = () => {
                 onClick={() => alert('button clicked!')}
                 text="Action"
                 variant="secondary"
+                {...props}
             />
             {' '}
           </td>
@@ -56,6 +61,7 @@ const TableOneAction = () => {
                 onClick={() => alert('button clicked!')}
                 text="Action"
                 variant="secondary"
+                {...props}
             />
             {' '}
           </td>

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb

@@ -1,6 +1,6 @@
-<%= pb_rails("title", props: { size: 4, text: "Default" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Not Responsive" }) %>
 
-<%= pb_rails("table", props: { responsive: "collapse" }) do %>
+<%= pb_rails("table", props: { responsive: "none" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -23,9 +23,34 @@
 
 <br>
 
-<%= pb_rails("title", props: { size: 4, text: "Responsive Off" }) %>
+<%= pb_rails("title", props: { size: 4, text: "Collapse Mobile" }) %>
 
-<%= pb_rails("table", props: { responsive: "none" }) do %>
+<%= pb_rails("table", props: { collapse: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</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>
+    </tr>
+  </tbody>
+<% end %>
+
+<br>
+
+<%= pb_rails("title", props: { size: 4, text: "Collapse Tablet" }) %>
+
+<%= pb_rails("table", props: { collapse: "md" }) do %>
   <thead>
     <tr>
       <th>Column 1</th>
@@ -45,3 +70,30 @@
     </tr>
   </tbody>
 <% end %>
+
+<br>
+
+<%= pb_rails("title", props: { size: 4, text: "Collapse Desktop" }) %>
+
+<%= pb_rails("table", props: { collapse: "lg" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</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>
+    </tr>
+  </tbody>
+<% end %>
+
+

data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import { Table, Title } from '../../'
 
-const TableResponsiveTable = () => {
+const TableResponsiveTable = (props) => {
   return (
     <div>
       <Title
           size={4}
-          text="Default"
+          text="Not Responsive"
+          {...props}
       />
-      <Table>
+      <Table
+          responsive="none"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Column 1'}</th>
@@ -32,9 +36,73 @@ const TableResponsiveTable = () => {
       <br />
       <Title
           size={4}
-          text="Default"
+          text="Collapse Mobile"
+          {...props}
       />
-      <Table responsive="none">
+      <Table
+          collapse="sm"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <th>{'Column 1'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</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>
+          </tr>
+        </tbody>
+      </Table>
+      <br />
+      <br />
+      <Title
+          size={4}
+          text="Collapse Tablet"
+          {...props}
+      />
+      <Table
+          collapse="md"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <th>{'Column 1'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</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>
+          </tr>
+        </tbody>
+      </Table>
+      <br />
+      <br />
+      <Title
+          size={4}
+          text="Collapse Desktop"
+          {...props}
+      />
+      <Table
+          collapse="lg"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Column 1'}</th>