playbook_ui 6.8.1 → 6.8.2.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9da1bcd99d97219437802ff40b916426aaf6323cd68d181b9a46fe25aec0dec0
-  data.tar.gz: d50d61ffa850d8b123972e6b0d2ff487b52950d633d17d73dc2ddaa6bbcc3239
+  metadata.gz: c741c41b034e5f6ee2c76ca8c5d4ae7e6aeed017fc75eafa99c104a67404d40e
+  data.tar.gz: bf3bf4865392190b6c9778979231cf4b9bd6d5ffbe1731bbf9106fadbb4cc490
 SHA512:
-  metadata.gz: 0142e4cab59c32f367c4717477a373a6c405e0bfd2bb1d41a9fd6e7676d4a7947e6b59e62446e1916b57c0e3cf5b298e76a5871a07cd37d2d32a3142b4dc64d6
-  data.tar.gz: fd8280a71c9d8467a01a50fd94513b6543019d183d9736fd774a9029c213187e817c25ec5d96dfcf1cbe27c116899b17b3dd744dc04b4a6aebad5c9d125cbe30
+  metadata.gz: 7cf3a912b48ced76c46cade9bdb30f383e259c3bf7ab94e08c480051c30a754feca89035dd120ca17819631b71a21d218ed57a031911520c8c852f343fc3f40c
+  data.tar.gz: 41c7bc0103ed5670cc9aec9ed3f274581ea6e30ec661019f9b11ce67d9447a3959cdad7bb2a1fd338184d507b15395865038dfa65b0cb1f783fe223a846cad7b

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

@@ -5,7 +5,7 @@ module Playbook
     class Body
       include Playbook::Props
       include ActionView::Helpers
-      
+
       partial "pb_body/body"
 
       prop :color, type: Playbook::Props::Enum,

data/app/pb_kits/playbook/pb_caption/_caption.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+<%= content_tag(object.tag,
+  aria: object.aria,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  <%= object.children.present? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("caption") do %>
+  Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'lg' }) do %>
+  Large Block
+<% end %>
+
+<%= pb_rails("caption", props: { size: 'xs' }) do %>
+  Subcaption Block
+<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionBlock = (props) => {
+  return (
+    <div>
+      <Caption {...props}>
+        {'Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="lg"
+      >
+        {'Large Block'}
+      </Caption>
+
+      <Caption
+          {...props}
+          size="xs"
+      >
+        {'Subcaption Block'}
+      </Caption>
+    </div>
+  )
+}
+
+export default CaptionBlock

data/app/pb_kits/playbook/pb_caption/docs/example.yml

@@ -1,5 +1,7 @@
 examples:
   rails:
   - caption_light: Default
+  - caption_block: Block
   react:
   - caption_light: Default
+  - caption_block: Block

data/app/pb_kits/playbook/pb_caption/docs/index.js

@@ -1,2 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
 export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionBlock } from './_caption_block.jsx'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,14 +25,11 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,
-    data: { field1: "value1", field2: "value2" },
-    props: { text: "Example Checkbox", label: true },
-    checked_value: "yes",
-    unchecked_value: "no",
-    id: "checkbox-id",
-    name: "checkbox-name",
-    class: "checkbox-class" 
-  %>
+                     data: { field1: "value1", field2: "value2" },
+                     props: { text: "Example Checkbox", label: true },
+                     id: "checkbox-id",
+                     name: "checkbox-name",
+                     class: "checkbox-class" %>
   <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>

data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb

@@ -4,18 +4,13 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options)
+        def check_box(name, props: {}, **options, &block)
           label_text = @template.label(@object_name, name) if props[:label] == true
           options[:required] = true if props[:required]
           props[:margin_bottom] = "sm"
           props[:form_spacing] = true
 
