playbook_ui 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457 → 12.14.0.pre.alpha.lightboxcurrentphotoprop460

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f8208a14e5c15e8c393a68f57267ab77dfcb112e76ab6624b323520ee24110f
-  data.tar.gz: 644200e7aba10dfa8636622d05203dd2fa26b74bcee471fd05d848edb53ad428
+  metadata.gz: ea7957ed8d699800c355f334304b484be3773ec1a0c5c21699f9bccf9b3c0a50
+  data.tar.gz: 694efd1b41b1917430963c58e8cffb427bde2351a49a3293bd81c121be47344a
 SHA512:
-  metadata.gz: 9ae9ad4954a065d536856caf8f8cfbecb68885dec8674e06dd8f80c7c7abe3e2346cca288aee7792e49165658720d23da9402867d74702157f9024716ae82e08
-  data.tar.gz: 3f88105477044a5db447ac93a924aa43e84112df2bb17a347bb0b372e78bedcaf1723069921aeb4bf359e3552806a48f8fe6cee7c66c895e6016a39c817f31e3
+  metadata.gz: e562d349fbb3dda65376d35efc1cef28bf8f1fdcc7e1028c48ee9ec4ff3943963f8286f81d347cdaf545a5d28fb9d7be03bd78324f0e44a1920dd89ff2731597
+  data.tar.gz: b8ad8ac157fdbc56d039f4033742cc9707876f15275ab88c5a1a50f7c5b50539916312590a2f1e016b3b84871b16f4a29e577a448cb8733ccab5833eb2661ded

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

@@ -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

@@ -1,4 +1,4 @@
-import React, { useEffect} from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -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) {
@@ -152,81 +152,78 @@ useEffect(() => {
 
   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 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>
-        
-            {!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>
+          : null}
       </div>
     </div>
   )
 }
+
 export default DatePicker

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

@@ -64,4 +64,4 @@
         datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
     })
   <% end %>
-<% end %>
+<% end %>

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

@@ -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

@@ -158,47 +158,4 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
-  test('shows DatePicker QuickPick dropdown', 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('01/01/2023 → 12/31/2023')
-    })
-
-  })
 })

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

@@ -3,7 +3,6 @@ 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
@@ -20,8 +19,8 @@ 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,
   timeCaption?: string,
@@ -91,23 +90,18 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 
   const setPlugins = () => {
-    const pluginList = []
+    let 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())
     }
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
 
-
     return pluginList
   }
 
@@ -150,9 +144,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       },
     ] : disabledParser(),
     enableTime,
-    locale: {
-      rangeSeparator: ' → '
-    },
     maxDate,
     minDate,
     mode,
@@ -180,7 +171,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     static: staticPosition,
   })
 
-
   // ===========================================================
   //                 Additional JS Functionality               |
   // ===========================================================

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

@@ -21,7 +21,6 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
-  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)
 
   react:
@@ -46,5 +45,4 @@ examples:
   - date_picker_week: Week
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
-  - date_picker_quick_pick: Quick Pick
   - date_picker_positions_element: Custom Position (based on element)

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

@@ -19,5 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerQuickPick } from './_date_picker_quick_pick'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -12,6 +12,7 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
+  currentPhoto?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
@@ -31,6 +32,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
+    currentPhoto,
     data = {},
     description,
     id = '',
@@ -45,11 +47,14 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
   } = props
 
   const [activePhoto, setActivePhoto] = useState(initialPhoto)
