playbook_ui 5.1.0.pre.alpha4 → 5.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f840763ce61e9d3a4d7d7d8e1cbee6139beb4b2cfccf9d1e10bf92cf95cab76
-  data.tar.gz: 52f04b4df6443fce97a07fe238d4356d16ea36ba03c40af47543b3d20f3956ad
+  metadata.gz: 4a8d8c6c2c9c9023bc7a1d13726ffaa74f84a439c54e65c8df70e9602cb656e0
+  data.tar.gz: 8ff522a820d3badc6bdebd77098e419be9de5079555463d3d3dbf1ac4b7fc064
 SHA512:
-  metadata.gz: fab9d1b2984d62e49f03d080ca04849531015b43a182790dd656dcd2d2f150e8394c757d3b379cbaeee9f56f0b735cac5801a870e1b4461e76713a936953b13e
-  data.tar.gz: 0ee55254047e223cbb631abb1d485b875bdd5f61cc457e52655a828ed435cd4067aea9607d58c33786b6376c8bf6e9e899d5f1ec5d60d979b256a2f449106b45
+  metadata.gz: 67b570c8d5640065d08d15ecbdca7b2a5819f995083e13cf0dad71c78c9211d6eabbf7fe42c29ae643299ea3c039a230f3e7e4e476b0985e89fa4ea0a48a3f32
+  data.tar.gz: 98b172e1ea8677e5e8a67605cff95f5f0e16117e993646a5eac811cda4fe0cf0808531e36605fc551f3a7862e43bc594e2bb2ac34108342508ec5c5fcfdbf8b7

data/app/assets/images/pb-caret.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="22px"><title>select-arrow</title><g><polygon style="fill:#999999;" points="11.898,14.077 2.389,4.066 0.512,5.963 11.898,17.95 23.488,5.963 21.596,4.049 "/></g></svg>

data/app/assets/images/pb-check.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>check</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Branding" transform="translate(-432.000000, -324.000000)" fill="#FFFFFF">
+            <path d="M445.124968,324.593777 C445.187467,324.531277 445.270801,324.500027 445.374967,324.500027 C445.479133,324.500027 445.572883,324.531277 445.656216,324.593777 L446.531214,325.500025 C446.614547,325.562525 446.656214,325.645858 446.656214,325.750024 C446.656214,325.854191 446.614547,325.94794 446.531214,326.031274 L437.156237,335.406251 C437.093737,335.468751 437.010403,335.500001 436.906237,335.500001 C436.802071,335.500001 436.708321,335.468751 436.624988,335.406251 L432.468748,331.218761 C432.385414,331.156262 432.343748,331.072928 432.343748,330.968762 C432.343748,330.864596 432.385414,330.770846 432.468748,330.687513 L433.343746,329.812515 C433.427079,329.729181 433.520829,329.687515 433.624995,329.687515 C433.729161,329.687515 433.812494,329.729181 433.874994,329.812515 L436.906237,332.843758 L445.124968,324.593777 Z" id="check"></path>
+        </g>
+    </g>
+</svg>

