@danske/sapphire-react-lab 0.80.0 → 0.81.0

package/build/esm/AlertDialog/src/AlertDialog.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useThemeCheck, Dialog } from '@danske/sapphire-react';
+import { FeedbackMessage } from '../../FeedbackMessage/src/FeedbackMessage.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
+  useThemeCheck();
+  const _a = props, {
+    variant = "neutral",
+    icon,
+    body,
+    actionsOrientation = "horizontal",
+    actions,
+    heading
+  } = _a, rest = __objRest(_a, [
+    "variant",
+    "icon",
+    "body",
+    "actionsOrientation",
+    "actions",
+    "heading"
+  ]);
+  return /* @__PURE__ */ React.createElement(Dialog, __spreadValues({
+    ref,
+    role: "alertdialog",
+    type: "active",
+    size: "extra-small",
+    header: /* @__PURE__ */ React.createElement(React.Fragment, null),
+    content: /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(FeedbackMessage, {
+      heading: /* @__PURE__ */ React.createElement(Dialog.Header, {
+        level: 6,
+        heading
+      }),
+      variant,
+      icon,
+      body
+    })),
+    footer: /* @__PURE__ */ React.createElement(Dialog.Footer, {
+      stretch: "autoVertical",
+      orientation: actionsOrientation
+    }, actions)
+  }, rest));
+});
+
+export { AlertDialog };
+//# sourceMappingURL=AlertDialog.js.map

package/build/esm/AlertDialog/src/AlertDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogProps,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n  FeedbackMessage,\n  SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n  SapphireStyleProps &\n  Pick<DialogProps, 'isOpen' | 'onClose'> &\n  Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n    /**\n     *\n     * @default \"horizontal\"\n     */\n    actionsOrientation?: 'vertical' | 'horizontal';\n    /**\n     * The elements that will be rendered in the footer of the dialog.\n     */\n    actions: ReactNode;\n    /**\n     * The title of the dialog.\n     */\n    heading: string;\n  };\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n  props: SapphireAlertDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const {\n    variant = 'neutral',\n    icon,\n    body,\n    actionsOrientation = 'horizontal',\n    actions,\n    heading,\n    ...rest\n  } = props;\n\n  return (\n    <Dialog\n      ref={ref}\n      role=\"alertdialog\"\n      type=\"active\"\n      size=\"extra-small\"\n      header={<></>}\n      content={\n        <Dialog.Content>\n          <FeedbackMessage\n            heading={<Dialog.Header level={6} heading={heading} />}\n            variant={variant}\n            icon={icon}\n            body={body}\n          />\n        </Dialog.Content>\n      }\n      footer={\n        <Dialog.Footer stretch=\"autoVertical\" orientation={actionsOrientation}>\n          {actions}\n        </Dialog.Footer>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MACE,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,QAAe,KAAO,EAAA,CAAA;AAAA,QAAG,OAAA;AAAA,OAAA,CAAA;AAAA,MAClC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAIN,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,MAAe,OAAQ,EAAA,cAAA;AAAA,MAAe,WAAa,EAAA,kBAAA;AAAA,KAChD,EAAA,OAAA,CAAA;AAAA,GAGD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/Avatar/src/Avatar.js

@@ -34,6 +34,18 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const getIconSize = (size) => {
+  switch (size) {
+    case "medium":
+      return "m";
+    case "large":
+      return "l";
+    case "extraLarge":
+      return "xl";
+    default:
+      return "s";
+  }
+};
 const Avatar = (_a) => {
   var _b = _a, {
     monogram,
@@ -50,12 +62,13 @@ const Avatar = (_a) => {
   const { styleProps } = useSapphireStyleProps(props);
   return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, styleProps), {
     className: clsx(styleProps.className, styles["sapphire-avatar"], {
+      [styles["sapphire-avatar--extra-large"]]: size === "extraLarge",
       [styles["sapphire-avatar--large"]]: size === "large",
       [styles["sapphire-avatar--small"]]: size === "small",
       [styles["sapphire-avatar--extra-small"]]: size === "extraSmall"
     }, color !== "passive" && styles[`sapphire-avatar--${color}`])
   }), icon ? /* @__PURE__ */ React.createElement(Icon, {
-    size: size === "large" ? "l" : size === "medium" ? "m" : "s"
+    size: getIconSize(size)
   }, icon) : monogram);
 };
 

