@helsenorge/designsystem-react 1.0.0-beta.7 → 1.0.0-beta101

package/components/Modal/styles.module.scss

@@ -0,0 +1,241 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_font-settings.scss';
+
+.modal-overlay {
+  background: rgba(51, 51, 51, 0.75);
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  @media print {
+    position: absolute;
+  }
+}
+
+.align {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  @media print {
+    position: initial;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
+}
+
+.modal {
+  pointer-events: auto;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+  background-color: $white;
+  animation: open 200ms 1;
+
+  &__title {
+    &--error {
+      color: $cherry600;
+    }
+    &--success {
+      color: $kiwi900;
+    }
+  }
+
+  &__iconWrapper {
+    padding-right: getSpacer(xs);
+  }
+  &__afterTitleChildren {
+    padding-left: getSpacer(xs);
+  }
+
+  p {
+    font-size: 1.125rem;
+  }
+
+  &--normal {
+    background-color: $white;
+  }
+  &--error {
+    background-color: $cherry100;
+  }
+  &--warning {
+    background-color: $banana50;
+  }
+  &--success {
+    background-color: $kiwi50;
+  }
+
+  &--large {
+    width: calc(100vw - 0.75rem);
+    @media (max-width: map-get($grid-breakpoints, sm)) {
+      p {
+        font-size: 1.125rem;
+      }
+    }
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      width: 612px;
+    }
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      width: 696px;
+    }
+  }
+
+  &--medium {
+    width: calc(100vw - 0.75rem);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      width: 335px;
+    }
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      width: 515px;
+    }
+  }
+
+  &--image {
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      max-height: calc(100vh - 24px);
+      max-width: calc(100vw - 24px);
+      width: 100%;
+    }
+  }
+
+  &__shadow {
+    width: 100%;
+    height: 16px;
+    position: absolute;
+    transition: opacity 0.5s;
+    opacity: 0;
+  }
+
+  &__shadow--top {
+    //box-shadow: 0 3px 8px 4px grey;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45702030812324934) 100%);
+  }
+
+  &__shadow--bottom {
+    //box-shadow: 0 -3px 8px 4px grey;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45702030812324934) 100%);
+    margin-top: -16px;
+  }
+
+  &__shadow--show {
+    opacity: 1;
+  }
+
+  &__closeWrapper {
+    @media print {
+      display: none;
+    }
+
+    position: relative;
+    width: 100%;
+
+    &__close {
+      position: absolute;
+      right: getSpacer(3xs);
+      top: getSpacer(3xs);
+    }
+  }
+
+  &__contentWrapper {
+    max-height: calc(100vh - 10rem);
+    overflow: auto;
+
+    @media print {
+      overflow: hidden;
+      max-height: none;
+    }
+
+    &--image {
+      max-height: 100vh;
+    }
+
+    &__scroll {
+      &--large {
+        @media (max-width: map-get($grid-breakpoints, sm)) {
+          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
+        }
+        padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs) getSpacer(xl);
+      }
+      &--medium {
+        @media (max-width: map-get($grid-breakpoints, sm)) {
+          padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
+        }
+        padding: getSpacer(l) getSpacer(m) getSpacer(2xs) getSpacer(m);
+      }
+      &--large#{&}--image {
+        padding: getSpacer(xl) getSpacer(2xs) getSpacer(l) getSpacer(2xs);
+      }
+    }
+
+    &__title {
+      display: flex;
+      align-items: center;
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    &__imageWrapper {
+      line-height: 0;
+      text-align: center;
+      img {
+        max-height: calc(100vh - 185px);
+        max-width: calc(100vw - 57px);
+      }
+    }
+
+    &__imageDescription {
+      font-size: $font-size-xs;
+      padding-top: getSpacer(s);
+      display: block;
+    }
+  }
+
+  &__description {
+    white-space: pre-line;
+  }
+
+  &__call-to-action {
+    display: flex;
+
+    button:first-child {
+      margin-right: 24px;
+    }
+
+    &--large {
+      padding: getSpacer(l) getSpacer(xl) getSpacer(xl) getSpacer(xl);
+      @media (max-width: map-get($grid-breakpoints, sm)) {
+        padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(m);
+      }
+    }
+    &--medium {
+      padding: getSpacer(m) getSpacer(m) getSpacer(m) getSpacer(m);
+    }
+  }
+
+  /* animation on open */
+  @keyframes open {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @media print {
+    width: 100%;
+  }
+}

package/components/Modal/styles.module.scss.d.ts

