From 326caab395664e6414115cb1a60a2c7b3645d7af Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 14 Sep 2022 13:13:39 +0200 Subject: [PATCH] feat(Breadcrumb): add animation when in collapse mode --- .../uilib/components/breadcrumb/Examples.js | 4 +- .../postbuild/__tests__/postbuild.test.js | 3 +- .../src/components/breadcrumb/Breadcrumb.tsx | 53 ++++++++++--------- .../components/breadcrumb/BreadcrumbItem.tsx | 5 +- .../breadcrumb/BreadcrumbMultiple.tsx | 46 ++++++++++++++++ .../__snapshots__/Breadcrumb.test.tsx.snap | 18 +++++-- .../breadcrumb/style/_breadcrumb.scss | 20 ++++++- 7 files changed, 113 insertions(+), 36 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbMultiple.tsx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js index 22798df2cb3..2210fb4e1a8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/breadcrumb/Examples.js @@ -45,7 +45,7 @@ export const BreadcrumbMultipleData = () => ( ]; return ( - + ) } ` @@ -89,7 +89,7 @@ export const BreadcrumbVariants = () => ( return ( // Try changing variant here - + ) } ` diff --git a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js index c6a2dc9192b..14fa1156c0f 100644 --- a/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js +++ b/packages/dnb-eufemia/scripts/postbuild/__tests__/postbuild.test.js @@ -179,9 +179,8 @@ describe('babel build', () => { 'utf-8' ) expect(content).toContain('export default Breadcrumb;') - expect(content).toContain('core-js/modules/es') expect(content).toContain( - 'import "core-js/modules/es.array.map.js";' + 'import _extends from "@babel/runtime/helpers/esm/extends";' ) } } diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx index db8abf5137c..2a636a357c5 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx +++ b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx @@ -20,6 +20,7 @@ import { convertJsxToString, validateDOMAttributes, } from '../../shared/component-helper' +import { BreadcrumbMultiple } from './BreadcrumbMultiple' export interface BreadcrumbProps { /** @@ -111,6 +112,12 @@ export interface BreadcrumbProps { * Default: false */ spacing?: boolean + + /** + * Will disable the height animation + * Default: false + */ + noAnimation?: boolean } export const defaultProps = { @@ -128,6 +135,7 @@ export const defaultProps = { const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { // Every component should have a context const context = React.useContext(Context) + // Extract additional props from global context const allProps = usePropsWithContext( localProps, @@ -136,10 +144,11 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { context?.Breadcrumb, { skeleton: context?.skeleton } ) + const { className, skeleton, - children: childrenItems, + children: items, variant, onClick, navText, // has a translation in context @@ -150,6 +159,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { collapsedStyleType, isCollapsed: overrideIsCollapsed, spacing, + noAnimation, data, href, ...props @@ -157,7 +167,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { const skeletonClasses = createSkeletonClass('font', skeleton, context) const spacingClasses = createSpacingClasses(props) - const [isCollapsed, setCollapse] = useState(true) + const [isCollapsed, setCollapse] = useState(overrideIsCollapsed) const isSmallScreen = useMediaQuery({ matchOnSSR: true, when: { max: 'medium' }, @@ -165,7 +175,7 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { let currentVariant = variant if (!variant) { - if (childrenItems || data) { + if (items || data) { currentVariant = isSmallScreen ? 'collapse' : 'multiple' } else { currentVariant = 'single' @@ -176,24 +186,6 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { setCollapse(overrideIsCollapsed) }, [overrideIsCollapsed]) - const MultipleCrumbs = () => ( -
    - {data?.map((breadcrumbItem, i) => ( - - ))} - - {childrenItems} -
- ) - validateDOMAttributes(allProps, props) return ( @@ -237,16 +229,27 @@ const Breadcrumb = (localProps: BreadcrumbProps & ISpacingProps) => { /> )} - {currentVariant === 'multiple' && } + {currentVariant === 'multiple' && ( + + )} - {currentVariant === 'collapse' && !isCollapsed && ( + {currentVariant === 'collapse' && (
- +
)} diff --git a/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx b/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx index 704e3e05a66..483f57506ff 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx +++ b/packages/dnb-eufemia/src/components/breadcrumb/BreadcrumbItem.tsx @@ -51,6 +51,8 @@ export interface BreadcrumbItemProps { * Default: null */ skeleton?: SkeletonShow + + style?: React.CSSProperties } const defaultProps = { @@ -72,7 +74,7 @@ const BreadcrumbItem = (localProps: BreadcrumbItemProps) => { } = context // Extract additional props from global context - const { text, href, icon, onClick, variant, skeleton, ...props } = + const { text, href, icon, onClick, variant, skeleton, style, ...props } = usePropsWithContext(localProps, defaultProps, context?.BreadcrumbItem) const currentIcon: IconPrimaryIcon = @@ -85,6 +87,7 @@ const BreadcrumbItem = (localProps: BreadcrumbItemProps) => { className="dnb-breadcrumb__item" data-testid="breadcrumb-item" aria-current={variant === 'current' ? 'page' : undefined} + style={style} > {isInteractive ? (