-          checked_value = options[:checked_value]
-          unchecked_value = options[:unchecked_value]
-          options.delete(:checked_value)
-          options.delete(:unchecked_value)
-
-          input = super(name, options, checked_value, unchecked_value)
+          input = super(name, **options, &block)
 
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

data/app/pb_kits/playbook/pb_time/_time.html.erb

@@ -2,39 +2,36 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%
-      # convert deprecated prop values
-      size = object.size
-      size = "sm" if object.size == "xs"
-      size = "md" if object.size == "lg"
-    %>
+  <%
+    # convert deprecated prop values
+    size = object.size
+    size = "sm" if object.size == "xs"
+    size = "md" if object.size == "lg"
+  %>
   <% if size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
     <% if object.show_timezone %>
-      <%= content_tag(:span, class: "pb_time_timezone") do %>
-        <%= object.pb_date_time.to_timezone.upcase %>
-      <% end %>
+      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    
+    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= content_tag(:span) do %>
-          <%= object.format_time_string %>
-          <% if object.show_timezone %>
-            <%= content_tag(:span, class: "pb_time_timezone") do %>
-              <%= object.pb_date_time.to_timezone.upcase %>
-            <% end %>
-          <% end %>
+        <%= object.format_time_string %>
+        <% if object.show_timezone %>
+          <span class="pb_time_timezone">
+            <%= object.pb_date_time.to_timezone.upcase %>
+          </span>
         <% end %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -18,11 +18,12 @@ type TimeProps = {
   id?: string,
   showIcon?: boolean,
   size?: 'md' | 'sm',
+  showTimezone?: boolean,
   timeZone?: string,
 }
 
 const Time = (props: TimeProps) => {
-  const { align, className, date, showIcon, size, timeZone } = props
+  const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
   const classes = classnames(
     buildCss('pb_time_kit', align, size),
     globalProps(props),
@@ -33,41 +34,53 @@ const Time = (props: TimeProps) => {
 
   return (
     <div className={classes}>
-      <span className="pb_body_kit">
-        <If condition={showIcon}>
-          <Body
-              color="light"
-              tag="span"
-          >
-            <Icon
-                fixedWidth
-                icon="clock"
-                size={size === 'md' ? 'lg' : 'sm'}
+      <If condition={showIcon}>
+        <Body
+            color="light"
+            tag="span"
+        >
+          <Icon
+              fixedWidth
+              icon="clock"
+              size={size === 'md' ? '' : 'sm'}
+          />
+        </Body>
+        {' '}
+      </If>
+
+      <time dateTime={date}>
+        <span>
+          <If condition={size === 'md'}>
+            <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
             />
-          </Body>
-          {' '}
-        </If>
-        <time dateTime={date}>
-          <span>
-            <If condition={size !== 'md'}>
+            {' '}
+            <If condition={showTimezone}>
               <Body
                   color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
-              <Else />
+            </If>
+            <Else />
+            <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+            />
+            {' '}
+            <If condition={showTimezone}>
               <Caption
-                  size="lg"
+                  color="light"
                   tag="span"
-                  text={dateTimestamp.toTimeWithMeridian()}
+                  text={dateTimestamp.toTimezone()}
               />
             </If>
-            <If condition={timeZone !== undefined}>
-              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
-            </If>
-          </span>
-        </time>
-      </span>
+          </If>
+        </span>
+      </time>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -5,8 +5,6 @@
 @import "../pb_caption/caption";
 
 [class^=pb_time_kit] {
-  letter-spacing: $lspace_looser;
-  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -15,10 +13,6 @@
     text-align: right;
   }
 
-  [class^=pb_body] {
-    font-weight: $bold !important;
-  }
-
   [class^=pb_time_timezone] {
     color: $text_lt_light;
     font-weight: $bold;
@@ -28,26 +22,12 @@
     }
   }
 
-  &[class*=_md] {
-    [class^=pb_caption_kit] {
-      color: $text_lt_default;
-      letter-spacing: $lspace_tight;
-      text-transform: capitalize;
-    }
-    [class^=pb_time_timezone] {
-      color: $text_lt_light;
-      font-size: $font-large !important;
-      font-weight: $regular;
-      letter-spacing: $lspace_tight;
+  &[class*=dark] {
+    & * {
+      @include caption_dark;
     }
-  }
-
-  &.dark {
-    [class^=pb_caption_kit] {
+    .pb_time {
       color: $text_dk_default;
     }
-    [class^=pb_body_kit] {
-      color: $text_dk_light;
-    }
   }
 }

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = () => {
+const TimeAlign = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="center"
           date={new Date()}
           size="md"
+          {...props}
       />
       <br />
       <Time
           align="right"
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb

@@ -1,38 +1,38 @@
 <%= pb_rails("time", props: {
   show_timezone: false,
-  time: Time.now,
+  time: Time.now
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
   time: DateTime.now,
-  timezone: "America/Chicago"
+  timezone: "America/New_York"
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
   show_timezone: false,
+  time: "2012-08-02T15:49:29Z",
 }) %>
 
 <br>
 
 <%= pb_rails("time", props: {
-  time: "2012-08-02T15:49:29Z",
   show_icon: true,
-  timezone: "America/Chicago"
+  time: "2012-08-02T15:49:29Z",
+  timezone: "America/New_York"
 }) %>
 
- <br>
- <br>
+<br>
+<br>
 
- <%= pb_rails("time", props: {
-  time: Time.now,
-  size: "md",
+<%= pb_rails("time", props: {
   show_timezone: false,
+  size: "md",
+  time: Time.now,
 }) %>
 
 <br>
@@ -47,8 +47,8 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  size: "md",
   show_timezone: false,
+  size: "md",
   time: "2012-08-02T15:49:29Z",
 }) %>
 

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -1,45 +1,56 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = () => {
+const TimeDefault = (props) => {
   return (
     <div>
       <Time
           date={new Date().getTime()}
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date().getTime()}
           showIcon
+          showTimezone={false}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <br />
       <Time
           date={new Date()}
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           showIcon
+          showTimezone={false}
           size="md"
+          {...props}
       />
       <br />
       <Time
@@ -47,6 +58,7 @@ const TimeDefault = () => {
           showIcon
           size="md"
           timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -1,16 +1,19 @@
 import React, { Fragment } from 'react'
 import Time from '../_time.jsx'
 
-const TimeSizes = () => {
+const TimeSizes = (props) => {
   return (
     <Fragment>
       <Time
           date={new Date()}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
+          timeZone="America/New_York"
+          {...props}
       />
     </Fragment>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeStamp = () => {
+const TimeStamp = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
           size="sm"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeTimeZone = () => {
+const TimeTimezone = (props) => {
   const zones = {
     east: 'America/New_York',
     central: 'America/Chicago',
@@ -16,6 +16,7 @@ const TimeTimeZone = () => {
           date={new Date()}
           size="md"
           timeZone={zones.east}
+          {...props}
       />
 
       <br />
@@ -24,6 +25,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.central}
+          {...props}
       />
 
       <br />
@@ -32,6 +34,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.mountain}
+          {...props}
       />
 
       <br />
@@ -40,6 +43,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.west}
+          {...props}
       />
 
       <br />
@@ -48,10 +52,11 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.asia}
+          {...props}
       />
 
     </div>
   )
 }
 
-export default TimeTimeZone
+export default TimeTimezone

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -34,4 +34,4 @@ module Playbook
       end
     end
   end
-end
+end

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "6.8.1"
+  VERSION = "6.8.2.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.8.1
+  version: 6.8.2.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-09-29 00:00:00.000000000 Z
+date: 2020-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -551,6 +551,8 @@ files:
 - app/pb_kits/playbook/pb_caption/_caption.scss
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.rb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb
@@ -1909,9 +1911,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.4
 signing_key: