RubyGems - playbook_ui - Versions diffs - 11.0.0.pre.alpha.2 → 11.0.0 - Mend

playbook_ui 11.0.0.pre.alpha.2 → 11.0.0

Files changed (68) hide show

data/app/pb_kits/playbook/pb_checkbox/{_checkbox.jsx → _checkbox.tsx} RENAMED Viewed

@@ -1,34 +1,32 @@
-/* @flow */
 import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type CheckboxProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   checked?: boolean,
   children: Node,
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: {[key: string]: string},
   error?: boolean,
   id?: string,
   indeterminate?: boolean,
   name: string,
-  onChange: (boolean) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement>) => void,
   tabIndex: number,
   text: string,
   value: string,
-}
+} & GlobalProps
-const Checkbox = (props: CheckboxProps) => {
+const Checkbox = (props: CheckboxProps): JSX.Element => {
   const {
     aria = {},
     checked = false,
-    children = null,
+    children,
     className,
     dark = false,
     data = {},
@@ -42,12 +40,12 @@ const Checkbox = (props: CheckboxProps) => {
     value = '',
   } = props
-  const checkRef = useRef()
+  const checkRef = useRef(null)
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error, indeterminate }),
-    globalProps(props),
+    buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
+    globalProps(props),
     className
   )
@@ -58,6 +56,22 @@ const Checkbox = (props: CheckboxProps) => {
     }
   }, [indeterminate, checked])
