playbook_ui 9.7.0 → 9.10.0.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f80298017b48e65f5ec8a3ec7a6782608b90adf0bae7c32596837f3c964f5c85
-  data.tar.gz: 2c8e80673442f37ff2cce022f1324642c80c17b8c6da2912a119502a84c5781e
+  metadata.gz: 210dfcb2a5011173148bd19f95f1295fa55e69a26814da550b09e85b64025d81
+  data.tar.gz: 7b79476f36d303bcd6d992c5239c29faae33d8f1068674bbef0365af9ff6b9bc
 SHA512:
-  metadata.gz: ee6e023775fc1c6d7ec91beaec5d1bed2d4cca9f342ef4e7b8c203f70f577e197b7ae0048e1872f881d12c13113fe9eadd7fd3a369c4d0ff8213541c8ab67b9c
-  data.tar.gz: 75e487fb2251126f2c74d67d4db3173c68e2838e7350279f1c4e5a1e5315be3e0c17233e22b645adb8438695317797b05baf44ce0448764db22139200a1e40d3
+  metadata.gz: fd106f6e9df0b198ef6b46729612c215e0ce06e7e0228135b006a91b8a08bca39410558c62b993745596b6366331a2790301a7565afed611aec2da196c9290fe
+  data.tar.gz: 8892f5c04d2cfd31a6f229807a8a61c10f4eb059feefff3c6ec5b0ec2cbf8fd8cb2846227f5c395cc33ff9f411158e6dfd07cb30dfc3fa9880a5d30755c26a2a

data/app/pb_kits/playbook/pb_background/background.rb

@@ -12,7 +12,6 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
-
       def classname
         generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -6,37 +6,36 @@ module Playbook
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
-                         values: %w[pie],
-                         default: "pie"
+                   values: %w[pie],
+                   default: "pie"
 
       prop :data_labels, type: Playbook::Props::Boolean, default: false
       prop :min_point_size, type: Playbook::Props::Numeric
       prop :max_point_size, type: Playbook::Props::Numeric
       prop :inner_size, type: Playbook::Props::Enum,
-                              values: %w[sm md lg none],
-                              default: "md"
+                        values: %w[sm md lg none],
+                        default: "md"
       prop :z_min, type: Playbook::Props::Numeric
       prop :start_angle, type: Playbook::Props::Numeric
       prop :header_format
-      prop :data_label_html, default: '<div>{point.name}</div>'
+      prop :data_label_html, default: "<div>{point.name}</div>"
       prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
                                       {point.name}: ' + '<b>{point.y}
                                     </b>'
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
-      prop :title, default: ''
+      prop :title, default: ""
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
 
-
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
       end
 
       def chart_data_formatted
-        chart_data.map{ |hash| hash[:y] = hash.delete :value}
-        return chart_data
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
       end
 
       def inner_size_format
@@ -57,7 +56,7 @@ module Playbook
       end
 
       def rounded_border_color
-        rounded == true ? 'null' : nil
+        rounded == true ? "null" : nil
       end
 
       def chart_options

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbCircleIconButton
     class CircleIconButton < Playbook::KitBase
@@ -8,11 +10,11 @@ module Playbook
                      values: %w[primary secondary link],
                      default: "primary"
       prop :disabled, type: Playbook::Props::Boolean,
-                     default: false
+                      default: false
       prop :icon, required: true
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
-                     default: false
+                        default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
         <Else />
         <>
           <If condition={showIcon}>
-            <Body
+            <Caption
                 className="pb_icon_kit_container"
-                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
+                  size="xs"
               />
-            </Body>
+            </Caption>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -39,11 +39,10 @@
 
     <!-- icon -->
     <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
+      <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb

@@ -1,4 +1,12 @@
 <div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    size: "sm"
