playbook_ui 10.27.0.pre.datepicker1 → 10.27.0.pre.lazysizes1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c517f7625c3f51b1f4cd966d4cf0ec2eab5dab7aed441ac0c74fa169ea293ab9
-  data.tar.gz: 16896c8a9467b0ef2fca85c7261a329485554a5d668967fdde99d992d8908184
+  metadata.gz: 17b5223ce5053256ecdeca31b0cba4aa944be3e036c5a7f87e618ac210743c70
+  data.tar.gz: 249659c9162fc5866c95f4e7ca93526242cac418d643805106a30024a8f68387
 SHA512:
-  metadata.gz: c8aac77540457b3598a3717f2a1d310f1ee16ffd907a3185a97bfd05bcd4ac123009c125feea7331fd161ef5475de268a747e4461cbc12dbdce1adcdc364da66
-  data.tar.gz: '0815ddd5e47e45d9fd9f312a7b80e1b3015a06e09834a9212758ed43222790a801564162b56bb07ef0d6be6f41f761eca44a8cc2ba8fd006885a5e3f073bdcec'
+  metadata.gz: 5795693f1395e8770cac42d3883e784a21249937f31da3608e04c9109e6e07e765a6650f958108fb826a2bc76d99ed4bd8d14395dcf485c3beebd1cb6c0b5239
+  data.tar.gz: b784cac79800c6c20578e8d5b411f665bcbc75ece551eaa577b9026c2ed8de31abf0f785007861b23d27f249579435378cae0ed9f5b4ae9e4df141ac237fae3c

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_image/_image.scss

@@ -11,9 +11,9 @@ $image-sizes: (
 
 [class^=pb_image_kit] {
   position: relative;
-  object-fit: cover;
 
   @each $name, $size in $image-sizes {
+    &.ls-blur-up-img,
     &[class*=size_#{$name}] {
       width: $size;
       height: $size;
@@ -22,13 +22,16 @@ $image-sizes: (
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
+      font-family: "blur-up: auto", "object-fit: cover";
+      object-fit: cover;
     }
 
     &[class*= rounded] {
       border-radius: $border-rad-heaviest;
     }
 
-    &.fade {
+    &.ls-blur-up-img,
+    &.fade:not(.ls-is-cached) {
       opacity: 0;
       &.lazyloaded {
         opacity: 1;
@@ -36,7 +39,8 @@ $image-sizes: (
       }
     }
 
-    &.blur {
+    &.ls-blur-up-img,
+    &.blur:not(.ls-is-cached) {
       filter: blur(5px);
       &.lazyloaded {
         -webkit-filter: blur(0);
@@ -45,7 +49,8 @@ $image-sizes: (
       }
     }
 
-    &.scale {
+    &.ls-blur-up-img,
+    &.scale:not(.ls-is-cached) {
       opacity: 0;
       transform: scale(0.9);
       &.lazyloaded {

data/app/pb_kits/playbook/pb_image/_image.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import classnames from 'classnames'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import 'lazysizes';
+import 'lazysizes/plugins/blur-up/ls.blur-up';
 
 type ImageType = {
   alt?: string,
@@ -42,16 +44,18 @@ const Image = (props: ImageType): React.ReactElement => {
   const dataProps = buildDataProps(data)
 
   return (
-    <img
-        {...ariaProps}
-        {...dataProps}
-        alt={alt}
-        className={classes}
-        data-src={url}
-        id={id}
-        onError={onError}
-        src={url}
-    />
+    <>
+      <img
+          {...ariaProps}
+          {...dataProps}
+          alt={alt}
+          className={classes}
+          data-src={url}
+          id={id}
+          onError={onError}
+          src={url}
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/playbook-rails.js

@@ -11,6 +11,7 @@ window.datePickerHelper = datePickerHelper
 
 // Lazy image loading
 import 'lazysizes'
+import 'lazysizes/plugins/blur-up/ls.blur-up'
 
 import PbCollapsible from './pb_collapsible'
 PbCollapsible.start()

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

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/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.26.0"
-  VERSION = "10.27.0.pre.datepicker1"
+  VERSION = "10.27.0.pre.lazysizes1"
 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: 10.27.0.pre.lazysizes1
 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-05-25 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
@@ -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

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;
-}