playbook_ui 4.8.1 → 4.8.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 297a7d38b579cfb332aef7728a85f5e4e7351c0e281eec399ae42c37fcdd4f7c
-  data.tar.gz: aae66abcf5cd0b2bb9c58584ffc0772e05cff4ad7eedb3fbea6a7ac49190b8dd
+  metadata.gz: 4f41335e55a92455ba28930fa6ed89497e3b54fb3fed16c22fb16f49b55f1c45
+  data.tar.gz: 6ff3cf889a066d1fc7f030206b7e66cee9d5b6c8888361b4656ebdf9356836cc
 SHA512:
-  metadata.gz: b472c19ce31bf2570e6742e8b2c41273eb12ee3dfe56335c8fc8890f444f099a1531717f1dc0d026fb9ba8dc3b2911b5248b7d48ff4025034393160010f51fa2
-  data.tar.gz: 98c226e6ae243cdca648d844b13ab401c4b82c2702fe0e63b5d27e9e4b7be2821dd869a773f6808d4d3ba89bcf8085f6670529b36eaa75ae7b38979376000692
+  metadata.gz: a787d0ea25cfcf3ec2ae01ab16cba660b1e267d4ce69eea2f34f3d1ba8334c0d7dade17d5a81f3d520c694965582558d1e617274962be771f7c78dbdf1447abc
+  data.tar.gz: 530eb8478cd47f7ed0572617b2831bbc57e6b2c5cc9c7a4b885f3505fd6a8785ff95f7880ec83dd5f462ddc5141de8ab2d5d432717502f60462a037b8bfc3772

data/app/pb_kits/playbook/index.js

@@ -78,3 +78,4 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
+export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -1,6 +1,14 @@
 @import "../../tokens/colors";
 @import "../../tokens/spacing";
+@import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
+@import "../../tokens/shadows";
 
+$selector: ".pb--page";
+
+body {
+  overflow-x: hidden;
+}
 
 .pb--page {
   &--topNav {
@@ -18,13 +26,57 @@
   }
   &--content {
     min-height: calc(100vh - 89px);
+    @include break_at(breakpoint("lg")) {
+      grid-template-columns: auto auto !important;
+    }
     &--main {
       flex-grow: 1;
       padding: 40px 60px;
       height: calc(100vh - 89px);
       overflow: auto;
+      @include break_at(breakpoint("lg")) {
+        padding: $space-lg $space-xl;
+      }
+    }
+  }
+  &--hamburger, &--checkbox {
+    position: absolute;
+    right: $space-xl;
+    top: 30px;
+    display: none;
+    font-size: $space-xl;
+    width: 30px;
+    height: 30px;
+    color: $primary;
+    cursor: pointer;
+    @include break_at(breakpoint("lg")) {
+      display: block;
     }
   }
+  &--checkbox {
+    opacity: 0;
+     ~ #{$selector}--sideNav {
+      @include break_at(breakpoint("lg")) {
+        position: absolute;
+        transform-origin: 0% 0%;
+        transform: translate(100%, 0);
+        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+        border-radius: $border_rad_heavier;
+        box-shadow: $shadow_deepest;
+        top: 100px;
+        right: 0;
+        width: auto !important;
+        padding: $space-xl;
+        z-index: 1000;
+      }
+    }
+    &:checked ~ #{$selector}--sideNav {
+      @include break_at(breakpoint("lg")) {
+        transform: translate(-10%, 0);
+      }
+    }
+  }
+
   &--sideNav {
     height: calc(100vh - 89px);
     overflow: auto;

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

@@ -0,0 +1,28 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+export default class PbTable extends PbEnhancedElement {
+  static get selector() {
+    return '.table-responsive-collapse'
+  }
+
+  connect() {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+
+    // Each Table
+    [].forEach.call(tables, (table) => {
+      // Header Titles
+      var headers = [].map.call(table.querySelectorAll('th'), (header) => {
+        return header.textContent.replace(/\r?\n|\r/, '')
+      });
+
+      // for each row in tbody
+      [].forEach.call(table.querySelectorAll('tbody tr'), (row) => {
+        // for each cell
+        [].forEach.call(row.cells, (cell, headerIndex) => {
+          // apply the attribute
+          cell.setAttribute('data-title', headers[headerIndex])
+        })
+      })
+    })
+  }
+}

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

@@ -1,8 +1,11 @@
+@import "../../tokens/border_radius";
+@import "../../pb_caption/caption_mixin";
+
 @media only screen and (max-width: $screen-xs-max) {
   [class^=pb_table] {
-    .table-sm,
-    .table-md,
-    .table-lg {
+    &.table-sm,
+    &.table-md,
+    &.table-lg {
       width: 100%;
       background: none !important;
 
@@ -28,15 +31,13 @@
             border-bottom-width: 0 !important;
             border-color: $border_light !important;
             min-height: 2.2em;
-            padding-left: 34%;
+            // padding-left: 34%;
             position: relative;
             text-align:left;
             white-space: normal;
             &:before {
               content: attr(data-title);
-              color: $text_lt_default !important;
-              font-weight: $bold !important;
-              text-align: left !important;
+              @include caption;
               width: 100% !important;
               white-space: nowrap !important;
               text-overflow: ellipsis !important;
@@ -52,11 +53,11 @@
               margin-top: $space_md !important;
               border-top-width: 1px !important;
               border-top-color: $border_light !important;
-              border-radius: 4px 4px 0 0;
+              border-radius: $border_rad_light $border_rad_light 0 0;
             }
 
             &:last-child {
-              border-radius: 0 0 4px 4px;
+              border-radius: 0 0 $border_rad_light $border_rad_light;
               border-bottom-width: 1px !important;
             }
           }
@@ -82,10 +83,10 @@
               border-top-width: 1px !important;
 
               &:first-child {
-                border-radius: 4px 4px 0 0 !important;
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
               }
               &:last-child {
-                border-radius: 0 0 4px 4px !important;
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
               }
             }
           }
@@ -99,6 +100,7 @@
         }
       }
     }