data/app/assets/images/pb.logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="143px" height="39px" viewBox="0 0 143 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>pb.logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="31.27995 38.3709677 6.29032258e-05 38.3709677 6.29032258e-05 0.0894483871 31.27995 0.0894483871"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pb.logo">
+            <path d="M40.900986,25.7250725 L40.900986,20.0998494 L44.9692278,20.0998494 C48.7361183,20.0998494 50.7953517,17.5634764 50.7953517,14.5499641 C50.7953517,11.5113391 48.7361183,8.97496614 44.9692278,8.97496614 L36.5816183,8.97496614 L36.5816183,25.7250725 L40.900986,25.7250725 Z M44.3163001,16.3329589 L40.900986,16.3329589 L40.900986,12.7418566 L44.3163001,12.7418566 C45.4714798,12.7418566 46.4006462,13.3947843 46.4006462,14.5499641 C46.4006462,15.6800312 45.4714798,16.3329589 44.3163001,16.3329589 Z M56.4896223,25.7250725 L56.4896223,8.97496614 L52.6222814,8.97496614 L52.6222814,25.7250725 L56.4896223,25.7250725 Z M70.3203764,25.7250725 L70.3203764,18.1410663 C70.3203764,14.3741758 67.5831026,13.2943339 64.6700407,13.2943339 C62.811708,13.2943339 60.7273619,13.8468112 59.1703805,15.1777791 L60.6017989,17.8648277 C61.5811905,17.0361118 62.7865954,16.5589723 63.9920004,16.5589723 C65.5489818,16.5589723 66.4530355,17.2872378 66.4530355,18.3419671 L66.4530355,19.5473721 C65.72477,18.6433184 64.2933516,18.1159537 62.686145,18.1159537 L62.5385458,18.1180063 C60.7078145,18.1688571 58.5174529,19.1726656 58.5174529,22.0335198 C58.5174529,24.745681 60.8278124,26.0264237 62.686145,26.0264237 C64.2431264,26.0264237 65.6996574,25.4237213 66.4530355,24.5196675 L66.4530355,25.7250725 L70.3203764,25.7250725 Z M64.2933516,23.4900508 C63.2888475,23.4900508 62.3596812,23.0380239 62.3596812,22.083745 C62.3596812,21.1294661 63.2888475,20.6774392 64.2933516,20.6774392 C65.1471801,20.6774392 66.0512338,20.9536779 66.4530355,21.5312678 L66.4530355,22.6111097 C66.0512338,23.1886996 65.1471801,23.4900508 64.2933516,23.4900508 Z M72.8755716,30.4462419 C73.2773732,30.5718049 74.181427,30.6471427 74.5330034,30.6471427 L74.7503997,30.6408447 C76.9447008,30.5602028 78.6513638,29.9591284 79.6094597,27.5764643 L85.130522,13.5956851 L81.0371676,13.5956851 L78.2998939,21.2801417 L75.5375075,13.5956851 L71.4692658,13.5956851 L76.3159982,25.9008607 L76.0397596,26.5537884 C75.8137462,27.0560405 75.2612689,27.2318287 74.3823278,27.2318287 C74.0809765,27.2318287 73.7042875,27.1564909 73.4280489,27.0058153 L72.8755716,30.4462419 Z M90.1467523,21.5312678 L90.1467523,17.8146025 C90.6238917,17.1616748 91.6283959,16.7096479 92.4571118,16.7096479 C93.9889806,16.7096479 95.1441603,17.8397151 95.1441603,19.6478225 C95.1441603,21.4810425 93.9889806,22.6111097 92.4571118,22.6111097 C91.6283959,22.6111097 90.6238917,22.1841954 90.1467523,21.5312678 Z M90.1467523,25.7250725 L90.1467523,24.3187667 C91.1512564,25.4739465 92.381774,26.0264237 93.7378545,26.0264237 C96.7262543,26.0264237 99.086839,23.7662894 99.086839,19.6478225 C99.086839,15.6800312 96.7764795,13.2943339 93.7378545,13.2943339 C92.4068866,13.2943339 91.1010312,13.8216986 90.1467523,15.0271035 L90.1467523,8.97496614 L86.2794114,8.97496614 L86.2794114,25.7250725 L90.1467523,25.7250725 Z M106.915681,26.0264237 C111.084373,26.0264237 113.545408,23.0631366 113.545408,19.6478225 C113.545408,16.2325085 111.084373,13.2943339 106.915681,13.2943339 C102.797214,13.2943339 100.336179,16.2325085 100.336179,19.6478225 C100.336179,23.0631366 102.797214,26.0264237 106.915681,26.0264237 Z M106.915681,22.6111097 C105.258249,22.6111097 104.30397,21.2801417 104.30397,19.6478225 C104.30397,18.0406159 105.258249,16.7096479 106.915681,16.7096479 C108.623338,16.7096479 109.577617,18.0406159 109.577617,19.6478225 C109.577617,21.2801417 108.623338,22.6111097 106.915681,22.6111097 Z M121.37425,26.0264237 C125.542942,26.0264237 128.003977,23.0631366 128.003977,19.6478225 C128.003977,16.2325085 125.542942,13.2943339 121.37425,13.2943339 C117.255783,13.2943339 114.794748,16.2325085 114.794748,19.6478225 C114.794748,23.0631366 117.255783,26.0264237 121.37425,26.0264237 Z M121.37425,22.6111097 C119.716818,22.6111097 118.762539,21.2801417 118.762539,19.6478225 C118.762539,18.0406159 119.716818,16.7096479 121.37425,16.7096479 C123.081907,16.7096479 124.036186,18.0406159 124.036186,19.6478225 C124.036186,21.2801417 123.081907,22.6111097 121.37425,22.6111097 Z M142.487659,25.7250725 L137.716264,25.7250725 L135.054328,21.4308173 L133.899149,22.8120105 L133.899149,25.7250725 L130.031808,25.7250725 L130.031808,8.97496614 L133.899149,8.97496614 L133.899149,18.4424176 L137.590701,13.5956851 L142.261646,13.5956851 L137.791602,19.1204578 L142.487659,25.7250725 Z" id="Playbook" fill="#0056CF" fill-rule="nonzero"></path>
+            <g id="Group-10" transform="translate(0.000000, 0.225194)">
+                <g id="Group-3">
+                    <g id="Fill-1-Clipped">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="path-1"></g>
+                        <path d="M16.0020145,0.0894483871 C14.7618774,0.0894483871 13.7532242,1.1037629 13.7532242,2.35019032 L13.7532242,5.51862581 L0.999595161,14.8644726 L0.987329032,14.8735935 L0.975377419,14.8824 L0.968458065,14.8877468 C0.361441935,15.340021 6.29032258e-05,16.06215 6.29032258e-05,16.8235935 L6.29032258e-05,26.4795532 C6.29032258e-05,27.2479161 0.363958065,27.9722468 0.974748387,28.424521 L0.986070968,28.4326984 L0.992675806,28.4377306 L0.999595161,28.4427629 L13.9551435,37.9364323 C14.3423129,38.2204403 14.7999339,38.3710935 15.2779984,38.3710935 C16.51845,38.3710935 17.5274177,37.3564645 17.5274177,36.1097226 L17.5274177,32.9419161 L30.2804177,23.5957548 L30.2929984,23.5869484 L30.30495,23.5778274 L30.3109258,23.5731097 C30.9182565,23.1208355 31.27995,22.3983919 31.27995,21.6366339 L31.27995,11.9809887 C31.27995,11.2110532 30.9154258,10.4864081 30.3036919,10.0347629 L30.2929984,10.0269 L30.2870226,10.0221823 L30.2804177,10.0174645 L17.3248694,0.523795161 C16.9380145,0.240101613 16.4803935,0.0894483871 16.0020145,0.0894483871 M16.0020145,1.97654516 C16.0724661,1.97654516 16.1441758,1.99793226 16.2092806,2.04605323 L29.1651435,11.5397226 L29.1805548,11.5510452 C29.3139097,11.6485452 29.3928532,11.8073758 29.3928532,11.9759565 L29.3928532,11.9809887 L29.3928532,21.6331742 L29.3928532,21.6366339 C29.3928532,21.8064726 29.3132806,21.9649887 29.1796113,22.0628032 L29.1651435,22.0734968 L15.640321,31.9851581 L15.640321,36.1097226 C15.640321,36.3305129 15.46545,36.4839968 15.2779984,36.4839968 C15.2078613,36.4839968 15.1358371,36.4619806 15.0704177,36.4141742 L2.11518387,26.9208194 L2.09977258,26.9091823 C1.96610323,26.8113677 1.88715968,26.6531661 1.88715968,26.4845855 L1.88715968,26.4795532 L1.88715968,16.8273677 L1.88715968,16.8235935 C1.88715968,16.6540694 1.96673226,16.4952387 2.10040161,16.3977387 L2.11518387,16.3864161 L15.640321,6.47506935 L15.640321,2.35019032 C15.640321,2.13002903 15.8145629,1.97654516 16.0020145,1.97654516" id="Fill-1" fill="#0056CF" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                    </g>
+                </g>
+                <polygon id="Fill-4" fill="#0056CF" fill-rule="nonzero" points="11.4547403 17.0330927 10.5942242 16.1725766 8.31272419 18.4540766 6.03122419 16.1725766 5.17070806 17.0330927 7.45189355 19.3145927 5.17070806 21.5964073 6.03122419 22.4569234 8.31272419 20.1751089 10.5942242 22.4569234 11.4547403 21.5964073 9.17324032 19.3145927"></polygon>
+                <path d="M22.805596,15.6235887 C20.7672169,15.6235887 19.1144347,17.2760565 19.1144347,19.3144355 C19.1144347,21.3534435 20.7672169,23.0059113 22.805596,23.0059113 C24.843975,23.0059113 26.4964427,21.3534435 26.4964427,19.3144355 C26.4964427,17.2760565 24.843975,15.6235887 22.805596,15.6235887 M22.805596,16.8407661 C24.1696524,16.8407661 25.2792653,17.950379 25.2792653,19.3144355 C25.2792653,20.6788065 24.1696524,21.7887339 22.805596,21.7887339 C21.441225,21.7887339 20.3316121,20.6788065 20.3316121,19.3144355 C20.3316121,17.950379 21.441225,16.8407661 22.805596,16.8407661" id="Fill-6" fill="#0056CF" fill-rule="nonzero"></path>
+                <path d="M18.8099516,17.7868306 L15.2804516,13.9664032 L11.759129,17.7868306 L12.6212177,18.5897903 L14.6907339,16.3293629 L14.6907339,22.8977177 C14.6907339,23.2229274 14.9542984,23.4864919 15.2791935,23.4864919 C15.6047177,23.4864919 15.8679677,23.2229274 15.8679677,22.8977177 L15.8679677,16.3271613 L17.9478629,18.5897903 L18.8099516,17.7868306 Z" id="Fill-8" fill="#0056CF" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

