From d7c24ec561edfb209d3b0880f9007218ff7f855e Mon Sep 17 00:00:00 2001 From: Henrique Limas Date: Wed, 20 Sep 2023 11:01:21 -0700 Subject: [PATCH] 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 --- .../components/dialog-close-button.tsx | 4 +- .../components/dialog-previous-button.tsx | 23 ++++ .../components/dialogBase.tsx | 3 + .../dialog-base-with-state.tsx | 18 ++- src/ebay-dialog-base/index.ts | 1 + src/ebay-lightbox-dialog/README.md | 3 + .../__snapshots__/index.spec.tsx.snap | 106 ++++++++++++++++++ .../__tests__/index.stories.tsx | 14 ++- 8 files changed, 167 insertions(+), 5 deletions(-) create mode 100644 src/ebay-dialog-base/components/dialog-previous-button.tsx diff --git a/src/ebay-dialog-base/components/dialog-close-button.tsx b/src/ebay-dialog-base/components/dialog-close-button.tsx index 7e62f736..3bc8e907 100644 --- 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 new file mode 100644 index 00000000..118d0757 --- /dev/null +++ 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 = ({ + className, + icon, + ...rest +}: EbayDialogPreviousButtonProps) => ( + +) + +export default EbayDialogPreviousButton diff --git a/src/ebay-dialog-base/components/dialogBase.tsx b/src/ebay-dialog-base/components/dialogBase.tsx index ed1c6e29..661bf3c2 100644 --- a/src/ebay-dialog-base/components/dialogBase.tsx +++ b/src/ebay-dialog-base/components/dialogBase.tsx @@ -47,6 +47,7 @@ export interface DialogBaseProps extends HTMLProps { mainId?: string; ignoreEscape?: boolean; closeButton?: ReactElement; + previousButton?: ReactElement; focus?: RefObject; animated?: boolean; transitionElement?: TransitionElement; @@ -74,6 +75,7 @@ export const DialogBase: FC> = ({ onBackgroundClick = () => {}, ignoreEscape, closeButton, + previousButton, isModal, role = 'dialog', focus, @@ -198,6 +200,7 @@ export const DialogBase: FC> = ({ {top} {dialogHeader && (
+ {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 index 3402bda4..e501df04 100644 --- 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 = ( {content} diff --git a/src/ebay-dialog-base/index.ts b/src/ebay-dialog-base/index.ts index c04b75ab..d9e417f5 100644 --- 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 index e09db3b5..127aa18c 100644 --- 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 index a30e215c..c1d7fdfc 100644 --- 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`] = `
`; + +exports[`Storyshots ebay-lightbox-dialog With Previous Button 1`] = ` + +
+ +
+