playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -26,11 +26,8 @@ const UserBadge = (props: UserBadgeProps) => {
   const image = require(`./badges/_${badge}.svg`)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_user_badge_kit', size),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
+    className)
 
   return (
     <div

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-/*=====================================
-Base colors should not be documented.
-Only document color use.
+//=====================================
+// Base colors should not be documented.
+// Only document color use.
 
-Colors -----------------------------*/
+// Colors -----------------------------
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-/* Specialty Gradient -----------------*/
+// Specialty Gradient -----------------
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-/* Interface colors -------------------*/
+// Interface colors -------------------
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-/* Main colors ------------------------*/
+// Main colors ------------------------
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-/*=====================================
+//=====================================
 
-Background colors ------------------*/
+// Background colors ------------------
 $bg_light:            $silver;
 $bg_dark:             #0a0527;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-/* Card colors ------------------*/
+// Card colors ------------------
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-/* Active colors ----------------------*/
+// Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-/* Hover colors -----------------------*/
+// Hover colors -----------------------
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-/* Focus colors -----------------------*/
+// Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-/* Border colors ----------------------*/
+// Border colors ----------------------
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-/* Shadow colors ----------------------*/
+// Shadow colors ----------------------
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-/* Text colors ------------------------*/
+// Text colors ------------------------
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-/* Data colors ------------------------*/
+// Data colors ------------------------
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-/* Status colors ----------------------*/
+// Status colors ----------------------
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-/* Link colors ------------------------*/
+// Link colors ------------------------
 $primary_action:      $primary;
 
-/* Product colors ---------------------*/
+// Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-/* Category colors ---------------------*/
+// Category colors ---------------------
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,6 +252,7 @@ $transparent: transparent;
 }
 
 :export {
+
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
-/* CLEAN UP AND REMOVE */
+// CLEAN UP AND REMOVE
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
 
 
-/* Headings */
+// Headings
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
 
 
 
-/* Standard Font Weights */
+// Standard Font Weights
 $bold:          600;
 $regular:       400;
 
-/* Non_Standard Font Weights */
+// Non_Standard Font Weights
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;

data/app/pb_kits/playbook/vendor.js

@@ -12,15 +12,15 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
 
+import PbCollapsible from './pb_collapsible'
+PbCollapsible.start()
+
 import PbPopover from './pb_popover'
 PbPopover.start()
 
 import PbTooltip from './pb_tooltip'
 PbTooltip.start()
 
-import PbFixedConfirmationToast from './pb_fixed_confirmation_toast'
-PbFixedConfirmationToast.start()
-
 import PbTypeahead from './pb_typeahead'
 PbTypeahead.start()
 
@@ -28,8 +28,3 @@ import PbTable from './pb_table'
 PbTable.start()
 
 import 'flatpickr'
-
-// React-Rendered Rails Kits =====
-import WebpackerReact from 'webpacker-react'
-import * as ReactRailsPBKits from './react_rails_kits.js'
-WebpackerReact.setup({ ...ReactRailsPBKits })

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,37 @@
+
+<div class="pb--page--topNav <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+<% if @playbook.nil?%>
+  <p>playbok is nil</p>
+<% end %>
+  <%= pb_rails("flex", props:{spacing:"between",vertical: "center"}) do%>
+     <%= pb_rails("flex", props:{spacing:"between",vertical: "center"}) do%>
+      <%= link_to root_url do %>
+        <%= image_tag("pb.logo.svg") %>
+      <% end %>
+      <%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
+      <% end %>
+    <div id="toggle-modes">
+    <% if cookies[:dark_mode] == "false" || cookies[:dark_mode] == nil%>
+      <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "moon",
+        tag:"a",
+        link: enable_dark_mode_path
+      }) %>
+      <% else %>
+      <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "sun",
+        tag:"a",
+        link: disable_dark_mode_path
+      }) %>
+    <% end %>
+    <% end %>
+  </div>
+  
+</div>
+<%= pb_rails("section_separator")%>
+<% 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/_sidebar.html.erb

