Update design of Date Kit

powerhome · Oct 15, 2020 · df939e2 · df939e2
1 parent 9ae509b
commit df939e2
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 70 deletions.
diff --git a/app/pb_kits/playbook/pb_date/_date.html.erb b/app/pb_kits/playbook/pb_date/_date.html.erb
@@ -4,34 +4,67 @@
     class: object.classname,
     aria: object.aria) do %>
 
-  <!-- icon -->
-  <% if object.show_icon %>
-    <%= pb_rails("body", props: {
-      color: "light",
-      tag: "div",
-    }) do %>
-      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+  <% if object.size == "md" %>
+    <!-- icon -->
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: {
+        color: "light",
+        tag: "div",
+      }) do %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+      <% end %>
     <% end %>
-  <% end %>
 
-  <!-- day_of_week -->
-  <% if object.show_day_of_week %>
-    <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
-    <%= pb_rails("body", props: {
-      text: "•",
-      color: "light",
-      tag: "div",
-    }) %>
-  <% end %>
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
+      <%= pb_rails("body", props: {
+        text: "•",
+        color: "light",
+        tag: "div",
+      }) %>
+    <% end %>
 
-  <!-- month day, year -->
+    <!-- month day, year -->
+
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
+    <%# if is current year %>
+    <% else %>
+      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    <% end %>
 
-  <%# if not current year %>
-  <% if object.year.to_s == DateTime.now.year.to_s %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
-  <%# if is current year %>
   <% else %>
-    <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
-  <% end %>
 
+    <!-- icon -->
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: {
+        color: "light",
+        tag: "div",
+      }) do %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+      <% end %>
+    <% end %>
+
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
+      <%= pb_rails("caption", props: {
+        text: "•",
+        color: "light",
+        tag: "div",
+      }) %>
+    <% end %>
+
+    <!-- month day, year -->
+
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
+    <%# if is current year %>
+    <% else %>
+      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
+    <% end %>
+  <% end %>
 <% end %>
diff --git a/app/pb_kits/playbook/pb_date/_date.jsx b/app/pb_kits/playbook/pb_date/_date.jsx
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Body, Icon, Title } from '../'
+import { Body, Caption, Icon, Title } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,6 +15,7 @@ type PbDateProps = {
   id?: string,
   showDayOfWeek?: boolean,
   showIcon?: boolean,
+  size?: string,
   value: string | date,
 }
 
@@ -27,6 +28,7 @@ const PbDate = (props: PbDateProps) => {
     id,
     showDayOfWeek = false,
     showIcon = false,
+    size = 'md',
     value,
   } = props
 
@@ -53,41 +55,77 @@ const PbDate = (props: PbDateProps) => {
         className={classes}
         id={id}
     >
-      <Title
-          size={4}
-          tag="h4"
-      >
-        <If condition={showIcon}>
-          <Body
-              className="pb_icon_kit_container"
-              color="light"
-              tag="span"
-          >
-            <Icon
-                fixedWidth
-                icon="calendar-alt"
+      <If condition={size == 'md'}>
+
+        <Title
+            size={4}
+            tag="h4"
+        >
+          <If condition={showIcon}>
+            <Body
+                className="pb_icon_kit_container"
+                color="light"
+                tag="span"
+            >
+              <Icon
+                  fixedWidth
+                  icon="calendar-alt"
+              />
+            </Body>
+          </If>
+          <If condition={showDayOfWeek}>
+            {weekday}
+            <Body
+                color="light"
+                tag="span"
+                text=" • "
             />
-          </Body>
-        </If>
-        <If condition={showDayOfWeek}>
-          {weekday}
-          <Body
-              color="light"
-              tag="span"
-              text=" • "
-          />
-        </If>
-        <span>
-          {month}
-          {' '}
-          {day}
-        </span>
-        <If condition={currentYear != year}>
+          </If>
           <span>
-            {`, ${year}`}
+            {month}
+            {' '}
+            {day}
           </span>
-        </If>
-      </Title>
+          <If condition={currentYear != year}>
+            <span>
+              {`, ${year}`}
+            </span>
+          </If>
+        </Title>
+        <Else />
+        <>
+          <If condition={showIcon}>
+            <Body
+                className="pb_icon_kit_container"
+                color="light"
+                tag="span"
+            >
+              <Icon
+                  fixedWidth
+                  icon="calendar-alt"
+              />
+            </Body>
+          </If>
+          <If condition={showDayOfWeek}>
+            <Caption tag="div">
+              {weekday}
+            </Caption>
+            <Caption
+                color="light"
+                tag="div"
+                text=" • "
+            />
+          </If>
+          <Caption tag="span">
+            {month}
+            {' '}
+            {day}
+            <If condition={currentYear != year}>
+              {`, ${year}`}
+            </If>
+          </Caption>
+        </>
+      </If>
     </div>
   )
 }

