playbook_ui 10.27.0.pre.datepicker1 → 11.0.0.pre.alpha.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c517f7625c3f51b1f4cd966d4cf0ec2eab5dab7aed441ac0c74fa169ea293ab9
-  data.tar.gz: 16896c8a9467b0ef2fca85c7261a329485554a5d668967fdde99d992d8908184
+  metadata.gz: 6d28e27927e8602f94b1e7899dc68b885a4d6e1c16d68a1fe9193f1906ac4612
+  data.tar.gz: d4e34b7ed0c56ef0115540018aa793a9916d1c7289262b7100e3096bb0c0b8ec
 SHA512:
-  metadata.gz: c8aac77540457b3598a3717f2a1d310f1ee16ffd907a3185a97bfd05bcd4ac123009c125feea7331fd161ef5475de268a747e4461cbc12dbdce1adcdc364da66
-  data.tar.gz: '0815ddd5e47e45d9fd9f312a7b80e1b3015a06e09834a9212758ed43222790a801564162b56bb07ef0d6be6f41f761eca44a8cc2ba8fd006885a5e3f073bdcec'
+  metadata.gz: c3e96e40585f37e05faecc618cff08a9c073c3e296aafe6044bbecf647c7011d6042008714d412f8844232a1b68d256060c7ab82a869c1553cb143ac8dfbef4c
+  data.tar.gz: 2b4b0344dcc62a9e841c41c88a7a8a027d6c442720d2ada777118ae1470fd1eb81e54ec458f3ff19cedb3877df52382ce8c87c03ed1cd926a8720ff46cc87c8b

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  plugins?: "ms" | "ws",
+  plugins?: Boolean,
   type?: String,
   yearRange?: Array,
 }
@@ -74,7 +74,7 @@ const DatePicker = (props: DatePickerProps) => {
     onChange = () => {},
     pickerId,
     placeholder = 'Select Date',
-    plugins = "",
+    plugins = false,
     yearRange = [ 1900, 2100 ],
   } = props
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -5,7 +5,6 @@
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
 