+  const checkboxChildren = () => {
+    if (children)
+      return (children)
+    else
+    return (
+    <input
+        defaultChecked={checked}
+        name={name}
+        onChange={onChange}
+        ref={checkRef}
+        tabIndex={tabIndex}
+        type="checkbox"
+        value={value}
+      />)
+  }
   return (
     <label
         {...ariaProps}
@@ -65,20 +79,9 @@ const Checkbox = (props: CheckboxProps) => {
         className={classes}
         id={id}
     >
-      <If condition={children}>
-        {children}
-        <Else />
-        <input
-            defaultChecked={checked}
-            name={name}
-            onChange={onChange}
-            ref={checkRef}
-            tabIndex={tabIndex}
-            type="checkbox"
-            value={value}
-        />
-      </If>
-      <If condition={!indeterminate}>
+      <>{checkboxChildren()}</>
+      {!indeterminate &&
         <span className="pb_checkbox_checkmark">
           <Icon
               className="check_icon"
@@ -86,9 +89,9 @@ const Checkbox = (props: CheckboxProps) => {
               icon="check"
           />
         </span>
-      </If>
+      }
-      <If condition={indeterminate}>
+      {indeterminate &&
         <span className="pb_checkbox_indeterminate">
           <Icon
               className="indeterminate_icon"
@@ -96,12 +99,13 @@ const Checkbox = (props: CheckboxProps) => {
               icon="minus"
           />
         </span>
-      </If>
+      }
       <Body
           className="pb_checkbox_label"
           dark={dark}
           status={error ? 'negative' : null}
+          variant={null}
       >
         {text}
       </Body>

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

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 import datePickerHelper from './date_picker_helper'
@@ -22,6 +22,7 @@ type DatePickerProps = {
   disableInput?: Boolean,
   disableRange?: Array,
   disableWeekdays?: Array,
+  enableTime?: Boolean,
   error?: String,
   format?: String,
   hideIcon?: Boolean,
@@ -40,11 +41,16 @@ type DatePickerProps = {
   onChange: (String) => void,
   pickerId?: String,
   placeholder?: String,
-  plugins?: Boolean,
+  plugins: Boolean,
+  selectionType?: "month" | "week",
+  showTimezone?: Boolean,
+  timeFormat?: String,
   type?: String,
   yearRange?: Array,
 }
 const DatePicker = (props: DatePickerProps) => {
+  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
   const {
     allowInput = false,
     aria = {},
@@ -56,6 +62,7 @@ const DatePicker = (props: DatePickerProps) => {
     disableInput,
     disableRange = null,
     disableWeekdays = null,
+    enableTime = false,
     error,
     format = 'm/d/Y',
     hideIcon = false,
@@ -75,6 +82,8 @@ const DatePicker = (props: DatePickerProps) => {
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
+    selectionType = '',
+    showTimezone = false,
     yearRange = [ 1900, 2100 ],
   } = props
@@ -89,23 +98,26 @@ const DatePicker = (props: DatePickerProps) => {
   useEffect(() => {
     datePickerHelper({
-      allowInput: allowInput,
-      defaultDate: defaultDate,
-      disableDate: disableDate,
-      disableRange: disableRange,
-      disableWeekdays: disableWeekdays,
-      format: format,
-      hideIcon: hideIcon,
-      inLine: inLine,
-      maxDate: maxDate,
-      minDate: minDate,
-      mode: mode,
-      onChange: onChange,
-      pickerId: pickerId,
-      plugins: plugins,
-      yearRange: yearRange,
+      allowInput,
+      defaultDate,
+      disableDate,
+      disableRange,
+      disableWeekdays,
+      enableTime,
+      format,
+      hideIcon,
+      inLine,
+      maxDate,
+      minDate,
+      mode,
+      onChange,
+      pickerId,
+      plugins,
+      selectionType,
+      showTimezone,
+      yearRange,
     })
-  }, [])
+  })
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'

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

@@ -4,6 +4,9 @@
 @import "./sass_partials/flatpickr_styles";
 @import "./sass_partials/inline_styles";
 @import "./sass_partials/month_and_year_styles";
+@import "./sass_partials/time_selection_styles";
 [class^=pb_date_picker_kit] {
   .input_wrapper {

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

@@ -17,6 +17,8 @@ module Playbook
                            default: []
       prop :disable_weekdays, type: Playbook::Props::Array,
                               default: []
+      prop :enable_time, type: Playbook::Props::Boolean,
+                         default: false
       prop :error, type: Playbook::Props::String
       prop :format, type: Playbook::Props::String,
                     default: "m/d/Y"
@@ -42,7 +44,13 @@ module Playbook
       prop :placeholder, type: Playbook::Props::String,
                          default: "Select Date"
       prop :plugins, type: Playbook::Props::Boolean,
-                     default: false
+                     default: false,
+                     deprecated: true
+      prop :selection_type, type: Playbook::Props::Enum,
+                            values: %w[week month none],
+                            default: "none"
+      prop :show_timezone, type: Playbook::Props::Boolean,
+                           default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :year_range, type: Playbook::Props::Array,
@@ -59,6 +67,7 @@ module Playbook
           disableDate: disable_date,
           disableRange: disable_range,
           disableWeekdays: disable_weekdays,
+          enableTime: enable_time,
           format: format,
           hideIcon: hide_icon,
           inline: inline,
@@ -68,6 +77,8 @@ module Playbook
           pickerId: picker_id,
           plugins: plugins,
           required: required,
+          selectionType: selection_type,
+          showTimezone: show_timezone,
           yearRange: year_range,
         }.to_json.html_safe
       end

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

@@ -0,0 +1,160 @@
+/* eslint-disable no-console */
+import React from 'react'
+import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
+import DatePicker from './_date_picker'
+import { getTimezoneText } from './plugins/timeSelect'
+const DEFAULT_DATE = new Date()
+DEFAULT_DATE.setFullYear(2022)
+DEFAULT_DATE.setMonth(1)
+DEFAULT_DATE.setDate(1)
+DEFAULT_DATE.setHours(12)
+DEFAULT_DATE.setMinutes(0)
+describe('DatePicker Kit', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  test('renders DatePicker input field', () => {
+    const testId = 'datepicker-kit'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          pickerId="date-picker"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_date_picker_kit')
+  })
+  test('shows DatePicker date format m/d/Y', async () => {
+    const testId = 'datepicker-date'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          format="m/d/Y"
+          pickerId="date-picker-date"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    expect(input).toBeInTheDocument()
+    await waitFor(() => {
+      expect(input).toHaveValue('02/01/2022')
+    })
+  })
+  test('shows DatePicker time caption text', async () => {
+    const testId = 'datepicker-time-caption'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          enableTime
+          pickerId="date-picker-time-caption"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      const caption = within(kit).getByText('Select Time')
+      expect(caption).toBeInTheDocument()
+    })
+  })
+  test('shows DatePicker timezone text', async () => {
+    const testId = 'datepicker-timezone'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          enableTime
+          pickerId="date-picker-timezone"
+          showTimezone
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    const defaultTimezoneText = getTimezoneText(DEFAULT_DATE)
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      const timezoneText = within(kit).getByText(defaultTimezoneText)
+      expect(timezoneText).toBeInTheDocument()
+    })
+  })
+  test('shows DatePicker meridiem toggle', async () => {
+    const testId = 'datepicker-meridiem'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          enableTime
+          pickerId="date-picker-meridiem"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    const meridiemToggleAM = within(kit).getByLabelText('AM')
+    const meridiemTogglePM = within(kit).getByLabelText('PM')
+    await waitFor(() => {
+      expect(meridiemToggleAM).toBeInTheDocument()
+      expect(meridiemTogglePM).toBeInTheDocument()
+    })
+    fireEvent(
+      meridiemToggleAM,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      expect(input).toHaveValue('02/01/2022 at 12:00 AM')
+    })
+    fireEvent(
+      meridiemTogglePM,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      expect(input).toHaveValue('02/01/2022 at 12:00 PM')
+    })
+  })
+})

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

@@ -1,5 +1,7 @@
 import flatpickr from 'flatpickr'
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
+import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
+import timeSelectPlugin from './plugins/timeSelect'
 const datePickerHelper = (config) => {
   const {
@@ -8,6 +10,7 @@ const datePickerHelper = (config) => {
     disableDate,
     disableRange,
     disableWeekdays,
+    enableTime,
     format,
     maxDate,
     minDate,
@@ -16,6 +19,10 @@ const datePickerHelper = (config) => {
     pickerId,
     plugins,
     required,
+    selectionType,
+    showTimezone,
+    timeCaption = 'Select Time',
+    timeFormat = 'at h:i K',
     yearRange,
   } = config
@@ -52,9 +59,25 @@ const datePickerHelper = (config) => {
     }
   }
-  const setMonthAndYearPlugin = () => (
-    plugins ? [ monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }) ] : []
-  )
+  const setPlugins = () => {
+    let pluginList = []
+    // month and week selection
+    if (selectionType === "month" || plugins === true) {
+      pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
+    } else if ( selectionType === "week") {
+      pluginList.push(weekSelect({}))
+    }
+    // time selection
+    if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
+    return pluginList
+  }
+  const getDateFormat = () => {
+    return enableTime ? `${format} ${timeFormat}` : format
+  }
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
@@ -62,7 +85,7 @@ const datePickerHelper = (config) => {
   flatpickr(`#${pickerId}`, {
     disableMobile: true,
-    dateFormat: format,
+    dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),
     disable: disableWeekdays && disableWeekdays.length > 0 ? [
       (date) => {
@@ -86,9 +109,10 @@ const datePickerHelper = (config) => {
         )
       },
     ] : disabledParser(),
-    maxDate: maxDate,
-    minDate: minDate,
-    mode: mode,
+    enableTime,
+    maxDate,
+    minDate,
+    mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
       calendarResizer()
@@ -98,12 +122,12 @@ const datePickerHelper = (config) => {
       window.removeEventListener('resize', calendarResizer)
     }],
     onChange: [(selectedDates, dateStr) => {
-      onChange(dateStr, selectedDates)
+      onChange(dateStr, selectedDates)
     }],
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setMonthAndYearPlugin(),
+    plugins: setPlugins(),
     prevArrow: '<i class="far fa-angle-left"></i>',
     static: true,
   })
