playbook_ui 7.11.0.pre.alpha1 → 7.13.0.pre.alpha1

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.jsx

@@ -1,14 +1,17 @@
 import React from 'react'
 import { Table, Title } from '../../'
 
-const TableResponsiveTable = () => {
+const TableResponsiveTable = (props) => {
   return (
     <div>
       <Title
           size={4}
           text="Default"
+          {...props}
       />
-      <Table>
+      <Table
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Column 1'}</th>
@@ -33,8 +36,12 @@ const TableResponsiveTable = () => {
       <Title
           size={4}
           text="Default"
+          {...props}
       />
-      <Table responsive="none">
+      <Table
+          responsive="none"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Column 1'}</th>

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

@@ -1,10 +1,13 @@
 import React from 'react'
 import { Table, TableRow } from '../../'
 
-const TableSideHighlight = () => {
+const TableSideHighlight = (props) => {
   return (
     <div>
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Product colors'}</th>
@@ -15,28 +18,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="solar">
+          <TableRow
+              sideHighlightColor="solar"
+              {...props}
+          >
             <td>{'Solar'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="roofing">
+          <TableRow
+              sideHighlightColor="roofing"
+              {...props}
+          >
             <td>{'Roofing'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="gutters">
+          <TableRow
+              sideHighlightColor="gutters"
+              {...props}
+          >
             <td>{'Gutters'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -48,7 +63,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Status colors'}</th>
@@ -59,28 +77,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="success">
+          <TableRow
+              sideHighlightColor="success"
+              {...props}
+          >
             <td>{'Success'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="warning">
+          <TableRow
+              sideHighlightColor="warning"
+              {...props}
+          >
             <td>{'Warning'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="error">
+          <TableRow
+              sideHighlightColor="error"
+              {...props}
+          >
             <td>{'Error'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
@@ -92,7 +122,10 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="sm">
+      <Table
+          size="sm"
+          {...props}
+      >
         <thead>
           <tr>
             <th>{'Category Colors'}</th>
@@ -103,28 +136,40 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="category_1">
+          <TableRow
+              sideHighlightColor="category_1"
+              {...props}
+          >
             <td>{'Category Color 1'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_2">
+          <TableRow
+              sideHighlightColor="category_2"
+              {...props}
+          >
             <td>{'Category Color 2'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="category_3">
+          <TableRow
+              sideHighlightColor="category_3"
+              {...props}
+          >
             <td>{'Category Color 3'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="none">
+          <TableRow
+              sideHighlightColor="none"
+              {...props}
+          >
             <td>{'None'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>

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

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