playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

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

@@ -1,63 +0,0 @@
-<%= 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

@@ -1,79 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableAlignmentShiftData = (props) => {
-  return (
-    <div>
-      <Table
-          marginBottom="md"
-          {...props}
-      >
-        <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>
-      </Table>
-      <Table
-          {...props}
-      >
-        <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>
-    </div>
-  )
-}
-
-export default TableAlignmentShiftData

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

@@ -1,2 +0,0 @@
-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

@@ -1,52 +0,0 @@
-<%= 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="middle">
-      <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

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableAlignmentShiftRow = (props) => {
-  return (
-    <Table
-        {...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 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="middle">
-          <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/_table_container.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "md", container: false}) 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>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <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_container.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableContainer = (props) => {
-  return (
-    <Table
-        container={false}
-        size="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>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <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 TableContainer

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

@@ -1,48 +0,0 @@
-<%= pb_rails("table", props: { data_table: true }) 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>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <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_data_table.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableDataTable = (props) => {
-  return (
-    <Table
-        dataTable
-        {...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>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <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 TableDataTable

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

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "md", disable_hover: true }) 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>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <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_disable_hover.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-
-const TableDisableHover = (props) => {
-  return (
-    <Table
-        disableHover
-        size="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>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <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 TableDisableHover

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

@@ -1,61 +0,0 @@
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>
-        <%= pb_rails("flex", props: { justify: "end" }) do %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
-                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
-            <% end %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
-            <% end %>
-        <% end %>
-      </td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>
-        <%= pb_rails("flex", props: { justify: "end" }) do %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
-                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
-            <% end %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
-            <% end %>
-        <% end %>
-      </td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td align="right">
-        <%= pb_rails("flex", props: { justify: "end" }) do %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>  
-                <%= pb_rails("circle_icon_button", props: { variant: "link", icon: "pencil" }) %>
-            <% end %>
-            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-                <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "trash-alt" }) %>
-            <% end %>
-        <% end %>
-      </td>    
-    </tr>
-  </tbody>
-<% end %>