RubyGems - playbook_ui - Versions diffs - 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3 - Mend

playbook_ui 7.3.0.pre.alpha2 → 7.3.0.pre.alpha3

Files changed (326) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx CHANGED

@@ -2,21 +2,30 @@
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Body, Icon } from '../'
+import { Body, Caption, Icon } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { buildCss } from '../utilities/props'
 type DateRangeInlineProps = {
   className?: string,
-  data?: string,
-  endDate?: date,
   id?: string,
+  data?: string,
+  align?: "left" | "center" | "vertical",
+  size?: "sm" | "xs",
+  dark?: boolean,
+  icon?: boolean,
   startDate?: date,
+  endDate?: date
 }
-const dateTimestamp = (dateValue) => {
+const dateTimestamp = (dateValue, includeYear) => {
   const date = new DateTime({ value: dateValue })
-  return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
+  if (includeYear) {
+    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
+  } else {
+    return `${date.toMonth()} ${date.toDay()}`
+  }
 }
 const dateTimeIso = (dateValue) => {
@@ -25,41 +34,115 @@ const dateTimeIso = (dateValue) => {
 }
 const DateRangeInline = (props: DateRangeInlineProps) => {
-  const { endDate, startDate } = props
+  const {
+    icon = false,
+    dark = false,
+    size = 'sm',
+    align = 'left',
+    startDate,
+    endDate,
+    className,
+  } = props
+  const iconContent = () => {
+    return (
+      <If condition={icon}>
+        <Body
+            color="light"
+            tag="span"
+        >
+          <Icon
+              className="pb_date_range_inline_icon"
+              dark={dark}
+              fixedWidth
+              icon="calendar-alt"
+              size={size}
+              tag="span"
+          />
+        </Body>
+      </If>
+    )
+  }
+  const dateInCurrentYear = () => {
+    const currentDate = new Date()
+    return startDate.getFullYear() == endDate.getFullYear() && startDate.getFullYear() == currentDate.getFullYear()
+  }
+  const dateRangeClasses =  buildCss('pb_date_range_inline_kit', align)
+  const renderTime = (date) => {
+    return (
+      <time dateTime={dateTimeIso(date)}>
+        <Choose>
+          <When condition={dateInCurrentYear()}>
+            {` ${dateTimestamp(date, false)} `}
+          </When>
+          <Otherwise>
+            {` ${dateTimestamp(date, true)} `}
+          </Otherwise>
+        </Choose>
+      </time>
+    )
+  }
   return (
-    <div className={classnames('pb_date_range_inline', globalProps(props))}>
-      <Body
-          color="light"
-          tag="span"
-      >
-        <Icon
-            fixedWidth
-            icon="calendar-alt"
-        />
-      </Body>
-      <Body tag="span">
-        <time dateTime={dateTimeIso(startDate)}>
-          {` ${dateTimestamp(
-          startDate
-        )} `}
-        </time>
-      </Body>
-      <Body
-          color="light"
-          tag="span"
-      >
-        <Icon
-            fixedWidth
-            icon="long-arrow-right"
-        />
-      </Body>
-      <Body tag="span">
-        <time dateTime={dateTimeIso(endDate)}>
-          {` ${dateTimestamp(
-          endDate
-        )} `}
-        </time>
-      </Body>
+    <div className={classnames(dateRangeClasses, globalProps(props), className)}>
+      <div className="pb_date_range_inline_wrapper">
+        <If condition={size == 'xs'}>
+          {iconContent()}
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(startDate)}
+          </Caption>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            <Icon
+                className="pb_date_range_inline_arrow"
+                fixedWidth
+                icon="long-arrow-right"
+            />
+          </Caption>
+          <Caption
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(endDate)}
+          </Caption>
+        </If>
+        <If condition={size == 'sm'}>
+          {iconContent()}
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(startDate)}
+          </Body>
+          <Body
+              color="light"
+              dark={dark}
+              tag="span"
+          >
+            <Icon
+                className="pb_date_range_inline_arrow"
+                dark={dark}
+                fixedWidth
+                icon="long-arrow-right"
+            />
+          </Body>
+          <Body
+              dark={dark}
+              tag="span"
+          >
+            {renderTime(endDate)}
+          </Body>
+        </If>
+      </div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss CHANGED

@@ -1,3 +1,34 @@
-.pb_date_range_inline {
+[class^=pb_date_range_inline_kit] {
+  &[class*=_center]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
+      text-align: center;
+    }
+    & > [class*=pb_date_range_inline_wrapper] {
+      justify-content: center;
+    }
+  }
+  &[class*=_right] {
+    & > [class^=pb_caption],
+    & > [class^=pb_body] {
+      text-align: right;
+    }
+    & > [class*=pb_date_range_inline_wrapper] {
+      justify-content: flex-end;
+    }
+  }
+  [class^=pb_date_range_inline_wrapper] {
+    display: flex;
+    align-items: center;
+    [class*=pb_date_range_inline_arrow] {
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
+    }
+    [class*=pb_date_range_inline_timezone] {
+      margin-left: $space_xs/2;
+    }
+    [class*=pb_date_range_inline_icon] {
+      margin-right: $space_xs/2;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb CHANGED

@@ -11,24 +11,59 @@ module Playbook
       prop :end_date, type: Playbook::Props::Date, required: true
       prop :start_date, type: Playbook::Props::Date, required: true
+      prop :icon, required: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm],
+                  default: "sm"
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
       def classname
-        generate_classname("pb_date_range_inline_kit")
+        generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
-      def end_date_display
-        date_time = Playbook::PbKit::PbDateTime.new(end_date)
-        content_tag(:time, datetime: date_time.to_iso) do
-          "#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
+      def text_kit
+        case size
+        when "xs"
+          "caption"
+        when "sm"
+          "body"
         end
       end
-      def start_date_display
-        date_time = Playbook::PbKit::PbDateTime.new(start_date)
-        content_tag(:time, datetime: date_time.to_iso) do
-          "#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
+      def icon_color
+        size == "sm" ? "light" : nil
+      end
+      def dates_in_current_year?
+        current_year = Time.current.year
+        start_date.year == current_year && end_date.year == current_year
+      end
+      def time_display(time)
+        content_tag(:time, datetime: time.to_iso) do
+          if dates_in_current_year?
+            "#{time.to_month_downcase} #{time.to_day}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
+          end
         end
       end
+      def end_date_display
+        time_display(Playbook::PbKit::PbDateTime.new(end_date))
+      end
+      def start_date_display
+        time_display(Playbook::PbKit::PbDateTime.new(start_date))
+      end
+      def dark_class
+        dark ? "dark" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb CHANGED

@@ -1 +1,14 @@
-<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
+<div>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), size: "xs" }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
+  <br>
+  <br>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'center' }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'center' }) %>
+  <br>
+  <br>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'right' }) %>
+  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'right' }) %>
+</div>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx CHANGED

