@dnb/eufemia 9.30.0 → 9.31.0

package/es/components/breadcrumb/Breadcrumb.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
+const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href"];
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
@@ -9,9 +9,9 @@ import Section from '../section/Section';
 import Button from '../button/Button';
 import { useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
-import { usePropsWithContext } from '../../shared/hooks';
 import BreadcrumbItem from './BreadcrumbItem';
-import { convertJsxToString, validateDOMAttributes } from '../../shared/component-helper';
+import { convertJsxToString, isTrue, validateDOMAttributes, extendPropsWithContext } from '../../shared/component-helper';
+import { BreadcrumbMultiple } from './BreadcrumbMultiple';
 export const defaultProps = {
   skeleton: false,
   navText: 'Back',
@@ -28,14 +28,14 @@ const Breadcrumb = localProps => {
   var _context$translation;
 
   const context = React.useContext(Context);
-  const allProps = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
+  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Breadcrumb, context === null || context === void 0 ? void 0 : context.Breadcrumb, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   });
 
   const {
     className,
     skeleton,
-    children: childrenItems,
+    children: items,
     variant,
     onClick,
     navText,
@@ -46,6 +46,7 @@ const Breadcrumb = localProps => {
     collapsedStyleType,
     isCollapsed: overrideIsCollapsed,
     spacing,
+    noAnimation,
     data,
     href
   } = allProps,
@@ -53,7 +54,7 @@ const Breadcrumb = localProps => {
 
   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: {
@@ -63,7 +64,7 @@ const Breadcrumb = localProps => {
   let currentVariant = variant;
 
   if (!variant) {
-    if (childrenItems || data) {
+    if (items || data) {
       currentVariant = isSmallScreen ? 'collapse' : 'multiple';
     } else {
       currentVariant = 'single';
@@ -73,22 +74,16 @@ const Breadcrumb = localProps => {
   useEffect(() => {
     setCollapse(overrideIsCollapsed);
   }, [overrideIsCollapsed]);
-
-  const MultipleCrumbs = () => React.createElement("ol", {
-    className: "dnb-breadcrumb__list"
-  }, data === null || data === void 0 ? void 0 : data.map((breadcrumbItem, i) => React.createElement(BreadcrumbItem, _extends({
-    key: `${breadcrumbItem.text}`,
-    variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null
-  }, breadcrumbItem))), childrenItems);
-
   validateDOMAttributes(allProps, props);
+  const innerSpacing = isTrue(spacing) ? 'small' : spacing;
   return React.createElement("nav", _extends({
     "aria-label": convertJsxToString(navText),
-    className: classnames('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),
+    className: classnames('dnb-breadcrumb', skeletonClasses, spacingClasses, className),
     "data-testid": "breadcrumb-nav"
   }, props), React.createElement(Section, {
-    style_type: styleType,
-    className: "dnb-breadcrumb__bar"
+    className: "dnb-breadcrumb__bar",
+    style_type: styleType || 'transparent',
+    spacing: isSmallScreen ? innerSpacing : false
   }, currentVariant === 'collapse' && React.createElement(Button, {
     text: backToText,
     variant: "tertiary",
@@ -105,11 +100,20 @@ const Breadcrumb = localProps => {
     icon_position: "left",
     onClick: onClick,
     href: href
-  }), currentVariant === 'multiple' && React.createElement(MultipleCrumbs, null)), currentVariant === 'collapse' && !isCollapsed && React.createElement(Section, {
+  }), currentVariant === 'multiple' && React.createElement(BreadcrumbMultiple, {
+    data: data,
+    items: items,
+    isCollapsed: false,
+    noAnimation: noAnimation
+  })), currentVariant === 'collapse' && React.createElement(Section, {
     style_type: collapsedStyleType,
-    className: "dnb-breadcrumb__collapse",
-    "data-testid": "breadcrumb-collapse"
-  }, React.createElement(MultipleCrumbs, null)));
+    className: "dnb-breadcrumb__collapse"
+  }, React.createElement(BreadcrumbMultiple, {
+    data: data,
+    items: items,
+    isCollapsed: isCollapsed,
+    noAnimation: noAnimation
+  })));
 };
 
 Breadcrumb.Item = BreadcrumbItem;

package/es/components/breadcrumb/BreadcrumbItem.d.ts

@@ -32,6 +32,7 @@ export interface BreadcrumbItemProps {
      * Default: null
      */
     skeleton?: SkeletonShow;
+    style?: React.CSSProperties;
 }
 declare const BreadcrumbItem: (localProps: BreadcrumbItemProps) => JSX.Element;
 export default BreadcrumbItem;

package/es/components/breadcrumb/BreadcrumbItem.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
+const _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "style"];
 import React from 'react';
 import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
 import Context from '../../shared/Context';
-import { usePropsWithContext } from '../../shared/hooks';
+import { extendPropsWithContext } from '../../shared/component-helper';
 const defaultProps = {
   text: null,
   href: null,
@@ -27,16 +27,17 @@ const BreadcrumbItem = localProps => {
     }
   } = context;
 
-  const _usePropsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
+  const _extendPropsWithConte = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
         {
     text,
     href,
     icon,
     onClick,
     variant,
-    skeleton
-  } = _usePropsWithContext,
-        props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+    skeleton,
+    style
+  } = _extendPropsWithConte,
+        props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 
   const currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
   const currentText = text || variant === 'home' && homeText || '';
@@ -44,7 +45,8 @@ const BreadcrumbItem = localProps => {
   return React.createElement("li", {
     className: "dnb-breadcrumb__item",
     "data-testid": "breadcrumb-item",
-    "aria-current": variant === 'current' ? 'page' : undefined
+    "aria-current": variant === 'current' ? 'page' : undefined,
+    style: style
   }, isInteractive ? React.createElement(Button, _extends({
     variant: "tertiary",
     href: href,

package/es/components/breadcrumb/BreadcrumbMultiple.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BreadcrumbItemProps } from './BreadcrumbItem';
+declare type BreadcrumbMultipleProps = {
+    isCollapsed: boolean;
+    noAnimation: boolean;
+    data: Array<BreadcrumbItemProps>;
+    items: React.ReactNode;
+};
+export declare const BreadcrumbMultiple: ({ isCollapsed, items, noAnimation, data, }: BreadcrumbMultipleProps) => JSX.Element;
+export {};

package/es/components/breadcrumb/BreadcrumbMultiple.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import HeightAnimation from '../height-animation/HeightAnimation';
+import Section from '../section/Section';
+import BreadcrumbItem from './BreadcrumbItem';
+export const BreadcrumbMultiple = ({
+  isCollapsed,
+  items,
+  noAnimation,
+  data
+}) => {
+  return React.createElement(HeightAnimation, {
+    open: !isCollapsed,
+    animate: !noAnimation,
+    "data-testid": "breadcrumb-collapse",
+    className: "dnb-breadcrumb__animation"
+  }, React.createElement(Section, {
+    className: "dnb-breadcrumb__list",
+    element: "ol",
+    style_type: "transparent"
+  }, data === null || data === void 0 ? void 0 : data.map((breadcrumbItem, i) => {
+    const style = {
+      '--delay': String(i)
+    };
+    return React.createElement(BreadcrumbItem, _extends({
+      key: `${breadcrumbItem.text}`,
+      variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
+      style: style
+    }, breadcrumbItem));
+  }), items));
+};

package/es/components/breadcrumb/style/_breadcrumb.scss

@@ -12,16 +12,15 @@
   &__bar.dnb-section {
     display: flex;
   }
-  &--spacing &__bar.dnb-section {
-    padding: var(--spacing-x-small) 0;
-  }
 
-  &__list {
-    list-style: none;
+  &__list.dnb-section {
+    display: flex;
+
     margin: 0;
     padding: 0;
 
-    display: flex;
+    list-style: none;
+
     flex-wrap: wrap;
     flex-direction: row;
     align-items: center;
@@ -32,7 +31,7 @@
       display: flex;
       align-items: center;
       line-height: normal;
-      padding: var(--spacing-x-small) 0;
+      padding: 0.5rem 0;
 
       // To match the other tertiary buttons
       &__icon {
@@ -42,16 +41,30 @@
     }
   }
 
+  &__animation {
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+    transition: height 400ms #{$defaultEasing};
+  }
+  &__animation &__item {
+    transition: transform 400ms #{$defaultEasing} calc(var(--delay) * 50ms);
+    transform: translateX(-1rem);
+  }
+  &__animation.dnb-height-animation--parallax &__item {
+    transform: translateX(0);
+  }
+
   &__collapse {
     display: flex;
     flex-direction: column;
-    padding: 0 var(--spacing-large);
   }
-  &__collapse &__list {
+  &__collapse &__list.dnb-section {
     flex-direction: column;
     align-items: flex-start;
-  }
-  &--spacing &__collapse {
-    padding: var(--spacing-x-small) var(--spacing-large);
+
+    margin: 0.5rem 0;
+    margin-left: 1.5rem;
   }
 }