RubyGems - playbook_ui - Versions diffs - 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14 - Mend

playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14

Files changed (383) hide show

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

@@ -7,53 +7,64 @@ import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-import { Body, Icon, Title  } from '../'
+import { Body, Caption, Icon } from '../'
 type TimeProps = {
-  align?: 'left" | "center' | 'right',
+  align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   data?: string,
   date: string,
+  dark?: boolean,
   id?: string,
-  showTimezone?: boolean,
-  size?: 'lg' | 'sm' | 'xs',
+  showIcon?: boolean,
+  size?: 'md' | 'sm',
+  timeZone?: string,
 }
 const Time = (props: TimeProps) => {
-  const { align, className, date, showTimezone, size } = props
+  const { align, className, date, showIcon, size, timeZone } = props
   const classes = classnames(
-    className,
     buildCss('pb_time_kit', align, size),
-    globalProps(props)
+    globalProps(props),
+    className
   )
-  const dateTimestamp = new DateTime({ value: date })
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone })
   return (
     <div className={classes}>
       <span className="pb_body_kit">
-        <If condition={size === 'sm'}>
-          <Icon
-              fixedWidth
-              icon="clock"
-          />
+        <If condition={showIcon}>
+          <Body
+              color="light"
+              tag="span"
+          >
+            <Icon
+                fixedWidth
+                icon="clock"
+                size={size === 'md' ? 'lg' : 'sm'}
+            />
+          </Body>
           {' '}
         </If>
         <time dateTime={date}>
           <span>
-            <If condition={size !== 'lg'}>
+            <If condition={size !== 'md'}>
               <Body
+                  color="light"
                   tag="span"
                   text={dateTimestamp.toTimeWithMeridian()}
               />
               <Else />
-              <Title
-                  size={3}
+              <Caption
+                  size="lg"
                   tag="span"
                   text={dateTimestamp.toTimeWithMeridian()}
               />
             </If>
-            { showTimezone && <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span> }
+            <If condition={timeZone !== undefined}>
+              <span className="pb_time_timezone">{dateTimestamp.toTimezone()}</span>
+            </If>
           </span>
         </time>
       </span>

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

@@ -2,9 +2,11 @@
 @import "../tokens/typography";
 @import "../pb_icon/icon";
 @import "../pb_body/body";
-@import "../pb_title/title";
+@import "../pb_caption/caption";
 [class^=pb_time_kit] {
+  letter-spacing: $lspace_looser;
+  text-transform: uppercase;
   &[class*=_center]  {
     text-align: center;
   }
@@ -18,27 +20,33 @@
   }
   [class^=pb_time_timezone] {
-    font-size: $font-small;
-    font-weight: $regular;
-    color: $text-lt-light;
+    color: $text_lt_light;
+    font-weight: $bold;
     &::before {
       content: " ";
     }
   }
-  &[class*=_lg] {
+  &[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;
-      color: $text-lt-light;
+      font-weight: $regular;
+      letter-spacing: $lspace_tight;
     }
   }
   &.dark {
-    & > * [class^=pb_title_kit] {
+    [class^=pb_caption_kit] {
       color: $text_dk_default;
     }
-    & > * [class^=pb_body_kit] {
+    [class^=pb_body_kit] {
       color: $text_dk_light;
     }
   }

data/app/pb_kits/playbook/pb_time/docs/_time_align.html.erb ADDED

@@ -0,0 +1,18 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  align: "left"
+}) %>
+<br>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+<br>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  align: "right"
+}) %>

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

@@ -6,19 +6,19 @@ const TimeAlign = () => {
     <div>
       <Time
           date={new Date()}
-          size="lg"
+          size="md"
       />
       <br />
       <Time
           align="center"
           date={new Date()}
-          size="lg"
+          size="md"
       />
       <br />
       <Time
           align="right"
           date={new Date()}
-          size="lg"
+          size="md"
       />
     </div>
   )

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

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

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

@@ -4,22 +4,49 @@ import Time from '../_time.jsx'
 const TimeDefault = () => {
   return (
     <div>
+      <Time
+          date={new Date().getTime()}
+      />
+      <br />
       <Time
           date={new Date()}
-          showTimezone
-          size="lg"
+          timeZone="America/New_York"
       />
       <br />
       <Time
           date={new Date().getTime()}
-          showTimezone
-          size="sm"
+          showIcon
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          timeZone="America/New_York"
+      />
+      <br />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+      />
+      <br />
+      <Time
+          date={new Date()}
+          size="md"
+          timeZone="America/New_York"
       />
       <br />
       <Time
-          date="2012-08-02T09:49:29Z"
-          showTimezone
-          size="xs"
+          date={new Date()}
+          showIcon
+          size="md"
+      />
+      <br />
+      <Time
+          date={new Date()}
+          showIcon
+          size="md"
+          timeZone="America/New_York"
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.html.erb ADDED

@@ -0,0 +1,11 @@
+<%= pb_rails("time", props: {
+  time: DateTime.now,
+  size: "sm"
+}) %>
+<br>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  size: "md"
+}) %>

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

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

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb CHANGED

@@ -1,10 +1,12 @@
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: "2012-08-02T15:49:29Z"
 }) %>
 <br>
 <%= pb_rails("time", props: {
+  show_timezone: false,
   time: DateTime.now
 }) %>
@@ -12,5 +14,5 @@
 <%= pb_rails("time", props: {
   time: DateTime.now,
-  timezone: "America/Chicago"
+  timezone: "America/Chicago",
 }) %>

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

@@ -6,7 +6,6 @@ const TimeStamp = () => {
     <div>
       <Time
           date={new Date()}
-          showTimezone
           size="sm"
       />
@@ -14,15 +13,6 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
-          showTimezone
-          size="sm"
-      />
-      <br />
-      <Time
-          date="2012-08-02T15:49:29Z"
-          showTimezone
           size="sm"
       />
     </div>

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb ADDED

@@ -0,0 +1,38 @@
+<h4>East Coast</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/New_York"
+}) %>
+<br>
+<h4>Central</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/Chicago"
+}) %>
+<br>
+<h4>Mountain</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "America/Denver"
+}) %>
+<br>
+<h4>West Coast</h4>
+<%= pb_rails("time", props: {
+  show_timezone: true,
+  time: Time.now,
+  timezone: "America/Los_Angeles"
+}) %>
+<br>
+<h4>Toyko, Japan</h4>
+<%= pb_rails("time", props: {
+  time: Time.now,
+  timezone: "Asia/Tokyo",
+}) %>

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import Time from '../_time.jsx'
+const TimeTimeZone = () => {
+  const zones = {
+    east: 'America/New_York',
+    central: 'America/Chicago',
+    mountain: 'America/Denver',
+    west: 'America/Los_Angeles',
+    asia: 'Asia/Tokyo',
+  }
+  return (
+    <div>
+      <h4>{'East Coast'}</h4>
+      <Time
+          date={new Date()}
+          size="md"
+          timeZone={zones.east}
+      />
+      <br />
+      <h4>{'Central'}</h4>
+      <Time
+          date={new Date()}
+          timeZone={zones.central}
+      />
+      <br />
+      <h4>{'Mountain'}</h4>
+      <Time
+          date={new Date()}
+          timeZone={zones.mountain}
+      />
+      <br />
+      <h4>{'West Coast'}</h4>
+      <Time
+          date={new Date()}
+          timeZone={zones.west}
+      />
+      <br />
+      <h4>{'Tokyo, Japan'}</h4>
+      <Time
+          date={new Date()}
+          timeZone={zones.asia}
+      />
+    </div>
+  )
+}
+export default TimeTimeZone