playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16ea9d4af0ed12b03e2eca2770ae969f3fe3a80eac71e32ec2c718dce7347c7c
-  data.tar.gz: 0afbc57b75a606da56ce827592fc8bd3ac54f34f0040c2cf0c31d5238422b24c
+  metadata.gz: 56a4cb93a8661659aaab85d401b6bc2dc35fd48c4f79fdff2be38b38a1da8a49
+  data.tar.gz: d7e29af88a980f946845c64c6585bf1c81bd4a96d8bd8cf3a7c77666b5c1ea1e
 SHA512:
-  metadata.gz: c19ec8adfcfd42c65d5fc2987e715076dce6f3d9765b9b00e2e860414e8c471ecf38e4856caefb7363906cfaa94bdef22c4d64bef489093d1f601076fbf0d977
-  data.tar.gz: 21f2f4a836a8753d1dd9bb836e0867abedb74d098306d577d255fd87561488a896190ab343f8a978e5dfc48fdc6c1f8590799a5f2448e546975a739235eff9df
+  metadata.gz: 6f3f323a335d3f1a6c440fd791854ddc6ff245d143c836d4d166fa512ca92bec43a02a01c7fbdd77a20059167bce1585300963df94b433d4f0e551530afe31b5
+  data.tar.gz: c3dace91cad070dccb45fe050e51769b9c20510302dd694d88b0b74ffa8a183ca6065b226711086df0de26a9cef72bb3c5fd3ae3e8fe9948a27a24f2d8ebe98c

data/app/controllers/playbook/application_controller.rb

@@ -2,8 +2,6 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
- 
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';
@@ -82,4 +83,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

data/app/pb_kits/playbook/data/menu.yml

@@ -7,7 +7,6 @@ samples:
 kits:
   - avatar
   - avatar_action_button
-  - background
   - buttons:
     - button
     - button_toolbar
@@ -21,6 +20,7 @@ kits:
     - gauge
     - legend
     - line_graph
+
   - filter
   - fixed_confirmation_toast
   - flex
@@ -55,9 +55,10 @@ kits:
     - hashtag
     - pill
   - popover
-  - progress_pills
-  - progress_simple
-  - progress_step
+  - progress:
+    - progress_pills
+    - progress_simple
+    - progress_step
   - section_separator
   - source
   - star_rating

data/app/pb_kits/playbook/index.js

@@ -1,7 +1,10 @@
+import './_playbook.scss'
+import 'lazysizes/plugins/attrchange/ls.attrchange'
+import 'lazysizes'
+
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
-export Background from 'pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -1,12 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('BarGraph', object.chart_options) %>

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_body/body.rb

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-      
+
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -39,6 +39,7 @@ $pb_button_border_width: 0px;
   flex-basis: auto;
   width: fit-content;
   font-family: $font_family_base;
