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

playbook_ui 7.0.0.pre.alpha1 → 7.0.0.pre.alpha2

Files changed (257) hide show

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED

@@ -2,82 +2,91 @@
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Icon } from '../'
+import { Body, 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 = {
+  aria: Object,
+  date: string | date,
+  className?: string,
+  data?: Object,
+  id?: string,
+  showIcon?: boolean,
+  showDayOfWeek?: boolean,
+  alignment?: "left" | "center" | "right"
 }
-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 LargeDate = ({ value, ...props }: DateSubcomponent) => (
-  <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
-    {largeDateString(value)}
-  </h3>
-)
+const PbDate = (props: PbDateProps) => {
+  const {
+    aria = {},
+    alignment = 'left',
+    className,
+    date,
+    data = {},
+    id,
+    showDayOfWeek = false,
+    showIcon = false,
+  } = props
-type PbDateProps = {
-  size?: "xs" | "sm" | "lg",
-  value?: string,
-  className?: string
-}
+  const dateTimestamp = new DateTime({ value: date })
+  const weekday = dateTimestamp.toWeekday()
+  const month = dateTimestamp.toMonth()
+  const day = dateTimestamp.toDay()
+  const year = dateTimestamp.toYear()
+  const currentYear = new Date().getFullYear().toString()
-const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
-  const date = new DateTime({ value: value })
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
-  if (size == 'xs')
-    return (
-      <ExtraSmallDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
-  if (size == 'lg')
-    return (
-      <LargeDate
-          {...props}
-          className={className}
-          value={date}
-      />
-    )
+  const classes = classnames(
+    className,
+    buildCss('pb_date_kit', alignment),
+    globalProps(props)
+  )
   return (
-    <SmallDate
-        {...props}
-        className={className}
-        value={date}
-    />
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Title
+          size={4}
+          tag="h4"
+      >
+        <If condition={showIcon}>
+          <Body
+              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>
+    </div>
   )
 }

data/app/pb_kits/playbook/pb_date/_date.scss CHANGED

@@ -1,2 +1,27 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
+[class^=pb_date_kit] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    > div {
+        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;
+    }
+}

data/app/pb_kits/playbook/pb_date/date.rb CHANGED

@@ -10,30 +10,39 @@ module Playbook
       partial "pb_date/date"
       prop :date, required: true
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg sm xs],
-                  default: "sm"
+      prop :timezone, default: "America/New_York"
+      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
       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 date_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
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(date, timezone)
       end
     end
   end

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb ADDED

@@ -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"
+  }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx ADDED

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+const DateAlignment = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="1995-12-25"
+          dayOfWeek
+          icon
+      />
+      <br />
+      <FormattedDate
+          alignment="center"
+          date="2020-12-25"
+          dayOfWeek
+          icon
+      />
+      <br />
+      <FormattedDate
+          alignment="right"
+          date={new Date()}
+      />
+    </div>
+  )
+}
+export default DateAlignment

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb CHANGED

@@ -1,17 +1,9 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "lg"
 }) %>
-<br>
-<%= pb_rails("date", props: {
-  date: DateTime.now
-}) %>
-<br>
+<br />
 <%= pb_rails("date", props: {
   date: "2012-08-02T15:49:29Z",
-  size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED

@@ -1,25 +1,15 @@
 import React from 'react'
-import { Date } from '../../'
+import { Date as FormattedDate } from '../../'
 const DateDefault = () => {
   return (
     <div>
-      <Date
-          size="lg"
-          value="1995-12-25"
+      <FormattedDate
+          date="2012-12-25"
       />
-      <br />
-      <Date
-          value="17 Mar 69"
-      />
-      <br />
-      <Date
-          size="xs"
-          value="2020-04-20T04:20:00.000Z"
+      <FormattedDate
+          date={new Date()}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx ADDED

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+const DateDefault = () => {
+  return (
+    <div>
+      <FormattedDate
+          date="2012-12-25"
+      />
+      <br />
+      <FormattedDate
+          date={new Date()}
+      />
+    </div>
+  )
+}
+export default DateDefault

data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md ADDED

@@ -0,0 +1,3 @@
+*Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
+To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'`

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb ADDED

@@ -0,0 +1,51 @@
+<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/New_York"
+}) %>
+<br>
+<%= pb_rails("caption", props: { text: "West Coast"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "America/Los_Angeles"
+}) %>
+<br>
+<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
+}) %>
+<br>
+<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
+<%= pb_rails("date", props: {
+  date: Date.today,
+  timezone: "Australia/Sydney"
+}) %>
+<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
+<br>
+<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
+<%= pb_rails("date", props: {
+  date: DateTime.now,
+  timezone: "Australia/Sydney"
+}) %>
+<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
+<br>
+<%= pb_rails("caption", props: { text: "String Dates"}) %>
+<%= pb_rails("date", props: {
+  date: "2012-08-02T00:49:29Z",
+}) %>
+<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md ADDED

@@ -0,0 +1,6 @@
+Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
+Don't care about timezones? Use `Date`.
+If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb ADDED

@@ -0,0 +1,27 @@
+<div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+  }) %>
+  <br><br>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true
+  }) %>
+  <br><br>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_day_of_week: true
+  }) %>
+  <br><br>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+  }) %>
+</div>