playbook_ui 5.1.0.pre.alpha4 → 5.1.0

data/app/pb_kits/playbook/pb_filter/docs/_description.md

@@ -0,0 +1,3 @@
+**Note**
+This kit can be implemented in a variety of ways.
+To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom', padding: 'none'}) do %>
+  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -2,8 +2,8 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-    <div class="popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -90,12 +90,12 @@ const Popover = (props: PbPopoverProps) => {
           >
             <div
                 className={classnames(
-                `${buildCss('popover_tooltip')} show`
+                `${buildCss('pb_popover_tooltip')} show`
               )}
             >
               <div
                   className={classnames(
-                  'popover_body',
+                  'pb_popover_body',
                   popoverSpacing
                 )}
                   style={widthHeightStyles()}
@@ -128,7 +128,7 @@ export default class PbReactPopover extends React.Component {
 
     document.body.addEventListener('click', ({ target }) => {
       const targetIsPopover =
-        target.closest('[class^=popover_tooltip]') !== null
+        target.closest('[class^=pb_popover_tooltip]') !== null
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -19,34 +19,38 @@
   to {
     opacity: 0;
   }
+  .pb_popover_body {
+    @include pb_card;
+    border: 0;
+    box-shadow: $shadow_deeper;
+    overflow: auto;
+  }
 }
 
-[class^="pb_popover_kit"] {
-  .popover_tooltip {
-    opacity: 0;
-    animation-name: fadeOut;
+.pb_popover_tooltip {
+  opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+  pointer-events: none;
+  &.show {
+    animation-name: fadeIn;
     animation-duration: 150ms;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
-    visibility: hidden;
-    pointer-events: none;
-    &.show {
-      animation-name: fadeIn;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-      visibility: visible;
-      pointer-events: initial;
-      z-index: $z_9;
-    }
-  }
-  .popover_body {
-    @include pb_card;
-    border: 0;
-    box-shadow: $shadow_deeper;
-    overflow: auto;
+    visibility: visible;
+    pointer-events: initial;
+    z-index: $z_9;
   }
 }
+.pb_popover_body {
+  @include pb_card;
+  border: 0;
+  box-shadow: $shadow_deeper;
+  overflow: auto;
+}
 
 
 .pb_popover_reference_wrapper {

data/app/pb_kits/playbook/pb_popover/index.js

@@ -8,7 +8,12 @@ export default class PbPopover extends PbEnhancedElement {
     return '[data-pb-popover-kit]'
   }
 
+  moveTooltip() {
+    document.querySelector('body').appendChild(this.tooltip)
+  }
+
   connect() {
+    this.moveTooltip()
     this.popper = createPopper(this.triggerElement, this.tooltip, {
       placement: this.position,
       strategy: 'fixed',
@@ -31,7 +36,7 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        // this.popper.scheduleUpdate()
+        this.popper.update()
         this.tooltip.classList.toggle('show')
       }, 0)
     })

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -8,6 +8,7 @@
 
   .pb_radio_button {
     width: 22px;
+    min-width: 22px;
     height: 22px;
     border-radius: 1000px;
     border: 2px solid $border_light;
@@ -29,6 +30,9 @@
     }
   }
   &[class*=_dark] {
+    .pb_radio_button {
+      border-color: $border_dark;
+    }
     input:checked ~ .pb_radio_button {
       border: 6px solid $primary;
     }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -46,6 +46,6 @@
     if (!event.target.dataset.typeaheadExample) return;
 
     document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").appendChild(event.detail.selected)
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
   })
 <% end %>

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,13 @@
+<div class="pb--page--topNav">
+  <h1>
+    <%= link_to root_url do %>
+      <%= image_tag("pb.logo.svg") %>
+    <% end %>
+    &nbsp;
+    <%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
+  </h1>
+</div>
+<% 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,52 @@
+<br>
+<%= pb_rails("nav", props: {
+  title: "Kits",
+  link: all_link(@type),
+  variant: "subtle"
+}) 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 %>
+<br>
+<%= pb_rails("section_separator") %>
+<br>
+<%= pb_rails("nav", props: {title: "Tokens", link: utilities_path}) 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 %>
+<br>
+<br>

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

@@ -0,0 +1,22 @@
+doctype html
+html
+  head
+    title Playbook Design System
+    = 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"
+
+  body
+    = render 'layouts/playbook/nav'
+    = pb_rails("layout", props: {classname: "pb--page--content"})
+      = render 'layouts/playbook/mobile_hamburger'
+      = pb_rails("layout/sidebar", props: { classname: "pb--page--sideNav" })
+        = render 'layouts/playbook/sidebar'
+      = pb_rails("layout/body")
+        .pb--page--content--main
+          = yield
+
+  = 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,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Full Screen Examples</title>
+        <%= csrf_meta_tags %>
+        <%= csp_meta_tag %>
+        <%= 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">
+    <%= 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">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+    <%= pb_kit_api(@kit) %>
+  <% else %>
+    <%= pb_kit(kit: @kit, type: "react") %>
+    <div class="markdown">
+      <br>
+      <%= markdown(get_kit_footer(@kit)) %>
+    </div>
+  <% end %>
+</div>