FEAT: Add support for previous button on lightbox (#246)

* FEAT: Add support for previous button on lightbox * Move import to index file --------- Co-authored-by: hlimas <[email protected]>
eBay · Sep 20, 2023 · d7c24ec · d7c24ec
1 parent 22fd729
commit d7c24ec
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 5 deletions.
diff --git a/src/ebay-dialog-base/components/dialog-close-button.tsx b/src/ebay-dialog-base/components/dialog-close-button.tsx
@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react'
 
-type EbayDialogFooterProps = {
+type EbayDialogCloseButtonProps = {
     children?: ReactNode;
 }
 
-const EbayDialogCloseButton: FC = ({ children }: EbayDialogFooterProps) => <>{children}</>
+const EbayDialogCloseButton: FC = ({ children }: EbayDialogCloseButtonProps) => <>{children}</>
 
 export default EbayDialogCloseButton
diff --git a/src/ebay-dialog-base/components/dialog-previous-button.tsx b/src/ebay-dialog-base/components/dialog-previous-button.tsx
@@ -0,0 +1,23 @@
+import React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react'
+import classNames from 'classnames'
+import { EbayIconButton } from '../../ebay-icon-button'
+import { Icon } from '../../ebay-icon'
+
+type EbayDialogPreviousButtonProps = {
+    icon?: Icon;
+    className?: string
+    onClick?: MouseEventHandler & KeyboardEventHandler
+}
+
+const EbayDialogPreviousButton: FC<EbayDialogPreviousButtonProps> = ({
+    className,
+    icon,
+    ...rest
+}: EbayDialogPreviousButtonProps) => (
+    <EbayIconButton
+        {...rest}
+        icon={icon || 'chevronLeft16'}
+        className={classNames(className, 'lightbox-dialog__prev')} />
+)
+
+export default EbayDialogPreviousButton
diff --git a/src/ebay-dialog-base/components/dialogBase.tsx b/src/ebay-dialog-base/components/dialogBase.tsx
@@ -47,6 +47,7 @@ export interface DialogBaseProps<T> extends HTMLProps<T> {
     mainId?: string;
     ignoreEscape?: boolean;
     closeButton?: ReactElement;
+    previousButton?: ReactElement;
     focus?: RefObject<HTMLAnchorElement & HTMLButtonElement>;
     animated?: boolean;
     transitionElement?: TransitionElement;
@@ -74,6 +75,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
     onBackgroundClick = () => {},
     ignoreEscape,
     closeButton,
+    previousButton,
     isModal,
     role = 'dialog',
     focus,
@@ -198,6 +200,7 @@ export const DialogBase: FC<DialogBaseProps<HTMLElement>> = ({
                 {top}
                 {dialogHeader && (
                     <div className={`${classPrefix}__header`}>
+                        {previousButton}
                         {buttonPosition === 'right' && dialogHeader}
                         {buttonPosition !== 'bottom' && closeButtonContent}
                         {(buttonPosition === 'left' || buttonPosition === 'hidden') && dialogHeader}

diff --git a/src/ebay-dialog-base/dialog-base-with-state.tsx b/src/ebay-dialog-base/dialog-base-with-state.tsx
@@ -1,7 +1,13 @@
 import React, { Children, ReactElement } from 'react'
 import { RemoveScroll } from 'react-remove-scroll'
 import { DialogBase, DialogBaseProps } from './components/dialogBase'
-import { EbayDialogCloseButton, EbayDialogFooter, EbayDialogHeader, EbayDialogActions } from './index'
+import {
+    EbayDialogCloseButton,
+    EbayDialogFooter,
+    EbayDialogHeader,
+    EbayDialogActions,
+    EbayDialogPreviousButton
+} from './index'
 
 export const DialogBaseWithState = ({
     isModal,
@@ -17,8 +23,15 @@ export const DialogBaseWithState = ({
     const footer = childrenArray.find((child: ReactElement) => child.type === EbayDialogFooter)
     const actions = childrenArray.find((child: ReactElement) => child.type === EbayDialogActions)
     const closeButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogCloseButton)
+    const previousButton = childrenArray.find((child: ReactElement) => child.type === EbayDialogPreviousButton)
     const content = childrenArray.filter((child: ReactElement) =>
-        ![EbayDialogHeader, EbayDialogFooter, EbayDialogCloseButton, EbayDialogActions].some(c => c === child.type))
+        ![
+            EbayDialogHeader,
+            EbayDialogFooter,
+            EbayDialogCloseButton,
+            EbayDialogActions,
+            EbayDialogPreviousButton
+        ].some(c => c === child.type))
 
     const dialogBase = (
         <DialogBase
@@ -29,6 +42,7 @@ export const DialogBaseWithState = ({
             footer={footer}
             actions={actions}
             closeButton={closeButton}
+            previousButton={previousButton}
             animated={animated}
         >
             {content}

diff --git a/src/ebay-dialog-base/index.ts b/src/ebay-dialog-base/index.ts
@@ -4,3 +4,4 @@ export { default as EbayDialogCloseButton } from './components/dialog-close-butt
 export { WindowType, DialogBaseProps } from './components/dialogBase'
 export { default as DialogBaseWithState } from './dialog-base-with-state'
 export { default as EbayDialogActions } from './components/dialog-actions'
+export { default as EbayDialogPreviousButton } from './components/dialog-previous-button'
diff --git a/src/ebay-lightbox-dialog/README.md b/src/ebay-lightbox-dialog/README.md
@@ -32,3 +32,6 @@ Will render a header content for the dialog. Will always render the header eleme
 
 ## EbayDialogFooter
 Will render the footer content for the dialog. If not present then will not have any footer.
+
+## EbayDialogPreviousButton
+Will render the previous icon button. The icon can be overwritten with the `icon` attribute
diff --git a/src/ebay-lightbox-dialog/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-lightbox-dialog/__tests__/__snapshots__/index.spec.tsx.snap
@@ -644,3 +644,109 @@ exports[`Storyshots ebay-lightbox-dialog With No Background Click 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Storyshots ebay-lightbox-dialog With Previous Button 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+  >
+    <p
+      aria-hidden="true"
+    >
+      Some outside content...
+    </p>
+    <div
+      aria-hidden="false"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="dialog-title-abc123"
+        arial-modal="true"
+        class="lightbox-dialog lightbox-dialog--mask-fade lightbox-dialog--show-init"
+        role="dialog"
+      >
+        <div
+          aria-hidden="true"
+          class="keyboard-trap-boundary"
+          tabindex="0"
+        />
+        <div
+          aria-hidden="false"
+          class="lightbox-dialog__window lightbox-dialog__window--fade keyboard-trap--active"
+        >
+          <div
+            aria-hidden="true"
+            class="keyboard-trap-boundary"
+            tabindex="0"
+          />
+          <div
+            class="lightbox-dialog__header"
+          >
+            <button
+              aria-label="Previous"
+              class="lightbox-dialog__prev icon-btn"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon icon--chevron-left-16"
+                focusable="false"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="#icon-chevron-left-16"
+                />
+              </svg>
+            </button>
+            <h2
+              id="dialog-title-abc123"
+            >
+              Heading
+            </h2>
+            <button
+              aria-label="Close dialog"
+              class="icon-btn lightbox-dialog__close"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="icon icon--close-16"
+                focusable="false"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  xlink:href="#icon-close-16"
+                />
+              </svg>
+            </button>
+          </div>
+          <div
+            class="lightbox-dialog__main"
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+              <a
+                href="http://www.ebay.com"
+              >
+                www.ebay.com
+              </a>
+            </p>
+          </div>
+          <div
+            aria-hidden="true"
+            class="keyboard-trap-boundary"
+            tabindex="0"
+          />
+        </div>
+        <div
+          aria-hidden="true"
+          class="keyboard-trap-boundary"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/ebay-lightbox-dialog/__tests__/index.stories.tsx b/src/ebay-lightbox-dialog/__tests__/index.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { EbayDialogFooter, EbayDialogHeader } from '../../ebay-dialog-base'
+import { EbayDialogFooter, EbayDialogHeader, EbayDialogPreviousButton } from '../../ebay-dialog-base'
 import { EbayButton } from '../../ebay-button'
 import { EbayCheckbox } from '../../ebay-checkbox'
 import { EbayLabel } from '../../ebay-field'
@@ -159,4 +159,16 @@ export const _WithNoBackgroundClick = () => {
     );
 };
 
+export const _WithPreviousButton = () => (
+    <div>
+        <p>Some outside content...</p>
+        <EbayLightboxDialog open a11yCloseText="Close dialog">
+            <EbayDialogPreviousButton aria-label="Previous" onClick={action('previous button click')}/>
+            <EbayDialogHeader>Heading</EbayDialogHeader>
+            {textParagraph}
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </EbayLightboxDialog>
+    </div>
+);
+
 export default story;