RubyGems - playbook_ui - Versions diffs - 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720 - Mend

playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720

Files changed (47) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 545f767b2aa613f9d6490c5bf7bc6d06bb8736a2f06aa1e3a055ad0cb61bd060
-  data.tar.gz: 37ac24266bff35f8d6abf8cbff56e5e0edcc386a1de31f6d28e1633f5a932cf7
+  metadata.gz: b3b13169f586e341df32591e1f4eb45be130542c63cd46fe75eb5531c4bbf24f
+  data.tar.gz: 83c4990a0869cc25b21de2b66fc9a9e75c795c0c0059dc74b36c2ce4120610e7
 SHA512:
-  metadata.gz: 5dbf9d8ef59601a795eda0dc0665a438413454d06fc035b28d01bc78ff2b562b16d96c26615f37f3db5c21bfede6064e93a78cae6ab93ccbc89c2aa4f3b297a0
-  data.tar.gz: c9008cfc3ad1571970c45003a7ca4a4aa71387cd9e3dfdc7bdd03d09d0a4f3d36583f83c2f598597138df99990177dd16b56153a8fc01ffa60af34c3fd5c692e
+  metadata.gz: 60b9622512359115f3de5947c595579c1b017f2796602cbc2bf4fd70fc8f3289290edb4689db5fbdb41d9d00c9949824f75842f6815b4fefaaa3ad8e29b64e9b
+  data.tar.gz: 44815fdcd43a9648420d85d9bebee3a167f7b22841ced941637c4f989d7b6c0d18f06f1398ca8083e5f0e81093ee8d01342782b6d19e618a85818ab7fa2be71b

data/app/pb_kits/playbook/pb_date/_date.tsx CHANGED Viewed

@@ -19,7 +19,6 @@ type PbDateProps = {
   showDayOfWeek?: boolean;
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
-  unstyled?: boolean;
   value: string | Date;
 };
@@ -33,7 +32,6 @@ const PbDate = (props: PbDateProps) => {
     showDayOfWeek = false,
     showIcon = false,
     size = "md",
-    unstyled = false,
     value,
   } = props;
@@ -54,100 +52,48 @@ const PbDate = (props: PbDateProps) => {
   );
   return (
-    <div {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {unstyled
-        ? <>
-            {showIcon && (
-              <div>
-                <Icon fixedWidth
-                    icon="calendar-alt"
-                />
-              </div>
-            )}
-            {showDayOfWeek && (
-              <>
-                <div>
-                  {weekday}
-                </div>
-                <div>{"•"}</div>
-              </>
-            )}
-            <span>
-              <span>
-                {month} {day}
-              </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
-            </span>
-          </>
-        : size == "md" || size == "lg"
-          ? (
-            <Title size={4}
-                tag="h4"
-            >
-              {showIcon && (
-                <Body className="pb_icon_kit_container"
-                    color="light"
-                    tag="span"
-                >
-                  <Icon fixedWidth
-                      icon="calendar-alt"
-                  />
-                </Body>
-              )}
-              {showDayOfWeek && (
-                <>
-                  {weekday}
-                  <Body color="light"
-                      tag="span"
-                      text=" • "
-                  />
-                </>
-              )}
-              <span>
-                {month} {day}
-              </span>
-              {currentYear != year && <span>{`, ${year}`}</span>}
-            </Title>
-            )
-          : (
-              <>
-                {showIcon && (
-                  <Caption className="pb_icon_kit_container"
-                      tag="span"
-                  >
-                    <Icon fixedWidth
-                        icon="calendar-alt"
-                        size="sm"
-                    />
-                  </Caption>
-                )}
-                {showDayOfWeek && (
-                  <>
-                    <Caption tag="div">{weekday}</Caption>
-                    <Caption color="light"
-                        tag="div"
-                        text=" • "
-                    />
-                  </>
-                )}
-                <Caption tag="span">
-                  {month} {day}
-                  {currentYear != year && <>{`, ${year}`}</>}
-                </Caption>
-              </>
-            )}
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      {size == "md" || size == "lg" ? (
+        <Title size={4} tag="h4">
+          {showIcon && (
+            <Body className="pb_icon_kit_container" color="light" tag="span">
+              <Icon fixedWidth icon="calendar-alt" />
+            </Body>
+          )}
+          {showDayOfWeek && (
+            <>
+              {weekday}
+              <Body color="light" tag="span" text=" • " />
+            </>
+          )}
+          <span>
+            {month} {day}
+          </span>
+          {currentYear != year && <span>{`, ${year}`}</span>}
+        </Title>
+      ) : (
+        <>
+          {showIcon && (
+            <Caption className="pb_icon_kit_container" tag="span">
+              <Icon fixedWidth icon="calendar-alt" size="sm" />
+            </Caption>
+          )}
+          {showDayOfWeek && (
+            <>
+              <Caption tag="div">{weekday}</Caption>
+              <Caption color="light" tag="div" text=" • " />
+            </>
+          )}
+          <Caption tag="span">
+            {month} {day}
+            {currentYear != year && <>{`, ${year}`}</>}
+          </Caption>
+        </>
+      )}
     </div>
   );
 };

data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED Viewed

@@ -4,28 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
-  <% if object.unstyled %>
-    <!-- icon -->
-    <% if object.show_icon %>
-      <div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
-    <% end %>
-    <!-- day_of_week -->
-    <% if object.show_day_of_week %>
-      <div><%= object.day_of_week %></div>
-      <div>•</div>
-    <% end %>
-    <!-- month day, year -->
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
-      <span><%= "#{object.month} #{object.day}" %></span>
-    <%# if is current year %>
-    <% else %>
-      <span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
-    <% end %>
-  <% elsif object.size == "md" || object.size == "lg" %>
+  <% if object.size == "md" %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("body", props: {
@@ -57,6 +36,7 @@
     <% end %>
   <% else %>
     <!-- icon -->
     <% if object.show_icon %>
       <%= pb_rails("caption", props: {

data/app/pb_kits/playbook/pb_date/date.rb CHANGED Viewed

@@ -15,8 +15,6 @@ module Playbook
                   values: %w[lg md sm xs],
                   default: "md"
       prop :timezone, default: "America/New_York"
-      prop :unstyled, type: Playbook::Props::Boolean,
-                      default: false
       def classname
         generate_classname("pb_date_kit", alignment)

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

@@ -1,14 +1,14 @@
 examples:
   rails:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  - date_unstyled: Unstyled
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  - date_unstyled: Unstyled

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

@@ -1,4 +1,3 @@
 export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
-export { default as DateUnstyled } from './_date_unstyled.jsx'

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

@@ -6,7 +6,6 @@
 @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 {
@@ -27,32 +26,7 @@
       @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 CHANGED Viewed

@@ -30,7 +30,7 @@ type DatePickerProps = {
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
   inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  inputValue?: string,
+  inputValue?: any,
   label?: string,
   maxDate: string,
   minDate: string,
@@ -39,7 +39,7 @@ type DatePickerProps = {
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
-  selectionType?: "month" | "week"| "quickpick",
+  selectionType?: "month" | "week",
   showTimezone?: boolean,
   staticPosition: boolean,
   timeFormat?: string,
@@ -96,46 +96,46 @@ 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,
-    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,84 +150,80 @@ useEffect(() => {
     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>
+        <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>
-              </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 CHANGED Viewed

@@ -61,8 +61,7 @@
   <%= javascript_tag do %>
     window.addEventListener("DOMContentLoaded", () => {
-      datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -51,7 +51,7 @@ module Playbook
       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 quickpick none],
+                            values: %w[week month none],
                             default: "none"
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: false

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

@@ -1,6 +1,5 @@
 /* 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'
@@ -11,6 +10,7 @@ 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,47 +158,4 @@ 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'))
-    })
-  })
 })