+  white-space: nowrap;
 
   .loading-icon {
     position: absolute;

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -17,7 +17,7 @@ type ButtonToolbarProps = {
   onClick?: EventHandler,
   orientation?: "horizontal" | "vertical",
   text?: string,
-  variant?: string,
+ variant?: "primary" | "secondary",
 }
 
 const ButtonToolbar  = (props: ButtonToolbarProps) => {
@@ -25,18 +25,18 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
     aria = {},
     children,
     className,
-    connected = false,
     data = {},
     id,
     orientation = 'horizontal',
     text,
+    variant = 'primary',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
   const classes = classnames(
-    buildCss('pb_button_toolbar_kit', orientation, { connected }),
+    buildCss('pb_button_toolbar_kit', orientation, variant),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -1,109 +1,101 @@
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
+@import "./button_toolbar_mixins";
+@import "./button_toolbar_dark";
 @import "../tokens/colors";
+@import "../tokens/opacity";
 
 [class^=pb_button_toolbar]{
-    // Orientation =========
-    &[class*=_horizontal]  {
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-  
-      & > [class^=pb_button]  {
-        margin-right: $space-xs;
 
-        @media (hover:hover) {
-          &:hover {
-            background-color:darken($royal, 20%);
-          }
-        }
+  // Horizontal =============
 
-        &[class*=secondary] {
-          @media (hover:hover) {
-            &:hover {
-              background-color:rgba($primary_action, $opacity_3)
-            }
-          }
-        }
-  
-        &:last-child {
-          margin-right: 0;
-        }
+  &[class*=_horizontal] {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    & > [class^=pb_button]  {
+      &:not(:last-child){
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right-width: 0;
+      }
+      &:not(:first-child){
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-left-width: 0;
       }
     }
-    &[class*=_vertical]  {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-  
-      & > [class^=pb_button]  {
-        display: block;
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: auto;
-        width: 100%;
-        margin-bottom: $space-xs;
+    &[class*=_primary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $primary_border)
+      }  
+    }
+    &[class*=_secondary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $secondary_border)
+      }
+    }
+    & > [class^=pb_button]:not(:first-child):hover::before,
+      [class^=pb_button]:hover + [class^=pb_button]::before {
+        opacity: 0
+      }
+  }
 
-        @media (hover:hover) {
-          &:hover {
-            background-color:darken($royal, 20%);
-          }
-        }
+  // Vertical =============
 
-        &[class*=secondary] {
-          @media (hover:hover) {
-            &:hover {
-              background-color:rgba($primary_action, $opacity_3)
-            }
-          }
-        }
-  
-        &:last-child {
-          margin-bottom: 0;
-        }
+  &[class*=_vertical] {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    & > [class^=pb_button]  {
+      display: block;
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: auto;
+      width: 100%;
+      &:not(:last-child){
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-width: 0;
+      }
+      &:not(:first-child){
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-top-width: 0;
       }
     }
-
-    // Connect =============
-    &[class*=_connected]  {
-      & > [class^=pb_button]  {
-        margin: 0;
+    &[class*=_primary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $primary_border)
       }
-  
-      &[class*=_horizontal] {
-        & > [class^=pb_button]  {
-          &:not(:last-child){
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-            border-right-width: 0;
-            border: 1px solid #e1e4e8;
-          }
-          &:not(:first-child){
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            border-left-width: 0;
-            border: 1px solid #e1e4e8;
-          }
-        }
+    }
+    &[class*=_secondary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $secondary_border)
       }
+    }
+    & > [class^=pb_button]:not(:first-child):hover::before,
+    [class^=pb_button]:hover + [class^=pb_button]::before {
+      opacity: 0
+    }
+  }
+
+  // Hover =============
   
-      &[class*=_vertical] {
-        & > [class^=pb_button]  {
-          &:not(:last-child){
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: 0;
-            border-bottom-width: 0;
-            border: 1px solid #e1e4e8;
-          }
-          &:not(:first-child){
-            border-top-right-radius: 0;
-            border-top-left-radius: 0;
-            border-top-width: 0;
-            border: 1px solid #e1e4e8;
-          }
+  & > [class^=pb_button]  {
+    @media (hover:hover) {
+      &:hover {
+        background-color:darken($royal, 20%);
+      }
+    }
+    &[class*=secondary] {
+      @media (hover:hover) {
+        &:hover {
+          background-color:rgba($primary_action, $opacity_3)
         }
       }
     }
-  }
+  }
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss

@@ -0,0 +1,57 @@
+@import "./button_toolbar_mixins";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+[class^=pb_button_toolbar]{
+
+  // Vertical =============
+
+  &[class*=_vertical] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(true, $secondary_dark)
+      }
+    }
+  }
+
+  // Horizontal =============
+
+  &[class*=_horizontal] {
+    &[class*=_primary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $primary_dark)
+      }
+    }
+    &[class*=_secondary].dark {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $secondary_dark)
+      }
+    }
+  }
+  & > [class^=pb_button]:not(:first-child):hover::before,
+  [class^=pb_button]:hover + [class^=pb_button]::before {
+    opacity: 0
+  }
+
+  // Hover =============
+
+  [class^=pb_button].dark  {
+    @media (hover:hover) {
+      &:hover {
+        background-color:darken($royal, 20%);
+      }
+    }
+    &[class*=secondary] {
+      @media (hover:hover) {
+        &:hover {
+          background-color:rgba($primary_action, $opacity_3)
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -0,0 +1,27 @@
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+
+$primary_border:      rgba($white, $opacity_1);
+$secondary_border:    rgba($white, $opacity_10);
+$primary_dark:        rgba($bg_dark, $opacity_2);
+$secondary_dark:      rgba($bg_dark, $opacity_2);
+
+@mixin toolbar_border($horizontal: true, $color: $color) {
+    @if $horizontal == true {
+        height: 2px;
+        width: calc(100% + #{$space_md} + #{$space_md});
+        top: calc(-#{$space_xs} - 1px);
+        left: -$space_md;
+    } @else {
+        width: 2px;
+        height: $space_md;
+        top: 0;
+        right: calc(#{$space_lg} + 2px);
+    }
+    background-color: $color;
+    content: '';
+    position: relative;
+    bottom: 0;
+    display: block;
+}

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -12,11 +12,13 @@ module Playbook
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[horizontal vertical],
                          default: "horizontal"
-
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[primary secondary],
+                     default: "primary"
       prop :text
 
       def classname
-        generate_classname("pb_button_toolbar_kit", orientation, connected_class)
+        generate_classname("pb_button_toolbar_kit", orientation, variant)
       end
 
     private

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb

@@ -1,7 +1,17 @@
-<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
-  <%= pb_rails("button", props: { text: "Field" }) %>
-  <%= pb_rails("button", props: { text: "Retail"}) %>
-  <%= pb_rails("button", props: { text: "Event"}) %>
-  <%= pb_rails("button", props: { text: "Training"}) %>
-  <%= pb_rails("button", props: { text: "Not Working"}) %>
-<% end %>
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("button_toolbar", props: { orientation: "vertical" }) do %>
+    <%= pb_rails("button", props: { text: "Create" }) %>
+    <%= pb_rails("button", props: { text: "Edit"}) %>
+    <%= pb_rails("button", props: { text: "Copy"}) %>
+    <%= pb_rails("button", props: { text: "Cut"}) %>
+  <% end %>
+
+  <%= pb_rails("button_toolbar", props: { orientation: "horizontal" }) do %>
+    <%= pb_rails("button", props: { text: "Create" }) %>
+    <%= pb_rails("button", props: { text: "Edit" }) %>
+    <%= pb_rails("button", props: { text: "Copy" }) %>
+    <%= pb_rails("button", props: { text: "Cut" }) %>
+  <% end %>
+
+</div>