playbook_ui 10.6.2.pre.alpha.dep → 10.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 361df619e970d5e3d935da11689effd50fda787b550e94a0b2ffa918d6d4e558
-  data.tar.gz: 725ccf3c38f4cb117bf8845bc7d5cdf852f1146b70e632e3cc2456a354d3301b
+  metadata.gz: 4cc29f190a9363d0d6a74453b37c8807e0e81533b81f723f355581ee48fe3334
+  data.tar.gz: d40f1847c1dc95b50c33efed09025c72b21eadd8074db0ba37f0264d23f5dd0d
 SHA512:
-  metadata.gz: 00f7c8a62559d90263a71aaeba3f837c37448e170eff51eee848964321028a6fc7ac1e19a9341a98140d474adc7c9081ab40f8a004335058e6a3549602b4b3d1
-  data.tar.gz: 07d4883c55d61a9e8e2ced35c43d738995a4bb7fe3f8625e7d2b2744bbf0bac181846216676cf5f5e2e598a9496063ff0c476a1356e538b78e922803391b4120
+  metadata.gz: 281a0091d738cf52dfa459683d9be8a3ce94da37254647461942be3de9a1ab973ef2204f9cf3b071ba5150ca7010d1d661ba22674f2faf0da98568da5440fc69
+  data.tar.gz: bac6f97aa5b91c888cc50d929e12d9090963b597f43fdfb11dd238f7f6b9683a8adf9960aee6a500422d1a41a6496996901c3a9f962c4aa9f16f73002c2f7f35

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

@@ -27,6 +27,7 @@ type DatePickerProps = {
   hideIcon?: Boolean,
   hideLabel?: Boolean,
   id?: String,
+  inLine?: Boolean,
   inputAria?: object,
   inputData?: object,
   inputOnChange?: (String) => void,
@@ -59,6 +60,7 @@ const DatePicker = (props: DatePickerProps) => {
     hideIcon = false,
     hideLabel = false,
     id,
+    inLine = true,
     inputAria,
     inputData,
     inputOnChange,
@@ -92,6 +94,7 @@ const DatePicker = (props: DatePickerProps) => {
       disableWeekdays: disableWeekdays,
       format: format,
       hideIcon: hideIcon,
+      inLine: inLine,
       maxDate: maxDate,
       minDate: minDate,
       mode: mode,
@@ -137,6 +140,7 @@ const DatePicker = (props: DatePickerProps) => {
             placeholder={placeholder}
             value={inputValue}
         />
+
         <If condition={!hideIcon}>
           <div
               className={iconWrapperClass()}
@@ -148,6 +152,28 @@ const DatePicker = (props: DatePickerProps) => {
             />
           </div>
         </If>
+
+        <If condition={hideIcon && inLine}>
+          <div
+              className={iconWrapperClass()}
+              id={`${pickerId}-icon-plus`}
+          >
+            <Icon
+                className="date-picker-plus-icon"
+                icon="plus"
+            />
+          </div>
+          <div
+              className={iconWrapperClass()}
+              id={`${pickerId}-angle-down`}
+          >
+            <Icon
+                className="angle_down_icon"
+                icon="angle-down"
+            />
+          </div>
+        </If>
+
       </div>
     </div>
   )

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

@@ -2,6 +2,7 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/colors";
 @import "./sass_partials/flatpickr_styles";
+@import "./sass_partials/inline_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -36,5 +37,5 @@
       border-color: $primary;
     }
   }
-  
+
 }

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -32,6 +32,31 @@
         }) %>
       </div>
     <% end %>
+
+    <!-- Inline -->
+    <% if object.hide_icon && object.inline %>
+      <!-- Plus Icon -->
+      <div
+          class="<%= object.icon_wrapper_class %>"
+          id="<%= object.picker_id %>-icon-plus"
+      >
+        <%= pb_rails("icon", props: {
+          classname: "plus-icon",
+          icon: "plus"
+        }) %>
+      </div>
+
+      <!-- Angle Down Icon -->
+      <div
+          class="<%= object.icon_wrapper_class %>"
+          id="<%= object.picker_id %>-angle-down"
+      >
+        <%= pb_rails("icon", props: {
+          classname: "angle_down_icon",
+          icon: "angle-down"
+        }) %>
+      </div>
+    <% end %>
   </div>
 
   <%= javascript_tag do %>

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

