playbook_ui 2.5.0

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

@@ -0,0 +1,48 @@
+<%= pb_rails("table", props: {size: "md", single_line: 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<br/>Value 1<br/>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3<br/>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1<br/>Value 1<br/>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3<br/>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1<br/>Value 1<br/>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3<br/>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1<br/>Value 1<br/>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3<br/>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1<br/>Value 1<br/>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3<br/>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

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

@@ -0,0 +1,45 @@
+import React from "react"
+import Table from "../_table.jsx"
+
+function TableSingleLine() {
+  return (
+    <Table single_line
+        size="sm"
+    >
+      <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`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
+          <td>{`Value 2`}</td>
+          <td>{`Value 3`}<br/>{`Value 3`}</td>
+          <td>{`Value 4`}</td>
+          <td>{`Value 5`}</td>
+        </tr>
+        <tr>
+          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
+          <td>{`Value 2`}</td>
+          <td>{`Value 3`}<br/>{`Value 3`}</td>
+          <td>{`Value 4`}</td>
+          <td>{`Value 5`}</td>
+        </tr>
+        <tr>
+          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
+          <td>{`Value 2`}</td>
+          <td>{`Value 3`}<br/>{`Value 3`}</td>
+          <td>{`Value 4`}</td>
+          <td>{`Value 5`}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableSingleLine;

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

@@ -0,0 +1,34 @@
+<%= 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>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_sm.jsx

@@ -0,0 +1,43 @@
+import React from "react"
+import Table from "../_table.jsx"
+
+function TableSm() {
+  return (
+    <Table size="sm">
+      <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 TableSm;

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

@@ -0,0 +1,21 @@
+examples:
+  rails:
+    - table_sm: Small
+    - table_md: Medium
+    - table_lg: Large
+    - table_container: Table Container
+    - table_disable_hover: Disable Hover
+    - table_multiline: Multi-line
+    - table_single_line: Force Single Line
+    - table_dark: Table Dark
+    - table_container_dark: Table Container Dark
+  react:
+    - table_sm: Small
+    - table_md: Medium
+    - table_lg: Large
+    - table_container: Table Container
+    - table_disable_hover: Disable Hover
+    - table_multiline: Multi-line
+    - table_single_line: Force Single Line
+    - table_dark: Table Dark
+    - table_container_dark: Table Container Dark

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

@@ -0,0 +1,9 @@
+export {default as TableSm} from './_table_sm.jsx';
+export {default as TableMd} from './_table_md.jsx';
+export {default as TableLg} from './_table_lg.jsx';
+export {default as TableContainer} from './_table_container.jsx';
+export {default as TableDark} from './_table_dark.jsx';
+export {default as TableContainerDark} from './_table_container_dark.jsx';
+export {default as TableDisableHover} from './_table_disable_hover.jsx'
+export {default as TableSingleLine} from './_table_single_line.jsx'
+export {default as TableMultiline} from './_table_multiline.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -0,0 +1,14 @@
+@import "variables";
+@import "mixins";
+
+@import "reset";
+@import "structure";
+@import "table-card";
+@import "content";
+@import "headers";
+
+@import "hover";
+@import "as-cards";
+@import "single-line";
+@import "table-dark";
+@import "mobile";

data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss

@@ -0,0 +1,49 @@
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.as-cards {
+      thead {
+        tr {
+          display: flex;
+          width: 100%;
+
+          th {
+            flex-grow: 1;
+          }
+        }
+      }
+      tbody {
+        tr {
+          display: flex;
+          align-items: stretch;
+          flex-direction: row;
+          justify-content: flex-start;
+          width: 100%;
+          margin: $space-xs 0;
+
+          td {
+            background: $white;
+            flex-grow: 1;
+            border-width: 1px 0;
+
+            &:first-child {
+              border-left-width: 1px;
+              border-radius: 4px 0 0 4px;
+            }
+            &:last-child {
+              border-right-width: 1px;
+              border-radius: 0 4px 4px 0;
+            }
+          }
+
+          &:last-child {
+            td {
+              border-top-width: 1px !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -0,0 +1,13 @@
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    tbody {
+      tr {
+        td {
+          font-size: $default-font-size;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -0,0 +1,17 @@
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    thead {
+      tr {
+        th {
+          color: $ink-lightest;
+          font-size: $default-header-size;
+          font-weight: $regular;
+          text-transform: uppercase;
+          border-bottom: 1px solid $sky;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -0,0 +1,66 @@
+$transition-speed: 0.2s;
+
+table {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &:not(.no-hover) {
+      border-collapse: collapse;
+
+      tbody {
+        tr {
+          box-shadow: 0 0 0 $white;
+          transition: box-shadow $transition-speed ease;
+
+          td {
+            border-top-color: transparent;
+            border-top-width: 1px !important;
+            transition: all $transition-speed ease;
+          }
+
+          &:hover {
+            box-shadow: 0 2px 10px 0 $black-opacity-1;
+
+            td {
+              background: $white;
+              border-color: $sky-dark;
+              border-top-width: 1px;
+              border-top-color: transparent;
+            }
+          }
+        }
+      }
+      &.as-cards {
+        tbody {
+          tr {
+            td {
+              border-top-color: $sky;
+              border-top-width: 1px;
+            }
+
+            &:hover {
+              td {
+                border-top-width: 1px;
+                border-top-color: $sky;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        tbody {
+          tr {
+            td {
+              &:first-child {
+                border-left-width: 1px;
+              }
+              &:last-child {
+                border-right-width: 1px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -0,0 +1,138 @@
+@media only screen and (max-width: $screen-xs-max) {
+  .table-sm,
+  .table-md,
+  .table-lg {
+    width: 100%;
+    background: none !important;
+
+    thead {
+      tr {
+        left: -9999px;
+        position: absolute;
+        top: -9999px;
+
+        th {
+          display: block;
+          visibility: visible;
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          display: block;
+          visibility: visible;
+          border-left-width: 1px !important;
+          border-right-width: 1px !important;
+          border-bottom-width: 0 !important;
+          border-color: $sky !important;
+          min-height: 2.2em;
+          padding-left: 34%;
+          position: relative;
+          text-align:left;
+          white-space: normal;
+
+          &:before {
+            content: attr(data-title);
+            color: $ink !important;
+            font-weight: $bold !important;
+            text-align: left !important;
+            width: 100% !important;
+            white-space: nowrap !important;
+            text-overflow: ellipsis !important;
+            position: relative !important;
+            top: 0 !important;
+            left: 0 !important;
+            height: 100% !important;
+            padding-left: 0 !important;
+            display: block !important;
+          }
+
+          &:first-child {
+            margin-top: $space_md !important;
+            border-top-width: 1px !important;
+            border-top-color: $sky !important;
+            border-radius: 4px 4px 0 0;
+          }
+
+          &:last-child {
+            border-radius: 0 0 4px 4px;
+            border-bottom-width: 1px !important;
+          }
+        }
+
+        &:first-child {
+          td {
+            &:first-child {
+              margin-top: $space-xs !important;
+            }
+          }
+        }
+      }
+    }
+    &.table-card {
+      background: none !important;
+
+      tbody {
+        tr {
+          td {
+            background: $white !important;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-top-width: 1px !important;
+
+            &:first-child {
+              border-radius: 4px 4px 0 0 !important;
+            }
+            &:last-child {
+              border-radius: 0 0 4px 4px !important;
+            }
+          }
+        }
+      }
+    }
+    &:hover {
+      tbody {
+        tr {
+          box-shadow: 0 0 0 $white !important;
+        }
+      }
+    }
+  }
+  @each $name, $value in $cell-pad-list {
+    &.#{$name} {
+      tbody {
+        tr {
+          td {
+            &:first-child,
+            &:last-child {
+              padding: $value $cell-gutter !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: $screen-xs-max) {
+  .table-sm,
+  .table-md,
+  .table-lg {
+    &.hide-labels {
+      tbody {
+        tr {
+          td {
+            &::before {
+              content: '';
+              left: 0;
+              padding-right: 0;
+              position: relative;
+              width: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}