@dnb/eufemia 9.23.1 → 9.24.0

package/components/number-format/NumberUtils.d.ts

@@ -34,6 +34,9 @@ export interface formatOptionParams {
   /** Should the number be cleaned */
   clean?: boolean;
 
+  /** shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either a boolean, or a string with "short" or "long" */
+  compact?: boolean | 'short' | 'long';
+
   /** How many decimals */
   decimals?: number;
 
@@ -53,13 +56,19 @@ export interface formatOptionParams {
   /** Currency code (ISO 4217) or `true` to use the default, `NOK`. */
   currency?: string | boolean;
 
-  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name */
-  currency_display?: string | boolean;
+  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name. Defaults to narrowSymbol when the locale is no else we default to code. */
+  currency_display?:
+    | boolean
+    | ''
+    | 'code'
+    | 'name'
+    | 'symbol'
+    | 'narrowSymbol';
   /** currency option */
   currency_position?: formatCurrencyPosition;
   /** hides the currency sign */
   omit_currency_sign?: boolean;
-  /** will remove all extra signs,like a currency sign or percent sign for the cleanedValue return when returnAria is true */
+  /** will remove all extra signs, like a currency sign or percent sign for the cleanedValue return when returnAria is true */
   clean_copy_value?: boolean;
 
   /** Intl.NumberFormat options (NumberFormatOptions) */

package/components/number-format/NumberUtils.js

@@ -31,6 +31,7 @@ import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.string.starts-with.js";
 import "core-js/modules/es.string.ends-with.js";
 import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.parse-int.js";
 import React from 'react';
 import Context from '../../shared/Context';
 import { LOCALE, CURRENCY, CURRENCY_DISPLAY } from '../../shared/defaults';
@@ -43,6 +44,8 @@ export var format = function format(value) {
       locale = _ref$locale === void 0 ? null : _ref$locale,
       _ref$clean = _ref.clean,
       clean = _ref$clean === void 0 ? false : _ref$clean,
+      _ref$compact = _ref.compact,
+      compact = _ref$compact === void 0 ? null : _ref$compact,
       _ref$phone = _ref.phone,
       phone = _ref$phone === void 0 ? null : _ref$phone,
       _ref$org = _ref.org,
@@ -94,7 +97,7 @@ export var format = function format(value) {
 
   if (parseFloat(decimals) >= 0) {
     value = formatDecimals(value, decimals, omit_rounding, opts);
-  } else {
+  } else if (typeof opts.maximumFractionDigits === 'undefined') {
     opts.maximumFractionDigits = 20;
   }
 
@@ -152,6 +155,13 @@ export var format = function format(value) {
   } else if (isTrue(currency) || typeof currency === 'string') {
     type = 'currency';
     opts.currency = opts.currency || (isTrue(currency) ? CURRENCY : currency);
+    handleCompactBeforeDisplay({
+      value: value,
+      locale: locale,
+      compact: compact,
+      decimals: decimals,
+      opts: opts
+    });
 
     if (decimals === null) {
       decimals = 2;
@@ -165,7 +175,7 @@ export var format = function format(value) {
     }
 
     opts.style = 'currency';
-    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currency_display || currency_display);
+    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currencyDisplay || currency_display);
 
     if (typeof opts.minimumFractionDigits === 'undefined' && String(value).indexOf('.') === -1 && cleanedNumber % 1 === 0) {
       opts.minimumFractionDigits = 0;
@@ -214,6 +224,11 @@ export var format = function format(value) {
       }
     }
 
+    handleCompactBeforeAria({
+      value: value,
+      compact: compact,
+      opts: opts
+    });
     aria = formatNumber(cleanedNumber, locale, _objectSpread(_objectSpread({
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
@@ -229,12 +244,21 @@ export var format = function format(value) {
       aria = prepareMinus(aria, locale);
     }
   } else {
+    handleCompactBeforeDisplay({
+      value: value,
+      locale: locale,
+      compact: compact,
+      decimals: decimals,
+      opts: opts
+    });
     display = formatNumber(value, locale, opts);
     display = prepareMinus(display, locale);
-    aria = formatNumber(value, locale, _objectSpread(_objectSpread({}, opts), {}, {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 20
-    }));
+    handleCompactBeforeAria({
+      value: value,
+      compact: compact,
+      opts: opts
+    });
+    aria = formatNumber(value, locale, opts);
     aria = enhanceSR(value, aria, locale);
   }
 
@@ -261,7 +285,7 @@ export var format = function format(value) {
       });
     } else {
       var thousandsSeparator = getThousandsSeparator(locale);
-      cleanedValue = display.replace(new RegExp("".concat(thousandsSeparator, "(?=\\d{3})"), 'g'), '');
+      cleanedValue = String(display).replace(new RegExp("".concat(thousandsSeparator, "(?=\\d{3})"), 'g'), '');
     }
 
     return {
@@ -878,4 +902,78 @@ function formatToParts(_ref9) {
   return [{
     value: number
   }];
+}
+
+function handleCompactBeforeDisplay() {
+  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      value = _ref10.value,
+      locale = _ref10.locale,
+      compact = _ref10.compact,
+      _ref10$decimals = _ref10.decimals,
+      decimals = _ref10$decimals === void 0 ? 0 : _ref10$decimals,
+      opts = _ref10.opts;
+
+  if (!canHandleCompact({
+    value: value,
+    compact: compact
+  })) {
+    return;
+  }
+
+  value = parseInt(Math.abs(value));
+  opts.notation = 'compact';
+
+  if (isTrue(compact) && locale && /(no|nb|nn)$/i.test(locale)) {
+    opts.compactDisplay = Math.abs(value) < 1000000 ? 'long' : 'short';
+  } else {
+    opts.compactDisplay = !isTrue(compact) ? compact : 'short';
+  }
+
+  if (typeof opts.maximumSignificantDigits === 'undefined') {
+    if (isNaN(parseFloat(decimals))) {
+      decimals = 0;
+    } else {
+      decimals = parseFloat(decimals);
+    }
+
+    var ref = String(value).length % 3;
+
+    if (ref === 2) {
+      decimals += 1;
+    } else if (ref === 0) {
+      decimals += 2;
+    }
+
+    opts.maximumSignificantDigits = decimals + 1;
+  }
+}
+
+function handleCompactBeforeAria(_ref11) {
+  var value = _ref11.value,
+      compact = _ref11.compact,
+      opts = _ref11.opts;
+
+  if (!canHandleCompact({
+    value: value,
+    compact: compact
+  })) {
+    return;
+  }
+
+  opts.compactDisplay = 'long';
+}
+
+function canHandleCompact(_ref12) {
+  var value = _ref12.value,
+      compact = _ref12.compact;
+
+  if (IS_IE11) {
+    return false;
+  }
+
+  if (compact && Math.abs(value) >= 1000) {
+    return true;
+  }
+
+  return false;
 }

package/components/tag/Tag.d.ts

@@ -13,6 +13,11 @@ export interface TagProps {
      * Default: null
      */
     icon?: IconPrimaryIcon;
+    /**
+     * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.
+     * Default: null
+     */
+    hasLabel?: boolean;
     /**
      * Custom className on the component root
      * Default: null
@@ -45,13 +50,7 @@ export interface TagProps {
     omitOnKeyUpDeleteEvent?: boolean;
 }
 export declare const defaultProps: {
-    className: any;
     skeleton: boolean;
-    text: any;
-    children: any;
-    icon: any;
-    onClick: any;
-    onDelete: any;
     omitOnKeyUpDeleteEvent: boolean;
 };
 declare const Tag: {

package/components/tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 
 var _IconPrimary;
 
-var _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
+var _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
 import React from 'react';
 import classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -14,13 +14,7 @@ import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
 export var defaultProps = {
-  className: null,
   skeleton: false,
-  text: null,
-  children: null,
-  icon: null,
-  onClick: null,
-  onDelete: null,
   omitOnKeyUpDeleteEvent: false
 };
 
@@ -35,6 +29,7 @@ var Tag = function Tag(localProps) {
       skeleton = _usePropsWithContext.skeleton,
       children = _usePropsWithContext.children,
       text = _usePropsWithContext.text,
+      hasLabel = _usePropsWithContext.hasLabel,
       onClick = _usePropsWithContext.onClick,
       onDelete = _usePropsWithContext.onDelete,
       omitOnKeyUpDeleteEvent = _usePropsWithContext.omitOnKeyUpDeleteEvent,
@@ -67,7 +62,7 @@ var Tag = function Tag(localProps) {
     buttonAttr.icon = getDeleteIcon();
   }
 
-  if (!tagGroupContext) {
+  if (!tagGroupContext && !hasLabel) {
     warn("Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.");
   }
 

package/es/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/es/components/avatar/Avatar.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps"];
+const _excluded = ["alt", "className", "children", "size", "skeleton", "variant", "src", "imgProps", "hasLabel"];
 
 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; }
 
@@ -17,14 +17,9 @@ import { warn } from '../../shared/component-helper';
 import { usePropsWithContext } from '../../shared/hooks';
 import AvatarGroup, { AvatarGroupContext } from './AvatarGroup';
 export const defaultProps = {
-  alt: null,
-  className: null,
   size: 'medium',
-  src: null,
-  imgProps: null,
   variant: 'primary',
-  skeleton: false,
-  children: null
+  skeleton: false
 };
 
 const Avatar = localProps => {
@@ -40,7 +35,8 @@ const Avatar = localProps => {
     skeleton,
     variant,
     src,
-    imgProps
+    imgProps,
+    hasLabel
   } = _usePropsWithContext,
         props = _objectWithoutProperties(_usePropsWithContext, _excluded);
 
@@ -66,7 +62,7 @@ const Avatar = localProps => {
     children = childrenProp;
   }
 
-  if (!avatarGroupContext) {
+  if (!avatarGroupContext && !hasLabel) {
     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/es/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/es/components/breadcrumb/Breadcrumb.js

@@ -13,12 +13,7 @@ import { usePropsWithContext } from '../../shared/hooks';
 import BreadcrumbItem from './BreadcrumbItem';
 import { convertJsxToString } from '../../shared/component-helper';
 export const defaultProps = {
-  className: null,
   skeleton: false,
-  children: null,
-  variant: null,
-  onClick: null,
-  href: null,
   navText: 'Back',
   goBackText: 'Back',
   homeText: 'Home',
@@ -26,7 +21,6 @@ export const defaultProps = {
   isCollapsed: true,
   styleType: 'transparent',
   collapsedStyleType: 'pistachio',
-  data: null,
   spacing: false
 };
 
@@ -66,7 +60,7 @@ const Breadcrumb = localProps => {
   });
   let currentVariant = variant;
 
-  if (variant === null) {
+  if (!variant) {
     if (childrenItems || data) {
       currentVariant = isSmallScreen ? 'collapse' : 'multiple';
     } else {

package/es/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/es/components/dialog/Dialog.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _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"];
+const _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 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; }
 
@@ -15,27 +15,37 @@ import DialogHeader from './parts/DialogHeader';
 import DialogNavigation from './parts/DialogNavigation';
 import classnames from 'classnames';
 import Context from '../../shared/Context';
-import { removeUndefinedProps } from '../../shared/component-helper';
+import DialogAction from './parts/DialogAction';
+import { usePropsWithContext } from '../../shared/hooks';
+const defaultProps = {
+  variant: 'information',
+  spacing: true
+};
 
-function Dialog(_ref) {
-  let {
+function Dialog(localProps) {
+  const context = useContext(Context);
+  const propsWithContext = usePropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Dialog);
+
+  const {
     id,
     rootId,
     contentId,
     focusSelector,
     labelledBy,
     directDomReturn,
-    hideCloseButton,
     closeButtonAttributes,
     disabled,
+    variant,
     title,
     dialogTitle,
     closeTitle,
-    spacing = true,
+    spacing,
     noAnimation,
     noAnimationOnMobile,
     animationDuration,
-    fullscreen = 'auto',
+    triggerAttributes,
+    hideCloseButton,
+    fullscreen,
     onOpen,
     onClose,
     onClosePrevent,
@@ -45,7 +55,6 @@ function Dialog(_ref) {
     openState,
     openDelay,
     trigger,
-    triggerAttributes,
     overlayClass,
     contentClass,
     top,
@@ -53,11 +62,25 @@ function Dialog(_ref) {
     left,
     right,
     space
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
+  } = propsWithContext,
+        props = _objectWithoutProperties(propsWithContext, _excluded);
 
-  const context = useContext(Context);
-  const modalProps = removeUndefinedProps({
+  let currentHideCloseButton = hideCloseButton;
+  let currentTriggerAttributes = triggerAttributes;
+  let currentFullscreen = fullscreen;
+
+  if (variant === 'confirmation') {
+    currentHideCloseButton = hideCloseButton !== undefined ? hideCloseButton : true;
+    currentTriggerAttributes = triggerAttributes || {
+      hidden: true
+    };
+  }
+
+  if (fullscreen === undefined) {
+    currentFullscreen = variant === 'information' ? 'auto' : false;
+  }
+
+  const modalProps = {
     title,
     id,
     focusSelector,
@@ -68,13 +91,13 @@ function Dialog(_ref) {
     contentId,
     dialogTitle,
     closeTitle,
-    hideCloseButton,
+    hideCloseButton: currentHideCloseButton,
     closeButtonAttributes,
     preventClose,
     animationDuration,
     noAnimation,
     noAnimationOnMobile,
-    fullscreen,
+    fullscreen: currentFullscreen,
     openState,
     directDomReturn,
     rootId,
@@ -84,27 +107,32 @@ function Dialog(_ref) {
     openModal,
     closeModal,
     trigger,
-    triggerAttributes,
+    triggerAttributes: currentTriggerAttributes,
     overlayClass,
     top,
     bottom,
     left,
     right,
     space
-  });
-  const dialogProps = removeUndefinedProps(_objectSpread(_objectSpread({}, props), {}, {
+  };
+
+  const dialogProps = _objectSpread(_objectSpread({}, props), {}, {
     noAnimation,
     noAnimationOnMobile,
-    fullscreen,
-    spacing
-  }));
-  return React.createElement(Modal, _extends({}, context.Dialog, modalProps, {
+    fullscreen: currentFullscreen,
+    spacing,
+    variant
+  });
+
+  return React.createElement(Modal, _extends({}, modalProps, {
     mode: "custom",
+    dialogRole: variant == 'information' ? 'dialog' : 'alertdialog',
     contentClass: classnames('dnb-dialog__root', contentClass)
-  }), React.createElement(DialogContent, _extends({}, context.Dialog, dialogProps)));
+  }), React.createElement(DialogContent, dialogProps));
 }
 
 Dialog.Body = DialogBody;
 Dialog.Header = DialogHeader;
 Dialog.Navigation = DialogNavigation;
+Dialog.Action = DialogAction;
 export default Dialog;

package/es/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/es/components/dialog/DialogContent.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["modalContent", "navContent", "headerContent", "alignContent", "className", "class", "preventCoreStyle", "spacing", "fullscreen", "noAnimation", "noAnimationOnMobile", "minWidth", "maxWidth"];
+const _excluded = ["modalContent", "navContent", "headerContent", "alignContent", "className", "class", "preventCoreStyle", "spacing", "fullscreen", "noAnimation", "noAnimationOnMobile", "minWidth", "maxWidth", "variant", "confirmType", "icon", "description", "hideDecline", "onConfirm", "onDecline", "declineText", "confirmText"];
 
 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; }
 
@@ -12,26 +12,37 @@ import { isTrue, findElementInChildren } from '../../shared/component-helper';
 import ScrollView from '../../fragments/scroll-view/ScrollView';
 import DialogHeader from './parts/DialogHeader';
 import DialogNavigation from './parts/DialogNavigation';
+import DialogAction from './parts/DialogAction';
 import { getContent } from '../modal/helpers';
 import ModalContext from '../modal/ModalContext';
 import { checkMinMaxWidth } from '../drawer/helpers';
 import ModalHeaderBar from '../modal/parts/ModalHeaderBar';
 import ModalHeader from '../modal/parts/ModalHeader';
+import IconPrimary from '../icon-primary/IconPrimary';
 export default function DialogContent(_ref) {
   let {
     modalContent = null,
     navContent = null,
     headerContent = null,
-    alignContent = 'left',
+    alignContent = null,
     className = null,
     class: _className = null,
     preventCoreStyle = null,
     spacing = true,
-    fullscreen = 'auto',
+    fullscreen,
     noAnimation = false,
     noAnimationOnMobile = false,
     minWidth: min_width = null,
-    maxWidth: max_width = null
+    maxWidth: max_width = null,
+    variant = 'information',
+    confirmType = 'info',
+    icon = null,
+    description,
+    hideDecline,
+    onConfirm,
+    onDecline,
+    declineText,
+    confirmText
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -44,8 +55,12 @@ export default function DialogContent(_ref) {
     close: context === null || context === void 0 ? void 0 : context.close
   })) : rest);
 
+  if (alignContent === null) {
+    alignContent = variant === 'information' ? 'left' : 'centered';
+  }
+
   const innerParams = _objectSpread({
-    className: classnames('dnb-dialog', isTrue(fullscreen) ? `dnb-dialog--fullscreen` : fullscreen === 'auto' && `dnb-dialog--auto-fullscreen`, className, _className, !isTrue(preventCoreStyle) && 'dnb-core-style', isTrue(spacing) && 'dnb-dialog--spacing', alignContent && `dnb-dialog__align--${alignContent}`, isTrue(context === null || context === void 0 ? void 0 : context.hide) && `dnb-dialog--hide`, isTrue(noAnimation) && `dnb-dialog--no-animation`, isTrue(noAnimationOnMobile) && `dnb-dialog--no-animation-on-mobile`),
+    className: classnames('dnb-dialog', isTrue(fullscreen) ? `dnb-dialog--fullscreen` : fullscreen === 'auto' && `dnb-dialog--auto-fullscreen`, className, _className, !isTrue(preventCoreStyle) && 'dnb-core-style', variant && `dnb-dialog--${variant}`, isTrue(spacing) && 'dnb-dialog--spacing', alignContent && `dnb-dialog__align--${alignContent}`, isTrue(context === null || context === void 0 ? void 0 : context.hide) && `dnb-dialog--hide`, isTrue(noAnimation) && `dnb-dialog--no-animation`, isTrue(noAnimationOnMobile) && `dnb-dialog--no-animation-on-mobile`),
     style: (minWidth || maxWidth) && {
       minWidth,
       maxWidth
@@ -57,14 +72,31 @@ export default function DialogContent(_ref) {
 
   const navExists = findElementInChildren(content, cur => cur.type === DialogNavigation || cur.type === ModalHeaderBar);
   const headerExists = findElementInChildren(content, cur => cur.type === DialogHeader || cur.type === ModalHeader);
+  const actionExists = findElementInChildren(content, cur => cur.type === DialogAction);
+  const dialogActionProps = {
+    onConfirm,
+    onDecline,
+    declineText,
+    confirmText,
+    hideDecline
+  };
   return React.createElement(ScrollView, innerParams, React.createElement("div", {
     tabIndex: -1,
     className: "dnb-dialog__inner dnb-no-focus",
     ref: context === null || context === void 0 ? void 0 : context.contentRef
-  }, !navExists && React.createElement(DialogNavigation, null, navContent), !headerExists && React.createElement(DialogHeader, {
-    title: context === null || context === void 0 ? void 0 : context.title
+  }, !navExists && React.createElement(DialogNavigation, null, navContent), icon && React.createElement("div", {
+    className: "dnb-dialog__icon"
+  }, React.createElement(IconPrimary, {
+    border: true,
+    key: "dialog-icon",
+    icon: icon,
+    "aria-hidden": true,
+    className: classnames('dnb-dialog__icon__primary', 'dnb-dialog__icon--' + confirmType)
+  })), !headerExists && React.createElement(DialogHeader, {
+    title: context === null || context === void 0 ? void 0 : context.title,
+    size: variant === 'information' ? 'x-large' : 'large'
   }, headerContent), React.createElement("div", {
     id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
     className: "dnb-dialog__content"
-  }, content)));
+  }, description, content), variant === 'confirmation' && !actionExists && React.createElement(DialogAction, dialogActionProps)));
 }