+    // reset the first and last to normalize
     @each $name, $value in $cell-pad-list {
       &.#{$name} {
         tbody {
@@ -114,25 +116,16 @@
       }
     }
   }
-}
-
-@media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
-    .table-sm,
-    .table-md,
-    .table-lg {
-      &.hide-labels {
-        tbody {
-          tr {
-            td {
-              &::before {
-                content: '';
-                left: 0;
-                padding-right: 0;
-                position: relative;
-                width: 0;
-              }
-            }
+  &.hide-labels {
+    tbody {
+      tr {
+        td {
+          &::before {
+            content: '';
+            left: 0;
+            padding-right: 0;
+            position: relative;
+            width: 0;
           }
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -3,9 +3,9 @@
 $table-dark-card-bg: $bg_dark;
 
 [class^=pb_table] {
-  .table-sm,
-  .table-md,
-  .table-lg {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
     &.table-dark {
       thead {
         tr {
@@ -61,9 +61,9 @@ $table-dark-card-bg: $bg_dark;
 
 @media only screen and (max-width: $screen-xs-max) {
   [class^=pb_table] {
-    .table-sm,
-    .table-md,
-    .table-lg {
+    &.table-sm,
+    &.table-md,
+    &.table-lg {
       &.table-card {
         &.table-dark {
           background: none !important;

data/app/pb_kits/playbook/pb_table/table.rb

@@ -17,15 +17,19 @@ module Playbook
       prop :disable_hover, type: Playbook::Props::Boolean,
                            default: false
       prop :data_table, type: Playbook::Props::Boolean,
-                  default: false
+                        default: false
       prop :container, type: Playbook::Props::Boolean,
                        default: true
+      prop :responsive, type: Playbook::Props::Enum,
+                        values: %w[collapse scroll none],
+                        default: "collapse"
       prop :text
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, separator: " "
+          disable_hover_class, container_class, data_table_class,
+          "table-responsive-#{responsive}", separator: " "
         )
       end
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -31,7 +31,7 @@ module Playbook
       end
 
       def validation_pattern
-        validation[:pattern] || ""
+        validation[:pattern] || nil
       end
 
       def data

data/app/pb_kits/playbook/vendor.js

@@ -13,3 +13,6 @@ PbPopover.start()
 
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()
+
+import PbTable from './pb_table'
+PbTable.start()

data/app/views/layouts/playbook/_mobile_hamburger.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("icon", props: { icon: "bars", classname: "pb--page--hamburger" }) %>
+<input type="checkbox" class="pb--page--checkbox" />

data/app/views/layouts/playbook/_nav.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--page--topNav">
+  <h1>
+    <%= link_to root_url do %>
+      <%= image_tag("pb.logo.svg") %>
+    <% end %>
+    &nbsp;
+    <%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
+  </h1>
+</div>
+<% flash.each do |name, msg| %>
+  <% name = "success" if name == "notice" %>
+  <%= pb_rails("fixed_confirmation_toast", props: { text: msg, status: name }) %>
+<% end %>

data/app/views/layouts/playbook/application.html.slim

@@ -9,6 +9,7 @@ html
   body
     = render 'layouts/playbook/nav'
     = pb_rails("layout", props: {classname: "pb--page--content"})
+      = render 'layouts/playbook/mobile_hamburger'
       = pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav" })
         = render 'layouts/playbook/sidebar'
       = pb_rails("layout/body")

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.8.1"
+  VERSION = "4.8.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.8.1
+  version: 4.8.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-23 00:00:00.000000000 Z
+date: 2020-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1361,6 +1361,7 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sm.md
 - app/pb_kits/playbook/pb_table/docs/example.yml
 - app/pb_kits/playbook/pb_table/docs/index.js
+- app/pb_kits/playbook/pb_table/index.js
 - app/pb_kits/playbook/pb_table/styles/_all.scss
 - app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
@@ -1568,7 +1569,8 @@ files:
 - app/pb_kits/playbook/utilities/props.js
 - app/pb_kits/playbook/utilities/text.js
 - app/pb_kits/playbook/vendor.js
-- app/views/layouts/playbook/_nav.html.slim
+- app/views/layouts/playbook/_mobile_hamburger.html.erb
+- app/views/layouts/playbook/_nav.html.erb
 - app/views/layouts/playbook/_sidebar.html.erb
 - app/views/layouts/playbook/application.html.slim
 - app/views/layouts/playbook/fullscreen.html.slim

data/app/views/layouts/playbook/_nav.html.slim

@@ -1,9 +0,0 @@
-.pb--page--topNav
-  h1
-    = link_to root_url do
-      = image_tag("pb.logo.svg")
-    |  
-    = pb_rails("caption", props: { tag: "span", text: Playbook::VERSION })
-- flash.each do |name, msg|
-  - name = "success" if name == "notice"
-  = pb_rails("fixed_confirmation_toast", props: { text: msg, status: name })