package/build/esm/Avatar/src/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/Avatar/src/Avatar.tsx"],"sourcesContent":["import {\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport React, { ReactNode } from 'react';\nimport styles from '@danske/sapphire-css/components/avatar/avatar.module.css';\nimport clsx from 'clsx';\n\nexport type SapphireAvatarProps = SapphireStyleProps & {\n  /**\n   * @default 'medium'\n   */\n  size?: 'large' | 'medium' | 'small' | 'extraSmall';\n\n  /**\n   * The background color of the avatar.\n   * Can either be semantic or one of the named decorative colors.\n   *\n   * @default 'informative'\n   */\n\n  color?:\n    | 'positive'\n    | 'negative'\n    | 'warning'\n    | 'informative'\n    | 'passive'\n    | 'aqua'\n    | 'copper'\n    | 'electro'\n    | 'indigo'\n    | 'lime'\n    | 'pink'\n    | 'violet'\n    | 'gold'\n    | 'beige'\n    | 'orchid'\n    | 'gray'\n    | 'cobalt'\n    | 'forestGreen'\n    | 'teal'\n    | 'orange';\n} & (\n    | {\n        monogram: ReactNode;\n        icon?: never;\n      }\n    | {\n        monogram?: never;\n        icon: ReactNode;\n      }\n  );\n\nexport const Avatar = ({\n  monogram,\n  icon,\n  color = 'informative',\n  size = 'medium',\n  ...props\n}: SapphireAvatarProps): React.ReactElement => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-avatar'],\n        {\n          [styles['sapphire-avatar--large']]: size === 'large',\n          [styles['sapphire-avatar--small']]: size === 'small',\n          [styles['sapphire-avatar--extra-small']]: size === 'extraSmall',\n        },\n        color !== 'passive' && styles[`sapphire-avatar--${color}`]\n      )}\n    >\n      {icon ? (\n        <Icon size={size === 'large' ? 'l' : size === 'medium' ? 'm' : 's'}>\n          {icon}\n        </Icon>\n      ) : (\n        monogram\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDa,MAAA,MAAA,GAAS,CAAC,EAMwB,KAAA;AANxB,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAQ,GAAA,aAAA;AAAA,IACR,IAAO,GAAA,QAAA;AAAA,GAJc,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,UAAW,CAAA,SAAA,EACX,OAAO,iBACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,KAErD,EAAA,KAAA,KAAU,SAAa,IAAA,MAAA,CAAO,CAAoB,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAGnD,CAAA,EAAA,IAAA,uCACE,IAAD,EAAA;AAAA,IAAM,MAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,IAAA,KAAS,WAAW,GAAM,GAAA,GAAA;AAAA,GAAA,EAC5D,IAGH,CAAA,GAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/Avatar/src/Avatar.tsx"],"sourcesContent":["import {\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport React, { ReactNode } from 'react';\nimport styles from '@danske/sapphire-css/components/avatar/avatar.module.css';\nimport clsx from 'clsx';\n\nconst getIconSize = (\n  size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall'\n) => {\n  switch (size) {\n    case 'medium':\n      return 'm';\n    case 'large':\n      return 'l';\n    case 'extraLarge':\n      return 'xl';\n    default:\n      return 's';\n  }\n};\n\nexport type SapphireAvatarProps = SapphireStyleProps & {\n  /**\n   * @default 'medium'\n   */\n  size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';\n\n  /**\n   * The background color of the avatar.\n   * Can either be semantic or one of the named decorative colors.\n   *\n   * @default 'informative'\n   */\n\n  color?:\n    | 'positive'\n    | 'negative'\n    | 'warning'\n    | 'informative'\n    | 'passive'\n    | 'aqua'\n    | 'copper'\n    | 'electro'\n    | 'indigo'\n    | 'lime'\n    | 'pink'\n    | 'violet'\n    | 'gold'\n    | 'beige'\n    | 'orchid'\n    | 'gray'\n    | 'cobalt'\n    | 'forestGreen'\n    | 'teal'\n    | 'orange';\n} & (\n    | {\n        monogram: ReactNode;\n        icon?: never;\n      }\n    | {\n        monogram?: never;\n        icon: ReactNode;\n      }\n  );\n\nexport const Avatar = ({\n  monogram,\n  icon,\n  color = 'informative',\n  size = 'medium',\n  ...props\n}: SapphireAvatarProps): React.ReactElement => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <div\n      {...styleProps}\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-avatar'],\n        {\n          [styles['sapphire-avatar--extra-large']]: size === 'extraLarge',\n          [styles['sapphire-avatar--large']]: size === 'large',\n          [styles['sapphire-avatar--small']]: size === 'small',\n          [styles['sapphire-avatar--extra-small']]: size === 'extraSmall',\n        },\n        color !== 'passive' && styles[`sapphire-avatar--${color}`]\n      )}\n    >\n      {icon ? <Icon size={getIconSize(size)}>{icon}</Icon> : monogram}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,WAAA,GAAc,CAClB,IACG,KAAA;AACH,EAAQ,QAAA,IAAA;AAAA,IACD,KAAA,QAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,GAAA,CAAA;AAAA,IACJ,KAAA,YAAA;AACH,MAAO,OAAA,IAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,GAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAiDA,MAAA,MAAA,GAAS,CAAC,EAMwB,KAAA;AANxB,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAQ,GAAA,aAAA;AAAA,IACR,IAAO,GAAA,QAAA;AAAA,GAJc,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,UAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAW,EAAA,IAAA,CACT,UAAW,CAAA,SAAA,EACX,OAAO,iBACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,MAClD,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,4BAA4B,IAAS,KAAA,OAAA;AAAA,MAC5C,CAAA,MAAA,CAAO,kCAAkC,IAAS,KAAA,YAAA;AAAA,KAErD,EAAA,KAAA,KAAU,SAAa,IAAA,MAAA,CAAO,CAAoB,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAGnD,CAAA,EAAA,IAAA,uCAAQ,IAAD,EAAA;AAAA,IAAM,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,GAAA,EAAQ,IAAe,CAAA,GAAA,QAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/FeedbackMessage/src/FeedbackMessage.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
-import { CheckMarkCircle, AlertCircle } from '@danske/sapphire-icons/react';
-import { useThemeCheck, useSapphireStyleProps, Icon, Heading } from '@danske/sapphire-react';
+import { Bell, AlertTriangle, AlertCircle, CheckMarkCircle } from '@danske/sapphire-icons/react';
+import { useThemeCheck, useSapphireStyleProps, Heading } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';
+import { Avatar } from '../../Avatar/src/Avatar.js';
 
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -19,17 +20,48 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const getColor = (variant) => {
+  switch (variant) {
+    case "success":
+      return "positive";
+    case "error":
+      return "negative";
+    case "neutral":
+      return "passive";
+    default:
+      return variant;
+  }
+};
+const getIcon = (variant, icon) => {
+  if (icon) {
+    return icon;
+  }
+  switch (variant) {
+    case "success":
+      return /* @__PURE__ */ React.createElement(CheckMarkCircle, null);
+    case "error":
+      return /* @__PURE__ */ React.createElement(AlertCircle, null);
+    case "warning":
+      return /* @__PURE__ */ React.createElement(AlertTriangle, null);
+    case "informative":
+      return /* @__PURE__ */ React.createElement(Bell, null);
+    default:
+      return null;
+  }
+};
 const FeedbackMessage = (_a) => {
   var _b = _a, {
     heading,
     body,
     actions,
-    type = "neutral"
+    variant = "neutral",
+    icon
   } = _b, otherProps = __objRest(_b, [
     "heading",
     "body",
     "actions",
-    "type"
+    "variant",
+    "icon"
   ]);
   useThemeCheck();
   const {
@@ -38,15 +70,15 @@ const FeedbackMessage = (_a) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: clsx(styles["sapphire-feedback-message"], className),
     style
-  }, type !== "neutral" && /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-feedback-message__icon"], styles[`sapphire-feedback-message__icon--${type}`])
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "xl"
-  }, type === "success" ? /* @__PURE__ */ React.createElement(CheckMarkCircle, null) : /* @__PURE__ */ React.createElement(AlertCircle, null))), /* @__PURE__ */ React.createElement("div", {
+  }, variant !== "neutral" && /* @__PURE__ */ React.createElement(Avatar, {
+    color: getColor(variant),
+    size: "extraLarge",
+    icon: getIcon(variant, icon)
+  }), /* @__PURE__ */ React.createElement("div", {
     className: styles["sapphire-feedback-message__content"]
-  }, /* @__PURE__ */ React.createElement(Heading, {
+  }, typeof heading === "string" ? /* @__PURE__ */ React.createElement(Heading, {
     level: 3
-  }, heading), /* @__PURE__ */ React.createElement("section", {
+  }, heading) : heading, /* @__PURE__ */ React.createElement("section", {
     className: styles["sapphire-feedback-message__body"]
   }, body)), actions);
 };