data/app/controllers/playbook/application_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+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/controllers/playbook/guides_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+
+module Playbook
+  class GuidesController < ApplicationController
+    def create_kit; end
+
+    def use_nitro; end
+  end
+end

data/app/controllers/playbook/pages_controller.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+require "yaml"
+
+module Playbook
+  class PagesController < ApplicationController
+    before_action :set_kit, only: %i[kit_show_rails kit_show_react]
+    before_action :ensure_kit_type_exists, only: %i[kit_show_rails kit_show_react]
+    before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
+
+    def home; end
+
+    def utilities; end
+
+    def tokens; end
+
+    def kits
+      params[:type] ||= "react"
+      @type = params[:type]
+    end
+
+    def principles; end
+
+    def grid
+      render layout: "layouts/playbook/grid"
+    end
+
+    def kit_show_rails
+      render template: "playbook/pages/kit_show"
+    end
+
+    def kit_show_react
+      render template: "playbook/pages/kit_show"
+    end
+
+    def kit_category_show_rails
+      params[:type] ||= "rails"
+      @type = params[:type]
+      render template: "playbook/pages/kit_category_show"
+    end
+
+    def kit_category_show_react
+      render template: "playbook/pages/kit_category_show"
+    end
+
+  private
+
+    def set_category
+      categories = MENU["kits"].map { |link| link.first.first if link.is_a?(Hash) }.compact
+      @category = params[:name]
+      if categories.flatten.include?(@category)
+        @category_kits = MENU["kits"].map { |link| link.first.last if link.is_a?(Hash) && link.first.first == @category }.compact.flatten
+        @kits = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+
+    def set_kit
+      menu = MENU["kits"].map { |link| link.is_a?(Hash) ? link.first.last : link }
+      if menu.flatten.include?(params[:name])
+        @kit = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+
+    def ensure_kit_type_exists
+      # TODO: unsure why we cannot simply use the helpers that are included in ApplicationController - fix this
+      is_rails_kit = action_name == "kit_show_rails"
+      files = is_rails_kit ? File.join("**", "*.erb") : File.join("**", "*.jsx")
+      kit_files = Dir.glob(files, base: "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs").present?
+      if !kit_files.present?
+        redirect_to action: is_rails_kit ? "kit_show_react" : "kit_show_rails"
+      end
+    end
+  end
+end

