@dnb/eufemia 9.23.1 → 9.24.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.24.0](https://github.com/dnbexperience/eufemia/compare/v9.23.1...v9.24.0) (2022-03-02)
+
+
+### Bug Fixes
+
+* **Dialog:** set role alertdialog for confirmation variant ([8ec99af](https://github.com/dnbexperience/eufemia/commit/8ec99afb5f8ea385aae45e25880c6a71e04e6579))
+* **Dropdown:** fix empty data entry handling ([4e4762b](https://github.com/dnbexperience/eufemia/commit/4e4762be4c6c4f1ebdc1c122922d44ef620bb3dc))
+
+
+### Features
+
+* **Avatar:** add hasLabel to omit group warning ([#1318](https://github.com/dnbexperience/eufemia/issues/1318)) ([ed43481](https://github.com/dnbexperience/eufemia/commit/ed434810ae0cefdb6ae943a2b463fee90756dc55))
+* **Dialog:** add new variant confirmation ([#1302](https://github.com/dnbexperience/eufemia/issues/1302)) ([bdb7bb4](https://github.com/dnbexperience/eufemia/commit/bdb7bb4275f2c6f95e8448f85219be3637f2fa7b))
+* **FormStatus:** add new marketing state/status ([#1317](https://github.com/dnbexperience/eufemia/issues/1317)) ([f5e63a9](https://github.com/dnbexperience/eufemia/commit/f5e63a9897cbc62f035ede523a99b3198eecd501))
+* **NumberFormat:** add "compact" property – format a number compact with an abbreviation ([0e26449](https://github.com/dnbexperience/eufemia/commit/0e26449fee5c1f4fdf02b619d5a46080829a64be))
+* **Tag:** omit non-existing group warning with new prop: hasLabel ([079cdcd](https://github.com/dnbexperience/eufemia/commit/079cdcd2cca2185620cf07a49c581f55fdf4d204))
+
 ## [9.23.1](https://github.com/dnbexperience/eufemia/compare/v9.23.0...v9.23.1) (2022-02-23)
 
 

package/cjs/components/avatar/Avatar.d.ts

@@ -46,16 +46,17 @@ export interface AvatarProps {
      * Default: primary.
      */
     variant?: AvatarVariants;
+    /**
+     * If an avatar is hidden from the screen reader (by setting aria-hidden="true") or if label is given, typical inside a table or dl (definition list), then you can disable Avatar.Group as a dependent of Avatar.
+     * Use `true` to omit the `Avatar group required:` warning.
+     * Default: null
+     */
+    hasLabel?: boolean;
 }
 export declare const defaultProps: {
-    alt: any;
-    className: any;
     size: string;
-    src: any;
-    imgProps: any;
     variant: string;
     skeleton: boolean;
-    children: any;
 };
 declare const Avatar: {
     (localProps: AvatarProps & ISpacingProps): JSX.Element;

package/cjs/components/avatar/Avatar.js

@@ -63,7 +63,7 @@ var _hooks = require("../../shared/hooks");
 
 var _AvatarGroup = _interopRequireWildcard(require("./AvatarGroup"));
 
-var _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps"];
+var _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps", "hasLabel"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -84,14 +84,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var defaultProps = {
-  alt: null,
-  className: null,
   size: 'medium',
-  src: null,
-  imgProps: null,
   variant: 'primary',
-  skeleton: false,
-  children: null
+  skeleton: false
 };
 exports.defaultProps = defaultProps;
 
@@ -109,6 +104,7 @@ var Avatar = function Avatar(localProps) {
       variant = _usePropsWithContext.variant,
       src = _usePropsWithContext.src,
       imgProps = _usePropsWithContext.imgProps,
+      hasLabel = _usePropsWithContext.hasLabel,
       props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
   var children = null;
@@ -133,7 +129,7 @@ var Avatar = function Avatar(localProps) {
     children = childrenProp;
   }
 
-  if (!avatarGroupContext) {
+  if (!avatarGroupContext && !hasLabel) {
     (0, _componentHelper.warn)("Avatar group required: An Avatar requires an Avatar.Group with label description as a parent component. This is to ensure correct semantic and accessibility.");
   }
 

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

@@ -80,12 +80,7 @@ export interface BreadcrumbProps {
     spacing?: boolean;
 }
 export declare const defaultProps: {
-    className: any;
     skeleton: boolean;
-    children: any;
-    variant: any;
-    onClick: any;
-    href: any;
     navText: string;
     goBackText: string;
     homeText: string;
@@ -93,7 +88,6 @@ export declare const defaultProps: {
     isCollapsed: boolean;
     styleType: string;
     collapsedStyleType: string;
-    data: any;
     spacing: boolean;
 };
 declare const Breadcrumb: {

package/cjs/components/breadcrumb/Breadcrumb.js

@@ -96,12 +96,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var defaultProps = {
-  className: null,
   skeleton: false,
-  children: null,
-  variant: null,
-  onClick: null,
-  href: null,
   navText: 'Back',
   goBackText: 'Back',
   homeText: 'Home',
@@ -109,7 +104,6 @@ var defaultProps = {
   isCollapsed: true,
   styleType: 'transparent',
   collapsedStyleType: 'pistachio',
-  data: null,
   spacing: false
 };
 exports.defaultProps = defaultProps;
@@ -153,7 +147,7 @@ var Breadcrumb = function Breadcrumb(localProps) {
   });
   var currentVariant = variant;
 
-  if (variant === null) {
+  if (!variant) {
     if (childrenItems || data) {
       currentVariant = isSmallScreen ? 'collapse' : 'multiple';
     } else {

package/cjs/components/dialog/Dialog.d.ts

@@ -3,10 +3,11 @@ import DialogBody from './parts/DialogBody';
 import DialogHeader from './parts/DialogHeader';
 import DialogNavigation from './parts/DialogNavigation';
 import { DialogProps, DialogContentProps } from './types';
-declare function Dialog({ id, rootId, contentId, focusSelector, labelledBy, directDomReturn, hideCloseButton, closeButtonAttributes, disabled, title, dialogTitle, closeTitle, spacing, noAnimation, noAnimationOnMobile, animationDuration, fullscreen, onOpen, onClose, onClosePrevent, openModal, closeModal, preventClose, openState, openDelay, trigger, triggerAttributes, overlayClass, contentClass, top, bottom, left, right, space, ...props }: DialogProps & DialogContentProps): JSX.Element;
+declare function Dialog(localProps: DialogProps & DialogContentProps): JSX.Element;
 declare namespace Dialog {
     var Body: typeof DialogBody;
     var Header: typeof DialogHeader;
     var Navigation: typeof DialogNavigation;
+    var Action: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, children, }: import("./parts/DialogAction").DialogActionProps) => JSX.Element;
 }
 export default Dialog;

package/cjs/components/dialog/Dialog.js

@@ -53,9 +53,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 
-var _componentHelper = require("../../shared/component-helper");
+var _DialogAction = _interopRequireDefault(require("./parts/DialogAction"));
 
-var _excluded = ["id", "rootId", "contentId", "focusSelector", "labelledBy", "directDomReturn", "hideCloseButton", "closeButtonAttributes", "disabled", "title", "dialogTitle", "closeTitle", "spacing", "noAnimation", "noAnimationOnMobile", "animationDuration", "fullscreen", "onOpen", "onClose", "onClosePrevent", "openModal", "closeModal", "preventClose", "openState", "openDelay", "trigger", "triggerAttributes", "overlayClass", "contentClass", "top", "bottom", "left", "right", "space"];
+var _hooks = require("../../shared/hooks");
+
+var _excluded = ["id", "rootId", "contentId", "focusSelector", "labelledBy", "directDomReturn", "closeButtonAttributes", "disabled", "variant", "title", "dialogTitle", "closeTitle", "spacing", "noAnimation", "noAnimationOnMobile", "animationDuration", "triggerAttributes", "hideCloseButton", "fullscreen", "onOpen", "onClose", "onClosePrevent", "openModal", "closeModal", "preventClose", "openState", "openDelay", "trigger", "overlayClass", "contentClass", "top", "bottom", "left", "right", "space"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -75,47 +77,68 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function Dialog(_ref) {
-  var id = _ref.id,
-      rootId = _ref.rootId,
-      contentId = _ref.contentId,
-      focusSelector = _ref.focusSelector,
-      labelledBy = _ref.labelledBy,
-      directDomReturn = _ref.directDomReturn,
-      hideCloseButton = _ref.hideCloseButton,
-      closeButtonAttributes = _ref.closeButtonAttributes,
-      disabled = _ref.disabled,
-      title = _ref.title,
-      dialogTitle = _ref.dialogTitle,
-      closeTitle = _ref.closeTitle,
-      _ref$spacing = _ref.spacing,
-      spacing = _ref$spacing === void 0 ? true : _ref$spacing,
-      noAnimation = _ref.noAnimation,
-      noAnimationOnMobile = _ref.noAnimationOnMobile,
-      animationDuration = _ref.animationDuration,
-      _ref$fullscreen = _ref.fullscreen,
-      fullscreen = _ref$fullscreen === void 0 ? 'auto' : _ref$fullscreen,
-      onOpen = _ref.onOpen,
-      onClose = _ref.onClose,
-      onClosePrevent = _ref.onClosePrevent,
-      openModal = _ref.openModal,
-      closeModal = _ref.closeModal,
-      preventClose = _ref.preventClose,
-      openState = _ref.openState,
-      openDelay = _ref.openDelay,
-      trigger = _ref.trigger,
-      triggerAttributes = _ref.triggerAttributes,
-      overlayClass = _ref.overlayClass,
-      contentClass = _ref.contentClass,
-      top = _ref.top,
-      bottom = _ref.bottom,
-      left = _ref.left,
-      right = _ref.right,
-      space = _ref.space,
-      props = _objectWithoutProperties(_ref, _excluded);
+var defaultProps = {
+  variant: 'information',
+  spacing: true
+};
 
+function Dialog(localProps) {
   var context = (0, _react.useContext)(_Context.default);
-  var modalProps = (0, _componentHelper.removeUndefinedProps)({
+  var propsWithContext = (0, _hooks.usePropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Dialog);
+
+  var id = propsWithContext.id,
+      rootId = propsWithContext.rootId,
+      contentId = propsWithContext.contentId,
+      focusSelector = propsWithContext.focusSelector,
+      labelledBy = propsWithContext.labelledBy,
+      directDomReturn = propsWithContext.directDomReturn,
+      closeButtonAttributes = propsWithContext.closeButtonAttributes,
+      disabled = propsWithContext.disabled,
+      variant = propsWithContext.variant,
+      title = propsWithContext.title,
+      dialogTitle = propsWithContext.dialogTitle,
+      closeTitle = propsWithContext.closeTitle,
+      spacing = propsWithContext.spacing,
+      noAnimation = propsWithContext.noAnimation,
+      noAnimationOnMobile = propsWithContext.noAnimationOnMobile,
+      animationDuration = propsWithContext.animationDuration,
+      triggerAttributes = propsWithContext.triggerAttributes,
+      hideCloseButton = propsWithContext.hideCloseButton,
+      fullscreen = propsWithContext.fullscreen,
+      onOpen = propsWithContext.onOpen,
+      onClose = propsWithContext.onClose,
+      onClosePrevent = propsWithContext.onClosePrevent,
+      openModal = propsWithContext.openModal,
+      closeModal = propsWithContext.closeModal,
+      preventClose = propsWithContext.preventClose,
+      openState = propsWithContext.openState,
+      openDelay = propsWithContext.openDelay,
+      trigger = propsWithContext.trigger,
+      overlayClass = propsWithContext.overlayClass,
+      contentClass = propsWithContext.contentClass,
+      top = propsWithContext.top,
+      bottom = propsWithContext.bottom,
+      left = propsWithContext.left,
+      right = propsWithContext.right,
+      space = propsWithContext.space,
+      props = _objectWithoutProperties(propsWithContext, _excluded);
+
+  var currentHideCloseButton = hideCloseButton;
+  var currentTriggerAttributes = triggerAttributes;
+  var currentFullscreen = fullscreen;
+
+  if (variant === 'confirmation') {
+    currentHideCloseButton = hideCloseButton !== undefined ? hideCloseButton : true;
+    currentTriggerAttributes = triggerAttributes || {
+      hidden: true
+    };
+  }
+
+  if (fullscreen === undefined) {
+    currentFullscreen = variant === 'information' ? 'auto' : false;
+  }
+
+  var modalProps = {
     title: title,
     id: id,
     focusSelector: focusSelector,
@@ -126,13 +149,13 @@ function Dialog(_ref) {
     contentId: contentId,
     dialogTitle: dialogTitle,
     closeTitle: closeTitle,
-    hideCloseButton: hideCloseButton,
+    hideCloseButton: currentHideCloseButton,
     closeButtonAttributes: closeButtonAttributes,
     preventClose: preventClose,
     animationDuration: animationDuration,
     noAnimation: noAnimation,
     noAnimationOnMobile: noAnimationOnMobile,
-    fullscreen: fullscreen,
+    fullscreen: currentFullscreen,
     openState: openState,
     directDomReturn: directDomReturn,
     rootId: rootId,
@@ -142,28 +165,33 @@ function Dialog(_ref) {
     openModal: openModal,
     closeModal: closeModal,
     trigger: trigger,
-    triggerAttributes: triggerAttributes,
+    triggerAttributes: currentTriggerAttributes,
     overlayClass: overlayClass,
     top: top,
     bottom: bottom,
     left: left,
     right: right,
     space: space
-  });
-  var dialogProps = (0, _componentHelper.removeUndefinedProps)(_objectSpread(_objectSpread({}, props), {}, {
+  };
+
+  var dialogProps = _objectSpread(_objectSpread({}, props), {}, {
     noAnimation: noAnimation,
     noAnimationOnMobile: noAnimationOnMobile,
-    fullscreen: fullscreen,
-    spacing: spacing
-  }));
-  return _react.default.createElement(_Modal.default, _extends({}, context.Dialog, modalProps, {
+    fullscreen: currentFullscreen,
+    spacing: spacing,
+    variant: variant
+  });
+
+  return _react.default.createElement(_Modal.default, _extends({}, modalProps, {
     mode: "custom",
+    dialogRole: variant == 'information' ? 'dialog' : 'alertdialog',
     contentClass: (0, _classnames.default)('dnb-dialog__root', contentClass)
-  }), _react.default.createElement(_DialogContent.default, _extends({}, context.Dialog, dialogProps)));
+  }), _react.default.createElement(_DialogContent.default, dialogProps));
 }
 
 Dialog.Body = _DialogBody.default;
 Dialog.Header = _DialogHeader.default;
 Dialog.Navigation = _DialogNavigation.default;
+Dialog.Action = _DialogAction.default;
 var _default = Dialog;
 exports.default = _default;

package/cjs/components/dialog/DialogContent.d.ts

@@ -4,4 +4,4 @@
  */
 /// <reference types="react" />
 import { DialogContentProps } from './types';
-export default function DialogContent({ modalContent, navContent, headerContent, alignContent, className, class: _className, preventCoreStyle, spacing, fullscreen, noAnimation, noAnimationOnMobile, minWidth: min_width, maxWidth: max_width, ...rest }: DialogContentProps): JSX.Element;
+export default function DialogContent({ modalContent, navContent, headerContent, alignContent, className, class: _className, preventCoreStyle, spacing, fullscreen, noAnimation, noAnimationOnMobile, minWidth: min_width, maxWidth: max_width, variant, confirmType, icon, description, hideDecline, onConfirm, onDecline, declineText, confirmText, ...rest }: DialogContentProps): JSX.Element;

package/cjs/components/dialog/DialogContent.js

@@ -6,8 +6,6 @@ require("core-js/modules/es.object.keys.js");
 
 require("core-js/modules/es.array.index-of.js");
 
-require("core-js/modules/es.symbol.js");
-
 require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.object.to-string.js");
@@ -26,8 +24,6 @@ require("core-js/modules/es.weak-map.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.symbol.description.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -35,6 +31,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = DialogContent;
 
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
 require("core-js/modules/es.object.freeze.js");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -49,6 +49,8 @@ var _DialogHeader = _interopRequireDefault(require("./parts/DialogHeader"));
 
 var _DialogNavigation = _interopRequireDefault(require("./parts/DialogNavigation"));
 
+var _DialogAction = _interopRequireDefault(require("./parts/DialogAction"));
+
 var _helpers = require("../modal/helpers");
 
 var _ModalContext = _interopRequireDefault(require("../modal/ModalContext"));
@@ -59,7 +61,9 @@ var _ModalHeaderBar = _interopRequireDefault(require("../modal/parts/ModalHeader
 
 var _ModalHeader = _interopRequireDefault(require("../modal/parts/ModalHeader"));
 
-var _excluded = ["modalContent", "navContent", "headerContent", "alignContent", "className", "class", "preventCoreStyle", "spacing", "fullscreen", "noAnimation", "noAnimationOnMobile", "minWidth", "maxWidth"];
+var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
+
+var _excluded = ["modalContent", "navContent", "headerContent", "alignContent", "className", "class", "preventCoreStyle", "spacing", "fullscreen", "noAnimation", "noAnimationOnMobile", "minWidth", "maxWidth", "variant", "confirmType", "icon", "description", "hideDecline", "onConfirm", "onDecline", "declineText", "confirmText"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -85,7 +89,7 @@ function DialogContent(_ref) {
       _ref$headerContent = _ref.headerContent,
       headerContent = _ref$headerContent === void 0 ? null : _ref$headerContent,
       _ref$alignContent = _ref.alignContent,
-      alignContent = _ref$alignContent === void 0 ? 'left' : _ref$alignContent,
+      alignContent = _ref$alignContent === void 0 ? null : _ref$alignContent,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
       _ref$class = _ref.class,
@@ -94,8 +98,7 @@ function DialogContent(_ref) {
       preventCoreStyle = _ref$preventCoreStyle === void 0 ? null : _ref$preventCoreStyle,
       _ref$spacing = _ref.spacing,
       spacing = _ref$spacing === void 0 ? true : _ref$spacing,
-      _ref$fullscreen = _ref.fullscreen,
-      fullscreen = _ref$fullscreen === void 0 ? 'auto' : _ref$fullscreen,
+      fullscreen = _ref.fullscreen,
       _ref$noAnimation = _ref.noAnimation,
       noAnimation = _ref$noAnimation === void 0 ? false : _ref$noAnimation,
       _ref$noAnimationOnMob = _ref.noAnimationOnMobile,
@@ -104,6 +107,18 @@ function DialogContent(_ref) {
       min_width = _ref$minWidth === void 0 ? null : _ref$minWidth,
       _ref$maxWidth = _ref.maxWidth,
       max_width = _ref$maxWidth === void 0 ? null : _ref$maxWidth,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'information' : _ref$variant,
+      _ref$confirmType = _ref.confirmType,
+      confirmType = _ref$confirmType === void 0 ? 'info' : _ref$confirmType,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? null : _ref$icon,
+      description = _ref.description,
+      hideDecline = _ref.hideDecline,
+      onConfirm = _ref.onConfirm,
+      onDecline = _ref.onDecline,
+      declineText = _ref.declineText,
+      confirmText = _ref.confirmText,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var context = (0, _react.useContext)(_ModalContext.default);
@@ -116,8 +131,12 @@ function DialogContent(_ref) {
     close: context === null || context === void 0 ? void 0 : context.close
   })) : rest);
 
+  if (alignContent === null) {
+    alignContent = variant === 'information' ? 'left' : 'centered';
+  }
+
   var innerParams = _objectSpread({
-    className: (0, _classnames.default)('dnb-dialog', (0, _componentHelper.isTrue)(fullscreen) ? "dnb-dialog--fullscreen" : fullscreen === 'auto' && "dnb-dialog--auto-fullscreen", className, _className, !(0, _componentHelper.isTrue)(preventCoreStyle) && 'dnb-core-style', (0, _componentHelper.isTrue)(spacing) && 'dnb-dialog--spacing', alignContent && "dnb-dialog__align--".concat(alignContent), (0, _componentHelper.isTrue)(context === null || context === void 0 ? void 0 : context.hide) && "dnb-dialog--hide", (0, _componentHelper.isTrue)(noAnimation) && "dnb-dialog--no-animation", (0, _componentHelper.isTrue)(noAnimationOnMobile) && "dnb-dialog--no-animation-on-mobile"),
+    className: (0, _classnames.default)('dnb-dialog', (0, _componentHelper.isTrue)(fullscreen) ? "dnb-dialog--fullscreen" : fullscreen === 'auto' && "dnb-dialog--auto-fullscreen", className, _className, !(0, _componentHelper.isTrue)(preventCoreStyle) && 'dnb-core-style', variant && "dnb-dialog--".concat(variant), (0, _componentHelper.isTrue)(spacing) && 'dnb-dialog--spacing', alignContent && "dnb-dialog__align--".concat(alignContent), (0, _componentHelper.isTrue)(context === null || context === void 0 ? void 0 : context.hide) && "dnb-dialog--hide", (0, _componentHelper.isTrue)(noAnimation) && "dnb-dialog--no-animation", (0, _componentHelper.isTrue)(noAnimationOnMobile) && "dnb-dialog--no-animation-on-mobile"),
     style: (minWidth || maxWidth) && {
       minWidth: minWidth,
       maxWidth: maxWidth
@@ -133,14 +152,33 @@ function DialogContent(_ref) {
   var headerExists = (0, _componentHelper.findElementInChildren)(content, function (cur) {
     return cur.type === _DialogHeader.default || cur.type === _ModalHeader.default;
   });
+  var actionExists = (0, _componentHelper.findElementInChildren)(content, function (cur) {
+    return cur.type === _DialogAction.default;
+  });
+  var dialogActionProps = {
+    onConfirm: onConfirm,
+    onDecline: onDecline,
+    declineText: declineText,
+    confirmText: confirmText,
+    hideDecline: hideDecline
+  };
   return _react.default.createElement(_ScrollView.default, innerParams, _react.default.createElement("div", {
     tabIndex: -1,
     className: "dnb-dialog__inner dnb-no-focus",
     ref: context === null || context === void 0 ? void 0 : context.contentRef
-  }, !navExists && _react.default.createElement(_DialogNavigation.default, null, navContent), !headerExists && _react.default.createElement(_DialogHeader.default, {
-    title: context === null || context === void 0 ? void 0 : context.title
+  }, !navExists && _react.default.createElement(_DialogNavigation.default, null, navContent), icon && _react.default.createElement("div", {
+    className: "dnb-dialog__icon"
+  }, _react.default.createElement(_IconPrimary.default, {
+    border: true,
+    key: "dialog-icon",
+    icon: icon,
+    "aria-hidden": true,
+    className: (0, _classnames.default)('dnb-dialog__icon__primary', 'dnb-dialog__icon--' + confirmType)
+  })), !headerExists && _react.default.createElement(_DialogHeader.default, {
+    title: context === null || context === void 0 ? void 0 : context.title,
+    size: variant === 'information' ? 'x-large' : 'large'
   }, headerContent), _react.default.createElement("div", {
     id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
     className: "dnb-dialog__content"
-  }, content)));
+  }, description, content), variant === 'confirmation' && !actionExists && _react.default.createElement(_DialogAction.default, dialogActionProps)));
 }

package/cjs/components/dialog/parts/DialogAction.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+declare type extendedMouseEvent = {
+    event: React.MouseEvent<HTMLElement>;
+    close: () => void;
+};
+interface DialogActionProps {
+    /**
+     * For dialog actions, give a custom text for the decline button.
+     */
+    declineText?: string;
+    /**
+     * For dialog actions, give a custom text for the confirm button.
+     */
+    confirmText?: string;
+    /**
+     * For variant confirmation, handle the confirm action click.
+     */
+    onConfirm?: (event: extendedMouseEvent) => void;
+    /**
+     * For variant confirmation, handle the decline action click.
+     */
+    onDecline?: (event: extendedMouseEvent) => void;
+    /**
+     * For variant confirmation, hide the default decline button and only show the confirm button.
+     */
+    hideDecline?: boolean;
+    /**
+     * Pass in custom confirm/decline buttons for action handling. Every child of type Button will be provided with a `close` function attribute.
+     */
+    children?: React.ReactElement | Array<React.ReactElement>;
+}
+declare const DialogAction: ({ declineText, confirmText, hideDecline, onConfirm, onDecline, children, }: DialogActionProps) => JSX.Element;
+export default DialogAction;
+export type { DialogActionProps };

package/cjs/components/dialog/parts/DialogAction.js

@@ -0,0 +1,136 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../../button/Button"));
+
+var _shared = require("../../../shared");
+
+var _ModalContext = _interopRequireDefault(require("../../modal/ModalContext"));
+
+var _componentHelper = require("../../../shared/component-helper");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var fallbackCloseAction = function fallbackCloseAction(_ref) {
+  var close = _ref.close;
+  return close();
+};
+
+var DialogAction = function DialogAction(_ref2) {
+  var _translation$Dialog, _translation$Dialog2;
+
+  var _ref2$declineText = _ref2.declineText,
+      declineText = _ref2$declineText === void 0 ? null : _ref2$declineText,
+      _ref2$confirmText = _ref2.confirmText,
+      confirmText = _ref2$confirmText === void 0 ? null : _ref2$confirmText,
+      _ref2$hideDecline = _ref2.hideDecline,
+      hideDecline = _ref2$hideDecline === void 0 ? false : _ref2$hideDecline,
+      _ref2$onConfirm = _ref2.onConfirm,
+      onConfirm = _ref2$onConfirm === void 0 ? fallbackCloseAction : _ref2$onConfirm,
+      _ref2$onDecline = _ref2.onDecline,
+      onDecline = _ref2$onDecline === void 0 ? fallbackCloseAction : _ref2$onDecline,
+      children = _ref2.children;
+
+  var _useContext = (0, _react.useContext)(_shared.Context),
+      translation = _useContext.translation,
+      ButtonContext = _useContext.Button;
+
+  var _useContext2 = (0, _react.useContext)(_ModalContext.default),
+      close = _useContext2.close;
+
+  var childrenWithCloseFunc;
+
+  if (children) {
+    childrenWithCloseFunc = _react.default.Children.map(children, function (child) {
+      if (child.type === _Button.default) {
+        return _react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+          on_click: function on_click(event) {
+            (0, _componentHelper.dispatchCustomElementEvent)(child.props, 'on_click', {
+              event: event,
+              close: close
+            });
+          }
+        }), child.props.children);
+      } else {
+        return child;
+      }
+    });
+  }
+
+  return _react.default.createElement("div", {
+    className: "dnb-dialog__actions"
+  }, childrenWithCloseFunc, !children && !hideDecline && _react.default.createElement(_Button.default, {
+    text: declineText || (translation === null || translation === void 0 ? void 0 : (_translation$Dialog = translation.Dialog) === null || _translation$Dialog === void 0 ? void 0 : _translation$Dialog.declineText),
+    variant: "secondary",
+    onClick: function onClick(event) {
+      (0, _componentHelper.dispatchCustomElementEvent)({
+        onDecline: onDecline
+      }, 'onDecline', {
+        event: event,
+        close: close
+      });
+    },
+    size: (ButtonContext === null || ButtonContext === void 0 ? void 0 : ButtonContext.size) || 'large'
+  }), !children && _react.default.createElement(_Button.default, {
+    text: confirmText || (translation === null || translation === void 0 ? void 0 : (_translation$Dialog2 = translation.Dialog) === null || _translation$Dialog2 === void 0 ? void 0 : _translation$Dialog2.confirmText),
+    variant: "primary",
+    onClick: function onClick(event) {
+      (0, _componentHelper.dispatchCustomElementEvent)({
+        onConfirm: onConfirm
+      }, 'onConfirm', {
+        event: event,
+        close: close
+      });
+    },
+    size: (ButtonContext === null || ButtonContext === void 0 ? void 0 : ButtonContext.size) || 'large'
+  }));
+};
+
+var _default = DialogAction;
+exports.default = _default;