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

playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

Files changed (352) hide show

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

@@ -11,58 +11,23 @@ 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", dark_class, align)
-      end
-      def text_kit
-        case size
-        when "xs"
-          "caption"
-        when "sm"
-          "body"
-        end
-      end
-      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
+        generate_classname("pb_date_range_inline_kit")
       end
       def end_date_display
-        time_display(Playbook::PbKit::PbDateTime.new(end_date))
+        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}"
+        end
       end
       def start_date_display
-        time_display(Playbook::PbKit::PbDateTime.new(start_date))
-      end
-      def dark_class
-        dark ? "dark" : nil
+        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}"
+        end
       end
     end
   end

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

@@ -1,14 +1 @@
-<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>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

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

@@ -1,57 +1,13 @@
 import React from 'react'
 import DateRangeInline from '../_date_range_inline.jsx'
-const DateRangeInlineDefault = (props) => {
+const DateRangeInlineDefault = () => {
   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,11 +18,7 @@ type DateRangeStackedProps = {
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(
-    buildCss('pb_date_range_stacked'),
-    globalProps(props),
-    className
-  )
+  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
   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),
-    className
+    globalProps(props)
   )
   const currentYear = new Date().getFullYear().toString()

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

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

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

@@ -1 +1,8 @@
-<%= react_component('DistributionBar', object.chart_options) %>
+<%= 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 %>

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

@@ -22,13 +22,6 @@ 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,7 +3,6 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= 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 %>
+    <%= 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?%>
 <% end %>

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

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

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

@@ -20,16 +20,6 @@ $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_default.html.erb CHANGED

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

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

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb CHANGED

@@ -1,4 +1,4 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx CHANGED

@@ -6,7 +6,7 @@ const FixedConfirmationToastMultiLine = () => {
     <div>
       <FixedConfirmationToast
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb CHANGED

@@ -1,5 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
   dark: true,
-  text: "Scan to Assign Selected Items.\nClick here to generate report.",
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx CHANGED

@@ -7,7 +7,7 @@ const FixedConfirmationToastMultiLineDark = () => {
       <FixedConfirmationToast
           dark
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
       />
     </div>
   )

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

@@ -3,14 +3,12 @@ examples:
   rails:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
-  - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_dark: Dark
   - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
-  - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_dark: Dark
   - fixed_confirmation_toast_multi_line_dark: Multi Line Dark

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

@@ -1,5 +1,4 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
-export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
 export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
 export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb CHANGED

@@ -11,17 +11,11 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
-      prop :closeable, type: Playbook::Props::Boolean,
-                       default: false
       def show_text?
         text.present?
       end
-      def close_class
-        closeable.present? ? " remove_toast" : ""
-      end
       def icon_value
         case status
         when "success"
@@ -36,7 +30,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status)
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/_flex.jsx CHANGED

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        globalProps(props),
-        className
+        className,
+        globalProps(props)
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
         style={fixedStyle}
     >
       {children}