playbook_ui 4.2.0 → 4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1f5453ef495f16a0c7abae04bef14015972c62ac815cd6b2c95e8b3d628bd67
-  data.tar.gz: 541addf63471c2acbc2c8e67ecbfa7beb2d13f7a986bdea2675e78a915cdd568
+  metadata.gz: 3a4d73c76588b25b5e3ee3b257516d846582794b6a86e435cad10ecd5dcdc8bc
+  data.tar.gz: 57d4d2629084e41b54d0a5d041b80203ef2372718e14d750a680c5b324b18fcf
 SHA512:
-  metadata.gz: 270dbf525c913b04d5ec65c4318b11da5fffea2c4624e42e2dbc26321651369039f0bc0b24d0d8ae1859cb01387bf1197dfe5f64aeb77ef08ddc5a9c833aaa38
-  data.tar.gz: 1f35b76115e2679e476ea3188188a96e5362847db1a1047e9eea3fe1e0c02d937b3abe988f55b5d89b38ee3584f156e3f9710f69d9c448cb425e14e5c8634201
+  metadata.gz: 30175126c0b79b3625a628965b0a2869d1e5bbfa46359413335fb9b45246a21d699e65039c9d97de5d6486d6152f350308b0be4c5fee63e530a98c9de03a33d9
+  data.tar.gz: 8adec477ac41c310c523f6b526052bde4f6aaa72506d4d5e91a8e591cd34930ff3bca48783c8085704b6d1a318c2ea55aa17cc6165c1ffda08fffcab8385750a

data/app/controllers/playbook/application_controller.rb

@@ -7,6 +7,7 @@ module Playbook
     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/pages_controller.rb

@@ -21,10 +21,6 @@ module Playbook
 
     def principles; end
 
-    def fullscreen
-      render layout: "layouts/playbook/fullscreen"
-    end
-
     def grid
       render layout: "layouts/playbook/grid"
     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/helpers/playbook/pb_doc_helper.rb

@@ -24,7 +24,8 @@ module Playbook
 
     def pb_kits(type: "rails")
       display_kits = []
-      MENU["kits"].each do |kit|
+      kits = get_kits()
+      kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
             display_kits << render_pb_doc_kit(sub_kit, type)
@@ -36,6 +37,11 @@ module Playbook
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
 
+    def get_kits
+      menu = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/menu.yml")
+      return menu['kits']
+    end
+
     def pb_category_kits(category_kits: [], type: "rails")
       display_kits = []
       category_kits.each do |kit|

data/app/helpers/playbook/pb_sample_helper.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbSampleHelper
+    def has_sample_type?(sample, type)
+      type ||= "rails"
+      if type == "rails"
+        Dir["../../views/playbook/samples/#{sample}/*.html.erb"].empty?
+      elsif type == "react"
+        Dir["../../views/playbook/samples/#{sample}/*.jsx"].empty?
+      end
+    end
+
+    def pb_sample(sample: "", type: "rails")
+      @type = type
+      @sample = sample
+    end
+  end
+end

data/app/helpers/playbook/redcarpet_helper.rb

@@ -38,7 +38,7 @@ module Playbook
     end
 
     def rouge(text, language)
-      formatter = Rouge::Formatters::HTML.new(css_class: "highlight")
+      formatter = Rouge::Formatters::HTML.new(scope: ".highlight")
       lexer = Rouge::Lexer.find(language)
       formatter.format(lexer.lex(text))
     end

data/app/pb_kits/playbook/_playbook.scss

@@ -20,6 +20,7 @@
 @import 'pb_form/form';
 @import 'pb_flex/flex';
 @import 'pb_hashtag/hashtag';
+@import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
 @import 'pb_icon_circle/icon_circle';

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.slim

@@ -1,7 +1,7 @@
 - type ||= "rails"
 
 - if type == "react"
-  - contents = "<%= react_component('kits/#{key}') %>"
+  - 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")
 
@@ -14,6 +14,8 @@
     = pb_react(key.camelize)
   br
 
+- if @samples
+  = render partial: "kit_samples_list"
 
 - if @show_code
   .pb--codeControls
@@ -23,7 +25,9 @@
 
   .pb--codeCopy data-action="toggle" data-togglable="code_example"
     a.pb--close-toggle href="#" data-toggle="false" Close
-    - if type == "rails"
-      = raw rouge(contents, "erb")
-    - elsif type == "react"
-      = raw rouge(contents, "erb")
+    pre.highlight
+      - if type == "rails"
+        = raw rouge(contents, "erb")
+      - elsif type == "react"
+        = raw rouge(contents, "react")
+        

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

@@ -1,3 +1,5 @@
+samples: 
+  - dashboards
 kits:
   - avatar
   - badge
@@ -22,6 +24,7 @@ kits:
     - textarea
     - typeahead
     - toggle
+  - highlight
   - hashtag
   - icon
   - icon_circle
@@ -68,3 +71,4 @@ kits:
     - title_detail
   - user
   - user_badge
+  - editor

data/app/pb_kits/playbook/index.js

@@ -20,6 +20,7 @@ export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirm
 export Flex from './pb_flex/_flex.jsx'
 export FlexItem from './pb_flex/_flex_item.jsx'
 export Hashtag from './pb_hashtag/_hashtag.jsx'
+export Highlight from './pb_highlight/_highlight.jsx'
 export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
 export Icon from './pb_icon/_icon.jsx'
 export IconCircle from './pb_icon_circle/_icon_circle.jsx'
@@ -39,6 +40,7 @@ export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_st
 export Nav from './pb_nav/_nav.jsx'
 export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
+export PbReactPopover from './pb_popover/_popover.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'

