playbook_ui 7.6.1 → 7.8.0

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

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -13,4 +13,7 @@ export { default as TableTwoActions } from './_table_two_actions.jsx'
 export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
 export { default as TableActionMiddle } from './_table_action_middle.jsx'
 export { default as TableIconButtons } from './_table_icon_buttons.jsx'
-
+export { default as TableAlignmentColumn } from './_table_alignment_column.jsx'
+export { default as TableAlignmentRow } from './_table_alignment_row.jsx'
+export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.jsx'
+export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb

@@ -1,11 +1,8 @@
 <%= content_tag(:div,
+    align: object.align,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-
-    <div class="pb_time_stacked">
-      <%= pb_rails(object.tag, props: { text: object.format_time_string, color: "light", classname: object.tag_classnames }) %>
-      <%= pb_rails(object.tag, props: { text: object.format_timezone, color: "light" }) %>
-    </div>
-
+      <%= pb_rails("body", props: { text: object.format_time_string, color: "light" }) %>
+      <%= pb_rails("caption", props: { text: object.format_timezone, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -6,49 +6,43 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Body, Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
-
-const Components = {
-  body: Body,
-  caption: Caption,
-}
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type TimeStackedProps = {
+  align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
   date: string,
   id?: string,
-  align?: "left" | "center" | "right",
-  tag?: "body" | "caption",
+  tag?: 'body' | 'caption',
 }
 
 const TimeStacked = (props: TimeStackedProps) => {
-  const { className, dark = false, date, tag = 'body' } = props
+  const { align, className, dark, date } = props
+  deprecatedProps('TimeStacked', ['tag'])
   const classes = classnames(
-    buildCss('pb_time_stacked_kit', {
-      dark,
-    }),
+    buildCss('pb_time_stacked_kit', align),
     globalProps(props),
-    className
+    className,
   )
 
-  const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))
-
   const dateTimestamp = new DateTime({ value: date })
 
-  const Tag = Components[tag]
-
   return (
     <div className={classes}>
-      <div className="pb_time_stacked_day_month">
-        <Tag
-            className={tagClasses}
+      <div
+          align={align}
+          className="pb_time_stacked_day_month"
+      >
+        <Body
             color="light"
+            dark={dark}
             text={dateTimestamp.toTimeWithMeridian()}
         />
-        <Tag
+        <Caption
             color="light"
+            dark={dark}
             text={dateTimestamp.toTimezone()}
         />
       </div>