playbook_ui 7.0.0 → 7.0.1.pre.alpha1

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;
@@ -39,9 +39,9 @@ $heading_4: $font_base;
 
 
 // Letter Spacing
-$lspace_tightest:         -.1em;
-$lspace_tighter:          -.07em;
-$lspace_tight:            -.03em;
+$lspace_tightest:         _.1em;
+$lspace_tighter:          _.07em;
+$lspace_tight:            _.03em;
 $lspace_normal:           0;
 $lspace_loose:            .03em;
 $lspace_looser:           .07em;
@@ -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

@@ -5,10 +5,6 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
-// Date Picker
-import datePickerHelper from './pb_date_picker/date_picker_helper.js'
-window.datePickerHelper = datePickerHelper
-
 // Lazy image loading
 import 'lazysizes'
 
@@ -23,10 +19,3 @@ PbTypeahead.start()
 
 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,33 @@
+<div class="pb--page--topNav <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+  <%= 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"%>
+      <%= 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

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

@@ -0,0 +1,6 @@
+.markdown
+  = render 'playbook/guides/use_nitro/nitro_components'
+  br
+  = render 'playbook/guides/use_nitro/local'
+  br
+  = render 'playbook/guides/use_nitro/versions'

data/app/views/playbook/guides/use_nitro/_local.html.md

@@ -0,0 +1,2 @@
+## Local Development
+How to use on local development environment

data/app/views/playbook/guides/use_nitro/_nitro_components.html.md

@@ -0,0 +1,2 @@
+## Nitro Components
+How to add to Nitro Component

data/app/views/playbook/guides/use_nitro/_versions.html.md

@@ -0,0 +1,2 @@
+## Versions
+How to update version

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

@@ -0,0 +1,10 @@
+= pb_rails("layout", props: {full: true, size: "md"})
+  = pb_rails("layout/sidebar")
+    h1 Sidebar
+  = pb_rails("layout/body")
+
+    = pb_rails("layout", props: {position: "right", size: "xl", collapse: "xl", full: true})
+      = pb_rails("layout/sidebar")
+        h1 Sidebar
+      = pb_rails("layout/body")
+        h1 Body

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

@@ -0,0 +1,2 @@
+h1 Grid Test Example
+= pb_react("image", props: {"url": "https://images.unsplash.com/photo-1546554137-f86b9593a222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"})

data/app/views/playbook/pages/home.html.slim

@@ -0,0 +1,4 @@
+
+/ PagesController.action_methods
+
+h1 Welcome to Playbook

data/app/views/playbook/pages/kit_category_show.html.erb

@@ -0,0 +1,14 @@
+<div class="pb--kits">
+  <%= pb_rails("title", props: { text: pb_kit_title(@category), tag: "h1", size: 1 }) %>
+  <br>
+  <div class="pb--kit-type-nav">
+    <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+      <%= pb_rails("nav/item", props: { text: "Rails", link: kit_category_show_path(@category, type: 'rails'), active: @type == 'rails' }) %>
+      <%= pb_rails("nav/item", props: { text: "React", link: kit_category_show_path(@category, type: 'react'), active: @type == 'react' }) %>
+    <% end %>
+    <%= pb_rails("section_separator") %>
+  </div>
+  <br>
+  <br>
+  <%= pb_category_kits(category_kits: @category_kits, type: @type) %>
+</div>

data/app/views/playbook/pages/kit_show.html.erb

@@ -0,0 +1,33 @@
+<div class="pb--kit-show <%=@kit%>-kit">
+  <%= pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 }) %>
+  <div class="markdown <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+    <%= markdown(get_kit_description(@kit)) %>
+  </div>
+</div>
+<div>
+  <div class="pb--kit-type-nav">
+    <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+      <% if has_kit_type?(@kit, "rails") %>
+        <%= pb_rails("nav/item", props: { text: "Rails", link: kit_show_rails_path(@kit), active: action_name == 'kit_show_rails' }) %>
+      <% end %>
+      <% if has_kit_type?(@kit, "react") %>
+        <%= pb_rails("nav/item", props: { text: "React", link: kit_show_reacts_path(@kit), active: action_name == 'kit_show_react' }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("section_separator") %>
+  </div>
+  <% if (action_name == "kit_show_rails") %>
+    <%= pb_kit(kit: @kit) %>
+    <div class="markdown <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+    <%= pb_kit_api(@kit) %>
+  <% else %>
+    <%= pb_kit(kit: @kit, type: "react") %>
+    <div class="markdown <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+  <% end %>
+</div>

data/app/views/playbook/pages/kits.html.erb

@@ -0,0 +1,12 @@
+<div class="pb--kits">
+  <%= pb_rails("title", props: { text: "Kits", tag: "h1", size: 1 }) %>
+  <br>
+  <%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+    <%= pb_rails("nav/item", props: { text: "Rails", link: kits_path('', type: 'rails'), active: @type == 'rails' }) %>
+    <%= pb_rails("nav/item", props: { text: "React", link: kits_path('', type: 'react'), active: @type == 'react' }) %>
+  <% end %>
+  <%= pb_rails("section_separator") %>
+  <br>
+  <br>
+  <%= pb_kits(type: @type) %>
+</div>

data/app/views/playbook/pages/principals/_getting_started.html.md

@@ -0,0 +1,30 @@
+### Getting Started
+---
+
+#### Commands to get you started.
+
+To spin up the app run:
+
+`make start`
+
+
+#### Yarn Problems
+
+If you get an error simular to this:
+
+
+> ERROR in .scss
+  Module build failed
+  ModuleBuildError: Module build failed sass-loader
+  Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x
+  Found bindings for the following environments:
+  OS X 64-bit with Node.js 8.x
+  This usually happens because your environment has changed since running npm install.
+  Run npm rebuild node-sass to download the binding for your current environment.
+
+
+First try:
+
+`make shell && npm rebuild node-sass`
+
+If that still doesn't work try to delete the node-sass folder and `yarn install`

data/app/views/playbook/pages/principles.html.slim

@@ -0,0 +1,3 @@
+body
+  div class="markdown"
+    = render 'playbook/pages/principles/getting_started'

data/app/views/playbook/pages/tokens.html.slim

@@ -0,0 +1,15 @@
+= pb_rails("title", props: { text: "Tokens", tag: "h1", size: 1 })
+
+br
+
+= pb_rails("title", props: { text: "Spacing", tag: "h3", size: 3 })
+
+br
+= render :partial => "playbook/pages/tokens/pb_doc_spacing",
+    locals:{ title: "Spacing Options",
+    usage: "Used for building Kits: Spacing is sized by 8px which serves as the starting point and base that all spacing options follow.",
+    sizes:[{name:"Extra Small",variable:"space_xs"},
+      {name:"Small",variable:"space_sm"},
+      {name:"Medium",variable:"space_md"},
+      {name:"Large",variable:"space_lg"},
+      {name:"Extra Large",variable:"space_xl"}]}