RubyGems - playbook_ui - Versions diffs - 2.8.9 → 2.9.0 - Mend

playbook_ui 2.8.9 → 2.9.0

Files changed (25) hide show

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f9e84db4ccb31383e19cb882e7225455d347fda5571daed019d79d8b8daf716
-  data.tar.gz: 6b34648478a78f753458727976e3dce218f34fcd24aba24eeee38ec312dd2c55
+  metadata.gz: 5b6c7dc11c38335138d659f925a534eb976a2c612f3ae5bc19577640e1cfc3ea
+  data.tar.gz: 19b251b77226a249bb7da7eb923ee198fa00b53d2e44e14d4f7f84e6102b401a
 SHA512:
-  metadata.gz: 3568843cb54b4e11011ce9bd16c07880acb30b8404d0d59b57f137c03f9abee485e6970aef9683a7ed955e8ec09b78dd4f1bf2c38760c21368bb8002056cc10b
-  data.tar.gz: 651148155a79e850637f7217f714f7e38d3aa5d7164be550ec00a70f210a0ff4efe05b5b7da475482db77a533d5e2e7c44bbd8e0b693f253c4b2696f421b5b5d
+  metadata.gz: 89441d84f686920f6ed1d833b8b06e4324ff3af6de03ab9cd4b68c4e2a7b22c30719bb238ed183e65388e662d1b8e3e498e92d7c3f4647bfda3e79b18fda1874
+  data.tar.gz: 2720ae93d19c177cec30a544edc3b649ed9b593a52f805eb11263bcf2eef997d4eba36f1e0af7688a816f82c28273ac96ec34f7e6df80ce190750cc77f5d6ca1

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss CHANGED

@@ -104,6 +104,7 @@
     position: relative;
     border-top: 1px solid $border-light;
     display: none;
+    overflow-x: auto;
   }
   &.dark_ui {

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

@@ -14,7 +14,7 @@ type BodyProps = {
 }
 const bodyCSS = ({
-  color='default',
+  color='',
   dark=false,
   status='',
@@ -34,7 +34,7 @@ const Body = (props: BodyProps) => {
     className,
     children,
     text,
-    tag='p',
+    tag='div',
   } = props
   const Tag = `${tag}`

data/app/pb_kits/playbook/pb_body/body.rb CHANGED

@@ -10,6 +10,7 @@ module Playbook
                  configured_data
                  configured_id
                  configured_tag
+                 configured_text
                  configured_status
                  block].freeze
@@ -21,6 +22,7 @@ module Playbook
                      id: default_configuration,
                      status: default_configuration,
                      tag: default_configuration,
+                     text: default_configuration,
                      &block)
         self.configured_aria = aria
@@ -31,6 +33,7 @@ module Playbook
         self.configured_id = id
         self.configured_status = status
         self.configured_tag = tag
+        self.configured_text = text
         self.block = block_given? ? block : nil
       end
@@ -69,7 +72,7 @@ module Playbook
       end
       def yield(context:)
-        context.capture(&block)
+        !block.nil? ? context.capture(&block) : text
       end
       def kit_class

data/app/pb_kits/playbook/pb_body/docs/_body_block.html.erb ADDED

@@ -0,0 +1,3 @@
+<%= pb_rails("body") do %>
+  I am body kit
+<% end %>

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx ADDED

@@ -0,0 +1,14 @@
+import React from "react"
+import Body from "../_body.jsx"
+function BodyBlock() {
+  return (
+    <div>
+      <Body>
+        I am a body kit
+      </Body>
+    </div>
+  )
+}
+export default BodyBlock;

data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb CHANGED

@@ -1,19 +1,28 @@
-<%= pb_rails("body", props: { dark: true }) do %>
-  I am a body kit
-<% end %>
-<%= pb_rails("body", props: { color: "light", dark: true }) do %>
-I am a body kit (Light)
-<% end %>
-<%= pb_rails("body", props: { color: "lighter", dark: true }) do %>
-  I am a body kit (Lighter)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit",
+  dark: true
+}) %>
-<br><br>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Light)",
+  color: "light",
+  dark: true
+}) %>
-<%= pb_rails("body", props: { status: "negative", dark: true }) do %>
-  I am a body kit (Status: negative)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Lighter)",
+  color: "lighter",
+  dark: true
+}) %>
-<%= pb_rails("body", props: { status: "positive", dark: true }) do %>
-  I am a body kit (Status: positive)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: negative)",
+  status: "negative",
+  dark: true
+}) %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: positive)",
+  status: "positive",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx CHANGED

