@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/NotificationPanel/NotificationPanel.js

@@ -1,124 +1,123 @@
 import t from "react";
-import s from "classnames";
+import c from "classnames";
 import { DetailButton as A } from "./DetailButton/DetailButton.js";
-import { IconSize as n, AnalyticsId as B } from "../../constants.js";
+import { IconSize as o, AnalyticsId as B } from "../../constants.js";
 import { useUuid as L } from "../../hooks/useUuid.js";
 import { getColor as P } from "../../theme/currys/color.js";
-import { palette as i } from "../../theme/palette.js";
-import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
-import R from "../Close/Close.js";
-import { Icon as f } from "../Icon/Icon.js";
+import { palette as n } from "../../theme/palette.js";
+import { getAriaLabelAttributes as R } from "../../utils/accessibility.js";
+import $ from "../Close/Close.js";
+import { Icon as p } from "../Icon/Icon.js";
 import D from "../Icons/CheckFill.js";
 import M from "../Icons/ErrorSignFill.js";
 import O from "../Icons/InfoSignFill.js";
 import U from "../Icons/TriangleX.js";
 import e from "./styles.module.scss";
-const V = ({ fluid: m, variant: p, children: o }) => {
-  if (m) {
-    const r = s(e["fluid-wrapper"], { [e[`fluid-wrapper--${p}`]]: p });
-    return /* @__PURE__ */ t.createElement("div", { className: r }, o);
+const V = ({ fluid: s, children: m }) => {
+  if (s) {
+    const l = c(e["fluid-wrapper"]);
+    return /* @__PURE__ */ t.createElement("div", { className: l }, m);
   }
-  return o;
-}, W = t.forwardRef((m, p) => {
+  return m;
+}, W = t.forwardRef((s, m) => {
   const {
-    children: o,
-    variant: r = "info",
+    children: l,
+    variant: f = "info",
     dismissable: _ = !1,
-    onClick: h,
-    expanderChildren: c,
+    onClick: E,
+    expanderChildren: r,
     expanderButtonText: b,
     expanderButtonClosedText: u,
-    expanderOpenFromStart: E = !1,
+    expanderOpenFromStart: h = !1,
     compactVariant: a,
-    label: l,
+    label: i,
     fluid: N = !1,
     size: C,
     className: S,
     labelId: I,
     role: g,
     testId: x
-  } = m, d = L(I), w = {
+  } = s, d = L(I), y = {
     info: /* @__PURE__ */ t.createElement(
-      f,
+      p,
       {
         svgIcon: O,
-        color: i.blueberry700,
-        hoverColor: i.blueberry700,
-        size: a ? n.XSmall : n.Small
+        color: n.blueberry700,
+        hoverColor: n.blueberry700,
+        size: a ? o.XSmall : o.Small
       }
     ),
     warn: /* @__PURE__ */ t.createElement(
-      f,
+      p,
       {
         svgIcon: M,
-        color: i.banana700,
-        hoverColor: i.banana700,
-        size: a ? n.XSmall : n.Small
+        color: n.banana700,
+        hoverColor: n.banana700,
+        size: a ? o.XSmall : o.Small
       }
     ),
     alert: /* @__PURE__ */ t.createElement(
-      f,
+      p,
       {
         svgIcon: U,
-        color: i.cherry700,
-        hoverColor: i.cherry700,
-        size: a ? n.XSmall : n.Small
+        color: n.cherry700,
+        hoverColor: n.cherry700,
+        size: a ? o.XSmall : o.Small
       }
     ),
     success: /* @__PURE__ */ t.createElement(
-      f,
+      p,
       {
         svgIcon: D,
-        color: i.kiwi900,
-        hoverColor: i.kiwi900,
-        size: a ? n.XSmall : n.Small
+        color: n.kiwi900,
+        hoverColor: n.kiwi900,
+        size: a ? o.XSmall : o.Small
       }
     )
-  }, y = () => {
-    const k = s(e["notification-panel__content"]), F = s(e["notification-panel__label"], {
-      [e["notification-panel__label--no-content"]]: !o && !c,
+  }, w = () => {
+    const k = c(e["notification-panel__content"]), F = c(e["notification-panel__label"], {
+      [e["notification-panel__label--no-content"]]: !l && !r,
       [e["notification-panel__label__compact"]]: !!a,
       [e["notification-panel__label__compact--basic"]]: a === "basic"
-    }), X = s(e["notification-panel__children"], {
-      [e["notification-panel__label-and-content--spacing"]]: l,
-      [e["notification-panel__children--expander-no-label"]]: c && !l
+    }), X = c(e["notification-panel__children"], {
+      [e["notification-panel__label-and-content--spacing"]]: i,
+      [e["notification-panel__children--expander-no-label"]]: r && !i
     });
-    return /* @__PURE__ */ t.createElement("div", { className: k, id: l ? void 0 : d }, l && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, l), o && !a && /* @__PURE__ */ t.createElement("div", { className: X }, o), c && b && u && !a && /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement("div", { className: k, id: i ? void 0 : d }, i && /* @__PURE__ */ t.createElement("h1", { className: F, id: d }, i), l && !a && /* @__PURE__ */ t.createElement("div", { className: X }, l), r && b && u && !a && /* @__PURE__ */ t.createElement(
       A,
       {
-        expanderOpenFromStart: E,
-        content: c,
+        expanderOpenFromStart: h,
+        content: r,
         buttonText: b,
         buttonClosedText: u
       }
     ));
-  }, z = s(
+  }, z = c(
     e["notification-panel"],
-    e[`notification-panel--${r}`],
+    e[`notification-panel--${f}`],
+    C && e[`notification-panel--${C}`],
     {
-      [e[`notification-panel--${C}`]]: !!C,
       [e["notification-panel__compact"]]: !!a,
       [e["notification-panel__compact--basic"]]: a === "basic",
       [e["notification-panel__compact--outline"]]: a === "outline",
-      [e["notification-panel--has-children"]]: !!o,
-      [e["notification-panel--with-content"]]: c || l && o,
+      [e["notification-panel--with-content"]]: r || i && l,
       [e["notification-panel--dismissable"]]: _
     },
     S
-  ), v = g || r === "alert" && "alert" || void 0, T = v ? $({ label: l, id: d }) : void 0;
-  return /* @__PURE__ */ t.createElement(V, { fluid: N, variant: r }, /* @__PURE__ */ t.createElement(
+  ), v = g || f === "alert" && "alert" || void 0, T = v ? R({ label: i, id: d }) : void 0;
+  return /* @__PURE__ */ t.createElement(V, { fluid: N }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: p,
+      ref: m,
       role: v,
       "data-testid": x,
       "data-analyticsid": B.NotificationPanel,
       className: z,
       ...T
     },
-    /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, w[r]),
-    _ && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement(R, { ariaLabel: m.ariaLabelCloseBtn, onClick: h, color: P("black") })),
-    y()
+    /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__icon"] }, y[f]),
+    _ && /* @__PURE__ */ t.createElement("span", { className: e["notification-panel__close"] }, /* @__PURE__ */ t.createElement($, { ariaLabel: s.ariaLabelCloseBtn, onClick: E, color: P("black") })),
+    w()
   ));
 }), le = W;
 export {

package/components/NotificationPanel/NotificationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label__compact']]: !!compactVariant,\n      [styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles[`notification-panel--${size}`]]: !!size,\n      [styles['notification-panel__compact']]: !!compactVariant,\n      [styles['notification-panel__compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel__compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","variant","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}
+{"version":3,"file":"NotificationPanel.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label__compact']]: !!compactVariant,\n      [styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel__compact']]: !!compactVariant,\n      [styles['notification-panel__compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel__compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","React","NotificationPanel","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","size","className","labelId","role","testId","uuid","useUuid","variantToIconMap","Icon","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","DetailButton","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close","getColor","NotificationPanel$1"],"mappings":"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"}

package/components/NotificationPanel/NotificationPanel.stories.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./NotificationPanel").NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        dismissable: false;
+        size: "large";
+        fluid: false;
+        label: string;
+        variant: "alert";
+        role: undefined;
+    };
+    argTypes: {
+        dismissable: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+        fluid: {
+            control: string;
+        };
+        label: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        role: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const AllVariants: Story;
+export declare const Expander: Story;
+export declare const Dismissable: Story;
+export declare const Compact: Story;
+export declare const WithSetWidth: Story;

package/components/NotificationPanel/index.d.ts

@@ -1,4 +1,3 @@
 import NotificationPanel from './NotificationPanel';
 export * from './NotificationPanel';
 export default NotificationPanel;
-//# sourceMappingURL=index.d.ts.map

package/components/Panel/Panel.d.ts

@@ -87,4 +87,3 @@ export interface LayoutProps extends Pick<PanelProps, 'contentA' | 'contentB' |
 }
 declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Panel;