-
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
+  useEffect(() => {
+    setActivePhoto(currentPhoto)
+  },[currentPhoto])
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -0,0 +1,115 @@
+/* @flow */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+import React, { useState } from 'react'
+import { Flex, Image, Button } from '../../'
+import Lightbox from '../_lightbox.tsx'
+
+const LightboxCurrentPhoto = (props) => {
+  const photos = [
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
+    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
+    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
+  ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
+  const [light, toggleLight] = useState(false)
+  //Setting state with the index of the current slide exposed by the onChange prop
+  const [active, setActive] = useState(selectedPhoto)
+  //Setting state for the current photo to pass to the kit
+  const [currentPhoto, setCurrentPhoto] = useState(active)
+
+  const handleCloseLightbox = () => {
+    toggleLight(!light)
+    setSelectedPhoto(null)
+  }
+
+  const onPhotoClick = (photo) => {
+    toggleLight(!light)
+    setSelectedPhoto(photo)
+  }
+
+  const exampleStyles = {
+    width: "100%",
+    overflow: "auto"
+  }
+
+  return (
+    <div>
+      {light ? (
+        <>
+          <div style={{width: '200px', height: '50px', position: 'fixed', top: 0, right: 0, zIndex: 1000000000000000}}>
+            <div style={{position: 'absolute',right: '100px'}}>
+              <Button 
+                  onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
+              >
+                Back
+              </Button>
+            </div>
+            <div style={{position: 'absolute', right: 0}}>
+              <Button
+                  onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+          <Lightbox
+              currentPhoto={currentPhoto}
+              icon="times"
+              initialPhoto={selectedPhoto}
+              onChange={(index) => setActive(index)}
+              onClose={handleCloseLightbox}
+              photos={photos}
+              {...props}
+          />
+        </>
+      ) : (
+        <div
+            className="PhotoViewer"
+            style={exampleStyles}
+        >
+          <Flex>
+            {photos.map((photo, index) => {
+              return (
+                <div
+                    key={index}
+                    onClick={() => onPhotoClick(index)}
+                >
+                  <Image
+                      cursor="pointer"
+                      marginRight="xl"
+                      rounded
+                      size="lg"
+                      url={photo}
+                  />
+
+                  <div className="overlay" />
+                </div>
+              )
+            })}
+          </Flex>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md

@@ -0,0 +1 @@
+The `currentPhoto` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop. 

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

@@ -5,3 +5,4 @@ examples:
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
   - lightbox_custom_header: Custom Header
+  - lightbox_current_photo: Current Photo

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

@@ -2,3 +2,4 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
 export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
 export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
 export { default as LightboxCustomHeader } from './_lightbox_custom_header'
+export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -35,7 +35,7 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
-        initialPhoto={1}
+        initialPhoto={0}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -43,7 +43,7 @@ test('Shows selected images', () => {
   const kit = screen.getByTestId(testId)
   const slide = kit.getElementsByClassName('Slide')[0]
   const image = slide.getElementsByTagName('img')[0]
-  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -13,14 +13,14 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  iconLeft?: string,
-  iconRight?: string,
+  iconLeft: string,
+  iconRight: string,
   id?: string,
-  imageUrl?: string,
-  link?: string,
+  imageUrl: string,
+  link: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
-  text?: string,
+  text: string,
 }
 
 const NavItem = (props: NavItemProps) => {

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -17,8 +17,8 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link?: string,
-  title?: string,
+  link: string,
+  title: string,
   variant?: "normal" | "subtle",
 }
 

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-      letter-spacing: normal;
+       letter-spacing: normal;
     }
   }
 }

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.14.0"
-  VERSION = "12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457"
+  VERSION = "12.14.0.pre.alpha.lightboxcurrentphotoprop460"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457
+  version: 12.14.0.pre.alpha.lightboxcurrentphotoprop460
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-10 00:00:00.000000000 Z
+date: 2023-04-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -745,8 +745,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -761,7 +759,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.ts
 - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -771,7 +768,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -1337,6 +1333,8 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
+- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

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

@@ -1,8 +0,0 @@
-<%= 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"
-}) %>
-

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-import DatePicker from '../_date_picker'
-
-const DatePickerQuickPick = (props) => (
-  <div>
-    <DatePicker
-        allowInput
-        mode="range"
-        pickerId="date-picker-quick-pick"
-        placeholder="mm/dd/yyyy → mm/dd/yyyy"
-        selectionType="quickpick"
-        {...props}
-    />
-  </div>
-)
-
-export default DatePickerQuickPick

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

@@ -1,166 +0,0 @@
-import moment from 'moment'
-
-type FpTypes = {
-  setDate: (arg0: any, arg1: boolean) => void,
-  config: { [key: string]: string },
-  clear: (arg0: boolean, arg1: boolean) => void,
-  close: () => void,
-  calendarContainer?: {
-    classList: { add: (arg0: string) => void };
-    prepend: (arg0: HTMLDivElement) => void;
-    append: (arg0: HTMLDivElement) => void;
-  },
-  loadedPlugins: string[],
-};
-
-type pluginDataType = {
-  ranges: { [key: string]: Date[] },
-  rangesNav: HTMLUListElement,
-  rangesButtons: [] | any,
-}
-
-const quickPickPlugin = () => {
-  return function (fp: FpTypes & any): any {
-
-  // 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('week').toDate(), moment().endOf('week').toDate()],
-      'This month': [moment().startOf('month').toDate(), moment().endOf('month').toDate()],
-      'This quarter': [moment().startOf('quarter').toDate(), moment().endOf('quarter').toDate()],
-      'This year': [moment().startOf('year').toDate(), moment().endOf('year').toDate()],
-      'Last week': [
-          moment().subtract(1, 'week').startOf('week').toDate(),
-          moment().subtract(1, 'week').endOf('week').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()
-      ]
-    }
-    //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
-    const pluginData: pluginDataType = {
-      ranges: ranges,
-      rangesNav: rangesNav,
-      rangesButtons: [],
-    };
-
-  /**
- *    @param {string} label
- *    @returns HTML Element
- */
-
-  //funciton for creating the range buttons in the nav
-  const addRangeButton = (label: string) => {
-
-    // create the button element and add class and text
-    const button = document.createElement('a');
-    button.className = "nav-item-link";
-    const itemLabel = document.createElement('span')
-    itemLabel.className = "nav-item-text"
-    itemLabel.innerHTML = label;
-
-    // create li elements inside the dropdown
-    const item = document.createElement('li');
-    item.className = "nav-item";
-
-    pluginData.rangesButtons[label] = button;
-
-    // append span text to anchor tag
-    pluginData.rangesButtons[label].appendChild(itemLabel)
-
-    // append those anchor tags to the li items
-    item.appendChild(pluginData.rangesButtons[label]);
-
-    // append the li item to the ul rangeNav prop
-    pluginData.rangesNav.appendChild(item);
-
-    // return the ranges buton prop
-    return pluginData.rangesButtons[label];
-  };
-
-  const selectActiveRangeButton = (selectedDates: Array<string>) => {
-    const current = pluginData.rangesNav.querySelector('.active');
-
-    if (current) {
-      current.classList.remove('active');
-    }
-      /** conditional statment to extract start and end dates from selectedDates, 
-        *   then loop through ranges prop in pluginData
-        *   and check if chosen dates equal to a date in the ranges prop
-        *   if they are equal, add the active class
-        */
-    if (selectedDates.length > 0) {
-
-      const startDate = moment(selectedDates[0]);
-      const endDate = selectedDates.length > 1 ? moment(selectedDates[1]) : startDate;
-
-      for (const [label, range] of Object.entries(pluginData.ranges)) {
-        if (startDate.isSame(moment(range[0]), 'day') && endDate.isSame(moment(range[1]), 'day')) {
-          pluginData.rangesButtons[label].classList.add('active');
-          break;
-        }
-      }
-    }
-
-  }
-
-    
-    return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
-      onReady(selectedDates: Array<string>) {
-        // loop through the ranges and create an anchor tag for each range and add an event listiner 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();
-
-              if (!start) {
-                fp.clear();
-              }
-              else {
-                fp.setDate([start, end], true);
-              }
-
-              fp.close();
-            });
-        }
-
-        // conditional to check if there is a dropdown to add it to the calendar container and git it the classes it needs
-        if (pluginData.rangesNav.children.length > 0) {
-
-          fp.calendarContainer.prepend(pluginData.rangesNav);
-          pluginData.rangesNav.classList.add('quick-pick-ul')
-          fp.calendarContainer.classList.add('quick-pick-drop-down');
-
-        /**
-         *
-         * @param {Array} selectedDates
-         */
-        
-          // function to give the active butto the active class
-          selectActiveRangeButton(selectedDates);
-        }
-        
-      },
-      onValueUpdate(selectedDates: Array<string>) {
-        selectActiveRangeButton(selectedDates);
-      }
-    };
-  };
-}
-
-export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss

