RubyGems - playbook_ui - Versions diffs - 7.4.0.pre.alpha6 → 7.4.0.pre.test2 - Mend

playbook_ui 7.4.0.pre.alpha6 → 7.4.0.pre.test2

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

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

@@ -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>
   )
 }

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

@@ -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;
+        }
+    }
+}

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

@@ -10,25 +10,36 @@ module Playbook
       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
       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

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

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

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

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

@@ -1,24 +1,39 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "lg"
+  size: "sm"
 }) %>
 <br>
 <%= pb_rails("date", props: {
-  date: DateTime.now
+  date: "2012-08-02T15:49:29Z",
+  size: "sm"
 }) %>
 <br>
 <%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Asia/Tokyo"
+  date: "2017-12-02T15:49:29Z",
+  show_day_of_week: true,
+  size: "sm"
+}) %>
+<br>
+<br>
+<%= pb_rails("date", props: {
+  date: Date.today,
+}) %>
+<br>
+<%= pb_rails("date", props: {
+  date: "2012-08-02T15:49:29Z",
 }) %>
 <br>
 <%= pb_rails("date", props: {
-  date: Date.new(2010, 11, 12),
-  size: "xs"
+  date: "2017-12-02T15:49:29Z",
+  show_day_of_week: true
 }) %>

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

@@ -1,28 +1,59 @@
 import React from 'react'
-import { Date } from '../../'
+import { Date as FormattedDate } from '../../'
-const DateDefault = () => {
+const DateDefault = (props) => {
   return (
-    <div>
-      <Date
-          size="lg"
-          value="1995-12-25"
+    <>
+      <FormattedDate
+          size="sm"
+          value={new Date()}
+          {...props}
       />
       <br />
-      <Date
-          value="17 Mar 69"
+      <FormattedDate
+          size="sm"
+          value="2012-08-03"
+          {...props}
       />
       <br />
-      <Date
-          size="xs"
-          value="2020-04-20T04:20:00.000Z"
+      <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}
+      />
+    </>
   )
 }
 export default DateDefault
+// *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_variants.html.erb ADDED Viewed

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

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Date as FormattedDate } from '../..'
+const DateVariants = (props) => {
+  return (
+    <div>
+      <FormattedDate
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormattedDate
+          showIcon
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormattedDate
+          showDayOfWeek
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormattedDate
+          showDayOfWeek
+          showIcon
+          value="1995-12-25"
+          {...props}
+      />
+    </div>
+  )
+}
+export default DateVariants

data/app/pb_kits/playbook/pb_date/docs/example.yml CHANGED Viewed

@@ -2,9 +2,13 @@ examples:
   rails:
   - date_default: Default
+  - date_variants: Variants
+  - date_alignment: Alignment
   - date_timezone: Timezones
   react:
   - date_default: Default
+  - date_variants: Variants
+  - date_alignment: Alignment

data/app/pb_kits/playbook/pb_date/docs/index.js CHANGED Viewed

@@ -1 +1,3 @@
 export { default as DateDefault } from './_date_default.jsx'
+export { default as DateVariants } from './_date_variants.jsx'
+export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb CHANGED Viewed

@@ -3,20 +3,25 @@
     class: object.classname + object.error_class,
     data: object.data,
     id: object.id) do %>
-      <div class="input_wrapper">
-        <%= pb_rails("text_input", props: {
-          aria: object.input_aria,
-          autocomplete: false,
-          dark: object.dark,
-          data: object.input_data,
-          disabled: object.disable_input,
-          error: object.error,
-          id: object.picker_id,
-          label: object.hide_label ? nil : object.label,
-          name: object.name,
-          placeholder: object.placeholder,
-          required: object.required
-        }) %>
+      <% if object.children %>
+        <div class="input_wrapper">
+          <%= capture(&object.children) %>
+      <% else %>
+        <div class="input_wrapper">
+          <%= pb_rails("text_input", props: {
+            aria: object.input_aria,
+            autocomplete: false,
+            dark: object.dark,
+            data: object.input_data,
+            disabled: object.disable_input,
+            error: object.error,
+            id: object.picker_id,
+            label: object.hide_label ? nil : object.label,
+            name: object.name,
+            placeholder: object.placeholder,
+            required: object.required,
+          }) %>
+        <% end %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb ADDED Viewed

@@ -0,0 +1,31 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= pb_rails("flex", props: {
+      orientation: "row",
+      horizontal: object.align,
+      vertical: "baseline" }) do %>
+      <%= pb_rails("date", props: {
+        dark: object.dark,
+        date: object.date,
+        show_day_of_week: object.show_day_of_week,
+        size: object.size,
+        timezone: object.timezone,
+      }) %>
+      <%= pb_rails("time", props: {
+        margin_left: "sm",
+        show_icon: object.show_icon,
+        size: object.size,
+        tag: "caption",
+        time: object.date,
+        timezone: object.timezone,
+      }) %>
+    <% end %>
+<% end %>