@@ -0,0 +1,41 @@
+export type Styles = {
+  align: string;
+  modal: string;
+  modal__afterTitleChildren: string;
+  'modal__call-to-action': string;
+  'modal__call-to-action--large': string;
+  'modal__call-to-action--medium': string;
+  modal__closeWrapper: string;
+  modal__closeWrapper__close: string;
+  modal__contentWrapper: string;
+  modal__contentWrapper__imageDescription: string;
+  modal__contentWrapper__imageWrapper: string;
+  'modal__contentWrapper__scroll--image': string;
+  'modal__contentWrapper__scroll--large': string;
+  'modal__contentWrapper__scroll--medium': string;
+  modal__contentWrapper__title: string;
+  'modal__contentWrapper--image': string;
+  modal__description: string;
+  modal__iconWrapper: string;
+  modal__shadow: string;
+  'modal__shadow--bottom': string;
+  'modal__shadow--show': string;
+  'modal__shadow--top': string;
+  'modal__title--error': string;
+  'modal__title--success': string;
+  'modal--error': string;
+  'modal--image': string;
+  'modal--large': string;
+  'modal--medium': string;
+  'modal--normal': string;
+  'modal--success': string;
+  'modal--warning': string;
+  'modal-overlay': string;
+  open: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export declare type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';
+export declare type NotificationPanelSizes = 'small' | 'medium' | 'large';
+interface NotificationPanelProps {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds inner child elements. */
+    children?: React.ReactNode;
+    /** Changes the visual representation of the notification panel. */
+    variant?: NotificationPanelVariants;
+    /** Adds a shadow effect around the notification panel. */
+    shadow?: boolean;
+    /** Sets a fixed size for the content container. */
+    size?: NotificationPanelSizes;
+    /** Used in combination with dismissiable property to close the notification panel. */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Toggles the close button in the top right corner. */
+    dismissable?: boolean;
+    /** Enables a fluid outer container that spans the entire width of parent. */
+    fluid?: boolean;
+    /** Sets a label for the notification panel. */
+    label?: string;
+    /** Close button aria-label */
+    ariaLabelCloseBtn?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const variantToColorMap: {
+    info: {
+        color: string;
+        depth: number;
+    };
+    warn: {
+        color: string;
+        depth: number;
+    };
+    alert: {
+        color: string;
+        depth: number;
+    };
+    crisis: {
+        color: string;
+        depth: number;
+    };
+};
+declare const NotificationPanel: React.ForwardRefExoticComponent<NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default NotificationPanel;
+//# sourceMappingURL=NotificationPanel.d.ts.map

package/components/NotificationPanel/NotificationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,oBAAY,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,oBAAY,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,UAAU,sBAAsB;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAK7B,CAAC;AAUF,QAAA,MAAM,iBAAiB,+FA6ErB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/componentdata.json

@@ -0,0 +1,246 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "children": {
+      "defaultValue": null,
+      "description": "Adds inner child elements.",
+      "name": "children",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visual representation of the notification panel.",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"info\" | \"warn\" | \"alert\" | \"crisis\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"info\""
+          },
+          {
+            "value": "\"warn\""
+          },
+          {
+            "value": "\"alert\""
+          },
+          {
+            "value": "\"crisis\""
+          }
+        ]
+      }
+    },
+    "shadow": {
+      "defaultValue": null,
+      "description": "Adds a shadow effect around the notification panel.",
+      "name": "shadow",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "size": {
+      "defaultValue": null,
+      "description": "Sets a fixed size for the content container.",
+      "name": "size",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"small\" | \"medium\" | \"large\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"small\""
+          },
+          {
+            "value": "\"medium\""
+          },
+          {
+            "value": "\"large\""
+          }
+        ]
+      }
+    },
+    "onClick": {
+      "defaultValue": null,
+      "description": "Used in combination with dismissiable property to close the notification panel.",
+      "name": "onClick",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((e?: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined"
+      }
+    },
+    "dismissable": {
+      "defaultValue": null,
+      "description": "Toggles the close button in the top right corner.",
+      "name": "dismissable",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "fluid": {
+      "defaultValue": null,
+      "description": "Enables a fluid outer container that spans the entire width of parent.",
+      "name": "fluid",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "Sets a label for the notification panel.",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "ariaLabelCloseBtn": {
+      "defaultValue": null,
+      "description": "Close button aria-label",
+      "name": "ariaLabelCloseBtn",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+        "name": "NotificationPanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/NotificationPanel/NotificationPanel.tsx",
+          "name": "NotificationPanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/NotificationPanel/index.d.ts

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

package/components/NotificationPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/index.js

@@ -0,0 +1,2 @@
+import{a}from"../../_rollupPluginBabelHelpers-d0752906.js";import e from"react";import{c as t}from"../../index-9b84fabc.js";import{p as o}from"../../palette-f206f488.js";import{I as i}from"../../Icon-89da8de4.js";import{A as n}from"../../constants-ad6c82db.js";import{a as r,A as l}from"../../AlertSignFill-e607ff43.js";import c from"./styles.module.scss";import{C as s}from"../../Close-007fca15.js";import"../../_tslib-51c8a283.js";import"../Close/styles.module.scss";import"../../useBreakpoint-324a9b14.js";import"../../useWindowSize-73b47451.js";import"../../grid-11a70eb7.js";var m={info:{color:"kiwi",depth:50},warn:{color:"banana",depth:50},alert:{color:"cherry",depth:100},crisis:{color:"black",depth:0}},p={info:e.createElement(i,{svgIcon:function(a){var t=a.isExtraSmall,o=a.isHovered,i=e.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 10.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),n=e.createElement("path",{d:"M25.672 30.501a.682.682 0 01-.322-.272.835.835 0 01-.11-.443v-7.917l-.112-.112-3.651.194v.544c.148.015.314.05.495.104.18.055.316.112.406.172a.994.994 0 01.299.316.88.88 0 01.119.459v6.337a.879.879 0 01-.098.443.623.623 0 01-.335.257c-.09.035-.197.06-.32.074a8.883 8.883 0 01-.38.038v.544h4.709v-.544a2.45 2.45 0 01-.7-.194M24 37.604c-7.5 0-13.604-6.103-13.604-13.604 0-7.501 6.104-13.603 13.604-13.603 7.502 0 13.602 6.102 13.602 13.603 0 7.501-6.1 13.604-13.601 13.604m0-28.909C15.56 8.695 8.694 15.562 8.694 24c0 8.438 6.867 15.305 15.305 15.305 8.438 0 15.304-6.867 15.304-15.305 0-8.438-6.866-15.305-15.304-15.305m-.274 8.632a1.559 1.559 0 100-3.118 1.559 1.559 0 000 3.118"}),r=e.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 10.61a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"});return t?o?e.createElement("path",{d:"M25.668 30.487a.68.68 0 01-.32-.271.833.833 0 01-.111-.442v-7.9l-.112-.112-3.643.193v.543c.148.015.313.05.495.104.18.055.315.112.405.172a.991.991 0 01.297.315.877.877 0 01.119.458v6.324c0 .182-.032.33-.097.442a.622.622 0 01-.334.256c-.09.035-.197.06-.32.074-.124.015-.25.028-.38.038v.543h4.7v-.543a2.445 2.445 0 01-.699-.194M24 37.575c-7.485 0-13.575-6.09-13.575-13.575 0-7.485 6.09-13.574 13.575-13.574 7.486 0 13.574 6.089 13.574 13.574 0 7.485-6.088 13.575-13.574 13.575m0-28.848C15.58 8.727 8.728 15.58 8.728 24S15.579 39.273 24 39.273c8.42 0 15.272-6.853 15.272-15.273S32.421 8.727 24 8.727m-.274 8.084a1.556 1.556 0 100-3.112 1.556 1.556 0 000 3.112"}):r:o?n:i},color:o.kiwi900,hoverColor:o.kiwi900}),warn:e.createElement(i,{svgIcon:r,color:"black",hoverColor:"black"}),alert:e.createElement(i,{svgIcon:l,color:o.cherry500,hoverColor:o.cherry500}),alertLabel:e.createElement(i,{svgIcon:r,color:o.cherry500,hoverColor:o.cherry500}),crisis:e.createElement(i,{svgIcon:l,color:o.banana200,hoverColor:o.banana200})},f=e.forwardRef((function(o,i){var r,l,m=o.children,f=o.variant,d=void 0===f?"info":f,v=o.shadow,h=void 0!==v&&v,b=o.dismissable,_=void 0!==b&&b,u=o.onClick,E=o.label,C=o.fluid,w=void 0!==C&&C,j=o.size,g=o.className,y=o.testId;var k;return k=e.createElement("div",{ref:i,"data-testid":y,"data-analyticsid":n.NotificationPanel,className:t(c["notification-panel"],c["notification-panel--"+j],c["notification-panel--"+d],(r={},a(r,c["notification-panel--shadow"],!w&&h),a(r,c["notification-panel--haslabel"],!!E&&!m),a(r,c["notification-panel--dismissable"],_),r),g||"")},e.createElement("span",{className:c["notification-panel__icon"]},p["alert"===d&&E&&!m?"alertLabel":d]),e.createElement("section",{"aria-label":function(){if(m){var a="";return e.Children.map(m,(function(e){"string"==typeof e&&(a+=e)})),a}return""}(),className:t(c["notification-panel__content"],(l={},a(l,c["notification-panel__content--crisis"],"crisis"===d),a(l,c["notification-panel__content--haslabel"],!!E&&!m),a(l,c["notification-panel__content--isred"],"alert"===d&&!!E&&!m),l))},E?e.createElement("h1",{className:c["notification-panel__label"],dangerouslySetInnerHTML:{__html:E}}):null,m),_?e.createElement("span",{className:c["notification-panel__action-column"]},e.createElement(s,{ariaLabel:o.ariaLabelCloseBtn,onClick:u})):null),w?e.createElement("div",{className:t(c["notification-panel__fluidwrapper"],c["notification-panel__fluidwrapper--"+d],a({},c["notification-panel__fluidwrapper--shadow"],h))},k):k}));export default f;export{m as variantToColorMap};
+//# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

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