package/build/esm/FeedbackMessage/src/FeedbackMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { AlertCircle, CheckMarkCircle } from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  type?: 'error' | 'success' | 'neutral';\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  type = 'neutral',\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {type !== 'neutral' && (\n        <div\n          className={clsx(\n            styles['sapphire-feedback-message__icon'],\n            styles[`sapphire-feedback-message__icon--${type}`]\n          )}\n        >\n          <Icon size=\"xl\">\n            {type === 'success' ? <CheckMarkCircle /> : <AlertCircle />}\n          </Icon>\n        </div>\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        <Heading level={3}>{heading}</Heading>\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCa,MAAA,eAAA,GAAkB,CAAC,EAMiB,KAAA;AANjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,GAJuB,GAAA,EAAA,EAK3B,uBAL2B,EAK3B,EAAA;AAAA,IAJH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,IAAA,KAAS,SACR,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,iCAAA,CAAA,EACP,OAAO,CAAoC,iCAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAG5C,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GACR,EAAA,IAAA,KAAS,4BAAa,KAAA,CAAA,aAAA,CAAA,eAAA,EAAD,wBAAuB,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAIlD,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,sCACpB,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,sCACnB,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Bell,\n  CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'informative'\n  | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode | string;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  variant?: FeedbackMessageVariant;\n  /**\n   * Optional icon to override the default icon for the message type.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n  switch (variant) {\n    case 'success':\n      return 'positive';\n    case 'error':\n      return 'negative';\n    case 'neutral':\n      return 'passive';\n    default:\n      return variant;\n  }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n  if (icon) {\n    return icon;\n  }\n\n  switch (variant) {\n    case 'success':\n      return <CheckMarkCircle />;\n    case 'error':\n      return <AlertCircle />;\n    case 'warning':\n      return <AlertTriangle />;\n    case 'informative':\n      return <Bell />;\n    default:\n      return null;\n  }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  variant = 'neutral',\n  icon,\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {variant !== 'neutral' && (\n        <Avatar\n          color={getColor(variant)}\n          size=\"extraLarge\"\n          icon={getIcon(variant, icon)}\n        />\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        {typeof heading === 'string' ? (\n          <Heading level={3}>{heading}</Heading>\n        ) : (\n          heading\n        )}\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,QAAA,GAAW,CAAC,OAAoC,KAAA;AACpD,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAIb,MAAM,OAAA,GAAU,CAAC,OAAA,EAAiC,IAA2B,KAAA;AAC3E,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAA,2CAAQ,eAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAA,2CAAQ,aAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,aAAA;AACH,MAAA,2CAAQ,IAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAOA,MAAA,eAAA,GAAkB,CAAC,EAOiB,KAAA;AAPjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,GAL8B,GAAA,EAAA,EAM3B,uBAN2B,EAM3B,EAAA;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,OAAA,KAAY,SACX,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,OAAO,QAAS,CAAA,OAAA,CAAA;AAAA,IAChB,IAAK,EAAA,YAAA;AAAA,IACL,IAAA,EAAM,QAAQ,OAAS,EAAA,IAAA,CAAA;AAAA,GAAA,CAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,EACpB,OAAO,OAAA,KAAY,QAClB,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,GAEpB,OAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -17,6 +17,7 @@ export { Accordion } from './Accordion/index.js';
 export { Typography } from './Typography/index.js';
 export { Fieldset } from './Fieldset/src/Fieldset.js';
 export { Avatar } from './Avatar/src/Avatar.js';
+export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { useLocale } from '@react-aria/i18n';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/build/index.d.ts

@@ -3,7 +3,7 @@ import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, Col
 import * as React from 'react';
 import React__default, { ReactNode, ComponentType, RefObject } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
-import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps } from '@danske/sapphire-react';
+import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
 import { DateValue } from '@internationalized/date';
 import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
 import { RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
@@ -13,6 +13,7 @@ import { ComboBoxProps } from '@react-types/combobox';
 import { AriaSearchFieldProps } from '@react-aria/searchfield';
 import { AriaToastRegionProps } from '@react-aria/toast';
 import { ToastState } from '@react-stately/toast';
+import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 export { useLocale } from '@react-aria/i18n';
 
@@ -480,18 +481,23 @@ declare const DateRangeField: <T extends DateValue$1, P extends string>(props: O
 declare const isEndDateBeforeStartDate: (dateRange?: RangeValue<DateValue$1> | null) => boolean | null | undefined;
 declare const isDateOutsideValidRange: (value?: DateValue$1 | null, minValue?: DateValue$1 | null, maxValue?: DateValue$1 | null) => "after" | "before" | undefined;
 
+declare type FeedbackMessageVariant = 'success' | 'error' | 'warning' | 'informative' | 'neutral';
 interface SapphireFeedbackMessageProps extends SapphireStyleProps {
     /**
      * Heading content, rendered in a sapphire Heading component.
      */
-    heading: React__default.ReactNode;
+    heading: React__default.ReactNode | string;
     /**
      * The type of message.
      * The 'error' and 'success' are meant to attract more attention.
      *
      * @default 'neutral'
      */
-    type?: 'error' | 'success' | 'neutral';
+    variant?: FeedbackMessageVariant;
+    /**
+     * Optional icon to override the default icon for the message type.
+     */
+    icon?: React__default.ReactNode;
     /**
      * Optional description, rendered as a section below heading.
      */
@@ -505,7 +511,7 @@ interface SapphireFeedbackMessageProps extends SapphireStyleProps {
 /**
  * Implements layout and style of a feedback message.
  */
-declare const FeedbackMessage: ({ heading, body, actions, type, ...otherProps }: SapphireFeedbackMessageProps) => JSX.Element;
+declare const FeedbackMessage: ({ heading, body, actions, variant, icon, ...otherProps }: SapphireFeedbackMessageProps) => JSX.Element;
 
 declare type SapphireSearchFieldProps<T extends object> = SapphireStyleProps & Omit<AriaSearchFieldProps, keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps> & AutocompleteProps<T> & {
     /**
@@ -757,7 +763,7 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
     /**
      * @default 'medium'
      */
-    size?: 'large' | 'medium' | 'small' | 'extraSmall';
+    size?: 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
     /**
      * The background color of the avatar.
      * Can either be semantic or one of the named decorative colors.
@@ -774,6 +780,37 @@ declare type SapphireAvatarProps = SapphireStyleProps & {
 });
 declare const Avatar: ({ monogram, icon, color, size, ...props }: SapphireAvatarProps) => React__default.ReactElement;
 
+declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, 'isOpen' | 'onClose'> & Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {
+    /**
+     *
+     * @default "horizontal"
+     */
+    actionsOrientation?: 'vertical' | 'horizontal';
+    /**
+     * The elements that will be rendered in the footer of the dialog.
+     */
+    actions: ReactNode;
+    /**
+     * The title of the dialog.
+     */
+    heading: string;
+};
+declare const AlertDialog: React__default.ForwardRefExoticComponent<AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, "isOpen" | "onClose"> & Omit<SapphireFeedbackMessageProps, "heading" | "actions"> & {
+    /**
+     *
+     * @default "horizontal"
+     */
+    actionsOrientation?: "horizontal" | "vertical" | undefined;
+    /**
+     * The elements that will be rendered in the footer of the dialog.
+     */
+    actions: ReactNode;
+    /**
+     * The title of the dialog.
+     */
+    heading: string;
+} & React__default.RefAttributes<_react_types_shared.DOMRefValue<HTMLDivElement>>>;
+
 interface SapphireNumberFieldProps
 /**
  * Reasons to omit the below properties:
@@ -836,4 +873,4 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
 }
 declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
 
-export { _Accordion as Accordion, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -36,7 +36,7 @@
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^27.0.0",
+    "@danske/sapphire-css": "^27.1.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -71,5 +71,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "e207779162338643e012a71b68cbd4d2ad5def7d"
+  "gitHead": "b32c314ce39dda19db3c38304864b4e63c0f9470"
 }