+  }) %>
+
+  <br>
+
   <%= pb_rails("date", props: {
     date: DateTime.now,
   }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
 const DateVariants = (props) => {
   return (
     <div>
+      <FormattedDate
+          showIcon
+          size="sm"
+          value="1995-12-25"
+          {...props}
+      />
+
+      <br />
+      <br />
+
       <FormattedDate
           value="1995-12-25"
           {...props}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -5,13 +5,13 @@ module Playbook
     class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
-                  values: %w[left center right],
-                  default: "left"
+                   values: %w[left center right],
+                   default: "left"
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
                   default: "sm"
       prop :reverse, type: Playbook::Props::Boolean,
-                  default: false
+                     default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
 
@@ -20,20 +20,20 @@ module Playbook
       end
 
       def title_size
-        size == "md" ? 3: 4
+        size == "md" ? 3 : 4
       end
 
       def day
         day = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: day.to_iso) do
-          "#{day.to_day}"
+          day.to_day.to_s
         end
       end
 
       def month
         month = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: month.to_iso) do
-          "#{month.to_month}"
+          month.to_month.to_s
         end
       end
 
@@ -42,9 +42,8 @@ module Playbook
         year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
         if current_year != year
           content_tag(:time, datetime: year) do
-            "#{year}"
+            year.to_s
           end
-        else
         end
       end
 
@@ -57,7 +56,6 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
-
     end
   end
 end

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

@@ -7,9 +7,9 @@ module Playbook
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                  default: [1]
+                    default: [1]
       prop :colors, type: Playbook::Props::Array,
-                  default: []
+                    default: []
 
       def classname
         generate_classname("pb_distribution_bar", size)

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -3,7 +3,7 @@
 module Playbook
   module PbFilter
     class Filter < Playbook::KitBase
-      prop :filters, type: Playbook::Props::HashArray, default: [{name: ''}]
+      prop :filters, type: Playbook::Props::HashArray, default: [{ name: "" }]
       prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
       prop :results, type: Playbook::Props::Numeric
       prop :template, type: Playbook::Props::Enum,

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

@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
   closeable?: boolean,
   data?: string,
   id?: string,
-  status?: "success" | "error" | "neutral" | "tip",
+  multiLine?: boolean,
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, status = 'neutral', text } = props
+  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
+    { '_multi_line': multiLine },
     globalProps(props),
     className
   )

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

@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
       .pb_icon {
         color: $white;
       }
+
+      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
+      }
     }
   }
 }

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

@@ -1,4 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
 }) %>

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

@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
+          multiLine
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text="Scan to Assign Selected Items. Click here to generate report"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md

@@ -1,2 +1,2 @@
 
-Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

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

@@ -7,6 +7,8 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :multi_line, type: Playbook::Props::Boolean,
+                        default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
 
@@ -18,6 +20,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
+      def multi_line_class
+        multi_line.present? ? "multi_line" : nil
+      end
+
       def icon_value
         case status
         when "success"
@@ -32,7 +38,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
       end
     end
   end

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

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -74,8 +74,8 @@ module Playbook
       def horizontal_class
         if orientation == "row"
           "justify_content_#{horizontal}"
-        else
-          "align_items_#{horizontal}" if align == "none"
+        elsif align == "none"
+          "align_items_#{horizontal}"
         end
       end
 
@@ -102,8 +102,8 @@ module Playbook
       def vertical_class
         if orientation == "row"
           "align_items_#{vertical}"
-        else
-          "justify_content_#{vertical}" if justify == "none"
+        elsif justify == "none"
+          "justify_content_#{vertical}"
         end
       end
 

data/app/pb_kits/playbook/pb_form/form.rb

@@ -23,7 +23,7 @@ module Playbook
           class: classname,
           data: data,
           validate: validate,
-        }.merge(prop(:options) || prop(:form_system_options) || { })
+        }.merge(prop(:options) || prop(:form_system_options) || {})
       end
     end
   end

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx

@@ -10,6 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
+  fullWidth?: boolean,
   id?: string,
 }
 
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
     aria = {},
     className,
     data = {},
+    fullWidth = false,
     id,
     children,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
 
   return (
     <div

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -4,6 +4,14 @@
   align-items: flex-end;
   justify-content: flex-start;
 
+  &[class*=_full] {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+    }
+  }
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+
+export default FormGroupFullWidth