[NUX-638] - Date Kit Refactor/Design (#1108)

* Patch for rake dist (#1147) * Patch for Removing Rake Tasks from Dist * Patch Commit Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * [CMPN-22] Allow all HTML options on input in PbSelectableIcon, PbSelectableCard and PbSelectableCardIcon Rails kits (#1113) * Add input options to selectable card * Add input options to selectable icon * Add input options to selectable card icon * Add more spec coverage * Switch name to input options * Fix spec tests * [NUXE-158] Section separator dark mode (WIP) (#1146) * Fixed dark mode * Updated spec doc * Fixed dark card variant Deleted unnecessary lines Deleted lines * Better error messages, and more test coverage (#1115) * Update README.md * Add coverage for added boilerplate props * Pass prop name to type creation & expose in error messages * Also specify name of kit * Simplify prop examples Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> * Fixes Typeahead (Rails) setting wrong image attribute in examples (#1151) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret <jason@jasoncypret.com> * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Fix typeahead example using wrong attribute Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * white-space: nowrap added (#1153) * Nav Kit Update (#1152) * Update README.md * Playbook Distribution Release (#834) * Update changelog * Fixing Flash By Separating Fade Out Keyframe from Default Class (#1135) Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Make updates to the inline date range kit (#1126) * Make updates to the inline date range kit for issue #613 * Pass the props so darkmode works * Make alignment changes * Fix breaking spec * Adjust time presentation * Fix spacing * use buildCss * Concat classname using the classnames function * Use spacing variable * updated table with examplesof how to use buttons (#1123) * Update Progress Step (#1128) * Update Progress Step * Add hidden status to step items * [NUXE-155] Date Picker Patch 3 (#1125) * fixed readonly rails validation bug, created default onChange lambda * improved validation fix * rails form label fix * fixed simple form attribute mismatch * fixed mising commas in model class def * replicated improved null value handling from patch-4 * removed dark doc examples * more unused doc example removal * cleaned helper js * alphas and timeout solution * cleaned up commented code, re-formatted dp helper js * removed test dp in filter kit, reworked boolean label logic * reverted alpha versioning * Typeahead with Pills (Rails) (#1104) * Update PULL_REQUEST_TEMPLATE.md * WIP: Typeahead w/ Pills (React) * WIP * Basic pub-sub working for add, remove and clear * Revert changes to index.js * Async options * Spec coverage * Add code example docs Co-authored-by: Jason Cypret <jason@jasoncypret.com> * [NUXE-55] Updated styles to button toolbar kit (#1129) * Updated styles to button toolbar kit * Updated spec doc * Fixed dark bug for react Fixed dark bug for react * Sass optimization Use spacing variables Border disappear when hovered Sass optimization Sass optimization Deleted some lines * Fixed sass variables * Sass optimization & update doc examples & update spec doc * Fix jenkins error * Adds HTML input options to PB toggle kit (#1112) * Pin dependencies (#1138) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Bump actionview from 5.2.4.3 to 5.2.4.4 (#1103) Bumps [actionview](https://github.com/rails/rails) from 5.2.4.3 to 5.2.4.4. - [Release notes](https://github.com/rails/rails/releases) - [Changelog](https://github.com/rails/rails/blob/v6.0.3.3/actionview/CHANGELOG.md) - [Commits](rails/rails@v5.2.4.3...v5.2.4.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * [NUXE-80] - Add 'close' option to kit, with examples (#1142) * Add 'close' option to kit, with examples * Update style * Update default state * Update func name * Update class and fixedWidth * Use proper classname approach * Add fixed width to rails version to match react * Update toast styling * Refactor onclick conditional Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * Update dependency mini-css-extract-plugin to v0.12.0 (#1140) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update dependency copy-webpack-plugin to v6.2.0 (#1139) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Updated Changelog and Made Minor Adjustment to Changelog Rake * Updated padding & Borderless option created * Nav with image for icon added * _with_img_nav.md added * updated specs Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Cole Erikson <cole.erikson@powerhrg.com> * [NUX-639] - Caption Kits to support block / Time Kit style updates (#1100) * Revert "Playbook v7.1.0 (#1143)" (#1148) This reverts commit f1efe55. * Solar Patch (#1149) * Solar Patch * syntax Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Cherry-picked and pushing Playbook v7.1.0 commit back into Master branch * Playbook Distribution Release (#834) * Update changelog * Changelog Generator 2.0 (#1136) * Changelog Generator 2.0 * Updated PR Template Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> * Pin dependencies (#1138) Co-authored-by: Renovate Bot <bot@renovateapp.com> * Update caption to support block, update time kit structure/style * Remove extra additions. * removed CHANGELOG duplicate Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: thestephenmarshall <smarshall1980@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> * Revised * Update design of Date Kit * update test, add deprecation in react * Revised * Update design of Date Kit * update test, add deprecation in react * Space Co-authored-by: Jasper Furniss <jasperfurniss@gmail.com> Co-authored-by: Jasper Furniss <jasper.furniss@powerhrg.com> Co-authored-by: Josephine Fischer <64423298+josephinef9@users.noreply.github.com> Co-authored-by: Christina Tai <42459486+christinaatai@users.noreply.github.com> Co-authored-by: Garett Arrowood <garettarrowood@gmail.com> Co-authored-by: Stephen Marshall <smarshall1980@gmail.com> Co-authored-by: Brendan Huffman <bh247484@gmail.com> Co-authored-by: Rafael Garcia <rafael.garcia@powerhrg.com> Co-authored-by: Matthew Russell Dodds <matthew.dodds@powerhrg.com> Co-authored-by: Eva Louderback <50629488+evalouderback@users.noreply.github.com> Co-authored-by: Jon Zazula <djonyriz@gmail.com> Co-authored-by: Brendan Huffman <57693937+bh247484@users.noreply.github.com> Co-authored-by: Jason Cypret <jason@jasoncypret.com> Co-authored-by: Idan Zonshein <64423490+idanzonshein@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Megan Trimble <53874143+megantrimble@users.noreply.github.com>
powerhome · Oct 21, 2020 · 76ef394 · 76ef394
1 parent 9f096c5
commit 76ef394
Show file tree

Hide file tree

Showing 14 changed files with 473 additions and 131 deletions.
diff --git a/app/pb_kits/playbook/pb_date/_date.html.erb b/app/pb_kits/playbook/pb_date/_date.html.erb
@@ -1,14 +1,70 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-    <% if object.size == "lg" %>
-      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
-    <% elsif object.size == "sm" %>
-      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
-      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
+    class: object.classname,
+    aria: object.aria) do %>
+
+  <% 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 %>
+
+    <!-- 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 -->
+
+    <%# 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: { text: object.xs_date, size: 4 }) %>
+      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    <% end %>
+
+  <% else %>
+
+    <!-- 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,82 +2,131 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Icon } from '../'
+import { Body, Caption, Icon, Title } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-const defaultDateString = (value: DateTime) => {
-  const weekday = value.toWeekday().toUpperCase()
-  const month = value.toMonth().toUpperCase()
-  const day = value.toDay()
-
-  return `${weekday} · ${month} ${day}`
-}
-
-const largeDateString = (value: DateTime) => {
-  const month = value.toMonth().toUpperCase()
-  const day = value.toDay()
-
-  return `${month} ${day}`
-}
-
-type DateSubcomponent = {
-  value: DateTime,
+type PbDateProps = {
+  alignment?: "left" | "center" | "right",
+  aria: Object,
+  className?: string,
+  data?: Object,
+  id?: string,
+  showDayOfWeek?: boolean,
+  showIcon?: boolean,
+  size?: string,
+  value: string | date,
 }
 
-const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
-    {defaultDateString(value)}
-  </h3>
-)
-
-const SmallDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
-    <Icon
-        fixedWidth
-        icon="calendar"
-    />
-    {defaultDateString(value)}
-  </h3>
-)
+const PbDate = (props: PbDateProps) => {
+  const {
+    aria = {},
+    alignment = 'left',
+    className,
+    data = {},
+    id,
+    showDayOfWeek = false,
+    showIcon = false,
+    size = 'md',
+    value,
+  } = props
 
-const LargeDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
-    {largeDateString(value)}
-  </h3>
-)
+  const dateTimestamp = new DateTime({ value: value })
+  const weekday = dateTimestamp.toWeekday()
+  const month = dateTimestamp.toMonth()
+  const day = dateTimestamp.toDay()
+  const year = dateTimestamp.toYear()
+  const currentYear = new Date().getFullYear().toString()
 
