playbook_ui 7.0.1.pre.alpha10 → 7.1.0.pre.alpha1

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_date_range_stacked/_date_range_stacked.jsx

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -20,6 +20,16 @@ $confirmation_toast_colors: (
   border-radius: $border_rad_mega;
   box-shadow: $shadow_deeper;
 
+  .fa-times {
+    cursor: pointer;
+    opacity: 0.5;
+    position: relative;
+    right: -8px;
+  }
+  &:hover .fa-times {
+    opacity: 1;
+  }
+
   @each $color_name, $color_value in $confirmation_toast_colors {
     &[class*=_#{$color_name}]  {
       background: $color_value;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  closeable: true
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastClose = () => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="error"
+            text="Error Message"
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="success"
+            text="Items Successfully Moved"
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            closeable
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastClose

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   text: "Error Message",
-  status: "error"
+  status: "error",
+  closeable: true
 })%>
 
 <br><br>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -6,12 +6,12 @@ const FixedConfirmationToastDefault = () => {
     <div>
       <div>
         <FixedConfirmationToast
+            closeable
             status="error"
             text="Error Message"
         />
       </div>
 
-      <br />
       <br />
 
       <div>
@@ -21,7 +21,6 @@ const FixedConfirmationToastDefault = () => {
         />
       </div>
 
-      <br />
       <br />
 
       <div>