-
 [class^=pb_date_picker_kit] {
   .input_wrapper {
     margin-bottom: $space_sm;

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -41,9 +41,8 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
-      prop :plugins, type: Playbook::Props::Enum,
-                     values: %w[ws ms],
-                     default: []
+      prop :plugins, type: Playbook::Props::Boolean,
+                     default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -1,6 +1,5 @@
 import flatpickr from 'flatpickr'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
-import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 
 const datePickerHelper = (config) => {
   const {
@@ -53,15 +52,9 @@ const datePickerHelper = (config) => {
     }
   }
 
-  const setPlugin = () => {
-    let p 
-    if (plugins === "ms") {
-     p = [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] 
-    } else if ( plugins === "ws") {
-      p = [ weekSelect({shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' })]
-    } else p = []
-    return p
-  }
+  const setMonthAndYearPlugin = () => (
+    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
+  )
 
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
@@ -105,12 +98,12 @@ const datePickerHelper = (config) => {
       window.removeEventListener('resize', calendarResizer)
     }],
     onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates) 
+      onChange(dateStr, selectedDates)
     }],
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugin(),
+    plugins: setMonthAndYearPlugin(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -169,10 +162,8 @@ const datePickerHelper = (config) => {
   // Adding dropdown icons to year and month selects
   dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
-  // if (picker.weekElements[0].parentElement){
-  //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
-  // }
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')
+  }
 
   // Remove readonly attribute for validation and or text input
   if (allowInput){

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", plugins: "ws" }) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
   label: "Date Picker",
+  plugins: true,
   picker_id: "disabled_date"
-  plugins: "ms",
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx

@@ -8,7 +8,7 @@ const DatePickerMonthAndYear = (props) => {
       <DatePicker
           label="Date Picker"
           pickerId="disabled-date"
-          plugins="ms"
+          plugins
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md

@@ -1 +1 @@
-By default month&year plugin is disabled. To activate it set `plugins` prop to `ms`.
+By default month&year plugin is disabled. To activate it set `plugins` prop to `true`.  If you're using React just pass a `plugins` prop to the kit.

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

@@ -17,7 +17,6 @@ examples:
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
-  - date_picker_week: Week
 
 
   react:
@@ -37,4 +36,3 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
-  - date_picker_week: Week

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

@@ -14,4 +14,3 @@ export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
 export { default as DatePickerInline } from './_date_picker_inline.jsx'
 export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
-export { default as DatePickerWeek } from './_date_picker_week.jsx'

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

@@ -11,7 +11,7 @@ module Playbook
       prop :validate, type: Playbook::Props::Boolean, default: false
 
       def render_in(view_context, &block)
-        view_context.pb_form_with(form_options, &block)
+        view_context.pb_form_with(**form_options, &block)
       end
 
     private

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -60,9 +60,12 @@ module Playbook
           plusIcon: plus_icon,
         }
 
-        base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
-        base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
-        base_options.merge!({ async: true, loadOptions: load_options }) if async
+        base_options[:getOptionLabel] = get_option_label if get_option_label.present?
+        base_options[:getOptionValue] = get_option_value if get_option_value.present?
+        if async
+          base_options[:async] = true
+          base_options[:loadOptions] = load_options
+        end
         base_options
       end
     end

data/lib/playbook/pb_kit_helper.rb

@@ -6,7 +6,12 @@ module Playbook
 
     def pb_rails(kit_name, props: {}, &block)
       kit = Playbook::KitResolver.resolve(kit_name.to_s)
-      render_component kit.new(props, &block), &block
+
+      if respond_to? :render_component
+        render_component kit.new(props, &block), &block
+      else
+        render kit.new(props, &block), &block
+      end
     end
   end
 end

data/lib/playbook/props.rb

@@ -48,7 +48,7 @@ module Playbook
       end
 
       def prop(name, type: Playbook::Props::String, **options)
-        self.props = props.merge(name => type.new(options.merge(name: name, kit: self)))
+        self.props = props.merge(name => type.new(**options.merge(name: name, kit: self)))
 
         define_method(name) { prop(name) }
       end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.26.0"
-  VERSION = "10.27.0.pre.datepicker1"
+  VERSION = "11.0.0.pre.alpha.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.27.0.pre.datepicker1
+  version: 11.0.0.pre.alpha.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-16 00:00:00.000000000 Z
+date: 2022-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -101,14 +101,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.48.0
+        version: 2.55.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 2.48.0
+        version: 2.55.0
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -205,14 +205,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 1.23.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 1.23.0
 - !ruby/object:Gem::Dependency
   name: rubocop-performance
   requirement: !ruby/object:Gem::Requirement
@@ -686,9 +686,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
@@ -702,7 +699,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
 - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb
@@ -2216,7 +2212,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.6
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: Playbook Design System

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  plugins: "ws",
-  picker_id: "week-date-picker"
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import DatePicker from '../_date_picker'
-
-const DatePickerWeek = (props) => {
-  return (
-    <div>
-      <DatePicker
-          label="Date Picker"
-          pickerId="week-date-picker"
-          plugins="ws"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DatePickerWeek

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md

@@ -1 +0,0 @@
-By default month&year plugin is disabled. To activate it set `plugins` prop to `ws`.

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss

@@ -1,127 +0,0 @@
-@import "../../tokens/colors";
-
-
-.numInput {
-  border-left: none !important;
-}
-
-// Manual Import
-.flatpickr-monthSelect-months {
-  margin: 10px 1px 3px 1px;
-  flex-wrap: wrap;
-}
-
-.flatpickr-monthSelect-month {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  color: $text_lt_default;
-  cursor: pointer;
-  display: inline-block;
-  font-weight: 400;
-  margin: 0.5px;
-  justify-content: center;
-  padding: 10px;
-  position: relative;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  text-align: center;
-  width: 33%;
-}
-
-.flatpickr-monthSelect-month.flatpickr-disabled {
-	color: #eee;
-}
-
-.flatpickr-monthSelect-month.flatpickr-disabled:hover,
-.flatpickr-monthSelect-month.flatpickr-disabled:focus {
-	cursor: not-allowed;
-	background: none !important;
-}
-
-.flatpickr-monthSelect-theme-dark {
-  background: #3f4458;
-}
-
-.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year {
-  color: #fff;
-}
-
-.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,
-.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month {
-  color: #fff;
-  fill: #fff;
-}
-
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month {
-  color: rgba(255, 255, 255, 0.95);
-}
-
-.flatpickr-monthSelect-month.today {
-  border-color: #959ea9;
-}
-
-.flatpickr-monthSelect-month.inRange,
-.flatpickr-monthSelect-month.inRange.today,
-.flatpickr-monthSelect-month:hover,
-.flatpickr-monthSelect-month:focus {
-  background: $active_light;
-  font-weight: $bold;
-  color: $text_lt_default;
-  cursor: pointer;
-  outline: 0;
-}
-
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus {
-  background: #646c8c;
-  border-color: #646c8c;
-}
-
-.flatpickr-monthSelect-month.today:hover,
-.flatpickr-monthSelect-month.today:focus {
-  background: #959ea9;
-  border-color: #959ea9;
-  color: #fff;
-}
-
-.flatpickr-monthSelect-month.selected,
-.flatpickr-monthSelect-month.startRange,
-.flatpickr-monthSelect-month.endRange {
-  background-color: $primary;
-  font-weight: $bold;
-  box-shadow: none;
-  color: #fff;
-  border-color: $primary;
-}
-
-.flatpickr-monthSelect-month.startRange {
-  border-radius: 50px 0 0 50px;
-}
-
-.flatpickr-monthSelect-month.endRange {
-  border-radius: 0 50px 50px 0;
-}
-
-.flatpickr-monthSelect-month.startRange.endRange {
-  border-radius: 50px;
-}
-
-.flatpickr-monthSelect-month.inRange {
-  border-radius: 0;
-  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
-}
-
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,
-.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange {
-  background: #80cbc4;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  color: #fff;
-  border-color: #80cbc4;
-}