playbook_ui 12.25.0 → 12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown794

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c0e138725ae04e9e300cea544d787219534b5da851b11840c536622e6a94c6c
-  data.tar.gz: '067282a70e9f2e6277f85bb62ca4eb398a6f3e001f6acfcd36e445bbd141b322'
+  metadata.gz: 360413b8af66e57c96b50f7a3d42e090570ce350ffaa9ec7d316ce5f3cffd9df
+  data.tar.gz: d96327fc8f503da031ffb1cfe9d5dfde31551860650d0ae01a0cc5e249fa5114
 SHA512:
-  metadata.gz: d034799f6965ecd6d82823ac00d5392c5427ff175b322b0a33fbed74fbebfa558207a4c6372b8aca269c3d0e14a2acf4e0edc0cfcaddf8ebc66325be62614325
-  data.tar.gz: 0ebf023711e4150a1a610f5eee2ae3d9a5c3499c4f15222fe84a94a9e8aaf53c2501889b655840241c1f4a94111d72ed8216a821be22271049f9155b500466bf
+  metadata.gz: 5350397053b9dba7747150cf2f3a85d074456ecd0afbc70ebe68175c53c7840983427d4c38daf97423e3d09136ce0db11ad9445e38dbd49dcd46f4060f59cb4a
+  data.tar.gz: 4422d0c952be46f567154bcd58037fb66763aa44cddfc47179de84b62d335083b055ac0edf97b616674e7b5861ff2d6f18b70ca1b41cc12e2ecf22df1be1a89a

data/app/pb_kits/playbook/_playbook.scss

@@ -5,6 +5,7 @@
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
+@import 'pb_detail/detail';
 @import 'pb_title/title';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';

data/app/pb_kits/playbook/index.js

@@ -31,6 +31,7 @@ export { default as DateStacked } from './pb_date_stacked/_date_stacked'
 export { default as DateTime } from './pb_date_time/_date_time'
 export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
 export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
+export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
 export { default as FileUpload } from './pb_file_upload/_file_upload'

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md

@@ -1 +1,82 @@
-![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+In the world of design, consistency is key. Whether you're designing a website, app, or product, having a consistent visual language can make all the difference. That's where design systems come in.
+
+A design system is a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work. It's a way to standardize your design language, making it easier for your team to work together and for your users to navigate your products.
+
+In this article, we'll explore the various elements of a design system and how they can be used to create a cohesive and effective design language.
+
+### Headings
+Headings are an essential component of any design system. They help organize content, provide visual hierarchy, and make it easier for users to scan and find what they're looking for. A good design system will have headings of various sizes, ranging from H1 (the largest) to H6 (the smallest). Here's an example:
+
+# H1: Main Title Headings
+## H2: Headings
+### H3: Subheadings
+#### H4: Sub-Subheadings
+
+![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
+
+### Lists
+Lists are another important component of a design system. They help organize content into easily digestible chunks, making it easier for users to read and understand. There are two types of lists: ordered and unordered.
+
+Ordered lists are numbered, and each item is listed in a specific order. For example:
+
+1. Headings
+2. Lists
+3. Blockquotes
+4. Links
+5. Bold
+6. Underline
+7. Code Blocks
+8. Inline Code
+9. Example Tables
+10. Horizontal Rules
+
+Unordered lists, on the other hand, use bullet points to separate each item. For example:
+
+* Headings
+* Lists
+* Blockquotes
+* Links
+* Bold
+* Underline
+* Code Blocks
+* Inline Code
+* Example Tables
+* Horizontal Rules
+
+### Blockquotes
+Blockquotes are used to highlight a particular section of text or quote. They’re often used to emphasize an important point or to provide context. Here’s an example:
+
+> “Design systems are a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work.” - ChatGPT
+
+
+### Links
+Links are an important part of any design system. They allow users to navigate between different pages and sections of your product. When using links in your design system, it’s important to make sure they’re consistent in color, size, and style. Here’s an example:
+Click here to learn more about design systems.
+
+### Bold, Underline, & Italics
+**Bold** and _underline_ are used to *highlight specific words* or phrases within ~~a block of~~ text. They help draw the user’s attention to important information. Here’s an example: *Design systems are* a collection of **reusable components**, **guidelines**, and **assets** that help ensure _consistency across all of your design work_.
+
+### Code Blocks and Inline Code
+Code blocks and `inline code` are used to display and highlight code within a block of text. This is especially useful for developers who need to reference code snippets in their work. 
+
+Here’s an example:
+
+```js
+function greet() {
+	console.log(“Hello, world!”);
+}
+```
+
+### Example Tables
+Example tables are used to display data in a clear and organized way. They help users compare and analyze information quickly. Here’s an example:
+
+| Tables   |      Are      |  Cool |
+|----------|:-------------:|------:|
+| col 1 is |  left-aligned | $1600 |
+| col 2 is |    centered   |   $12 |
+| col 3 is | right-aligned |    $1 |
+
+---
+
+### Horizontal Rules
+Horizontal rules are used to separate sections of content visually. They help break up long blocks of text and make it easier for users

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

@@ -6,6 +6,7 @@
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
 @import "./sass_partials/input_styles";
+@import "./sass_partials/quick_pick_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -26,7 +27,32 @@
       @include transition_default;
       border-color: $primary;
     }
+    .add-on-card {
+      border-color: $primary;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light,$opacity_5);
+      }
+    }
+  }
+  .text_input_wrapper_add_on .add-on-icon {
+    color: $text_lt_light
   }
