RubyGems - playbook_ui - Versions diffs - 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14 - Mend

playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14

Files changed (383) hide show

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss ADDED

@@ -0,0 +1,108 @@
+@import "../../pb_title/title_mixin";
+// Header Styles
+.flatpickr-months {
+  border-bottom: solid 1px $border_light;
+}
+.flatpickr-month {
+  height: $space_xl;
+}
+.flatpickr-current-month {
+  left: $space_xs;
+  display: flex;
+  padding-top: 0;
+}
+.flatpickr-monthDropdown-months {
+  appearance: none;
+  @include pb_title_4;
+  height: $space_xl;
+  width: $space_xs * 12;
+  padding-left: 0;
+  padding-right: $space_xs;
+  margin-left: $space_sm;
+  margin-top: 0;
+  margin-bottom: 0;
+  @media (hover: hover) {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+.numInputWrapper {
+  display: contents;
+  .numInput {
+    @include pb_title_4;
+    border: 0;
+    appearance: none;
+    background-color: transparent;
+    border-left: solid 1px $border_light;
+    padding-left: $space_md - 1.5;
+    padding-right: $space_sm;
+    margin-left: $space_xs;
+    height: $space_xl;
+    &:focus {
+      outline: none;
+    }
+    @media (hover: hover) {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+// Icon for Select Tags
+.month-dropdown-icon {
+  align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 2;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+.year-dropdown-icon {
+  align-self: center;
+  margin-top: $space_xs - 3;
+  width: $space_xs + 2;
+  position: relative;
+  right: $space_xs + 4;
+  pointer-events: none;
+  color: $text_lt_light;
+}
+// Left - Right Arrow Styling
+.flatpickr-prev-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: $space_xs * 29.25 !important;
+  padding-right: $space_sm;
+  border-left: solid 1px $border_light;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover {
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}
+.flatpickr-next-month {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm;
+  height: $space_xl;
+  svg path {
+    fill: $text_lt_light;
+  }
+  @media (hover: hover) {
+    &:hover{
+      svg {
+        fill: inherit;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss ADDED

@@ -0,0 +1,44 @@
+@media (min-width: 500px) {
+  .flatpickr-calendar {
+    padding: $space_xs;
+    width: 323.88px
+  }
+  .dayContainer {
+    width: 315.88px
+  }
+  .flatpickr-months {
+    margin-left: -$space_xs;
+    margin-top: -$space_xs;
+    width: 323.88px;
+  }
+}
+@media (max-width: 499px) {
+  .numInput.cur-year {
+    padding-left: $space_sm;
+  }
+  .flatpickr-prev-month {
+    left: $space_xs * 27.5 !important;
+  }
+}
+// Firefox Header Adjustments
+@supports (-moz-appearance:none) {
+  select.flatpickr-monthDropdown-months {
+      width: 97px !important;
+      margin-left: $space_xs + 3;
+  }
+  select.numInput {
+    padding-left: $space_sm + 1.5 !important;
+    margin-left: $space_xs !important;
+  }
+}
+// Direct Overrides
+.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
+.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  cursor: not-allowed;
+}
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}

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_time_stacked/docs/_date_time_stacked_dark.jsx CHANGED

@@ -5,7 +5,7 @@ const DateTimeStackedDark = () => (
   <div>
     <DateTimeStacked
         dark
-        date={new Date}
+        date={new Date()}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx CHANGED

@@ -3,7 +3,7 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = () => (
   <div>
-    <DateTimeStacked date={new Date} />
+    <DateTimeStacked date={new Date()} />
   </div>
 )

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_file_upload/_file_upload.jsx CHANGED

@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
+        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
         {...getRootProps()}
     >
       <Card>

data/app/pb_kits/playbook/pb_filter/_filter.scss CHANGED

@@ -49,7 +49,7 @@
     display: flex;
     flex-shrink: 1;
     flex-wrap: nowrap;
-    overflow-x: scroll;
+    overflow-x: auto;
     padding-right: 80px;
     padding-top: $space_md;
     padding-bottom: $space_md;

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

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
-    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props)
+    globalProps(props),
+    className
   )
   const icon = iconMap[status]

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

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        className,
-        globalProps(props)
+        globalProps(props),
+        className
       )}
     >
       {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), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED

@@ -24,7 +24,13 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
+  <%= form.check_box :example_checkbox,
+                     data: { field1: "value1", field2: "value2" },
+                     props: { text: "Example Checkbox", label: true },
+                     id: "checkbox-id",
+                     name: "checkbox-name",
+                     class: "checkbox-class" %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED

@@ -28,6 +28,7 @@
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb CHANGED

@@ -15,6 +15,7 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
+    :example_date_picker_field1
     def self.model_name
@@ -51,6 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
+  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb CHANGED

@@ -15,6 +15,7 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
+    :example_date_picker_field2
     def self.model_name
@@ -51,6 +52,7 @@
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb CHANGED

@@ -18,6 +18,7 @@ module Playbook
         prepend(SelectField)
         prepend(CollectionSelectField)
         prepend(CheckboxField)
+        prepend(DatePickerField)
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb ADDED

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+module Playbook
+  module PbForm
+    module FormBuilder
+      module DatePickerField
+        def date_picker(name, props: {})
+          prefix = @object_name
+          html_attribute_name = "#{prefix}[#{name}]"
+          html_id = "#{prefix}_#{name}"
+          props[:name] = html_attribute_name
+          props[:picker_id] = html_id
+          @template.pb_rails("date_picker", props: props)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx CHANGED

@@ -18,8 +18,9 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    [`pb_form_pill_kit_${'primary'}`, className],
-    globalProps(props)
+    `pb_form_pill_kit_${'primary'}`,
+    globalProps(props),
+    className
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED

@@ -18,13 +18,16 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
+  cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
-      &:hover {
-        background-color: rgba($color_value, $opacity-2);
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($color_value, $opacity-2);
+        }
       }
       #{$selector}_text {
         color: $color_value;

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx CHANGED

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className, globalProps(props))}
+        className={classnames(css, globalProps(props), className)}
         id={id}
     />
   )

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx CHANGED

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, globalProps(props))}
+        highlightClassName={classnames(globalProps(props), className)}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
   const classes = (className, dark) =>
     classnames(
-      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props)
+      globalProps(props),
+      className
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx CHANGED

@@ -56,7 +56,6 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
   const classes = classnames(
-    className,
     flipMap[flip],
     'pb_icon_kit',
     'far',
@@ -72,7 +71,8 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props)
+    globalProps(props),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb CHANGED

@@ -1 +1,3 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("body", props: { dark: true }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<% end %>