@dnb/eufemia 9.30.0 → 9.32.0

package/cjs/components/breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ISpacingProps } from '../../shared/interfaces';
+import { SectionSpacing, SectionStyleTypes } from '../section/Section';
+import { SpacingProps } from '../../shared/types';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem';
 export interface BreadcrumbProps {
@@ -17,12 +18,12 @@ export interface BreadcrumbProps {
      * Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.
      * Default: null
      */
-    data?: BreadcrumbItemProps[];
+    data?: Array<BreadcrumbItemProps>;
     /**
      * The content of the component. Can be used instead of prop "data".
      * Default: null
      */
-    children?: React.ReactNode;
+    children?: Array<React.ReactElement<BreadcrumbItemProps>>;
     /**
      * The variant of the component.
      * Default: When children and data is not defined, it defaults to "single". If they are defined, the variant depends on the viewport.
@@ -67,17 +68,22 @@ export interface BreadcrumbProps {
      * Use one of the Section component style types (style_type)
      * Default: transparent
      */
-    styleType?: string;
+    styleType?: SectionStyleTypes;
     /**
      * Use one of the Section component style types (style_type)
      * Default: pistachio
      */
-    collapsedStyleType?: string;
+    collapsedStyleType?: SectionStyleTypes;
     /**
-     * Spacing around the breadcrumb
+     * Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.
      * Default: false
      */
-    spacing?: boolean;
+    spacing?: SectionSpacing;
+    /**
+     * Will disable the height animation
+     * Default: false
+     */
+    noAnimation?: boolean;
 }
 export declare const defaultProps: {
     skeleton: boolean;
@@ -91,7 +97,7 @@ export declare const defaultProps: {
     spacing: boolean;
 };
 declare const Breadcrumb: {
-    (localProps: BreadcrumbProps & ISpacingProps): JSX.Element;
+    (localProps: BreadcrumbProps & SpacingProps): JSX.Element;
     Item: (localProps: BreadcrumbItemProps) => JSX.Element;
 };
 export { BreadcrumbItem };

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -45,8 +45,6 @@ Object.defineProperty(exports, "BreadcrumbItem", {
 });
 exports.defaultProps = exports.default = void 0;
 
-require("core-js/modules/es.array.map.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -63,13 +61,13 @@ var _shared = require("../../shared");
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _hooks = require("../../shared/hooks");
-
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
 
 var _componentHelper = require("../../shared/component-helper");
 
-var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
+var _BreadcrumbMultiple = require("./BreadcrumbMultiple");
+
+var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -113,13 +111,13 @@ var Breadcrumb = function Breadcrumb(localProps) {
 
   var context = _react.default.useContext(_Context.default);
 
-  var allProps = (0, _hooks.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, {
+  var allProps = (0, _componentHelper.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
   });
 
   var className = allProps.className,
       skeleton = allProps.skeleton,
-      childrenItems = allProps.children,
+      items = allProps.children,
       variant = allProps.variant,
       onClick = allProps.onClick,
       navText = allProps.navText,
@@ -130,6 +128,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
       collapsedStyleType = allProps.collapsedStyleType,
       overrideIsCollapsed = allProps.isCollapsed,
       spacing = allProps.spacing,
+      noAnimation = allProps.noAnimation,
       data = allProps.data,
       href = allProps.href,
       props = _objectWithoutProperties(allProps, _excluded);
@@ -137,7 +136,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   var spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(overrideIsCollapsed),
       _useState2 = _slicedToArray(_useState, 2),
       isCollapsed = _useState2[0],
       setCollapse = _useState2[1];
@@ -151,7 +150,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var currentVariant = variant;
 
   if (!variant) {
-    if (childrenItems || data) {
+    if (items || data) {
       currentVariant = isSmallScreen ? 'collapse' : 'multiple';
     } else {
       currentVariant = 'single';
@@ -161,26 +160,16 @@ var Breadcrumb = function Breadcrumb(localProps) {
   (0, _react.useEffect)(function () {
     setCollapse(overrideIsCollapsed);
   }, [overrideIsCollapsed]);
-
-  var MultipleCrumbs = function MultipleCrumbs() {
-    return _react.default.createElement("ol", {
-      className: "dnb-breadcrumb__list"
-    }, data === null || data === void 0 ? void 0 : data.map(function (breadcrumbItem, i) {
-      return _react.default.createElement(_BreadcrumbItem.default, _extends({
-        key: "".concat(breadcrumbItem.text),
-        variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null
-      }, breadcrumbItem));
-    }), childrenItems);
-  };
-
   (0, _componentHelper.validateDOMAttributes)(allProps, props);
+  var innerSpacing = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
   return _react.default.createElement("nav", _extends({
     "aria-label": (0, _componentHelper.convertJsxToString)(navText),
-    className: (0, _classnames.default)('dnb-breadcrumb', skeletonClasses, spacingClasses, className, spacing && 'dnb-breadcrumb--spacing'),
+    className: (0, _classnames.default)('dnb-breadcrumb', skeletonClasses, spacingClasses, className),
     "data-testid": "breadcrumb-nav"
   }, props), _react.default.createElement(_Section.default, {
-    style_type: styleType,
-    className: "dnb-breadcrumb__bar"
+    className: "dnb-breadcrumb__bar",
+    style_type: styleType || 'transparent',
+    spacing: innerSpacing
   }, currentVariant === 'collapse' && _react.default.createElement(_Button.default, {
     text: backToText,
     variant: "tertiary",
@@ -197,11 +186,20 @@ var Breadcrumb = function Breadcrumb(localProps) {
     icon_position: "left",
     onClick: onClick,
     href: href
-  }), currentVariant === 'multiple' && _react.default.createElement(MultipleCrumbs, null)), currentVariant === 'collapse' && !isCollapsed && _react.default.createElement(_Section.default, {
+  }), currentVariant === 'multiple' && _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
+    data: data,
+    items: items,
+    isCollapsed: false,
+    noAnimation: noAnimation
+  })), currentVariant === 'collapse' && _react.default.createElement(_Section.default, {
     style_type: collapsedStyleType,
-    className: "dnb-breadcrumb__collapse",
-    "data-testid": "breadcrumb-collapse"
-  }, _react.default.createElement(MultipleCrumbs, null)));
+    className: "dnb-breadcrumb__collapse"
+  }, _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
+    data: data,
+    items: items,
+    isCollapsed: isCollapsed,
+    noAnimation: noAnimation
+  })));
 };
 
 Breadcrumb.Item = _BreadcrumbItem.default;

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

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

package/cjs/components/breadcrumb/BreadcrumbItem.js

@@ -25,9 +25,9 @@ var _home = _interopRequireDefault(require("../../icons/home"));
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _hooks = require("../../shared/hooks");
+var _componentHelper = require("../../shared/component-helper");
 
-var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
+var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNr"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -51,22 +51,27 @@ var BreadcrumbItem = function BreadcrumbItem(localProps) {
 
   var homeText = context.translation.Breadcrumb.homeText;
 
-  var _usePropsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
-      text = _usePropsWithContext.text,
-      href = _usePropsWithContext.href,
-      icon = _usePropsWithContext.icon,
-      onClick = _usePropsWithContext.onClick,
-      variant = _usePropsWithContext.variant,
-      skeleton = _usePropsWithContext.skeleton,
-      props = _objectWithoutProperties(_usePropsWithContext, _excluded);
+  var _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.BreadcrumbItem),
+      text = _extendPropsWithConte.text,
+      href = _extendPropsWithConte.href,
+      icon = _extendPropsWithConte.icon,
+      onClick = _extendPropsWithConte.onClick,
+      variant = _extendPropsWithConte.variant,
+      skeleton = _extendPropsWithConte.skeleton,
+      itemNr = _extendPropsWithConte.itemNr,
+      props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 
   var currentIcon = icon || variant === 'home' && _home.default || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
   var isInteractive = (href || onClick) && variant !== 'current';