diff --git a/app/pb_kits/playbook/pb_date/date.rb b/app/pb_kits/playbook/pb_date/date.rb
@@ -19,8 +19,8 @@ class Date
                               default: false
       # Size to be deprecated.
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg sm xs],
-                  default: "sm"
+                  values: %w[lg md sm xs],
+                  default: "md"
       prop :timezone, default: "America/New_York"
 
       def classname

diff --git a/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx b/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
@@ -1,13 +1,14 @@
 import React from 'react'
 import { Date as FormattedDate } from '../..'
 
-const DateAlignment = () => {
+const DateAlignment = (props) => {
   return (
     <div>
       <FormattedDate
           dayOfWeek
           icon
           value="1995-12-25"
+          {...props}
       />
 
       <br />
@@ -17,13 +18,15 @@ const DateAlignment = () => {
           dayOfWeek
           icon
           value="2020-12-25"
+          {...props}
       />
 
       <br />
 
       <FormattedDate
           alignment="right"
           value={new Date()}
+          {...props}
       />
     </div>
   )

diff --git a/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb b/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
@@ -1,3 +1,26 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  size: "sm"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: "2012-08-02T15:49:29Z",
+  size: "sm"
+}) %>
+
+<br>
+
+<%= pb_rails("date", props: {
+  date: "2017-12-02T15:49:29Z",
+  show_day_of_week: true,
+  size: "sm"
+}) %>
+
+<br>
+<br>
+
 <%= pb_rails("date", props: {
   date: Date.today,
 }) %>

diff --git a/app/pb_kits/playbook/pb_date/docs/_date_default.jsx b/app/pb_kits/playbook/pb_date/docs/_date_default.jsx
@@ -1,26 +1,55 @@
 import React from 'react'
 import { Date as FormattedDate } from '../../'
 
-const DateDefault = () => {
+const DateDefault = (props) => {
   return (
-    <div>
+    <>
       <FormattedDate
+          size="sm"
           value={new Date()}
+          {...props}
       />
 
       <br />
 
       <FormattedDate
+          size="sm"
           value="2012-08-03"
+          {...props}
       />
 
       <br />
 
       <FormattedDate
           showDayOfWeek
+          size="sm"
           value="2017-12-03"
+          {...props}
       />
-    </div>
+
+      <br />
+      <br />
+
+      <FormattedDate
+          value={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          value="2012-08-03"
+          {...props}
+      />
+
+      <br />
+
+      <FormattedDate
+          showDayOfWeek
+          value="2017-12-03"
+          {...props}
+      />
+    </>
   )
 }
 

diff --git a/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb b/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
@@ -3,21 +3,21 @@
     date: DateTime.now,
   }) %>
 
-  <br><br>
+  <br>
 
   <%= pb_rails("date", props: {
     date: DateTime.now,
     show_icon: true
   }) %>
 
-  <br><br>
+  <br>
 
   <%= pb_rails("date", props: {
     date: DateTime.now,
     show_day_of_week: true
   }) %>
 
-  <br><br>
+  <br>
 
   <%= pb_rails("date", props: {
     date: DateTime.now,