@@ -24,6 +24,8 @@ module Playbook
                        default: false
       prop :hide_label, type: Playbook::Props::Boolean,
                         default: false
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label, type: Playbook::Props::String,
                    default: "Date Picker"
       prop :input_aria, type: Playbook::Props::Hash,
@@ -57,6 +59,7 @@ module Playbook
           disableWeekdays: disable_weekdays,
           format: format,
           hideIcon: hide_icon,
+          inline: inline,
           maxDate: max_date,
           minDate: min_date,
           mode: mode,

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

@@ -0,0 +1,17 @@
+<%= pb_rails("date_picker", props: {
+  classname: "inline-date-picker",
+  hide_icon: true,
+  inline: true,
+  picker_id: "date-picker-inline"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
+    <!-- Display the angle-down icon when a date has been selected -->
+    const showAngleDownHandler = () => {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+    fpInline.config.onChange.push(showAngleDownHandler)
+  })
+<% end %>

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerInline = (props) => {
+  const showAngleDownHandler = (dateSelected) => {
+    if (dateSelected) {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+  }
+
+  return (
+    <div>
+      <DatePicker
+          className="inline-date-picker"
+          hideIcon
+          inLine
+          onChange={showAngleDownHandler}
+          pickerId="date-picker-inline"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerInline

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

@@ -1,5 +1,5 @@
 examples:
-  
+
   rails:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
@@ -15,8 +15,9 @@ examples:
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
   - date_picker_anti_patterns: Anti-Patterns
-  
-  
+  - date_picker_inline: Inline
+
+
   react:
   - date_picker_default: Default
   - date_picker_hide_icon: Hide Input Icon
@@ -32,3 +33,4 @@ examples:
   - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_inline: Inline

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

@@ -12,3 +12,4 @@ export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
 export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
+export { default as DatePickerInline } from './_date_picker_inline.jsx'

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

@@ -0,0 +1,169 @@
+  /*
+    === Date Picker States ===
+    Default - No value in date picker - display grey Plus icon
+    Hover - No value in date picker - display blue Plus icon
+   - After Value in Date Picker -
+      Default - display grey caret icon
+      Hover - display blue caret icon
+  */
+[class^=pb_date_picker_kit] {
+  /*Default - No value in date picker*/
+  &.inline-date-picker {
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          color: $slate;
+          display: inline-block;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $primary;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $text_lt_light;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $primary;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      border: none;
+      padding: 5px 5px 5px 10px;
+      background-color: #FFF;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}
+
+/*
+  DARK MODE
+*/
+[class^=pb_date_picker_kit].dark {
+  &.inline-date-picker {
+    &:not(:hover) {
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &:hover {
+      [class^="pb_text_input_kit"] .text_input_wrapper input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+        color: $white;
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    &.show-angle-down-icon {
+      &:not(:hover) {
+        #date-picker-inline-angle-down {
+          svg {
+            display: inline-block;
+            color: $white;
+          }
+        }
+        #date-picker-inline-icon-plus {
+          svg {
+            display: none;
+          }
+        }
+      }
+      #date-picker-inline-icon-plus {
+        svg {
+          display: none;
+        }
+      }
+      #date-picker-inline-angle-down {
+        svg {
+          display: inline-block;
+          color: $white;
+        }
+      }
+    }
+    #date-picker-inline,
+    #date-picker-inline .active {
+      background-color: rgba($white,.10);
+      border: none;
+      padding: 5px 5px 5px 10px;
+      &:hover {
+        background: rgba(0,130,255,0.1);
+        transition: background-color 0.2s ease;
+        box-shadow: none;
+      }
+    }
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
+      height: 33px;
+      border: none;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -115,9 +115,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
     if (!trixEditorContainer) return
 
-    if (clickedElement.nodeName === 'A' && clickedElement.hasAttribute('href')) {
-      window.open(clickedElement.href)
-    }
+    const anchorElement = clickedElement.closest('a')
+    if (!anchorElement) return
+
+    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
   }
 
   const handleClick = (event) => {

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* 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; }
+*{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/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.5.0"
-  VERSION = "10.6.2.pre.alpha.dep"
+  PREVIOUS_VERSION = "10.6.0"
+  VERSION = "10.7.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.6.2.pre.alpha.dep
+  version: 10.7.0
 platform: ruby
 authors:
 - Power UX
@@ -661,6 +661,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
@@ -683,6 +685,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.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
@@ -2082,9 +2085,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.0.3
 signing_key: