playbook_ui 12.38.0.pre.alpha.PBNTR78selectkitmultipleprop1094 → 12.38.0.pre.alpha.PLAY932removemomentqp1088

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: db3404c038f74f5dc80f8ac748ec308d00cb5608d770d128a913c002779eff95
-  data.tar.gz: 52184a80d6d7f1c60a26602b0df4c67add01871f8b2a68a96f486ab45f6bd356
+  metadata.gz: e1acc22a656ca63996a3b72d620ec59eb2fd323be9c3d6672449495c8c6781e3
+  data.tar.gz: 9029b42a09b0db1639360ae2addb2f6f35fd9ec488af53d829dd241e88cce167
 SHA512:
-  metadata.gz: c94c56cb47932177e285f3d6f81778c6ce490f50f4a47d1efc51aa99c48f047f97dc6db289041cf5d6fedb5a815d7980bc530df015bede6bbc965c57fe0e8dfc
-  data.tar.gz: 2fe8f9b14b8e5ac44cbab98f38625f71cce0fb8f580108cbb439c024b4dad0541a6662fb3e77df798fa88ff6a689ed68de89ddb4c95139d834f5da10a14b2ffb
+  metadata.gz: faf876a9e1a26091d6cc292382e99220ca51b8937616cf96d793dbf886572daff5dc7a65bb4ce9c8d2e4c53dc2674acc61dc6e03a2e41db70e1ee2868f9f2a39
+  data.tar.gz: a5c43e9e88c057548d4bc656352ae3a4fa92f6d8119ff6c339933d25e0baea9aa39e45888826a720489b1b3a38efb82823e01d94130301b09c27d7eb10c90013

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

@@ -1,16 +1,26 @@
 /* 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'
+import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
-
-
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
+const formatDate = (date) => {
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = (date.getDate()).toString().padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+
+Date.prototype.formatDate = function () {
+  return formatDate(this)
+}
+
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,6 +168,7 @@ 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(
@@ -197,10 +208,10 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().endOf('year').format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
     })
-
   })
+
   test('shows DatePicker QuickPick ranges ending today', async () => {
     const testId = 'datepicker-quick-pick-ends-today'
     render(
@@ -225,7 +236,7 @@ describe('DatePicker Kit', () => {
         cancelable: true,
       }),
     )
-    
+
     const thisYear = within(kit).getByText('This year')
 
     fireEvent(
@@ -237,8 +248,7 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
-
   })
 })

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import DateTime from '../../pb_kit/dateTime';
 
 type FpTypes = {
   setDate: (arg0: any, arg1: boolean) => void,
@@ -23,37 +23,44 @@ let activeLabel = ""
 
 const quickPickPlugin = (thisRangesEndToday: boolean) => {
   return function (fp: FpTypes & any): any {
-    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
-    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
-    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
-    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+    const today = new Date()
+    const yesterday = DateTime.getYesterdayDate(new Date())
+
+    const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date())
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : DateTime.getLastDayOfWeek(new Date())
+    const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date())
+    const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date())
+
+    const thisMonthStartDate = DateTime.getMonthStartDate(new Date())
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : DateTime.getMonthEndDate(new Date())
+    const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date())
+    const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date())
+
+    const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date())
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : DateTime.getQuarterEndDate(new Date())
+    const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date())
+    const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date())
+
+    const thisYearStartDate = DateTime.getYearStartDate(new Date())
+    const thisYearEndDate = thisRangesEndToday ? new Date() : DateTime.getYearEndDate(new Date())
+    const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
+    const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
 
     // variable that holds the ranges available
     const ranges = {
-      'Today': [new Date(), new Date()],
-      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
-      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
-      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
-      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
-      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
-      'Last week': [
-        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
-        moment().subtract(1, 'week').endOf('isoWeek').toDate()
-      ],
-      'Last month': [
-        moment().subtract(1, 'month').startOf('month').toDate(),
-        moment().subtract(1, 'month').endOf('month').toDate()
-      ],
-      'Last quarter': [
-        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
-        moment().subtract(1, 'quarter').endOf('quarter').toDate()
-      ],
-      'Last year': [
-        moment().subtract(1, 'year').startOf('year').toDate(),
-        moment().subtract(1, 'year').endOf('year').toDate()
-      ]
+      'Today': [today, today],
+      'Yesterday': [yesterday, yesterday],
+      'This week': [thisWeekStartDate, thisWeekEndDate],
+      'This month': [thisMonthStartDate, thisMonthEndDate],
+      'This quarter': [thisQuarterStartDate, thisQuarterEndDate],
+      'This year': [thisYearStartDate, thisYearEndDate],
+      'Last week': [lastWeekStartDate, lastWeekEndDate],
+      'Last month': [lastMonthStartDate, lastMonthEndDate],
+      'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
+      'Last year': [lastYearStartDate, lastYearEndDate]
     }
-    //creating the ul element for the nav dropdown and giving it classnames
+
+    // creating the ul element for the nav dropdown and giving it classnames
     const rangesNav = document.createElement('ul');
 
     // creating the pluginData object that will hold the properties of this plugin
@@ -64,11 +71,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
     };
 
     /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
+      * @param {string} label
+      * @returns HTML Element
+      */
 