data/app/controllers/playbook/samples_controller.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_dependency "playbook/application_controller"
+require "yaml"
+
+module Playbook
+  class SamplesController < ApplicationController
+    before_action :set_sample, only: %i[sample_show_rails sample_show_react]
+
+    layout "playbook/samples"
+
+    def samples
+      params[:type] ||= "rails"
+      @type = params[:type]
+    end
+
+    def sample_show_rails
+      params[:type] ||= "rails"
+      @type = params[:type]
+      render template: "playbook/samples/sample_show"
+    end
+
+    def sample_show_react
+      params[:type] ||= "react"
+      @type = params[:type]
+      render template: "playbook/samples/sample_show"
+    end
+
+  private
+
+    def set_sample
+      menu = MENU["samples"].map { |link| link.is_a?(Hash) ? link.first.last : link }
+      if menu.flatten.include?(params[:name])
+        @sample = params[:name]
+      else
+        redirect_to root_path, flash: { error: "That kit does not exist" }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/config/_kit_example.html.erb

@@ -0,0 +1,9 @@
+<%if !@kit_examples[:examples].nil? %>
+  <% @kit_examples[:examples].each do |kit_example| %>
+    <% kit_example.each do |key, item| %>
+      <div class="pb--doc <%=key.include?('_dark') ? 'dark_ui' : 'light_ui'%>">
+        <%= render partial: "config/kit_ui", locals: { key: key, type: @type, item: item, show_code: @show_code } %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/config/_kit_samples_list.html.erb

