playbook_ui 7.0.1 → 7.1.0.pre.alpha1

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -12,9 +12,7 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   
   
   react:
@@ -30,7 +28,5 @@ examples:
   - date_picker_min_max: Min Max
   - date_picker_error: Error
   - date_picker_hooks: Hooks
-  # - date_picker_allow_input: Allow Input
   - date_picker_year_range: Year Range
-  - date_picker_dark: Dark
   

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -10,6 +10,4 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
-// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
-export { default as DatePickerDark } from './_date_picker_dark.jsx'

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb

@@ -2,21 +2,15 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
+    <div class="pb_date_range_inline_wrapper">
+      <% if object.icon == true %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
+      <% end %>
 
-    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
-      <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-    <% end %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
 
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      <%= object.start_date_display %>
-    <% end %>
-
-    <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
-      <%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true }) %>
-    <% end %>
-
-    <%= pb_rails("body", props: { tag: "span"}) do %>
-      <%= object.end_date_display %>
-    <% end %>
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
 
+      <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
+    </div>
 <% end %>

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

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

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

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

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

@@ -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_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

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

@@ -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,7 +22,8 @@ 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(
     `pb_fixed_confirmation_toast_kit_${status}`,
     globalProps(props),
@@ -30,20 +32,32 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   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>
   )
 }