@dnb/eufemia 9.23.1 → 9.24.0

package/components/dialog/DialogContent.js

@@ -1,14 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["modalContent", "navContent", "headerContent", "alignContent", "className", "class", "preventCoreStyle", "spacing", "fullscreen", "noAnimation", "noAnimationOnMobile", "minWidth", "maxWidth"];
+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 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 "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.freeze.js";
 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";
@@ -20,11 +21,13 @@ 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) {
   var _ref$modalContent = _ref.modalContent,
       modalContent = _ref$modalContent === void 0 ? null : _ref$modalContent,
@@ -33,7 +36,7 @@ export default 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,
@@ -42,8 +45,7 @@ export default 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,
@@ -52,6 +54,18 @@ export default 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 = useContext(ModalContext);
@@ -64,8 +78,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';
+  }
+
   var 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--".concat(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--".concat(variant), isTrue(spacing) && 'dnb-dialog--spacing', alignContent && "dnb-dialog__align--".concat(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: minWidth,
       maxWidth: maxWidth
@@ -81,14 +99,33 @@ export default function DialogContent(_ref) {
   var headerExists = findElementInChildren(content, function (cur) {
     return cur.type === DialogHeader || cur.type === ModalHeader;
   });
+  var actionExists = findElementInChildren(content, function (cur) {
+    return cur.type === DialogAction;
+  });
+  var dialogActionProps = {
+    onConfirm: onConfirm,
+    onDecline: onDecline,
+    declineText: declineText,
+    confirmText: confirmText,
+    hideDecline: 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)));
 }

package/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/components/dialog/parts/DialogAction.js

@@ -0,0 +1,96 @@
+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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 "core-js/modules/es.array.map.js";
+import React, { useContext } from 'react';
+import Button from '../../button/Button';
+import { Context } from '../../../shared';
+import ModalContext from '../../modal/ModalContext';
+import { dispatchCustomElementEvent } from '../../../shared/component-helper';
+
+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 = useContext(Context),
+      translation = _useContext.translation,
+      ButtonContext = _useContext.Button;
+
+  var _useContext2 = useContext(ModalContext),
+      close = _useContext2.close;
+
+  var childrenWithCloseFunc;
+
+  if (children) {
+    childrenWithCloseFunc = React.Children.map(children, function (child) {
+      if (child.type === Button) {
+        return React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+          on_click: function on_click(event) {
+            dispatchCustomElementEvent(child.props, 'on_click', {
+              event: event,
+              close: close
+            });
+          }
+        }), child.props.children);
+      } else {
+        return child;
+      }
+    });
+  }
+
+  return React.createElement("div", {
+    className: "dnb-dialog__actions"
+  }, childrenWithCloseFunc, !children && !hideDecline && React.createElement(Button, {
+    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) {
+      dispatchCustomElementEvent({
+        onDecline: onDecline
+      }, 'onDecline', {
+        event: event,
+        close: close
+      });
+    },
+    size: (ButtonContext === null || ButtonContext === void 0 ? void 0 : ButtonContext.size) || 'large'
+  }), !children && React.createElement(Button, {
+    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) {
+      dispatchCustomElementEvent({
+        onConfirm: onConfirm
+      }, 'onConfirm', {
+        event: event,
+        close: close
+      });
+    },
+    size: (ButtonContext === null || ButtonContext === void 0 ? void 0 : ButtonContext.size) || 'large'
+  }));
+};
+
+export default DialogAction;

package/components/dialog/style/_dialog.scss

@@ -9,28 +9,34 @@
   // we do this because SCSS fails by using min(100vw, 50rem) = "Incompatible units: 'rem' and 'vw'"
   --dialog-min-width: 320px; // use px, so larger font-size don't enlarge the min, has to be under 20rem, because of spacing and later mobile fullscreen
   --dialog-avg-width: 60vw; // content defines the size