-    //function for creating the range buttons in the nav
+    // function for creating the range buttons in the nav
     const addRangeButton = (label: string) => {
 
       // creating new elements to mimick selectable card component
@@ -88,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       // append the li item to the ul rangeNav prop
       pluginData.rangesNav.appendChild(item);
 
-      // return the ranges buton prop
+      // return the ranges button prop
       return pluginData.rangesButtons[label];
     };
 
@@ -98,7 +105,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       if (current) {
         current.classList.remove('active');
       }
-     
+
       if (selectedDates.length > 0 && activeLabel) {
         pluginData.rangesButtons[activeLabel].classList.add('active');
       }
@@ -109,16 +116,15 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
         selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
     }
 
-
     return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
 
-            const start = moment(range[0]).toDate();
-            const end = moment(range[1]).toDate();
+            const start = new Date(range[0]);
+            const end = new Date(range[1]);
 
             if (!start) {
               fp.clear();
@@ -170,4 +176,4 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
   };
 }
 
-export default quickPickPlugin;
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -116,7 +116,6 @@ export const toIso = (newDate: Date | string): string => {
 }
 
 export const fromNow = (newDate: Date | string): string => {
-
   const startDate = formatDate(newDate).getTime()
   const endDate = new Date().getTime()
   const elapsedTime = endDate - startDate
@@ -154,6 +153,193 @@ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): st
   }
 }
 
