@dnb/eufemia 9.30.0 → 9.32.0

package/components/badge/Badge.js

@@ -1,27 +1,13 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children"],
     _excluded2 = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React from 'react';
 import classnames from 'classnames';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import Context from '../../shared/Context';
-import { extendPropsWithContext } from '../../shared/component-helper';
-import { warn } from '../../shared/component-helper';
+import { warn, extendPropsWithContext } from '../../shared/component-helper';
 export var defaultProps = {
   label: null,
   className: null,
@@ -36,7 +22,7 @@ export var defaultProps = {
 function Badge(localProps) {
   var context = React.useContext(Context);
 
-  var _extendPropsWithConte = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), localProps), defaultProps, context === null || context === void 0 ? void 0 : context.Badge),
+  var _extendPropsWithConte = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Badge),
       children = _extendPropsWithConte.children,
       props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
 

package/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/components/breadcrumb/Breadcrumb.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "data", "href"];
-import "core-js/modules/es.array.map.js";
+var _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';
@@ -11,9 +10,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 var defaultProps = {
   skeleton: false,
   navText: 'Back',
@@ -30,13 +29,13 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var _context$translation;
 
   var context = React.useContext(Context);
-  var 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, {
+  var 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
   });
 
   var className = allProps.className,
       skeleton = allProps.skeleton,
-      childrenItems = allProps.children,
+      items = allProps.children,
       variant = allProps.variant,
       onClick = allProps.onClick,
       navText = allProps.navText,
@@ -47,6 +46,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);
@@ -54,7 +54,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var skeletonClasses = createSkeletonClass('font', skeleton, context);
   var spacingClasses = createSpacingClasses(props);
 
-  var _useState = useState(true),
+  var _useState = useState(overrideIsCollapsed),
       _useState2 = _slicedToArray(_useState, 2),
       isCollapsed = _useState2[0],
       setCollapse = _useState2[1];
@@ -68,7 +68,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   var currentVariant = variant;
 
   if (!variant) {
-    if (childrenItems || data) {
+    if (items || data) {
       currentVariant = isSmallScreen ? 'collapse' : 'multiple';
     } else {
       currentVariant = 'single';
@@ -78,26 +78,16 @@ var Breadcrumb = function Breadcrumb(localProps) {
   useEffect(function () {
     setCollapse(overrideIsCollapsed);
   }, [overrideIsCollapsed]);
-
-  var MultipleCrumbs = function MultipleCrumbs() {
-    return React.createElement("ol", {
-      className: "dnb-breadcrumb__list"
-    }, data === null || data === void 0 ? void 0 : data.map(function (breadcrumbItem, i) {
-      return React.createElement(BreadcrumbItem, _extends({
-        key: "".concat(breadcrumbItem.text),
-        variant: i == 0 && 'home' || i == data.length - 1 && 'current' || null
-      }, breadcrumbItem));
-    }), childrenItems);
-  };
-
   validateDOMAttributes(allProps, props);
+  var 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: innerSpacing
   }, currentVariant === 'collapse' && React.createElement(Button, {
     text: backToText,
     variant: "tertiary",
@@ -114,11 +104,20 @@ var Breadcrumb = function 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/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/components/breadcrumb/BreadcrumbItem.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton"];
+var _excluded = ["text", "href", "icon", "onClick", "variant", "skeleton", "itemNr"];
 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';
 var defaultProps = {
   text: null,
   href: null,
@@ -21,22 +21,27 @@ var BreadcrumbItem = function BreadcrumbItem(localProps) {
   var context = React.useContext(Context);
   var homeText = context.translation.Breadcrumb.homeText;
 
-  var _usePropsWithContext = 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 = 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' && homeIcon || 'chevron_left';
   var currentText = text || variant === 'home' && homeText || '';
   var isInteractive = (href || onClick) && variant !== 'current';
+  var style = {
+    '--delay': String(itemNr)
+  };
   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/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/components/breadcrumb/BreadcrumbMultiple.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.array.map.js";
+import React from 'react';
+import HeightAnimation from '../height-animation/HeightAnimation';
+import Section from '../section/Section';
+import BreadcrumbItem from './BreadcrumbItem';
+export var BreadcrumbMultiple = function BreadcrumbMultiple(_ref) {
+  var isCollapsed = _ref.isCollapsed,
+      items = _ref.items,
+      noAnimation = _ref.noAnimation,
+      data = _ref.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(function (breadcrumbItem, i) {
+    return React.createElement(BreadcrumbItem, _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.cloneElement(item, {
+      key: i,
+      itemNr: i
+    });
+  })));
+};

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