playbook_ui 7.0.1.pre.alpha9 → 7.0.1.pre.alpha15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d66d4b428dba3d904c97c9b68fe1b4d113828354b240326986d9a20f267e7215
-  data.tar.gz: d8b6c751f316a5125881c38a947ae9763c005480d9ed66eb28962fdb5378069d
+  metadata.gz: 56a4cb93a8661659aaab85d401b6bc2dc35fd48c4f79fdff2be38b38a1da8a49
+  data.tar.gz: d7e29af88a980f946845c64c6585bf1c81bd4a96d8bd8cf3a7c77666b5c1ea1e
 SHA512:
-  metadata.gz: 6ba991d26f006428ff7044896bc8fc68e5d22d0347186b2d30e831c65a4f913ecc095bf84dded3206b04bcb5871d969c3186a4bdbde1851ac2c5ac3dce9b204f
-  data.tar.gz: 6c0fd4d8ce318c87e8a2fc122953e576a088a37a9a9cfbacf5b9a34f4d7bc91919b6538d9fc5b6a826a990a8490da3ee39a270b68d0a0a40eae94842ba0bb578
+  metadata.gz: 6f3f323a335d3f1a6c440fd791854ddc6ff245d143c836d4d166fa512ca92bec43a02a01c7fbdd77a20059167bce1585300963df94b433d4f0e551530afe31b5
+  data.tar.gz: c3dace91cad070dccb45fe050e51769b9c20510302dd694d88b0b74ffa8a183ca6065b226711086df0de26a9cef72bb3c5fd3ae3e8fe9948a27a24f2d8ebe98c

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)
 
@@ -35,10 +34,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +61,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/controllers/playbook/application_controller.rb

@@ -2,13 +2,12 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
-   
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
-    
+
+  
 end

data/app/helpers/playbook/pb_kit_helper.rb

@@ -22,7 +22,7 @@ module Playbook
 
   private
     def rails_props(props)
-      if cookies[:dark_mode].nil?
+      if @playbook.nil?
         props
       else
         dark_mode_props(props)
@@ -30,7 +30,7 @@ module Playbook
     end  
 
     def react_props
-      if cookies[:dark_mode].nil?
+      if @playbook.nil?
         false
       else
         dark_mode

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

@@ -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,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'
@@ -9,6 +13,7 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 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 Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
@@ -80,6 +85,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.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

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