+// For quickPick.tsx
+// Yesterday
+export const getYesterdayDate = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const yesterday = new Date()
+  yesterday.setDate(today.getDate() - 1)
+
+  return yesterday
+}
+
+// Weeks
+export const getFirstDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: Start of week (Monday) has a time of 00:00:00
+  const firstDayOfWeek = new Date(today.setHours(0, 0, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToSubtract = isSunday ? 6 : (dayOfWeek - 1)
+  firstDayOfWeek.setDate(today.getDate() - daysToSubtract)
+
+  return firstDayOfWeek
+}
+
+export const getLastDayOfWeek = (newDate: Date | string): Date => {
+  const today = formatDate(newDate)
+  const dayOfWeek = today.getDay()
+  // Replicate Moment.js: End of week (Sunday) has a time of 23:59:59
+  const lastDayOfWeek = new Date(today.setHours(23, 59, 59, 0))
+  const isSunday = dayOfWeek === 0
+
+  const daysToAdd = isSunday ? 0 : (7 - dayOfWeek)
+  lastDayOfWeek.setDate(today.getDate() + daysToAdd)
+
+  return lastDayOfWeek
+}
+
+export const getPreviousWeekStartDate = (newDate: Date | string): Date => {
+  const firstDayOfWeek = getFirstDayOfWeek(newDate)
+  const firstDayOfPreviousWeek = new Date(
+    firstDayOfWeek.getFullYear(),
+    firstDayOfWeek.getMonth(),
+    firstDayOfWeek.getDate() - 7
+  )
+
+  return firstDayOfPreviousWeek
+}
+
+export const getPreviousWeekEndDate = (newDate: Date | string): Date => {
+  const lastDayOfWeek = getLastDayOfWeek(newDate)
+  const lastDayOfPreviousWeek = new Date(
+    lastDayOfWeek.getFullYear(),
+    lastDayOfWeek.getMonth(),
+    lastDayOfWeek.getDate() - 7,
+    lastDayOfWeek.getHours(),
+    lastDayOfWeek.getMinutes(),
+    lastDayOfWeek.getSeconds()
+  )
+
+  return lastDayOfPreviousWeek
+}
+
+// Months
+export const getMonthStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1)
+
+  return firstDayOfMonth
+}
+
+export const getMonthEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  // Replicate Moment.js: End of month has a time of 23:59:59
+  const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
+
+  return lastDayOfMonth
+}
+
+export const getPreviousMonthStartDate = (newDate: Date | string): Date => {
+  const firstDayOfMonth = getMonthStartDate(newDate)
+  const firstDayOfPreviousMonth = new Date(
+    firstDayOfMonth.getFullYear(),
+    firstDayOfMonth.getMonth() - 1,
+    firstDayOfMonth.getDate()
+  )
+
+  return firstDayOfPreviousMonth
+}
+
+export const getPreviousMonthEndDate = (newDate: Date | string): Date => {
+  const lastDayOfMonth = getMonthEndDate(newDate)
+  const lastDayOfPreviousMonth = new Date(
+    lastDayOfMonth.getFullYear(),
+    lastDayOfMonth.getMonth() - 1,
+    lastDayOfMonth.getDate(),
+    lastDayOfMonth.getHours(),
+    lastDayOfMonth.getMinutes(),
+    lastDayOfMonth.getSeconds()
+  )
+
+  return lastDayOfPreviousMonth
+}
+
+// Quarters
+export const getQuarterStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfQuarter = new Date(date.getFullYear(), quarter * 3, 1)
+
+  return startOfQuarter
+}
+
+export const getQuarterEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const quarter = Math.floor(date.getMonth() / 3)
+  const startOfNextQuarter = new Date(date.getFullYear(), (quarter + 1) * 3, 1)
+  // Replicate Moment.js: End of quarter has a time of 23:59:59
+  const endOfQuarter = new Date(startOfNextQuarter.getTime() - 1)
+
+  return endOfQuarter
+}
+
+export const getPreviousQuarterStartDate = (newDate: Date | string): Date => {
+  const startOfQuarter = getQuarterStartDate(newDate)
+  const firstDayOfPreviousQuarter = new Date(
+    startOfQuarter.getFullYear(),
+    startOfQuarter.getMonth() - 3,
+    startOfQuarter.getDate()
+  )
+
+  return firstDayOfPreviousQuarter
+}
+
+export const getPreviousQuarterEndDate = (newDate: Date | string): Date => {
+  const endOfQuarter = getQuarterEndDate(newDate)
+  const lastDayOfPreviousQuarter = new Date(
+    endOfQuarter.getFullYear(),
+    endOfQuarter.getMonth() - 3,
+    endOfQuarter.getDate(),
+    endOfQuarter.getHours(),
+    endOfQuarter.getMinutes(),
+    endOfQuarter.getSeconds()
+  )
+
+  return lastDayOfPreviousQuarter
+}
+
+// Years
+export const getYearStartDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const startOfYear = new Date(date.getFullYear(), 0, 1)
+
+  return startOfYear
+}
+
+export const getYearEndDate = (newDate: Date | string): Date => {
+  const date = formatDate(newDate)
+  const endOfYear = new Date(date.getFullYear(), 11, 31, 23, 59, 59)
+
+  return endOfYear
+}
+
+export const getPreviousYearStartDate = (newDate: Date | string): Date => {
+  const startOfYear = getYearStartDate(newDate)
+  const firstDayOfPreviousYear = new Date(
+    startOfYear.getFullYear() - 1,
+    startOfYear.getMonth(),
+    startOfYear.getDate()
+  )
+
+  return firstDayOfPreviousYear
+}
+
+export const getPreviousYearEndDate = (newDate: Date | string): Date => {
+  const endOfYear = getYearEndDate(newDate)
+  const lastDayOfPreviousYear = new Date(
+    endOfYear.getFullYear() - 1,
+    endOfYear.getMonth(),
+    endOfYear.getDate(),
+    endOfYear.getHours(),
+    endOfYear.getMinutes(),
+    endOfYear.getSeconds()
+  )
+
+  return lastDayOfPreviousYear
+}
+
 export default {
   toMinute,
   toHour,
@@ -170,4 +356,21 @@ export default {
   toIso,
   fromNow,
   toCustomFormat,
+  getYesterdayDate,
+  getFirstDayOfWeek,
+  getLastDayOfWeek,
+  getPreviousWeekStartDate,
+  getPreviousWeekEndDate,
+  getMonthStartDate,
+  getMonthEndDate,
+  getPreviousMonthStartDate,
+  getPreviousMonthEndDate,
+  getQuarterStartDate,
+  getQuarterEndDate,
+  getPreviousQuarterStartDate,
+  getPreviousQuarterEndDate,
+  getYearStartDate,
+  getYearEndDate,
+  getPreviousYearStartDate,
+  getPreviousYearEndDate
 }

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -2,7 +2,6 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
-@import "../tokens/spacing";
 
 [class^=pb_select] {
   select {
@@ -33,42 +32,6 @@
       opacity: 0.5;
     }
   }
-  select[multiple] {
-    @include pb_textarea_light;
-    @include pb_body_light;
-    background: none;
-    background-color: $white;
-    appearance: none;
-    cursor: pointer;
-    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
-    padding-right: 0px !important;
-    color: transparent !important;
-    text-shadow: 0 0 0 $text_lt_default;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding: $space_xs 0px !important;
-    max-height: unset !important;
-    @media (hover:hover) {
-      &:hover, &:active, &:focus {
-        background-color: rgba($focus_input_light, $opacity_5);
-      }
-    }
-    &:focus{
-      border-color: $primary;
-      @include transition_default;
-    }
-    option {
-      padding-left: $space_sm;
-      padding-top: $space_xxs;
-      padding-bottom: $space_xxs;
-    }
-    option:checked {
-      background-color: $hover_light;
-    }
-    option:hover {
-      background-color: $hover_light;
-    }
-  }
   option {
     color: $text_lt_default;
   }

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -124,15 +124,11 @@ const Select = ({
           htmlFor={name}
       >
         {selectBody}
-        { multiple !== true ?
-          <Icon
-              className="pb_select_kit_caret"
-              fixedWidth
-              icon="angle-down"
-          />
-          :
-          null
-        }
+        <Icon
+            className="pb_select_kit_caret"
+            fixedWidth
+            icon="angle-down"
+        />
         {error &&
           <Body
               status="negative"

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

@@ -11,8 +11,6 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
-  - select_attributes: Select W/ Attributes
-  - select_multiple: Select Multiple
 
 
 
@@ -27,4 +25,3 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
-  - select_multiple: Select Multiple

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

@@ -8,4 +8,3 @@ export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
-export { default as SelectMultiple } from './_select_multiple.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag(:div,
-  aria: object.aria,
   data: object.data,
+  aria: object.aria,
   class: object.classnames) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
@@ -19,13 +19,17 @@
           selected: object.selected,
           disabled: object.disabled_options,
         ),
-        object.all_attributes
+        id: object.id,
+        prompt: object.blank_selection,
+        disabled: object.disabled,
+        required: object.required,
+        multiple: object.multiple,
+        onchange: object.onchange,
+        include_blank: object.include_blank,
       )
       %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
-    <% if object.multiple != true %>
-      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
-    <% end %>
+    <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
   </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -6,8 +6,6 @@ require "action_view"
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
-      prop :attributes, type: Playbook::Props::Hash,
-                        default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
@@ -25,18 +23,6 @@ module Playbook
         classname + inline_class + compact_class
       end
 
-      def all_attributes
-        {
-          id: id,
-          prompt: blank_selection,
-          disabled: disabled,
-          required: required,
-          multiple: multiple,
-          onchange: onchange,
-          include_blank: include_blank,
-        }.merge(attributes)
-      end
-
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -49,20 +49,3 @@ test('returns dark class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
-
-test('returns multiple variant', () => {
-  render(
-    <Select
-        data={{ testid: "selectMultiple" }}
-        label="Favorite Food"
-        multiple
-        name="food"
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId("selectMultiple");
-  const selectElement = kit.querySelector('select');
-
-  expect(selectElement).toHaveAttribute('multiple', '');
-});