-  --dialog-max-width: 60rem; // because of our default width --layout-large
+  --dialog-max-width: 49rem; // because of our default width --layout-large
+  --dialog-confirm-max-width: 40rem;
   --dialog-spacing: 2rem; // should reflect --spacing-large
   --dialog-spacing-minus: -2rem; // should reflect --spacing-large
 }
 
 .dnb-dialog {
   position: relative;
-
-  width: var(--dialog-avg-width);
-  min-width: var(--dialog-min-width);
-  max-width: var(--dialog-max-width);
   max-height: 100vh;
-
-  @include defaultDropShadow();
   border-radius: 0.5rem;
+  @include defaultDropShadow();
 
   user-select: text;
   -webkit-user-select: text; // Safari / Touch fix
   border: none;
-
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  &--information {
+    min-width: var(--dialog-min-width);
+    width: var(--dialog-avg-width);
+    max-width: var(--dialog-max-width);
+  }
+
+  &--confirmation {
+    max-width: var(--dialog-confirm-max-width);
+    margin: 0 1rem;
+  }
+
   &--auto-fullscreen {
     @include allBelow(small) {
       @include modalFullscreen();
@@ -39,14 +45,43 @@
   &--fullscreen {
     @include modalFullscreen();
   }
+  &--spacing#{&}--information &__content {
+    padding-bottom: calc(var(--dialog-spacing) * 2);
 
-  @include IS_SAFARI_MOBILE() {
-    // iOS on iPhone fix
-    // Because Safari includes the navigation bar on the height
-    @media (max-height: 40em) and (orientation: landscape) {
-      &:not(#{&}--fullscreen) {
-        max-height: 80vh;
-      }
+    @include IS_SAFARI_MOBILE {
+      padding-bottom: calc(var(--dialog-spacing) * 8);
+    }
+  }
+
+  &--spacing#{&}--information &__inner {
+    padding-left: calc(var(--dialog-spacing) * 1.75); // 3.5rem (56px)
+    padding-right: calc(var(--dialog-spacing) * 1.75); // 3.5rem (56px)
+
+    @include allBelow(large) {
+      padding-left: calc(var(--dialog-spacing)); // 2rem (32px)
+      padding-right: calc(var(--dialog-spacing)); // 2rem (32px)
+    }
+
+    @include allBelow(small) {
+      padding-left: calc(var(--dialog-spacing) / 2); // 1rem (16px)
+      padding-right: calc(var(--dialog-spacing) / 2); // 1rem (16px)
+    }
+  }
+
+  &--spacing#{&}--information &__navigation.dnb-section {
+    margin-top: calc(var(--dialog-spacing)); // 2rem (32px)
+    margin-bottom: calc(var(--dialog-spacing) / 2); // 1rem (16px)
+
+    @include allBelow(medium) {
+      margin-top: calc(var(--dialog-spacing) / 2); // 1rem (16px)
+    }
+  }
+
+  &--spacing#{&}--confirmation &__inner {
+    padding: calc(var(--dialog-spacing)); // 2rem (32px)
+
+    @include IS_SAFARI_MOBILE {
+      padding-bottom: calc(var(--dialog-spacing) * 8);
     }
   }
 
@@ -70,25 +105,98 @@
     }
   }
 
