playbook_ui 7.2.0 → 7.3.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 923bb2a3586c197a5c26d22490b0de323332170dc657b22bd62e3d585a4ef853
-  data.tar.gz: 4cd8de5c0c0eb75b29fef20d7d182bed50d6161a8fa29638e6f56de94520795c
+  metadata.gz: ca983cabd6299f4dfad9ce14371ab208cd0a4a07d33a96a982b1d8738fdab2fe
+  data.tar.gz: b595faf637896b674152d5d99447d68afb91167b73613a0968a4dc97bebef410
 SHA512:
-  metadata.gz: 14c2b363c5544fd935d0ae869ef1c3d1aa5b6d353f6cde7dfab2ff58160253f6d3cc69e047da895746a7457bc84389542462d2f9e5510c02d014d02730be9fe6
-  data.tar.gz: e92da77938a44999642573959a8c5236045bf9ca177e8eb7e52a4ee84391fbac05a2554a4ba2dc4fb0f67b506b2ae405f226d40394a65b0cba65f88c10798c9b
+  metadata.gz: 44ec7a1bbb7d5caac83eaff177c2901369d5ca0988443256ead755384181fb4dd93821ebba314e49cd777f543fa7f151ec7677913eb3ed7554297c49418770ff
+  data.tar.gz: da094e6d8c732361affbed9a1bc563afd9ce2a4a42d95206af73482a2db773ce488d93fb97efcaf0d0bf888bb271745f0b2491bab370156de11b1e83d2ec2162

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                               default: []
+                                default:[]
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
@@ -32,7 +32,6 @@ module Playbook
       def chart_options
         {
           id: id,
-          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -101,7 +101,7 @@ const CircleChart = (props: CircleChartProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart && chart.renderTo.id === id) {
+        if (chart.renderTo.id === id) {
           const updatedValueArray = chartData.map((obj) => {
             return obj.value
           })

data/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 %>
-

data/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>
   )
 }
 

data/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;
+        }
+    }
+}

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

@@ -10,25 +10,37 @@ 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
+      # 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} · #{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} · #{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

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

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

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

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

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

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

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

@@ -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_gauge/_gauge.jsx

@@ -88,7 +88,7 @@ const Gauge = (props: GaugeProps) => {
   useEffect(() => {
     if (componentDidMount.current) {
       Highcharts.charts.forEach((chart) => {
-        if (chart && chart.renderTo.id === id) {
+        if (chart.renderTo.id === id) {
           chart.series[0].setData([chartData[0].value])
           chart.series[0].data[0].name = chartData[0].name
         }

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :subtitle
       prop :title
       prop :x_axis_categories, type: Playbook::Props::Array,
-                               default: []
+                                default:[]
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
@@ -32,7 +32,6 @@ module Playbook
       def chart_options
         {
           id: id,
-          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.2.0"
+  VERSION = "7.3.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.2.0
+  version: 7.3.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-16 00:00:00.000000000 Z
+date: 2020-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -668,10 +668,14 @@ 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.jsx
 - 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/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -1866,11 +1870,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System