@@ -0,0 +1,51 @@
+
+<%= pb_rails("nav", props: {
+  title: "Kits",
+  link: all_link(@type),
+  variant: "subtle",
+  padding_y: "sm"
+}) do %>
+  <% pb_rails("nav/item", props: {
+    text: "All",
+    link: all_link(@type),
+    active: all_active(controller_name, action_name)
+  }) %>
+  <% MENU["kits"].each do |link| %>
+    <% if link.is_a?(Hash) %>
+      <div class="category_section">
+        <%= pb_rails("nav/item", props: {
+          active: category_active(@category, link),
+          classname: "category",
+          icon_right: "angle-down",
+          link: category_link(@type, link)
+        }) do %>
+          <%= pb_kit_title(nav_hash_category(link)) %>
+        <% end %>
+        <%= pb_rails("nav", props: { variant: "subtle", classname: "sub_category"}) do %>
+          <% nav_hash_array(link).each do |sub_link| %>
+            <%= pb_rails("nav/item", props: {
+              text: pb_kit_title(sub_link),
+              link: sub_category_link(@type, sub_link),
+              active: sub_category_active(@kit, sub_link)
+            }) %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("nav/item", props: {
+        text: pb_kit_title(link),
+        link: kit_link(@type, link),
+        active: kit_active(@kit, link)
+      }) %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("section_separator") %>
+
+<%= pb_rails("nav", props: {title: "Tokens", link: utilities_path, padding_y:"sm", variant:"subtle"}) do %>
+  <% color_active = (controller_name == 'pages' && action_name == 'utilities') ? true : false %>
+  <%= pb_rails("nav/item", props: { text: "Colors", link: utilities_path, active: color_active }) %>
+  <% spacing_active = (controller_name == 'pages' && action_name == 'tokens') ? true : false %>
+  <%= pb_rails("nav/item", props: { text: "Spacing", link: tokens_path, active: spacing_active }) %>
+<% end %>

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

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title> Playbook Design System </title>
+    <%= csrf_meta_tags%>
+    <%= csp_meta_tag%>
+    <%= stylesheet_packs_with_chunks_tag 'main' %>
+    <meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"></meta>
+  </head>
+  <body>
+    <%= render 'layouts/playbook/nav'%>
+    <%= pb_rails("layout", props: {classname: "pb--page--content",variant: cookies[:dark_mode] == "true" ? 'dark' : 'light' }) do%>
+      <%= render 'layouts/playbook/mobile_hamburger'%>
+      <%= pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav"}) do%>
+        <%= render 'layouts/playbook/sidebar'%>
+      <% end%>
+      <%= pb_rails("layout/body") do%>
+        <div class="pb--page--content--main <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+          <%= yield %>
+        </div>
+      <% end %>
+    <%end%>
+  </body>
+  <%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" %>
+  <%= javascript_packs_with_chunks_tag 'application', 'examples' %>
+  <%= yield :pb_js %>

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

@@ -0,0 +1,10 @@
+doctype html
+html
+  head
+    title Playbook Design System
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_packs_with_chunks_tag 'main'
+    = javascript_packs_with_chunks_tag 'application'
+  body
+    = yield

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

@@ -0,0 +1,10 @@
+doctype html
+html
+  head
+    title Playbook Design System
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_packs_with_chunks_tag 'main'
+    = javascript_packs_with_chunks_tag 'application'
+  body
+    = yield

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

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Full Screen Examples</title>
+        <%= csrf_meta_tags %>
+        <%= csp_meta_tag %>
+        <meta content="user-scalable=0, initial-scale=1.0, minimum-scale=1" name="viewport"/>
+        <%= stylesheet_packs_with_chunks_tag 'main' %>
+    </head>
+    <body>
+        <div class="sample-layout">
+            <%= yield %>
+        </div>
+    </body>
+
+    <%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" %>
+    <%= javascript_packs_with_chunks_tag 'application', 'examples', 'samples' %>
+    <%= yield :pb_js %>
+</html>

data/app/views/playbook/guides/create_kit.html.slim

@@ -0,0 +1,16 @@
+.markdown
+  = render 'playbook/guides/create_kit/generator'
+  br
+  = render 'playbook/guides/create_kit/view_objects'
+  br
+  = render 'playbook/guides/create_kit/kit_rails'
+  br
+  = render 'playbook/guides/create_kit/kit_react'
+  br
+  = render 'playbook/guides/create_kit/kit_examples'
+  br
+  = render 'playbook/guides/create_kit/file_naming'
+  br
+  = render 'playbook/guides/create_kit/layout'
+  br
+  = render 'playbook/guides/create_kit/writing_sass'

data/app/views/playbook/guides/create_kit/_file_naming.html.md

@@ -0,0 +1,2 @@
+## File Naming
+How files should be named

data/app/views/playbook/guides/create_kit/_generator.html.md

@@ -0,0 +1,6 @@
+## Kit Generator
+Create a basic kit through the generator to speed up kit development.
+
+```
+rails g kit my_new_kit
+```

data/app/views/playbook/guides/create_kit/_kit_examples.html.md

@@ -0,0 +1,2 @@
+## Examples
+Understand how to create examples

data/app/views/playbook/guides/create_kit/_kit_rails.html.md

@@ -0,0 +1,2 @@
+## Rails Partial
+How to setup kit partial

data/app/views/playbook/guides/create_kit/_kit_react.html.md

@@ -0,0 +1,2 @@
+## React Component
+How to setup kit component for react

data/app/views/playbook/guides/create_kit/_layout.html.md

@@ -0,0 +1,2 @@
+## Layout and structure
+A a kit should be able to function without external utility classes and libraries. A kit should handle layout for it’s children.

data/app/views/playbook/guides/create_kit/_view_objects.html.md

@@ -0,0 +1,2 @@
+## View Objects
+Understanding view objects

data/app/views/playbook/guides/create_kit/_writing_sass.md

@@ -0,0 +1,10 @@
+## Writing Sass
+---
+#### Class names, chaining, and SASS
+A kit should be named using prefixed complex classes to try and avoid naming collision and style bleed. Class chaining should be avoided if possible.
+
+---
+
+1. Use extend a class using & when possible and avoid class chaining when possible.
+2. When you must use a chained class try to avoid setting multiple properties.
+3. If your using chained classes have simple names make sure they don't collide with our utilities, and try to nest them under a parent class to avoid bleed