data/app/pb_kits/playbook/kits/pb_flex.js

@@ -0,0 +1,4 @@
+import Flex from '../pb_flex/_flex.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Flex })

data/app/pb_kits/playbook/kits/pb_highlight.js

@@ -0,0 +1,4 @@
+import Highlight from '../pb_highlight/_highlight.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Highlight })

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

@@ -33,6 +33,7 @@ import * as DistributionBar from 'pb_distribution_bar/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as Hashtag from 'pb_hashtag/docs'
+import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
 import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
@@ -50,6 +51,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
 import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
@@ -99,6 +101,7 @@ WebpackerReact.setup({
   ...FixedConfirmationToast,
   ...Flex,
   ...Hashtag,
+  ...Highlight,
   ...HomeAddressStreet,
   ...Icon,
   ...IconCircle,
@@ -116,6 +119,7 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...PbReactPopover,
   ...Person,
   ...PersonContact,
   ...Pill,

data/app/pb_kits/playbook/packs/kits/pb_highlight.js

@@ -0,0 +1,2 @@
+import '../../pb_highlight/_highlight.jsx'
+

data/app/pb_kits/playbook/packs/kits/pb_popover.js

@@ -0,0 +1 @@
+import '../../pb_popover/_popover.jsx'

data/app/pb_kits/playbook/packs/main.scss

@@ -7,3 +7,6 @@
 // APP STYLES
 @import "site_styles/site-style";
 @import "site_styles/docs/all";
+
+// FULL PAGE EXAMPLE STYLES
+@import "site_styles/samples";

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

@@ -0,0 +1,50 @@
+// ===========================================
+// Generated file from kit generator.
+//
+// ===========================================
+
+import WebpackerReact from 'webpacker-react'
+
+//
+// ===========================================
+// ===========================================
+// Generated file from kit generator.
+
+import Dashboards from '../../../views/playbook/samples/dashboards/dashboards.jsx'
+
+WebpackerReact.setup({ Dashboards })
+
+$(document).ready(() => {
+  $('.pb--codeCopy').show()
+  $('.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)
+  })
+})

data/app/pb_kits/playbook/packs/site_styles/_samples.scss

@@ -0,0 +1,71 @@
+.sample-layout {
+  overflow-y: hidden;
+  .sample {
+    padding-left: 50px;
+    border-bottom: 0px;
+  }
+  .code-controls {
+    .pb_nav_list_item_text {
+      color: white !important;
+    }
+    .pb_nav_list_kit_item {
+      .pb_nav_list_item_link {
+        border-color: transparent !important;
+      }
+    }
+  }
+  
+  .sample-nav {
+    padding: 0 25px;
+    background: #172257;
+    display: flex;
+    width: 100%;
+    flex-basis: 200px;
+
+  }
+  
+  .sample-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-right {
+      margin-left: auto;
+      order: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .items {
+        padding: 5px;
+      }
+    }
+  }
+  .pb--doc {
+    margin-bottom: 0px;
+  }
+  .pb--codeCopy {
+    border: 0px;
+    position: fixed;
+    width: 100%;
+    height: calc(50vh - 45px);
+    bottom: 0;
+    left: 0;
+    transition: all .4s;
+  }
+
+  .pb--codeCopy.close {
+    top: 100%;
+    height: 0px;
+    transition: all .4s;
+  }
+  .compress {
+    position: absolute;
+    top: 15px;
+    right: 30px;
+    display: none;
+    z-index: 4;
+  }
+  .hiddenCodeforCopy {
+    display: none;
+  }
+}

data/app/pb_kits/playbook/packs/site_styles/_site-style.scss

@@ -46,6 +46,12 @@
   line-height: 34px;
   border-bottom: 2px solid rgba($border_light, 0.6);
 
+  &.sample {
+    margin: 0;
+    border-bottom: 2px solid rgba(228, 232, 240, 0.6);
+    background: rgb(23, 34, 87) !important;
+  }
+
   a {
     padding: 0 10px;
     line-height: 34px;

data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss

@@ -1,4 +1,12 @@
+.pb--kit-show.flex-kit {
   [class^=pb_flex_kit] { background: #F3F7FB; }
-  .flex-item,
-  [class^=pb_flex_item_kit] { background: #E4E8F0; min-width: 30px; min-height: 30px; color: #242B42; }
-  .tall {min-height: 200px;}
+
+  .flex-item, [class^=pb_flex_item_kit] {
+    background: #E4E8F0;
+    min-width: 30px;
+    min-height: 30px;
+    color: #242B42;
+  }
+
+  .tall { min-height: 200px; }
+}

data/app/pb_kits/playbook/pb_body/_body.html.erb

@@ -2,5 +2,5 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-  <%= !object.children.nil? ? capture(&object.children) : object.text %>
+  <%= object.children.present? ? capture(&object.children) : object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { Highlight } from '../'
 
 type BodyProps = {
   className?: String,
@@ -11,6 +12,8 @@ type BodyProps = {
   status?: 'negative' | 'positive',
   tag: String,
   text?: String,
+  highlighting?: Boolean,
+  highlightedText?: Array<String>
 }
 
 const bodyCSS = ({
@@ -34,13 +37,19 @@ const Body = (props: BodyProps) => {
     children,
     text,
     tag = 'div',
+    highlightedText,
+    highlighting = false,
   } = props
 
   const Tag = `${tag}`
 
   return (
     <Tag className={classnames(bodyCSS(props), className)}>
-      { text || children }
+      <If condition={highlighting}>
+        <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
+        <Else />
+        { text || children }
+      </If>
     </Tag>
   )
 }