-//# sourceMappingURL=Panel.d.ts.map

package/components/Panel/Panel.js

@@ -1,6 +1,6 @@
 import t from "react";
 import r from "classnames";
-import { AnalyticsId as oe, IconSize as S } from "../../constants.js";
+import { AnalyticsId as oe, IconSize as A } from "../../constants.js";
 import { useExpand as se } from "../../hooks/useExpand.js";
 import { useUuid as H } from "../../hooks/useUuid.js";
 import { palette as W } from "../../theme/palette.js";
@@ -18,13 +18,13 @@ import fe from "../Icons/Watch.js";
 import ye from "../Title/Title.js";
 import e from "./styles.module.scss";
 var ve = /* @__PURE__ */ ((a) => (a.normal = "normal", a.new = "new", a.error = "error", a.draft = "draft", a))(ve || {}), be = /* @__PURE__ */ ((a) => (a.fill = "fill", a.white = "white", a.stroke = "stroke", a.line = "line", a))(be || {}), Ce = /* @__PURE__ */ ((a) => (a.layout1 = "layout1", a.layout2 = "layout2", a.layout3a = "layout3a", a.layout3b = "layout3b", a.layout3c = "layout3c", a))(Ce || {});
-const L = ({ status: a, statusMessage: n }) => {
+const S = ({ status: a, statusMessage: n }) => {
   const m = () => a === "error" ? { color: W.cherry500, svgIcon: me } : { color: W.black, svgIcon: Ee }, s = r(e["status-message"], {
     [e["status-message--new"]]: a === "new"
     /* new */
   });
-  return (a === "error" || a === "draft") && n ? /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": "display-status" }, /* @__PURE__ */ t.createElement(C, { ...m(), size: S.XSmall }), " ", /* @__PURE__ */ t.createElement("span", null, n)) : null;
-}, M = ({ children: a }) => typeof a > "u" ? null : /* @__PURE__ */ t.createElement("div", { className: e["header-container"] }, a), Ne = ({ date: a, time: n }) => a || n ? /* @__PURE__ */ t.createElement("div", { className: e["datetime-container"], "data-testid": "datetime" }, a && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: de, size: S.XSmall }), /* @__PURE__ */ t.createElement("span", null, a)), n && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: fe, size: S.XSmall }), /* @__PURE__ */ t.createElement("span", null, n))) : null, he = ({
+  return (a === "error" || a === "draft") && n ? /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": "display-status" }, /* @__PURE__ */ t.createElement(C, { ...m(), size: A.XSmall }), " ", /* @__PURE__ */ t.createElement("span", null, n)) : null;
+}, L = ({ children: a }) => typeof a > "u" ? null : /* @__PURE__ */ t.createElement("div", { className: e["header-container"] }, a), Ne = ({ date: a, time: n }) => a || n ? /* @__PURE__ */ t.createElement("div", { className: e["datetime-container"], "data-testid": "datetime" }, a && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: de, size: A.XSmall }), /* @__PURE__ */ t.createElement("span", null, a)), n && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: fe, size: A.XSmall }), /* @__PURE__ */ t.createElement("span", null, n))) : null, he = ({
   contentA: a,
   contentB: n,
   contentHeader: m,
@@ -39,7 +39,7 @@ const L = ({ status: a, statusMessage: n }) => {
   }), o = r(e.panel__icon, e["panel__icon--layout-1"], {
     [e["panel__icon--no-content"]]: !a && !n
   });
-  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(L, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-1__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", null, n), s);
+  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(S, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(L, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-1__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", null, n), s);
 }, we = ({
   contentA: a,
   contentB: n,
@@ -55,7 +55,7 @@ const L = ({ status: a, statusMessage: n }) => {
   }), o = r(e.panel__icon, e["panel__icon--layout-2"], {
     [e["panel__icon--no-content"]]: !a && !n
   }), y = e["panel__layout-2__last-column"];
-  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(L, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-2__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", { className: y }, n), s && /* @__PURE__ */ t.createElement("div", { className: y }, s));
+  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(S, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(L, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-2__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", { className: y }, n), s && /* @__PURE__ */ t.createElement("div", { className: y }, s));
 }, Ie = ({
   contentA: a,
   contentB: n,
@@ -76,7 +76,7 @@ const L = ({ status: a, statusMessage: n }) => {
   }), y = r(e.panel__icon, e["panel__icon--layout-3"], {
     [e["panel__icon--no-content"]]: !a && !n
   });
-  return /* @__PURE__ */ t.createElement("div", { className: o }, /* @__PURE__ */ t.createElement(L, { status: d, statusMessage: p }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: y }, l), /* @__PURE__ */ t.createElement("div", null, i, a), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column"] }, n && /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column__content-b"] }, n), s));
+  return /* @__PURE__ */ t.createElement("div", { className: o }, /* @__PURE__ */ t.createElement(S, { status: d, statusMessage: p }), /* @__PURE__ */ t.createElement(L, null, m), l && /* @__PURE__ */ t.createElement("div", { className: y }, l), /* @__PURE__ */ t.createElement("div", null, i, a), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column"] }, n && /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column__content-b"] }, n), s));
 }, ge = t.forwardRef(function(n, m) {
   const {
     buttonAriaLabel: s,
@@ -88,28 +88,28 @@ const L = ({ status: a, statusMessage: n }) => {
     children: o,
     className: y,
     containerAsButton: w = !1,
-    contentA: $,
-    contentB: z,
+    contentA: M,
+    contentB: $,
     contentHeader: F,
-    date: B,
+    date: z,
     expanded: U = !1,
     focusable: O = !1,
-    icon: I,
+    icon: B,
     layout: v = "layout2",
     noTopBorder: P,
     onExpand: D,
     renderChildrenWhenClosed: q = !1,
     status: _ = "normal",
-    statusMessage: g,
+    statusMessage: I,
     target: G = "_self",
     testId: J,
     time: R,
-    title: x,
+    title: g,
     titleHtmlMarkup: K = "h2",
-    url: k,
+    url: x,
     variant: E = "fill"
     /* fill */
-  } = n, [f, Q] = se(U, D), T = H(), N = H(), j = g && _ === "new", h = typeof z > "u", Y = v === "layout1" || h, Z = !h && v === "layout2", V = !h && (v === "layout3a" || v === "layout3b" || v === "layout3c"), ee = r(e["panel-wrapper"], y), te = r(e.panel, {
+  } = n, [f, Q] = se(U, D), k = H(), N = H(), j = I && _ === "new", h = typeof $ > "u", Y = v === "layout1" || h, Z = !h && v === "layout2", V = !h && (v === "layout3a" || v === "layout3b" || v === "layout3c"), ee = r(e["panel-wrapper"], y), te = r(e.panel, {
     [e["panel--fill"]]: E === "fill",
     [e["panel--stroke"]]: E === "stroke",
     [e["panel--white"]]: E === "white",
@@ -120,19 +120,19 @@ const L = ({ status: a, statusMessage: n }) => {
     [e["panel--draft"]]: _ === "draft",
     [e["panel--error"]]: _ === "error",
     [e["panel--status"]]: _ && _ !== "normal",
-    [e["panel--with-icon"]]: I,
+    [e["panel--with-icon"]]: B,
     [e["panel--button"]]: w,
-    [e["panel--clickable"]]: o || k || D || i || w
+    [e["panel--clickable"]]: o || x || D || i || w
   }), ae = () => {
-    const u = o || k || i, b = r(e["panel__btn-container"], {
+    const u = o || x || i, b = r(e["panel__btn-container"], {
       [e["panel__btn-container--no-content-b"]]: h,
       [e["panel__btn-container--no-button"]]: !u
     });
-    return (u || B || R) && /* @__PURE__ */ t.createElement("div", { className: b }, /* @__PURE__ */ t.createElement(Ne, { date: B, time: R }), u && /* @__PURE__ */ t.createElement("div", { className: e["panel__details-btn"] }, ne()));
+    return (u || z || R) && /* @__PURE__ */ t.createElement("div", { className: b }, /* @__PURE__ */ t.createElement(Ne, { date: z, time: R }), u && /* @__PURE__ */ t.createElement("div", { className: e["panel__details-btn"] }, ne()));
   }, ne = () => {
     const u = ce({
       label: s,
-      id: l && `${N} ${l}` || x && T && `${N} ${T}`,
+      id: l && `${N} ${l}` || g && k && `${N} ${k}`,
       prefer: "label"
     }), b = {
       onClick: i || (() => Q(!f)),
@@ -141,32 +141,32 @@ const L = ({ status: a, statusMessage: n }) => {
       ellipsis: !0,
       ...u
     };
-    return o ? /* @__PURE__ */ t.createElement(X, { testId: "expand", "aria-expanded": f, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, f ? d : c), /* @__PURE__ */ t.createElement(C, { svgIcon: f ? _e : pe })) : /* @__PURE__ */ t.createElement(X, { testId: "url", htmlMarkup: p, href: k, target: G, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, c), /* @__PURE__ */ t.createElement(C, { svgIcon: ue }));
+    return o ? /* @__PURE__ */ t.createElement(X, { testId: "expand", "aria-expanded": f, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, f ? d : c), /* @__PURE__ */ t.createElement(C, { svgIcon: f ? _e : pe })) : /* @__PURE__ */ t.createElement(X, { testId: "url", htmlMarkup: p, href: x, target: G, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, c), /* @__PURE__ */ t.createElement(C, { svgIcon: ue }));
   }, le = () => {
     if (!o || !q && !f)
       return null;
     const u = r(e["panel-details"], {
       [e["panel-details--open"]]: f,
       [e["panel-details--line"]]: E === "line",
-      [e["panel-details--white"]]: E === "white",
-      [e["panel-details--with-icon"]]: I
+      [e["panel-details--white"]]: E === "white"
+      /* white */
     });
     return /* @__PURE__ */ t.createElement("div", { className: u, "data-testid": "panel-details" }, /* @__PURE__ */ t.createElement("div", null, o));
   }, re = () => {
     const u = r(e["title-container"], {
-      [e["title-container--no-content-a"]]: !$
+      [e["title-container--no-content-a"]]: !M
     }), b = r(e["title-container__title"], {
       [e["title-container__title--badge"]]: j
     });
-    return x && /* @__PURE__ */ t.createElement("div", { className: u }, /* @__PURE__ */ t.createElement(ye, { appearance: "title3", htmlMarkup: K, id: T, className: b }, x), j && /* @__PURE__ */ t.createElement("div", { className: e.panel__badge }, /* @__PURE__ */ t.createElement(ie, { color: "blueberry", testId: "badge-status" }, g)));
-  }, A = {
-    contentA: $,
-    contentB: z,
+    return g && /* @__PURE__ */ t.createElement("div", { className: u }, /* @__PURE__ */ t.createElement(ye, { appearance: "title3", htmlMarkup: K, id: k, className: b }, g), j && /* @__PURE__ */ t.createElement("div", { className: e.panel__badge }, /* @__PURE__ */ t.createElement(ie, { color: "blueberry", testId: "badge-status" }, I)));
+  }, T = {
+    contentA: M,
+    contentB: $,
     contentHeader: F,
     ctaContainer: ae(),
-    icon: I,
+    icon: B,
     status: _,
-    statusMessage: g,
+    statusMessage: I,
     titleElement: re()
   };
   return /* @__PURE__ */ t.createElement(
@@ -178,7 +178,7 @@ const L = ({ status: a, statusMessage: n }) => {
       className: ee,
       "data-analyticsid": oe.Panel
     },
-    /* @__PURE__ */ t.createElement("div", { className: te }, Y && /* @__PURE__ */ t.createElement(he, { ...A }), Z && /* @__PURE__ */ t.createElement(we, { ...A }), V && /* @__PURE__ */ t.createElement(Ie, { ...A, layout: v })),
+    /* @__PURE__ */ t.createElement("div", { className: te }, Y && /* @__PURE__ */ t.createElement(he, { ...T }), Z && /* @__PURE__ */ t.createElement(we, { ...T }), V && /* @__PURE__ */ t.createElement(Ie, { ...T, layout: v })),
     le()
   );
 }), Pe = ge;

package/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","props","ref","buttonAriaLabel","buttonAriaLabelledById","buttonText","buttonTextClose","buttonHtmlMarkup","buttonOnClick","className","containerAsButton","expanded","focusable","noTopBorder","onExpand","renderChildrenWhenClosed","target","testId","title","titleHtmlMarkup","url","variant","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","noContentB","layout1","layout2","layout3","panelWrapperClasses","panelClasses","renderCTAContainer","hasButton","btnContainerClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","renderContent","panelDetailsClasses","renderTitle","titleContainerClasses","titleClasses","Title","Badge","layoutProps","AnalyticsId","Panel$1"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","props","ref","buttonAriaLabel","buttonAriaLabelledById","buttonText","buttonTextClose","buttonHtmlMarkup","buttonOnClick","className","containerAsButton","expanded","focusable","noTopBorder","onExpand","renderChildrenWhenClosed","target","testId","title","titleHtmlMarkup","url","variant","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","noContentB","layout1","layout2","layout3","panelWrapperClasses","panelClasses","renderCTAContainer","hasButton","btnContainerClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","renderContent","panelDetailsClasses","renderTitle","titleContainerClasses","titleClasses","Title","Badge","layoutProps","AnalyticsId","Panel$1"],"mappings":"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"}