+
+  .text_input_wrapper_add_on .add-on-right .text_input{
+    cursor: pointer;
+  }
+  
+}
+
+
+.pb_popover_reference_wrapper {
+  display: unset !important
 }
 
 .flatpickr-calendar {

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

@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: any,
+  inputValue?: string,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,9 +39,10 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week",
+  selectionType?: "month" | "week"| "quickpick",
   showTimezone?: boolean,
   staticPosition: boolean,
+  thisRangesEndToday?: boolean,
   timeFormat?: string,
   type?: string,
   yearRange?: number[],
@@ -88,6 +89,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     selectionType = '',
     showTimezone = false,
     staticPosition = true,
+    thisRangesEndToday = false,
     yearRange = [1900, 2100],
   } = props
 
@@ -96,46 +98,47 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    enableTime,
+    format,
+    hideIcon,
+    inLine,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    onClose,
+    pickerId,
+    plugins,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    position,
+    positionElement,
+    selectionType,
+    showTimezone,
+    staticPosition,
+    thisRangesEndToday,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+})
   const filteredProps = {...props}
   delete filteredProps?.position
 
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
     globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
-
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      onClose,
-      pickerId,
-      plugins,
-      // @ts-ignore
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  })
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -150,80 +153,84 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     return base
   }
 
+
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <div
-        {...inputAriaProps}
-        {...inputDataProps}
-        className="input_wrapper">
+          {...inputAriaProps}
+          {...inputDataProps}
+          className="input_wrapper"
+      >
 
         <Caption
-          className="pb_date_picker_kit_label"
-          text={hideLabel ? null : label}
+            className="pb_date_picker_kit_label"
+            text={hideLabel ? null : label}
         />
-
-        <div className="date_picker_input_wrapper">
-          <input
-            autoComplete="off"
-            className="date_picker_input"
-            disabled={disableInput}
-            id={pickerId}
-            name={name}
-            onChange={inputOnChange}
-            placeholder={placeholder}
-            value={inputValue}
-          />
-
-          {error && <Body
-            status="negative"
-            text={error}
-            variant={null}
-          />
-          }
-        </div>
-
-        {!hideIcon &&
-          <div
-            className={iconWrapperClass()}
-            id={`cal-icon-${pickerId}`}
-          >
-            <Icon
-              className="cal_icon"
-              icon="calendar-alt"
-            />
-          </div>
-        }
-
-        {hideIcon && inLine ?
-          <div>
-            <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 className="date_picker_input_wrapper">
+              <input
+                  autoComplete="off"
+                  className="date_picker_input"
+                  disabled={disableInput}
+                  id={pickerId}
+                  name={name}
+                  onChange={inputOnChange}
+                  placeholder={placeholder}
+                  value={inputValue}
               />
+
+              {error &&
+                  <Body
+                      status="negative"
+                      text={error}
+                      variant={null}
+                  />
+              }
             </div>
-          </div>
-          : null}
+
+            {!hideIcon &&
+              <div
+                  className={iconWrapperClass()}
+                  id={`cal-icon-${pickerId}`}
+              >
+                <Icon
+                    className="cal_icon"
+                    icon="calendar-alt"
+                />
+              </div>
+            }
+
+            {hideIcon && inLine ?
+              <div>
+                <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>
+              </div>
+              : null
+            }
+          </>
       </div>
     </div>
   )
 }
-
 export default DatePicker

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

@@ -20,6 +20,16 @@
         placeholder: object.placeholder,
         required: object.required,
       }) %>
+      <% if object.selection_type == "quickpick" %>
+        <%= pb_rails("text_input", props: {
+          id: "#{object.start_date}-#{object.picker_id}",
+          name: object.start_date,
+        }) %>
+        <%= pb_rails("text_input", props: {
+          id: "#{object.end_date}-#{object.picker_id}",
+          name: object.end_date,
+        }) %>
+      <% end %>
     <% end %>
     <% if !object.hide_icon %>
       <div
@@ -60,8 +70,26 @@
   </div>
 
   <%= javascript_tag do %>
