playbook_ui 7.6.2.pre.alpha1 → 7.8.1

data/app/pb_kits/playbook/pb_table/docs/_description.md

@@ -1 +1,2 @@
 Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
+Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th align="center">Rating</th>
+      <th align="right">Money</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">3</td>
+      <td align="right">$57.32</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">2</td>
+      <td align="right">$5,657.08</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td align="center">4</td>
+      <td align="right">$358.77</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentColumn = () => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th align="center">{'Rating'}</th>
+          <th align="right">{'Money'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'3'}</td>
+          <td align="right">{'$57.32'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'2'}</td>
+          <td align="right">{'$5,657.08'}</td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td align="center">{'4'}</td>
+          <td align="right">{'$358.77'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentColumn

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

@@ -0,0 +1,2 @@
+You can individually align a pieace of table data, but a more practical use would be applied to align a column.
+In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table") 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>
+    <tr align="center">
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr align="right">
+      <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_alignment_row.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentRow = () => {
+  return (
+    <Table>
+      <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>
+        <tr align="center">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+        <tr align="right">
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>{'Value 5'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentRow

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

@@ -0,0 +1,2 @@
+This is to be used to shift the whole row.
+The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

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

@@ -0,0 +1,63 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Price</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="down">Total</td>
+      <td>
+        $12
+        <br/>
+        $46
+        <br/>
+        $25
+        <br/>
+        -------
+        <br/>
+        $83
+      </td>
+    </tr>
+  </tbody>
+<% end %>
+<br/>
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Espresso Drinks</th>
+      <th>Ingredients</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="up">Cappuccino</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+        <br/>
+        Milk Foam
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Macchiato</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Mocha</td>
+      <td>
+        Espresso
+        <br/>
+        Hot Chocolate
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentShiftData = () => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>&nbsp;</th>
+          <th>{'Price'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td shift="down">{'Total'}</td>
+          <td>
+            {'$12'}
+            <br />
+            {'$46'}
+            <br />
+            {'$25'}
+            <br />
+            {'-------'}
+            <br />
+            {'$83'}
+          </td>
+        </tr>
+      </tbody>
+      <br />
+      <thead>
+        <tr>
+          <th>{'Espresso Drinks'}</th>
+          <th>{'Ingredients'}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td shift="up">{'Cappuccino'}</td>
+          <td>
+            {'Espresso'}
+            <br />
+            {'Steamed Milk'}
+            <br />
+            {'Milk Foam'}
+          </td>
+        </tr>
+        <tr>
+          <td shift="up">{'Macchiato'}</td>
+          <td>
+            {'Espresso'}
+            <br />
+            {'Steamed Milk'}
+          </td>
+        </tr>
+        <tr>
+          <td shift="up">{'Mocha'}</td>
+          <td>
+            {'Espresso'}
+            <br />
+            {'Hot Chocolate'}
+            <br />
+            {'Steamed Milk'}
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentShiftData

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

@@ -0,0 +1,2 @@
+You can individually shift a pieace of table data, or shift an entire column.
+The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

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

@@ -0,0 +1,52 @@
+<%= pb_rails("table") 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 1a
+        <br/>
+        Value 1a
+        <br/>
+        Value 1a
+      </td>
+      <td>Value 2a</td>
+      <td>Value 3a</td>
+      <td>Value 4a</td>
+      <td>Value 5a</td>
+    </tr>
+    <tr shift="up">
+      <td>
+        Value 1b
+        <br/>
+        Value 1b
+        <br/>
+        Value 1b
+      </td>
+      <td>Value 2b</td>
+      <td>Value 3b</td>
+      <td>Value 4b</td>
+      <td>Value 5b</td>
+    </tr>
+    <tr shift="down">
+      <td>
+        Value 1c
+        <br/>
+        Value 1c
+        <br/>
+        Value 1c
+      </td>
+      <td>Value 2c</td>
+      <td>Value 3c</td>
+      <td>Value 4c</td>
+      <td>Value 5c</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Table } from '../../'
+
+const TableAlignmentShiftRow = () => {
+  return (
+    <Table>
+      <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 1a'}
+            <br />
+            {'Value 1a'}
+            <br />
+            {'Value 1a'}
+          </td>
+          <td>{'Value 2a'}</td>
+          <td>{'Value 3a'}</td>
+          <td>{'Value 4a'}</td>
+          <td>{'Value 5a'}</td>
+        </tr>
+        <tr shift="up">
+          <td>
+            {'Value 1b'}
+            <br />
+            {'Value 1b'}
+            <br />
+            {'Value 1b'}
+          </td>
+          <td>{'Value 2b'}</td>
+          <td>{'Value 3b'}</td>
+          <td>{'Value 4b'}</td>
+          <td>{'Value 5b'}</td>
+        </tr>
+        <tr shift="down">
+          <td>
+            {'Value 1c'}
+            <br />
+            {'Value 1c'}
+            <br />
+            {'Value 1c'}
+          </td>
+          <td>{'Value 2c'}</td>
+          <td>{'Value 3c'}</td>
+          <td>{'Value 4c'}</td>
+          <td>{'Value 5c'}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableAlignmentShiftRow

data/app/pb_kits/playbook/pb_table/docs/example.yml

@@ -3,6 +3,10 @@ examples:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_alignment_row: Row Alignment
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover
@@ -16,11 +20,15 @@ examples:
     - table_action_middle: Table with Actions in the Middle
     - table_icon_buttons: Table with Icon Buttons
 
- 
+
   react:
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
+    - table_alignment_row: Row Alignment
+    - table_alignment_column: Column Alignment
+    - table_alignment_shift_row: Shift Row
+    - table_alignment_shift_data: Shift Column Data
     - table_side_highlight: Side Highlight
     - table_container: Table Container Off
     - table_disable_hover: Disable Hover