+  var style = {
+    '--delay': String(itemNr)
+  };
   return _react.default.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.default.createElement(_Button.default, _extends({
     variant: "tertiary",
     href: href,

package/cjs/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: Array<React.ReactElement<BreadcrumbItemProps>>;
+};
+export declare const BreadcrumbMultiple: ({ isCollapsed, items, noAnimation, data, }: BreadcrumbMultipleProps) => JSX.Element;
+export {};

package/cjs/components/breadcrumb/BreadcrumbMultiple.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbMultiple = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HeightAnimation = _interopRequireDefault(require("../height-animation/HeightAnimation"));
+
+var _Section = _interopRequireDefault(require("../section/Section"));
+
+var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var BreadcrumbMultiple = function BreadcrumbMultiple(_ref) {
+  var isCollapsed = _ref.isCollapsed,
+      items = _ref.items,
+      noAnimation = _ref.noAnimation,
+      data = _ref.data;
+  return _react.default.createElement(_HeightAnimation.default, {
+    open: !isCollapsed,
+    animate: !noAnimation,
+    "data-testid": "breadcrumb-collapse",
+    className: "dnb-breadcrumb__animation"
+  }, _react.default.createElement(_Section.default, {
+    className: "dnb-breadcrumb__list",
+    element: "ol",
+    style_type: "transparent"
+  }, data === null || data === void 0 ? void 0 : data.map(function (breadcrumbItem, i) {
+    return _react.default.createElement(_BreadcrumbItem.default, _extends({
+      key: "".concat(breadcrumbItem.text),
+      variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null,
+      itemNr: i
+    }, breadcrumbItem));
+  }), items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+    return _react.default.cloneElement(item, {
+      key: i,
+      itemNr: i
+    });
+  })));
+};
+
+exports.BreadcrumbMultiple = BreadcrumbMultiple;

package/cjs/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;
   }
 }