-type PbDateProps = {
-  size?: "xs" | "sm" | "lg",
-  value?: string,
-  className?: string
-}
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
-  const date = new DateTime({ value: value })
+  const classes = classnames(
+    buildCss('pb_date_kit', alignment),
+    globalProps(props),
+    className
+  )
 
-  if (size == 'xs')
-    return (
-      <ExtraSmallDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
-  if (size == 'lg')
-    return (
-      <LargeDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
   return (
-    <SmallDate
-        {...props}
-        className={className}
-        value={date}
-    />
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <If condition={size == 'md' || size == 'lg'}>
+
+        <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=" • "
+            />
+          </If>
+          <span>
+            {month}
+            {' '}
+            {day}
+          </span>
+          <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.scss b/app/pb_kits/playbook/pb_date/_date.scss
@@ -1,2 +1,32 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
+
+[class^=pb_date_kit] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    > div, .pb_icon_kit_container {
+        margin-right: 4px !important;
+    }
+
+    &[class*=_center] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px !important;
+    }
+
+    &[class*=_right] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        margin-left: 4px !important;
+    }
+    &.dark {
+        [class^=pb_title_kit] {
+            color: $text_dk_default !important;
+        }
+    }
+}
diff --git a/app/pb_kits/playbook/pb_date/date.rb b/app/pb_kits/playbook/pb_date/date.rb
@@ -10,25 +10,37 @@ class Date
       partial "pb_date/date"
 
       prop :date, required: true
+      prop :alignment, type: Playbook::Props::Enum,
+                       values: %w[left center right],
+                       default: "left"
+      prop :show_icon, type: Playbook::Props::Boolean,
+                       default: false
+      prop :show_day_of_week, type: Playbook::Props::Boolean,
+                              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
-        generate_classname("pb_date_kit")
+        generate_classname("pb_date_kit", alignment)
       end
 
-      def xs_date
-        "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
+      def day_of_week
+        pb_date_time.to_day_of_week
       end
 
-      def lg_date
-        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
+      def day
+        pb_date_time.to_day
       end
 
-      def sm_date
-        "#{pb_date_time.to_day_of_week.upcase} &middot; #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
+      def month
+        pb_date_time.to_month.capitalize
+      end
+
+      def year
+        pb_date_time.to_year
       end
 
     private

diff --git a/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb b/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
@@ -0,0 +1,24 @@
+ <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "center"
+  }) %>
+
+  <br><br>
+
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    alignment: "right"
+  }) %>
+