@@ -0,0 +1,3 @@
+<div>
+    Flexbox list of thumbnail previews. 
+</div>

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -0,0 +1,40 @@
+
+<% type ||= "rails" %>
+
+<% if type == "react" %>
+  <% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.jsx") %>
+<% else %>
+  <% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb") %>
+<% end %>
+
+<div class="pb--kit-example">
+  <%= pb_rails("caption", props: { text: item }) %>
+  <br>
+  <% if type == "rails" %>
+    <%= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}" %>
+  <% elsif type == "react" %>
+    <%= pb_react(key.camelize) %>
+  <% end %>
+  <br>
+</div>
+
+  <% if @show_code%>
+    <div class="markdown pb--kit-example-markdown">
+      <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
+    </div>
+    <div class="pb--codeControls">
+      <ul>
+        <li>
+          <a href="#" data-toggle="code_example">Code Example</a>
+        </li>
+      </ul>
+    </div>
+    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
+      <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
+      <% if type == "rails" %>
+        <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
+      <% elsif type == "react" %>
+        <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
+      <% end %>
+    </div>
+  <% end %>

data/app/pb_kits/playbook/config/_pb_kit_api.html.erb

@@ -0,0 +1,18 @@
+<% if defined?(@kit_api) && @kit_api.present? %>
+  <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
+    <table class="pb--propsTable--table">
+      <thead>
+        <tr>
+          <th>Available Props</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @kit_api.each_with_index do |(key,value),index| %>
+          <tr>
+            <td><%= key %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

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

@@ -0,0 +1,93 @@
+samples:
+  - dashboards
+  - registration
+  - filter_table
+
+kits:
+  - avatar
+  - avatar_action_button
+  - badge
+  - buttons:
+    - button
+    - circle_icon_button
+  - card
+  - checkbox
+  - charts_and_graphs:
+    - bar_graph
+    - legend
+    - line_graph
+    - distribution_bar
+    - circle_chart
+
+  - filter
+  - fixed_confirmation_toast
+  - flex
+  - forms:
+    - file_upload
+    - form
+    - form_pill
+    - radio
+    - select
+    - selectable_card
+    - selectable_card_icon
+    - selectable_icon
+    - text_input
+    - textarea
+    - typeahead
+    - toggle
+  - highlight
+  - hashtag
+  - icon
+  - icon_circle
+  - icon_value
+  - image
+  - installer
+  - layout
+  - list
+  - loading_inline
+  - logistic
+  - multiple_users
+  - multiple_users_stacked
+  - nav
+  - online_status
+  - pill
+  - popover
+  - progress_pills
+  - progress_simple
+  - progress_step
+  - section_separator
+  - source
+  - star_rating
+  - stat_change
+  - table
+  - timeline
+  - tooltip
+  - typography:
+    - body
+    - caption
+    - title
+  - typography_patterns:
+    - contact
+    - currency
+    - dashboard_value
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time_stacked
+    - date_year_stacked
+    - home_address_street
+    - label_pill
+    - label_value
+    - message
+    - person
+    - person_contact
+    - stat_value
+    - time
+    - time_stacked
+    - timestamp
+    - time_range_inline
+    - title_count
+    - title_detail
+    - weekday_stacked
+  - user

data/app/pb_kits/playbook/index.js

@@ -1,7 +1,3 @@
-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'

data/app/pb_kits/playbook/packs/application.js

@@ -0,0 +1,55 @@
+import '../../../../fonts/fontawesome-min.js'
+import '../../../../fonts/regular-min.js'
+import './main.scss'
+import '../vendor.js'
+
+// Move to separate file
+window.$(document).on('click', '[data-toggle]', function(e) {
+  e.preventDefault()
+
+  var kitContainer = window.$(this).closest('.pb--doc')
+  var toggleTarget = window.$(this).data('toggle')
+
+  window
+    .$(kitContainer)
+    .find('[data-action="toggle"]')
+    .hide()
+  window
+    .$(kitContainer)
+    .find('[data-togglable="' + toggleTarget + '"]')
+    .show()
+})
+
+window.$(document).ready(() => {
+  $('.compress').hide()
+
+  window.$(document).on('click', '.toggle-button', (e) => {
+    e.preventDefault()
+    $('.pb--codeCopy').toggleClass('close')
+  })
+
+  $('.expand').click(() => {
+    $('.sample-nav').hide()
+    $('.compress').show()
+  })
+
+  $('.compress').click(() => {
+    $('.sample-nav').show()
+    $('.compress').hide()
+  })
+
+  const setClipboard = (value) => {
+    var tempInput = document.createElement('textarea')
+    tempInput.style = 'position: absolute; left: -1000px; top: -1000px'
+    tempInput.value = value
+    document.body.appendChild(tempInput)
+    tempInput.select()
+    document.execCommand('copy')
+    document.body.removeChild(tempInput)
+  }
+
+  $('.copy-clipboard').click(() => {
+    var copyText = document.querySelector('.hiddenCodeforCopy').textContent
+    setClipboard(copyText)
+  })
+})