@@ -162,8 +186,10 @@ 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>')
-  }
+    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>')
+  // }
   // 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 CHANGED Viewed

	@@ -1 +1 @@
1	- <%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>
1	+ <%= 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 CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- 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.~~
1	+ By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `month`. To activate it set `selection_type` prop in a rails file to `month`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb ADDED Viewed

@@ -0,0 +1,6 @@
+<%= pb_rails("date_picker", props: {
+  default_date: DateTime.now.utc.iso8601,
+  picker_id: "date-picker-time",
+  enable_time: true,
+  show_timezone: true
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx ADDED Viewed

@@ -0,0 +1,21 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+const DEFAULT_DATE = new Date()
+DEFAULT_DATE.setHours(12)
+DEFAULT_DATE.setMinutes(0)
+const DatePickerTime = (props) => (
+  <div>
+    <DatePicker
+        defaultDate={DEFAULT_DATE}
+        enableTime
+        pickerId="date-picker-time"
+        showTimezone
+        {...props}
+    />
+  </div>
+)
+export default DatePickerTime

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To select time as well, you should pass the `enableTime` boolean prop. You can also enable timezone display by passing `showTimezone`.

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

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

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

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

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

	@@ -0,0 +1 @@
1	+ By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `week`. To activate it set `selection_type` prop in a rails file to `week`.

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

@@ -17,6 +17,8 @@ examples:
   - date_picker_anti_patterns: Anti-Patterns
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection
   react:
@@ -36,3 +38,5 @@ examples:
   - date_picker_year_range: Year Range
   - date_picker_inline: Inline
   - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection

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

@@ -14,3 +14,5 @@ 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 DatePickerTime } from './_date_picker_time.jsx'
+export { default as DatePickerWeek } from './_date_picker_week.jsx'