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

playbook_ui 2.8.9 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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