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

playbook_ui 11.0.0.pre.alpha.2 → 11.1.0

Files changed (75) 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_currency/_currency.jsx CHANGED Viewed

@@ -18,6 +18,7 @@ type CurrencyProps = {
   className?: string,
   dark?: boolean,
   data?: object,
+  decimals?: 'default' | 'matching',
   emphasized?: boolean,
   id?: string,
   label?: string,
@@ -40,6 +41,7 @@ const Currency = (props: CurrencyProps) => {
     aria = {},
     amount,
     data = {},
+    decimals = 'default',
     emphasized = true,
     id,
     unit,
@@ -85,9 +87,12 @@ const Currency = (props: CurrencyProps) => {
     return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
   }
-  const getAmount = abbreviate ? getAbbreviatedValue('amount') : whole,
+  const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
+    getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
     getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
-    getDecimalValue = abbreviate ? '' : `.${decimal}`
+    getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
   return (
     <div

data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED Viewed

@@ -36,6 +36,10 @@ module Playbook
       prop :abbreviate, type: Playbook::Props::Boolean,
                         default: false
+      prop :decimals, type: Playbook::Props::Enum,
+                      values: %w[default matching],
+                      default: "default"
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -84,6 +88,8 @@ module Playbook
     private
       def whole_value
+        return amount if decimals == "matching"
         amount.split(".").first.to_s
       end
@@ -94,6 +100,8 @@ module Playbook
       end
       def units_element
+        return "" if decimals == "matching" && !abbreviate && !unit
         _, decimal_part = amount.split(".")
         if unit.nil? && abbreviate == false
           decimal_part.nil? ? ".00" : ".#{decimal_part}"

data/app/pb_kits/playbook/pb_currency/currency.test.js CHANGED Viewed

@@ -33,3 +33,31 @@ test('abbreviate prop returns proper abbreviated amount', () => {
   expect(screen.getByTestId('test-billions')).toHaveTextContent('$3.2B')
   expect(screen.getByTestId('test-trillions')).toHaveTextContent('$3.2T')
 })
+test('decimals matching prop returns decimals as title text', () => {
+  render(
+    <Currency
+        amount="320.20"
+        data={{ testid: 'test-decimals-matching' }}
+        decimals='matching'
+    />
+  )
+  const currencyKit = screen.getByTestId('test-decimals-matching')
+  expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320.20')
+  expect(currencyKit.querySelector('.unit')).toHaveTextContent('')
+})
+test('decimals default prop returns decimals as body text', () => {
+  render(
+    <Currency
+        amount="320.20"
+        data={{ testid: 'test-decimals-default' }}
+        decimals='default'
+    />
+  )
+  const currencyKit = screen.getByTestId('test-decimals-default')
+  expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
+  expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("currency", props: {
+  amount: "372.12",
+  decimals: "matching",
+  label: "Small",
+  margin_bottom: "md",
+  size: "sm",
+  unit: "/day",
+}) %>
+<%= pb_rails("currency", props: {
+  amount: "30,327.43",
+  decimals: "matching",
+  label: "Medium",
+  margin_bottom: "md",
+  size: "md",
+  symbol: "€",
+}) %>
+<%= pb_rails("currency", props: {
+  amount: "621,953.99",
+  decimals: "matching",
+  label: "Large",
+  size: "lg",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react'
+import Currency from '../_currency'
+const CurrencyMatchingDecimals = (props) => {
+  return (
+    <>
+      <Currency
+          amount="372.12"
+          decimals="matching"
+          label="Small"
+          marginBottom="md"
+          size="sm"
+          unit="/day"
+          {...props}
+      />
+      <Currency
+          amount="30,327.43"
+          decimals="matching"
+          label="Medium"
+          marginBottom="md"
+          size="md"
+          symbol="€"
+          {...props}
+      />
+      <Currency
+          amount="621,953.99"
+          decimals="matching"
+          label="Large"
+          size="lg"
+          {...props}
+      />
+    </>
+  )
+}
+export default CurrencyMatchingDecimals

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

@@ -6,6 +6,7 @@ examples:
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
+  - currency_matching_decimals: Matching Decimals
   react:
   - currency_variants: Variants
@@ -13,3 +14,4 @@ examples:
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
   - currency_abbreviated: Abbreviate Larger Amounts
+  - currency_matching_decimals: Matching Decimals

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

@@ -3,3 +3,4 @@ export { default as CurrencySize } from './_currency_size.jsx'
 export { default as CurrencyAlignment } from './_currency_alignment.jsx'
 export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
+export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'

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')
+    })
+  })
+})