+    if (<%= object.selection_type == "quickpick" %>) {
+      const startDate = document.getElementById("<%= object.start_date %>-<%= object.picker_id %>")
+      if (startDate) startDate.style.display = "none"
+
+      const endDate = document.getElementById("<%= object.end_date %>-<%= object.picker_id %>")
+      if (endDate) endDate.style.display = "none"
+    }
+
     window.addEventListener("DOMContentLoaded", () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+
+      if (<%= object.selection_type == "quickpick" %>) {
+        document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date %>-<%= object.picker_id %>")
+          const endDate = document.getElementById("<%= object.end_date %>-<%= object.picker_id %>")
+          const splittedValue = target.value.split(" → ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -19,6 +19,8 @@ module Playbook
                               default: []
       prop :enable_time, type: Playbook::Props::Boolean,
                          default: false
+      prop :end_date, type: Playbook::Props::String,
+                      default: "endDate"
       prop :error, type: Playbook::Props::String
       prop :format, type: Playbook::Props::String,
                     default: "m/d/Y"
@@ -43,20 +45,24 @@ module Playbook
                        required: true
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
-      prop :plugins, type: Playbook::Props::Boolean,
-                     default: false,
-                     deprecated: true
+      prop :plugins,  type: Playbook::Props::Boolean,
+                      default: false,
+                      deprecated: true
       prop :position, type: Playbook::Props::String,
                       default: "auto"
       prop :position_element, type: Playbook::Props::String
       prop :scroll_container, type: Playbook::Props::String
       prop :selection_type, type: Playbook::Props::Enum,
-                            values: %w[week month none],
+                            values: %w[week month quickpick none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false
+      prop :start_date, type: Playbook::Props::String,
+                        default: "startDate"
       prop :static_position, type: Playbook::Props::Boolean,
                              default: true
+      prop :this_ranges_end_today, type: Playbook::Props::Boolean,
+                                   default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -88,6 +94,7 @@ module Playbook
           selectionType: selection_type,
           showTimezone: show_timezone,
           staticPosition: static_position,
+          thisRangesEndToday: this_ranges_end_today,
           yearRange: year_range,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react'
+import moment from 'moment'
 import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
 
 import DatePicker from './_date_picker'
@@ -10,7 +11,6 @@ import { getTimezoneText } from './plugins/timeSelect'
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
-
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,4 +158,47 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
+  test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
+    const testId = 'datepicker-quick-pick'
+    render(
+      <DatePicker
+          allowInput
+          data={{ testid: testId }}
+          mode="range"
+          pickerId="date-picker-quick-pick"
+          placeholder="mm/dd/yyyy → mm/dd/yyyy"
+          selectionType="quickpick"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('mm/dd/yyyy → mm/dd/yyyy')
+
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    const today = within(kit).getByText('Today')
+    const thisYear = within(kit).getByText('This year')
+    await waitFor(() => {
+      expect(today).toBeInTheDocument()
+      expect(thisYear).toBeInTheDocument()
+    })
+
+    fireEvent(
+      thisYear,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " → " + moment().format('MM/DD/YYYY'))
+    })
+
+  })
 })

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

@@ -3,6 +3,7 @@ import { BaseOptions } from 'flatpickr/dist/types/options'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
+import quickPickPlugin from './plugins/quickPick'
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -19,10 +20,11 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
+  selectionType?: "month" | "week" | "quickpick" | "",
   onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
-  selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
+  thisRangesEndToday?: boolean,
   timeCaption?: string,
   timeFormat?: string,
   yearRange: number[]
@@ -51,6 +53,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     selectionType,
     showTimezone,
     staticPosition = true,
+    thisRangesEndToday = false,
     timeCaption = 'Select Time',
     timeFormat = 'at h:i K',
     yearRange,
@@ -89,19 +92,24 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = () => {
-    let pluginList = []
+  const setPlugins = (thisRangesEndToday: boolean) => {
+    const pluginList = []
 
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
+
+    } else if (selectionType === "quickpick") {
+    //------- QUICKPICK VARIANT PLUGIN -------------//
+    pluginList.push(quickPickPlugin(thisRangesEndToday))
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
+
     return pluginList
   }
 
@@ -144,6 +152,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
+    locale: {
+      rangeSeparator: ' → '
+    },
     maxDate,
     minDate,
     mode,
@@ -164,17 +175,40 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(),
+    plugins: setPlugins(thisRangesEndToday),
     position,
     positionElement: getPositionElement(positionElement),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: staticPosition,
   })
 
+
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================
 
+  // opens flatpickr instance when calander icon is clicked so we can have a hover state on icon
+  // window.addEventListener("DOMContentLoaded", (event) => {
+  //   event.preventDefault();
+  //   function attachIconClickHandler() {
+  //     const variantArr = document.querySelectorAll(`#cal-icon-${pickerId}`)
+  //     if (!variantArr) {
+  //       setTimeout(attachIconClickHandler, 100);
+  //       return;
+  //     }
+
+  //     const instance = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
+  //     variantArr.forEach((icon) => {
+  //       icon.addEventListener("click", function(event) {
+  //         event.preventDefault();
+  //         instance.open()
+  //       });
+  //     })
+  //   }
+
+  //   attachIconClickHandler();
+  // });
+
   // Assign dynamically sourced flatpickr instance to variable
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`

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

@@ -0,0 +1,8 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy → mm/dd/yyyy",
+  selection_type: "quickpick"
+}) %>
+