@@ -1,13 +1,57 @@
 import React from 'react'
 import DateRangeInline from '../_date_range_inline.jsx'
-const DateRangeInlineDefault = () => {
+const DateRangeInlineDefault = (props) => {
   return (
     <div>
       <DateRangeInline
+          {...props}
           endDate={new Date('20 Mar 2015')}
+          size="xs"
           startDate={new Date('18 Jun 2013')}
       />
+      <DateRangeInline
+          {...props}
+          endDate={new Date('20 Mar 2015')}
+          size="sm"
+          startDate={new Date('18 Jun 2013')}
+      />
+      <br />
+      <br />
+      <DateRangeInline
+          {...props}
+          align="center"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="xs"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <DateRangeInline
+          {...props}
+          align="center"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="sm"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <br />
+      <br />
+      <DateRangeInline
+          {...props}
+          align="right"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="xs"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
+      <DateRangeInline
+          {...props}
+          align="right"
+          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
+          icon
+          size="sm"
+          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx CHANGED

@@ -18,7 +18,11 @@ type DateRangeStackedProps = {
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_range_stacked'),
+    globalProps(props),
+    className
+  )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx CHANGED

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
-    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx CHANGED

@@ -20,7 +20,11 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
+  const css = classnames(
+    buildCss('pb_date_year_stacked', align),
+    globalProps(props),
+    className
+  )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb CHANGED

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb CHANGED

@@ -22,6 +22,13 @@ module Playbook
           (width.to_f * 100 / widths.sum).round(2)
         end
       end
+      def chart_options
+        {
+          size: size,
+          widths: widths,
+        }
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb CHANGED

@@ -3,6 +3,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon" }) %>
-    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text?%>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text? %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon" }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED

@@ -1,6 +1,6 @@
 /* @flow */
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { Icon, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
@@ -14,6 +14,7 @@ const iconMap = {
 type FixedConfirmationToastProps = {
   className?: string,
+  closeable?: boolean,
   data?: string,
   id?: string,
   status?: "success" | "error" | "neutral" | "tip",
@@ -21,29 +22,42 @@ type FixedConfirmationToastProps = {
 }
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
-  const { className, status = 'neutral', text } = props
+  const [showToast, toggleToast] = useState(true)
+  const { className, closeable = false, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]
   return (
-    <div className={css}>
-      <If condition={icon}>
-        <Icon
-            className="pb_icon"
-            fixed_width
-            icon={icon}
+    <If condition={showToast}>
+      <div
+          className={css}
+          onClick={closeable && (() => toggleToast(false))}
+      >
+        <If condition={icon}>
+          <Icon
+              className="pb_icon"
+              fixedWidth
+              icon={icon}
+          />
+        </If>
+        <Title
+            className="pb_fixed_confirmation_toast_text"
+            size={4}
+            text={text}
         />
-      </If>
-      <Title
-          className="pb_fixed_confirmation_toast_text"
-          size={4}
-          text={text}
-      />
-    </div>
+        <If condition={closeable}>
+          <Icon
+              className="pb_icon"
+              fixedWidth={false}
+              icon="times"
+          />
+        </If>
+      </div>
+    </If>
   )
 }