playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbd4e05cea97e416fd256f5ba4ab03c7fbcbc0caf47e2923fd254bfa5e586c07
-  data.tar.gz: 295bf7be92ef65f2f1239ce024e1ca8002bcb2962e6ea341a6cd65ed61f5ffd7
+  metadata.gz: 199c07a5e9c937684b8bcf972cb949850771575b6f656acdcdb89242f4f0aea0
+  data.tar.gz: 78490ef07003b0b1edfa5994a6aef45d2235fc625a4f2d218e45387e4ed124d5
 SHA512:
-  metadata.gz: '049e5d46a6ebcc307cc3e1c32f428c419cd097670a3a0c3c57689dfa2146cc51106f73c8200820a6b699f01c25696530dc0990f99bd801751dc09e5a1c0e836e'
-  data.tar.gz: c6b10cee16fa46af663a73c374c6eacc3ce7e86f0bb14d90030dd1a847b08f0287f656f3c6f1cb8a4f1a68f950c6cb27c4ca22d59d2e44eb00b072d54712458e
+  metadata.gz: '0482dfa160df37fdac288dc3bff5b7be2e97b0030a9d019c90b84c27502e856cb4b62bac4d67b2f95d07d891c0ee5ffe7c3edb996b89a82d63a02c616db3e1ba'
+  data.tar.gz: b0bcdb6b65d9ed2831250c0c049ff2d8025aa724941c240c0b5acef8bf2483bf7a26067113c64ede36a6171e07d22c91f3585fd99ee608a4d0861dcb0d2feb28

data/README.md

@@ -9,8 +9,7 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make install`
-1. Run `make start`
+1. Run `make it`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 

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';

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

@@ -56,9 +56,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,3 +1,7 @@
+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'
@@ -11,7 +15,7 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
-export Collapsible from 'pb_collapsible/_collapsible.jsx'
+export Collapsible from './pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -30,7 +30,11 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_avatar_kit', size),
+    globalProps(props),
+    className
+  )
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -32,8 +32,10 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
-    globalProps(props))
+    buildCss('pb_badge_kit', variant, { rounded }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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.jsx

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

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

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                                default:[]
+                               default: []
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,
@@ -44,7 +45,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.jsx

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

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,17 +25,21 @@ 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: connected }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_button_toolbar_kit', orientation, variant),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

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)
+        }
+      }
+    }
+  }
+}