RubyGems - playbook_ui - Versions diffs - 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2 - Mend

playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

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 (352) hide show

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

@@ -18,69 +18,56 @@ 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(
+    className,
     buildCss('pb_time_kit', align, size),
-    globalProps(props),
-    className
+    globalProps(props)
   )
   const dateTimestamp = new DateTime({ value: date, zone: timeZone })
   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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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.html.erb CHANGED

@@ -23,8 +23,7 @@
 <br>
 <h4>West Coast</h4>
-<%= pb_rails("time", props: {
-  show_timezone: true,
+ <%= pb_rails("time", props: {
   time: Time.now,
   timezone: "America/Los_Angeles"
 }) %>

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

@@ -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/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx CHANGED

@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
   return (
     <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
+        className={classnames('pb_time_range_inline_kit_' + alignment, className, globalProps(props))}
     >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss CHANGED

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: 4px;
+      margin-right: 4px;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: 4px;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: 4px;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED

@@ -26,11 +26,11 @@ type TimeStackedProps = {
 const TimeStacked = (props: TimeStackedProps) => {
   const { className, dark = false, date, tag = 'body' } = props
   const classes = classnames(
+    className,
     buildCss('pb_time_stacked_kit', {
-      dark,
+      dark: dark,
     }),
-    globalProps(props),
-    className
+    globalProps(props)
   )
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))