@@ -7,7 +7,8 @@ function BodyDark() {
       <Body dark text="I am a body kit (Default)" />
       <Body dark color="light" text="I am a body kit (Light)" />
       <Body dark color="lighter" text="I am a body kit (Lighter)" />
+      <br/>
+      <br/>
       <Body dark status="negative" text="I am a body kit (Status: negative)" />
       <Body dark status="positive" text="I am a body kit (Status: positive)" />
     </div>

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb CHANGED

@@ -1,21 +1,23 @@
-<%= pb_rails("body") do %>
-  I am a body kit
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit"
+}) %>
-<%= pb_rails("body", props: { color: "light" }) do %>
-  I am a body kit (Light)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Light)",
+  color: "light"
+}) %>
-<%= pb_rails("body", props: { color: "lighter" }) do %>
-  I am a body kit (Lighter)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Lighter)",
+  color: "lighter"
+}) %>
-<br><br>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: negative)",
+  status: "negative"
+}) %>
-<%= pb_rails("body", props: { status: "negative" }) do %>
-  I am a body kit (Status: negative)
-<% end %>
-<%= pb_rails("body", props: { status: "positive" }) do %>
-  I am a body kit (Status: positive)
-<% end %>
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Status: positive)",
+  status: "positive"
+}) %>

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED

@@ -7,7 +7,8 @@ function BodyLight() {
       <Body text="I am a body kit (Default)" />
       <Body color="light" text="I am a body kit (Light)" />
       <Body color="lighter" text="I am a body kit (Lighter)" />
+      <br/>
+      <br/>
       <Body status="negative" text="I am a body kit (Status: negative)" />
       <Body status="positive" text="I am a body kit (Status: positive)" />
     </div>

data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED

@@ -2,6 +2,8 @@ examples:
   rails:
   - body_light: Light UI
   - body_dark: Dark UI
+  - body_block: Block
   react:
   - body_light: Light UI
   - body_dark: Dark UI
+  - body_block: Block

data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED

@@ -1,2 +1,3 @@
 export {default as BodyDark} from './_body_dark.jsx';
 export {default as BodyLight} from './_body_light.jsx';
+export {default as BodyBlock} from './_body_block.jsx';

data/app/pb_kits/playbook/pb_button/_button.jsx CHANGED

@@ -1,13 +1,14 @@
 /* @flow */
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 type ButtonPropTypes = {
   aria?: {
     label: String,
   },
   children?: Array<React.ReactChild>,
+  className?: String | Array<String>,
   dark: Boolean,
   disabled?: Boolean,
   fixedWidth?: Boolean,
@@ -62,6 +63,7 @@ const Button = (props : ButtonPropTypes) => {
   const {
     aria={},
     children,
+    className,
     icon=null,
     loading=false,
     link=null,
@@ -70,7 +72,7 @@ const Button = (props : ButtonPropTypes) => {
   } = props
   const buttonAria  = buttonAriaProps(props)
-  const css         = buttonClassName(props)
+  const css         = classnames(buttonClassName(props), className)
   const loadingIcon = <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon"/>
   const content     = (

data/app/pb_kits/playbook/pb_layout/_layout.html.erb CHANGED

@@ -1,6 +1,6 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname("layout_#{object.size}#{object.position}#{object.dark}#{object.transparent}#{object.full}#{object.collapse}")) do %>
+    class: object.classname("pb_layout_#{object.size}#{object.position}#{object.dark}#{object.transparent}#{object.full}#{object.collapse}")) do %>
   <%= object.yield(context: self) %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED

@@ -41,7 +41,7 @@ class Layout extends Component {
     const position_class = "_"+position
     const collapse_class = " layout"+position_class+"_collapse_"+collapse
     return (
-      <div className={`layout${size_class}${position_class}${dark_class}${transparent_class}${full_class}${collapse_class}`}>
+      <div className={`pb_layout${size_class}${position_class}${dark_class}${transparent_class}${full_class}${collapse_class}`}>
         {children}
       </div>
     );

data/app/pb_kits/playbook/pb_layout/_layout.scss CHANGED

@@ -3,7 +3,7 @@
 @import "../tokens/screen_sizes";
 @import "./layout_mixin";
-.layout {
+.pb_layout {
   $layout_sizes: (
     "xs":   64px,

data/app/pb_kits/playbook/pb_title/_title_mixin.scss CHANGED

@@ -3,7 +3,7 @@
 @import "../tokens/line_height";
 @mixin pb_title(
-    $fontSize: $heading_1,
+    $fontSize: $heading_1,
     $fontWeight: $lighter,
     $lineHeight: $lh_tighter){
   font-size: $fontSize;
@@ -16,6 +16,7 @@
 @mixin pb_title_1 {
   @include pb_title($heading_1);
+  letter-spacing: -0.03em;
 }
 @mixin pb_title_2 {

data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb CHANGED

@@ -2,7 +2,7 @@
 <br/>
-<%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4, dark: true }) %>
-<%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3, dark: true }) %>
-<%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2, dark: true }) %>
-<%= pb_rails("title", props: { text: "Title 4", tag: "h1", size: 1, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, dark: true }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_dark.jsx CHANGED

@@ -4,10 +4,10 @@ import Title from "../_title.jsx"
 function TitleDark() {
   return (
     <div>
-      <Title dark size={4} tag="h4" text="Title 1" />
-      <Title dark size={3} tag="h3" text="Title 2" />
-      <Title dark size={2} tag="h2" text="Title 3" />
-      <Title dark size={1} tag="h1" text="Title 4" />
+      <Title dark size={4} tag="h4" text="Title 4" />
+      <Title dark size={3} tag="h3" text="Title 3" />
+      <Title dark size={2} tag="h2" text="Title 2" />
+      <Title dark size={1} tag="h1" text="Title 1" />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb CHANGED

@@ -2,7 +2,7 @@
 <br/>
-<%= pb_rails("title", props: { text: "Title 1", tag: "h4", size: 4 }) %>
-<%= pb_rails("title", props: { text: "Title 2", tag: "h3", size: 3 }) %>
-<%= pb_rails("title", props: { text: "Title 3", tag: "h2", size: 2 }) %>
-<%= pb_rails("title", props: { text: "Title 4", tag: "h1", size: 1 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx CHANGED

@@ -5,10 +5,10 @@ function TitleLight() {
   return (
     <div>
       <Title text="Default Title"/><br/>
-      <Title size={4} tag="h4" text="Title 1" />
-      <Title size={3} tag="h3" text="Title 2" />
-      <Title size={2} tag="h2" text="Title 3" />
-      <Title size={1} tag="h1" text="Title 4" />
+      <Title size={4} tag="h4" text="Title 4" />
+      <Title size={3} tag="h3" text="Title 3" />
+      <Title size={2} tag="h2" text="Title 2" />
+      <Title size={1} tag="h1" text="Title 1" />
     </div>
   )
 }

data/lib/generators/kit/templates/kit_jsx.erb.tt CHANGED

@@ -4,7 +4,7 @@
 import React from 'react'
 type <%= @kit_name_pascal %>Props = {
-  <% @kit_props.each do |key,val| %><%= key == "classname" ? "className?: " : "#{key.camelize(:lower)}?: " %><% case val %><% when "array", "arr" %>'option_1' | 'option_2',<% when "boolean", "bool" %>Boolean,<% else %>String,<% end %>
+  <% @kit_props.each do |key,val| %><%= key == "classname" ? "className?: " : "#{key.camelize(:lower)}?: " %><% case val %><% when "enum", "one_of" %>'option_1' | 'option_2',<% when "boolean", "bool" %>Boolean,<% else %>String,<% end %>
   <% end %>
 }

data/lib/generators/kit/templates/kit_ruby.erb.tt CHANGED

@@ -9,7 +9,7 @@ module Playbook
         <%= @kit_class_val.join("\n\t\t\t\t") %>
       end
       <% @unique_props.each do |key, val| %>
-      def <%= key.to_s.underscore %><% case val %><% when "array", "arr" %>
+      def <%= key.to_s.underscore %><% case val %><% when "enum", "one_of" %>
         <%= key.to_s.underscore %>_options = %w(option1 option2)
         one_of_value(configured_<%= key.to_s.underscore %>, <%= key.to_s.underscore %>_options, "")<% when "boolean", "bool" %>
         true_value(configured_<%= key.to_s.underscore %>, "true value", "false value")<% else %>

data/lib/playbook/version.rb CHANGED

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "2.8.9"
+  VERSION = "2.9.0"
 end

metadata CHANGED

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 2.8.9
+  version: 2.9.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2019-09-20 00:00:00.000000000 Z
+date: 2019-09-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: method_source
@@ -417,6 +417,8 @@ files:
 - app/pb_kits/playbook/pb_body/_body.scss
 - app/pb_kits/playbook/pb_body/_body_mixins.scss
 - app/pb_kits/playbook/pb_body/body.rb
+- app/pb_kits/playbook/pb_body/docs/_body_block.html.erb
+- app/pb_kits/playbook/pb_body/docs/_body_block.jsx
 - app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_dark.jsx
 - app/pb_kits/playbook/pb_body/docs/_body_light.html.erb