@dnb/eufemia 9.23.1 → 9.24.0

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

@@ -0,0 +1,82 @@
+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 React, { useContext } from 'react';
+import Button from '../../button/Button';
+import { Context } from '../../../shared';
+import ModalContext from '../../modal/ModalContext';
+import { dispatchCustomElementEvent } from '../../../shared/component-helper';
+
+const fallbackCloseAction = ({
+  close
+}) => close();
+
+const DialogAction = ({
+  declineText = null,
+  confirmText = null,
+  hideDecline = false,
+  onConfirm = fallbackCloseAction,
+  onDecline = fallbackCloseAction,
+  children
+}) => {
+  var _translation$Dialog, _translation$Dialog2;
+
+  const {
+    translation,
+    Button: ButtonContext
+  } = useContext(Context);
+  const {
+    close
+  } = useContext(ModalContext);
+  let childrenWithCloseFunc;
+
+  if (children) {
+    childrenWithCloseFunc = React.Children.map(children, child => {
+      if (child.type === Button) {
+        return React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+          on_click: event => {
+            dispatchCustomElementEvent(child.props, 'on_click', {
+              event,
+              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: event => {
+      dispatchCustomElementEvent({
+        onDecline
+      }, 'onDecline', {
+        event,
+        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: event => {
+      dispatchCustomElementEvent({
+        onConfirm
+      }, 'onConfirm', {
+        event,
+        close
+      });
+    },
+    size: (ButtonContext === null || ButtonContext === void 0 ? void 0 : ButtonContext.size) || 'large'
+  }));
+};
+
+export default DialogAction;

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