playbook_ui 7.1.0.pre.alpha2 → 7.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d793fb38923075c62383c618585aebba3516a5573d81ed4a7b7da05bc6ec0e1
-  data.tar.gz: 4918ac3b820aedf79c9873f6efcceebf0c555879aefb97ce649c1329af089b43
+  metadata.gz: f444fe64c94fe52134b58d54feab40314cc5c10a273dca136a837dd4f32bdae2
+  data.tar.gz: 242b3eb07882d6e290cd1784e1916b129a4d65d3a49119bea18ac09f96890460
 SHA512:
-  metadata.gz: efc9b1216f6970e79c45d992a67c481af899364ab851acf3953d6cf9b5152d69648f562c1086dc8c0fb4b2b20f1249a7a3b5d543d9d495b70d977c49b85caa8a
-  data.tar.gz: 9c0d61bc682f99cb0d49265a33aa79d736905d3e62798456e99d2f540f03875d39d788746be370fd8fec7d6a917cec615ccca1b1de17d9e30f5ba58845097efa
+  metadata.gz: 295ff9b7e1d2612ea7a405e40241869d5ee31e2762961a32edb0ddb6443407d514929148c719e7c68a78bf62f9736e8520c22afc055aae15abd375be4eaa0a0e
+  data.tar.gz: 66d67a743c7c465f8b68ae80f55b0438d196713ec917c9fcd104988f7969814f13c89af20f0fa9e84d5bde3dd5118a93e8638fcb6bd2eb32d2c9012ef98da614

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -32,7 +32,6 @@ module Playbook
       def chart_options
         {
           id: id,
-          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

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,7 +1,5 @@
-<%= 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 %>
+<%= content_tag(object.tag, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) %>

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

@@ -1,7 +1,5 @@
 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,3 +1,2 @@
 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_line_graph/line_graph.rb

@@ -32,7 +32,6 @@ module Playbook
       def chart_options
         {
           id: id,
-          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

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

@@ -2,36 +2,39 @@
     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 }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "lg" }) %>
       <% end %>
     <% end %>
-    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
+    <%= pb_rails("caption", props: { tag: "span", text: object.format_time_string, size: "lg" }) %>
     <% if object.show_timezone %>
-      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
+      <%= content_tag(:span, class: "pb_time_timezone") do %>
+        <%= object.pb_date_time.to_timezone.upcase %>
+      <% end %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    
-    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("body", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
       <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-        <%= object.format_time_string %>
-        <% if object.show_timezone %>
-          <span class="pb_time_timezone">
-            <%= object.pb_date_time.to_timezone.upcase %>
-          </span>
+        <%= 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 %>
         <% end %>
       <% end %>
     <% end %>

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

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

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

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

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

@@ -1,27 +1,24 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeAlign = (props) => {
+const TimeAlign = () => {
   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/New_York"
+  timezone: "America/Chicago"
 }) %>
 
 <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: {
-  show_icon: true,
   time: "2012-08-02T15:49:29Z",
-  timezone: "America/New_York"
+  show_icon: true,
+  timezone: "America/Chicago"
 }) %>
 
-<br>
-<br>
+ <br>
+ <br>
 
-<%= pb_rails("time", props: {
-  show_timezone: false,
-  size: "md",
+ <%= pb_rails("time", props: {
   time: Time.now,
+  size: "md",
+  show_timezone: false,
 }) %>
 
 <br>
@@ -47,8 +47,8 @@
 
 <%= pb_rails("time", props: {
   show_icon: true,
-  show_timezone: false,
   size: "md",
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z",
 }) %>
 

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

@@ -1,56 +1,45 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeDefault = (props) => {
+const TimeDefault = () => {
   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
@@ -58,7 +47,6 @@ const TimeDefault = (props) => {
           showIcon
           size="md"
           timeZone="America/New_York"
-          {...props}
       />
     </div>
   )

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

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

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.1.0.pre.alpha2"
+  VERSION = "7.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.1.0.pre.alpha2
+  version: 7.1.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-14 00:00:00.000000000 Z
+date: 2020-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -530,8 +530,6 @@ 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
@@ -1871,9 +1869,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.4
 signing_key: 

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

@@ -1,11 +0,0 @@
-<%= 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

@@ -1,28 +0,0 @@
-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