@@ -1,56 +0,0 @@
-@import "../../tokens/animation-curves";
-@import "../../tokens/colors";
-@import "../../tokens/typography";
-@import "../../tokens/titles";
-
-// used to display dropdown on the left of the calender
-.quick-pick-drop-down {
-  width: auto;
-  display: grid;
-}
-
-.quick-pick-ul {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.nav-item {
-  list-style: none;
-  border-radius: 6px;
-  border-bottom: 0;
-  margin: 8px 14px;
-}
-
-.nav-item-link {
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  border: none;
-  padding: 8px 14px;
-  transition-property: color, background-color;
-  transition-duration: 0.15s;
-  transition-timing-function: $bezier;
-  border-radius: 6px;
-  line-height: 1.4;
-  color: $charcoal;
-  font-size: $font_default;
-  font-weight: $regular;
-  &.active {
-    background-color: rgba($primary, 0.03);
-    color: $primary;
-    letter-spacing: normal;
-  }
-  @media (hover:hover) {
-    &:hover {
-      cursor: pointer;
-      background-color: rgba($primary, 0.03);
-      color: $primary;
-    }
-  }
-}
-
-// Hide the calendar
-.quick-pick-drop-down > .flatpickr-months, .quick-pick-drop-down > .flatpickr-innerContainer {
-  display: none;
-}