RubyGems - playbook_ui - Versions diffs - 6.4.1 → 6.4.2 - Mend

playbook_ui 6.4.1 → 6.4.2

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

checksums.yaml CHANGED

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a08150d876a7028d6cc8b9118e531fa9a16ba7c9c4fa77f7ffa4faf7cab44c7
-  data.tar.gz: ae48bc22ae443725b97cac2b5ab18d4de996462b6331e4fa4d7d92f98996b825
+  metadata.gz: 043d8ee7ffc205305e575f5a1b2dbc33a7044509a8907c19b1fdd2496df7995c
+  data.tar.gz: 7c38d3f71179c5f552836a74d7bb85c84035a304d3190b90f3a5d0a9be043a46
 SHA512:
-  metadata.gz: 41f73dc0530334c77b1ab50f920f7bb570db7cea6864d1eb86dcf63da41995c88c2db83932bbb97b9156a2d4372c01d42f8e943e53d875ac12216a68b8dc7142
-  data.tar.gz: 345d508437f8769cf5abd601e21d973628bea9455a90904041952f549b8a54df4bf17f2c7893ccb6679aaa4c5ba824af1b0ff47b199d546ce7f8ac383e943266
+  metadata.gz: 6c4ba1186d30795d4dc2a85ab19fe898b9ef043d1cb42e0db2aea26df4b7a0ea34ffd3e39f7272db76deb03533777d34798c3e1f9aac0a514d4d0133d3dbac2c
+  data.tar.gz: f6a7e045c41272b2a13c2035fe0b2100d792ab969f2cfd968008646b2c0c1a51bcd5ee467c831a4aba06a24fdebf7c662e7845e8d0e4f41af6af6e2d67070b80

data/app/pb_kits/playbook/pb_date/_date.html.erb CHANGED

@@ -1,38 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    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 }) %>
-    <% end %>
-  <% end %>
-  <!-- day_of_week -->
-  <% if object.show_day_of_week %>
-    <%= pb_rails("title", props: { tag: "div", text: object.date_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: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    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 }) %>
+    <% else %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
   <% end %>
 <% end %>

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

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

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

@@ -1,27 +1,2 @@
 @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,39 +10,30 @@ module Playbook
       partial "pb_date/date"
       prop :date, required: true
-      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
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm xs],
+                  default: "sm"
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
-      def date_day_of_week
-        pb_date_time.to_day_of_week
+      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
       end
-      def day
-        pb_date_time.to_day
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
-      def month
-        pb_date_time.to_month.capitalize
-      end
-      def year
-        pb_date_time.to_year
+      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
       end
     private
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date, timezone)
+        Playbook::PbKit::PbDateTime.new(date)
       end
     end
   end

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

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

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

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

data/app/pb_kits/playbook/pb_date/docs/_description.md CHANGED

@@ -1,3 +1 @@
 Use to display the date. Year will not display if it is the current year.
-`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.

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

@@ -2,12 +2,8 @@ examples:
   rails:
   - date_default: Default
-  - date_timezone: Timezones
-  - date_variants: Variants
-  - date_alignment: Alignment
   react:
-  - date_default_react: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
+  - date_default: Default

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

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

data/lib/playbook/version.rb CHANGED

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "6.4.1"
+  VERSION = "6.4.2"
 end

metadata CHANGED

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.4.1
+  version: 6.4.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-31 00:00:00.000000000 Z
+date: 2020-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -702,15 +702,8 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx
-- app/pb_kits/playbook/pb_date/docs/_date_default_react.md
-- app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_timezone.md
-- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
+- app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -1954,8 +1947,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Playbook Design System

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

@@ -1,24 +0,0 @@
-  <%= 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 DELETED

@@ -1,32 +0,0 @@
-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_react.jsx DELETED

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

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

@@ -1,3 +0,0 @@
-*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 DELETED

@@ -1,51 +0,0 @@
-<%= 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 DELETED

@@ -1,6 +0,0 @@
-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 DELETED

@@ -1,27 +0,0 @@
-<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>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx DELETED

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