-  // Padding right and left based on screen size
-  &--spacing &__inner {
-    // FOR DIALOG STYLES
-    padding: 0 var(--dialog-spacing) 0;
+  &__align--centered &__inner {
+    align-items: center;
+    justify-content: center;
+  }
+  &__align--centered &__title,
+  &__align--centered#{&}--confirmation &__content {
+    text-align: center;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__actions {
+    padding-top: 1.5rem;
 
-    @include allAbove(x-large) {
-      padding: 0 calc(var(--dialog-spacing) * 1.75) 0; // 3.5rem (56px)
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    > :not(:last-child) {
+      margin-right: 1rem;
     }
+  }
+
+  &__align--center &__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  &__align--right &__content {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+  &__title ~ &__content {
+    padding-top: calc(var(--dialog-spacing) / 2);
+  }
+
+  &__title {
     @include allBelow(medium) {
-      padding: 0 calc(var(--dialog-spacing) / 1.333333) 0; // 2rem (32px)
+      font-size: var(--font-size-large) !important;
+      line-height: var(--line-height-medium) !important;
     }
     @include allBelow(small) {
-      padding: 0 calc(var(--dialog-spacing) / 2) 0; // 1rem (16px)
+      font-size: var(--font-size-medium) !important;
+      line-height: calc(var(--line-height-medium) - 0.25rem) !important;
     }
   }
 
-  &__align--centered &__inner {
-    align-items: center;
-    justify-content: center;
+  &--information &__title {
+    margin-bottom: var(--spacing-small) !important;
+  }
+
+  &--confirmation &__title {
+    margin-bottom: var(--spacing-x-small) !important;
+  }
+
+  &__navigation.dnb-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__icon {
+    // Modify the border prop from the icon component
+    &__primary.dnb-icon--border::after {
+      left: -50%;
+      right: -50%;
+      top: -50%;
+      bottom: -50%;
+
+      border: none;
+      background-color: currentColor;
+      opacity: 0.1;
+    }
+
+    &__primary#{&}--warning {
+      color: var(--color-fire-red);
+
+      ::after {
+        background-color: var(--color-fire-red-8);
+      }
+    }
+    &__primary#{&}--info {
+      color: var(--color-emerald-green);
+
+      ::after {
+        background-color: var(--color-pistachio);
+      }
+    }
   }
 
   // Animation in
@@ -110,35 +218,20 @@
     }
   }
 
-  &__content {
-    position: relative;
-    z-index: 1;
-  }
-
-  &--spacing &__content {
+  &__body {
     padding-bottom: calc(var(--dialog-spacing) * 2);
-
-    @include IS_SAFARI_MOBILE {
-      padding-bottom: calc(var(--dialog-spacing) * 8);
-    }
-  }
-
-  &__align--center &__content {
-    align-items: center;
-    text-align: center;
-  }
-
-  &__align--right &__content {
-    align-items: flex-end;
-    text-align: right;
+    margin-bottom: calc(var(--dialog-spacing-minus) * 2);
   }
 
-  &__title ~ &__content {
-    padding-top: calc(var(--dialog-spacing) / 2);
+  &__header {
+    &::after {
+      top: -500%;
+      height: 600%;
+    }
   }
 
-  & &__header [class*='dnb-h--'],
-  & &__header .dnb-modal__title {
+  &__header [class*='dnb-h--'],
+  &__header .dnb-modal__title {
     padding: 0;
     &:not([class*='__top']) {
       margin-top: 0;
@@ -148,36 +241,23 @@
     }
   }
 
-  & &__header {
-    &::after {
-      top: -500%;
-      height: 600%;
-    }
-  }
-
   &--spacing &__header {
     .dnb-tabs {
       margin-top: 3.5rem;
     }
   }
 
-  &__body {
-    padding-bottom: calc(var(--dialog-spacing) * 2);
-    margin-bottom: calc(var(--dialog-spacing-minus) * 2);
-  }
-
-  &__navigation.dnb-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  &__icon ~ &__header {
+    margin-top: 1.5rem;
   }
 
-  &--spacing &__navigation.dnb-section {
-    // on large screens
-    margin-top: calc(var(--dialog-spacing) * 1.75);
-    margin-bottom: calc(var(--dialog-spacing) / 2);
-    @include allBelow(medium) {
-      margin-top: calc(var(--dialog-spacing) / 2);
+  @include IS_SAFARI_MOBILE() {
+    // iOS on iPhone fix
+    // Because Safari includes the navigation bar on the height
+    @media (max-height: 40em) and (orientation: landscape) {
+      &:not(#{&}--fullscreen) {
+        max-height: 80vh;
+      }
     }
   }
 }