@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/Modal/styles.module.scss

@@ -1,18 +1,16 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+@import '../../scss/font-settings';
 
 .modal-overlay {
-  background: rgba(51, 51, 51, 0.75);
+  background: rgb(51 51 51 / 75%);
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 
   @media print {
     position: absolute;
@@ -32,7 +30,7 @@
 
 .modal {
   pointer-events: auto;
-  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
   background-color: $white;
   animation: open 200ms 1;
 
@@ -40,6 +38,7 @@
     &--error {
       color: $cherry600;
     }
+
     &--success {
       color: $kiwi900;
     }
@@ -48,6 +47,7 @@
   &__iconWrapper {
     padding-right: getSpacer(xs);
   }
+
   &__afterTitleChildren {
     padding-left: getSpacer(xs);
   }
@@ -59,12 +59,15 @@
   &--normal {
     background-color: $white;
   }
+
   &--error {
     background-color: $cherry100;
   }
+
   &--warning {
     background-color: $banana50;
   }
+
   &--success {
     background-color: $kiwi50;
   }
@@ -72,16 +75,19 @@
   &--large {
     width: calc(100vw - 0.75rem);
     padding-bottom: getSpacer(l);
-    @media (max-width: map-get($grid-breakpoints, sm)) {
+
+    @media (max-width: map.get($grid-breakpoints, sm)) {
       p {
         font-size: 1.125rem;
       }
     }
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding-bottom: getSpacer(xl);
       width: 612px;
     }
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 696px;
     }
   }
@@ -89,10 +95,12 @@
   &--medium {
     width: calc(100vw - 0.75rem);
     padding-bottom: getSpacer(m);
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       width: 335px;
     }
-    @media (min-width: map-get($grid-breakpoints, lg)) {
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 515px;
     }
   }
@@ -103,7 +111,8 @@
 
   &--image {
     padding: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       max-height: calc(100vh - 24px);
       max-width: calc(100vw - 24px);
       width: 100%;
@@ -119,13 +128,13 @@
   }
 
   &__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%);
+    // box-shadow: 0 3px 8px 4px grey;
+    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 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%);
+    // box-shadow: 0 -3px 8px 4px grey;
+    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
     margin-top: -16px;
   }
 
@@ -166,13 +175,16 @@
     &__scroll {
       &--large {
         padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
-        @media (min-width: map-get($grid-breakpoints, md)) {
+
+        @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs) getSpacer(xl);
         }
       }
+
       &--medium {
         padding: getSpacer(l) getSpacer(m) getSpacer(2xs) getSpacer(m);
-        @media (min-width: map-get($grid-breakpoints, md)) {
+
+        @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(m) getSpacer(2xs) getSpacer(m);
         }
       }
@@ -184,6 +196,7 @@
     &__title {
       display: flex;
       align-items: center;
+
       div {
         display: flex;
         justify-content: center;
@@ -194,6 +207,7 @@
     &__imageWrapper {
       line-height: 0;
       text-align: center;
+
       img {
         max-height: calc(100vh - 185px);
         max-width: calc(100vw - 57px);
@@ -220,10 +234,12 @@
 
     &--large {
       padding: getSpacer(l) getSpacer(m) 0 getSpacer(m);
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(l) getSpacer(xl) 0 getSpacer(xl);
       }
     }
+
     &--medium {
       padding: getSpacer(m) getSpacer(m) 0 getSpacer(m);
     }

package/components/NotificationPanel/DetailButton/DetailButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    content: React.ReactNode;
+    buttonClosedText: string;
+    buttonText: string;
+    expanderOpenFromStart: boolean;
+};
+export declare const DetailButton: React.FC<Props>;
+export {};
+//# sourceMappingURL=DetailButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailButton.d.ts","sourceRoot":"","sources":["../../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,EAAE,OAAO,CAAC;CAChC,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+BxC,CAAC"}

package/components/NotificationPanel/DetailButton/componentdata.json

@@ -0,0 +1 @@
+{"props":{"content":{"defaultValue":null,"description":"","name":"content","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"ReactNode"}},"buttonClosedText":{"defaultValue":null,"description":"","name":"buttonClosedText","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"buttonText":{"defaultValue":null,"description":"","name":"buttonText","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"string"}},"expanderOpenFromStart":{"defaultValue":null,"description":"","name":"expanderOpenFromStart","declarations":[{"fileName":"src/components/NotificationPanel/DetailButton/DetailButton.tsx","name":"TypeLiteral"}],"required":true,"type":{"name":"boolean"}}}}

package/components/NotificationPanel/DetailButton/styles.module.scss

@@ -0,0 +1,38 @@
+@import '../../../scss/spacers';
+@import '../../../scss/breakpoints';
+@import '../../../scss/font-settings';
+@import '../../../scss/palette';
+
+.notification-panel__detail-section {
+  display: flex;
+  flex-direction: column-reverse;
+
+  &__button--wrapper {
+    padding: 0.375rem 0 0.625rem;
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+  }
+
+  &__content {
+    padding: getSpacer(3xs) 0;
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+  }
+}
+
+html .notification-panel__detail.notification-panel__detail-button {
+  text-decoration: underline;
+  text-decoration-color: $blueberry600;
+  margin-left: -0.25rem;
+  padding: 0 0 0 getSpacer(3xs);
+  white-space: nowrap;
+  overflow: initial;
+  text-overflow: clip;
+  font-size: $font-size-sm;
+  line-height: 1.625rem;
+  height: 1.625rem;
+
+  @media (min-width: 0) {
+    min-height: unset;
+  }
+}

package/components/NotificationPanel/DetailButton/styles.module.scss.d.ts

@@ -0,0 +1,13 @@
+export type Styles = {
+  'notification-panel__detail': string;
+  'notification-panel__detail-button': string;
+  'notification-panel__detail-section': string;
+  'notification-panel__detail-section__button--wrapper': string;
+  'notification-panel__detail-section__content': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/NotificationPanel/NotificationPanel.d.ts

@@ -1,20 +1,29 @@
 import React from 'react';
-export declare type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';
-export declare type NotificationPanelSizes = 'small' | 'medium' | 'large';
+export type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';
+export type NotificationCompactVariants = 'basic' | 'outline';
+export type NotificationPanelSizes = 'small' | 'medium' | 'large';
 export interface NotificationPanelProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** Adds inner child elements. */
     children?: React.ReactNode;
+    /** Adds inner expander elements. */
+    expanderChildren?: React.ReactNode;
+    /** Text for expanderButton. */
+    expanderButtonText?: string;
+    /** Text for expanderButton when closed. */
+    expanderButtonClosedText?: string;
+    /** Makes expander be open from start. */
+    expanderOpenFromStart?: boolean;
     /** Changes the visual representation of the notification panel. */
     variant?: NotificationPanelVariants;
-    /** Adds a shadow effect around the notification panel. */
-    shadow?: boolean;
+    /** Makes the panel more compact. Available in basic and outline. */
+    compactVariant?: NotificationCompactVariants;
     /** 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. Will only show if there are children. */
+    /** 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;
@@ -24,8 +33,8 @@ export interface NotificationPanelProps {
     ariaLabelCloseBtn?: string;
     /** Custom id for the label */
     labelId?: string;
-    /** Custom role for the panel */
-    role?: 'alert';
+    /** Custom role for the panel. Default is "region". If variant is alert or crisis, the aria role will be set to "alert" unless the role-prop is also set. */
+    role?: 'region' | 'alert';
     /** Sets the data-testid attribute. */
     testId?: string;
 }

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

@@ -1 +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;AAUlE,MAAM,WAAW,sBAAsB;IACrC,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,8FAA8F;IAC9F,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,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,QAAA,MAAM,iBAAiB,+FAmErB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,2BAA2B,GAAG,OAAO,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,+BAA+B;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,oEAAoE;IACpE,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C,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,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4JAA4J;IAC5J,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,QAAA,MAAM,iBAAiB,+FA2HrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/components/NotificationPanel/componentdata.json

@@ -1 +1 @@
-{"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":"NotificationPanelVariants","value":[{"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":"NotificationPanelSizes","value":[{"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)"}},"dismissable":{"defaultValue":null,"description":"Toggles the close button in the top right corner. Will only show if there are children.","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"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Custom role for the panel","name":"role","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"alert\"","value":[{"value":"\"alert\""}]}},"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"}}}}
+{"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"}},"expanderChildren":{"defaultValue":null,"description":"Adds inner expander elements.","name":"expanderChildren","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"expanderButtonText":{"defaultValue":null,"description":"Text for expanderButton.","name":"expanderButtonText","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"expanderButtonClosedText":{"defaultValue":null,"description":"Text for expanderButton when closed.","name":"expanderButtonClosedText","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"expanderOpenFromStart":{"defaultValue":null,"description":"Makes expander be open from start.","name":"expanderOpenFromStart","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"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":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"success\""}]}},"compactVariant":{"defaultValue":null,"description":"Makes the panel more compact. Available in basic and outline.","name":"compactVariant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationCompactVariants","value":[{"value":"\"basic\""},{"value":"\"outline\""}]}},"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":"NotificationPanelSizes","value":[{"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)"}},"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"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Custom role for the panel. Default is \"region\". If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set.","name":"role","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"alert\" | \"region\"","value":[{"value":"\"alert\""},{"value":"\"region\""}]}},"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.js

@@ -1,2 +1,2 @@
-import t from"react";import p from"classnames";import e from"./styles.module.scss";import{C as L}from"../../Close.js";import{AnalyticsId as A}from"../../constants.js";import{useUuid as S}from"../../hooks/useUuid.js";import{palette as o}from"../../theme/palette.js";import{getAriaLabelAttributes as $}from"../../utils/accessibility.js";import{Icon as r}from"../Icons/Icon.js";import P from"../Icons/InfoSignStroke.js";import h from"../Icons/AlertSignStroke.js";import v from"../Icons/AlertSignFill.js";import"../Icons/X.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";const F={info:t.createElement(r,{svgIcon:P,color:o.kiwi900,hoverColor:o.kiwi900}),warn:t.createElement(r,{svgIcon:h,color:"black",hoverColor:"black"}),alert:t.createElement(r,{svgIcon:v,color:o.cherry500,hoverColor:o.cherry500}),alertLabel:t.createElement(r,{svgIcon:h,color:o.cherry500,hoverColor:o.cherry500}),crisis:t.createElement(r,{svgIcon:v,color:o.banana200,hoverColor:o.banana200})},M=({fluid:l,variant:s,shadow:n,children:a})=>{if(l){const c=p(e["fluid-wrapper"],e[`fluid-wrapper--${s}`],{[e["fluid-wrapper--shadow"]]:n});return t.createElement("div",{className:c},a)}return a},Y=t.forwardRef((l,s)=>{const{children:n,variant:a="info",shadow:c=!1,dismissable:d=!1,onClick:C,label:i,fluid:b=!1,size:u,className:E,labelId:I,role:_,testId:g}=l,m=S(I),w=()=>{const k=p(e["notification-panel__content"],e[`notification-panel__content--${a}`]);return t.createElement("div",{className:k,id:i?void 0:m},i&&t.createElement("h1",{className:e["notification-panel__label"],dangerouslySetInnerHTML:{__html:i},id:m}),n)},f=!!i&&!n,y=p(e["notification-panel"],u&&e[`notification-panel--${u}`],e[`notification-panel--${a}`],{[e["notification-panel--shadow"]]:!b&&c,[e["notification-panel--has-children"]]:!!n,[e["notification-panel--label-only"]]:f,[e["notification-panel--dismissable"]]:!f&&d},E),N=$({label:i,id:m});return t.createElement(M,{fluid:b,variant:a,shadow:c},t.createElement("section",{ref:s,role:_,"data-testid":g,"data-analyticsid":A.NotificationPanel,className:y,...N},t.createElement("span",{className:e["notification-panel__icon"]},F[a==="alert"&&i&&!n?"alertLabel":a]),!f&&d&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(L,{ariaLabel:l.ariaLabelCloseBtn,onClick:C})),w()))});export{Y as default};
+import t,{useState as $}from"react";import s from"classnames";import{AnalyticsId as x,IconSize as l}from"../../constants.js";import{useUuid as N}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as I}from"../../utils/accessibility.js";import{B as R}from"../../Button.js";import{Icon as _}from"../Icons/Icon.js";import D from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import d from"./DetailButton/styles.module.scss";import{getColor as M}from"../../theme/currys/color.js";import{palette as r}from"../../theme/palette.js";import{C as O}from"../../Close.js";import V from"../Icons/CheckFill.js";import W from"../Icons/ErrorSignFill.js";import j from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import e from"./styles.module.scss";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/X.js";import"../Close/styles.module.scss";const G=({content:m,buttonText:p,buttonClosedText:o,expanderOpenFromStart:n})=>{const[i,E]=$(n),c=i?p:o,b=N(),u=I({label:c,id:b,prefer:"label"}),C={onClick:()=>E(!i),variant:"borderless",className:s(d["notification-panel__detail"],d["notification-panel__detail-button"]),"aria-expanded":i,...u};return t.createElement("div",{className:d["notification-panel__detail-section"]},t.createElement("div",{className:d["notification-panel__detail-section__button--wrapper"]},t.createElement(R,{testId:"expand","data-analyticsid":x.Expander,...C},c,t.createElement(_,{svgIcon:i?U:D}))),i&&t.createElement("div",{className:s(d["notification-panel__detail-section__content"])},m))},H=({fluid:m,variant:p,children:o})=>{if(m){const n=s(e["fluid-wrapper"],{[e[`fluid-wrapper--${p}`]]:p});return t.createElement("div",{className:n},o)}return o},J=t.forwardRef((m,p)=>{const{children:o,variant:n="info",dismissable:i=!1,onClick:E,expanderChildren:c,expanderButtonText:b,expanderButtonClosedText:u,expanderOpenFromStart:C=!1,compactVariant:a,label:f,fluid:S=!1,size:h,className:g,labelId:w,role:y,testId:T}=m,v=N(w),B={info:t.createElement(_,{svgIcon:j,color:r.blueberry700,hoverColor:r.blueberry700,size:a?l.XSmall:l.Small}),warn:t.createElement(_,{svgIcon:W,color:r.banana700,hoverColor:r.banana700,size:a?l.XSmall:l.Small}),alert:t.createElement(_,{svgIcon:q,color:r.cherry700,hoverColor:r.cherry700,size:a?l.XSmall:l.Small}),success:t.createElement(_,{svgIcon:V,color:r.kiwi900,hoverColor:r.kiwi900,size:a?l.XSmall:l.Small})},k=()=>{const L=s(e["notification-panel__content"]),P=s(e["notification-panel__label"],{[e["notification-panel__label--no-content"]]:!o&&!c,[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"]]:f});return t.createElement("div",{className:L,id:f?void 0:v},f&&t.createElement("h1",{className:P,id:v},f),o&&!a&&t.createElement("div",{className:X},o),c&&b&&u&&!a&&t.createElement(G,{expanderOpenFromStart:C,content:c,buttonText:b,buttonClosedText:u}))},z=s(e["notification-panel"],e[`notification-panel--${n}`],{[e[`notification-panel--${h}`]]:!!h,[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||f&&o,[e["notification-panel--dismissable"]]:i},g),A=I({label:f,id:v}),F=y||n==="alert"&&"alert"||"region";return t.createElement(H,{fluid:S,variant:n},t.createElement("section",{ref:p,role:F,"data-testid":T,"data-analyticsid":x.NotificationPanel,className:z,...A},t.createElement("span",{className:e["notification-panel__icon"]},B[n]),i&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(O,{ariaLabel:m.ariaLabelCloseBtn,onClick:E,color:M("black")})),k()))}),Te=J;export{Te as default};
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\nimport Close from '../Close';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Icon from '../Icons';\nimport InfoSignStroke from '../Icons/InfoSignStroke';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nconst variantToIconMap = {\n  info: <Icon svgIcon={InfoSignStroke} color={palette.kiwi900} hoverColor={palette.kiwi900} />,\n  warn: <Icon svgIcon={AlertSignStroke} color=\"black\" hoverColor=\"black\" />,\n  alert: <Icon svgIcon={AlertSignFill} color={palette.cherry500} hoverColor={palette.cherry500} />,\n  alertLabel: <Icon svgIcon={AlertSignStroke} color={palette.cherry500} hoverColor={palette.cherry500} />,\n  crisis: <Icon svgIcon={AlertSignFill} color={palette.banana200} hoverColor={palette.banana200} />,\n};\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Adds a shadow effect around the notification panel. */\n  shadow?: boolean;\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. Will only show if there are children. */\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 */\n  role?: 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant' | 'shadow'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, shadow, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], styles[`fluid-wrapper--${variant}`], {\n      [styles['fluid-wrapper--shadow']]: shadow,\n    });\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    shadow = false,\n    dismissable = false,\n    onClick,\n    label,\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n\n  const renderContent = (): JSX.Element => {\n    const contentClasses = classNames(styles['notification-panel__content'], styles[`notification-panel__content--${variant}`]);\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && <h1 className={styles['notification-panel__label']} dangerouslySetInnerHTML={{ __html: label }} id={uuid} />}\n        {children}\n      </div>\n    );\n  };\n\n  const labelOnly = !!label && !children;\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    size && styles[`notification-panel--${size}`],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles['notification-panel--shadow']]: !fluid && shadow,\n      [styles['notification-panel--has-children']]: !!children,\n      [styles['notification-panel--label-only']]: labelOnly,\n      [styles['notification-panel--dismissable']]: !labelOnly && dismissable,\n    },\n    className\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant} shadow={shadow}>\n      <section\n        ref={ref}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>\n          {variantToIconMap[variant === 'alert' && label && !children ? 'alertLabel' : variant]}\n        </span>\n        {!labelOnly && dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} />\n          </span>\n        )}\n        {renderContent()}\n      </section>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["variantToIconMap","React","Icon","InfoSignStroke","palette","AlertSignStroke","AlertSignFill","FluidWrapper","fluid","variant","shadow","children","fluidClasses","classNames","styles","NotificationPanel","props","ref","dismissable","onClick","label","size","className","labelId","role","testId","uuid","useUuid","renderContent","contentClasses","labelOnly","notificationPanelClasses","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close"],"mappings":"yqBAiBA,MAAMA,EAAmB,CACvB,KAAOC,EAAA,cAAAC,EAAA,CAAK,QAASC,EAAgB,MAAOC,EAAQ,QAAS,WAAYA,EAAQ,OAAA,CAAS,EAC1F,KAAOH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAM,QAAQ,WAAW,OAAA,CAAQ,EACvE,MAAQJ,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EAC9F,WAAaH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAOD,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EACrG,OAASH,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,CACjG,EAmCMG,EAAyC,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,SAAAC,KAAe,CACvF,GAAIH,EAAO,CACT,MAAMI,EAAeC,EAAWC,EAAO,iBAAkBA,EAAO,kBAAkBL,KAAY,CAC5F,CAACK,EAAO,0BAA2BJ,CAAA,CACpC,EAED,OAAQT,EAAA,cAAA,MAAA,CAAI,UAAWW,CAAA,EAAeD,CAAS,CACjD,CACO,OAAAA,CACT,EAEMI,EAAoBd,EAAM,WAAmD,CAACe,EAAOC,IAAQ,CAC3F,KAAA,CACJ,SAAAN,EACA,QAAAF,EAAU,OACV,OAAAC,EAAS,GACT,YAAAQ,EAAc,GACd,QAAAC,EACA,MAAAC,EACA,MAAAZ,EAAQ,GACR,KAAAa,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,OAAAC,CACE,EAAAT,EACEU,EAAOC,EAAQJ,CAAO,EAEtBK,EAAgB,IAAmB,CACvC,MAAMC,EAAiBhB,EAAWC,EAAO,+BAAgCA,EAAO,gCAAgCL,IAAU,EAE1H,OACGR,EAAA,cAAA,MAAA,CAAI,UAAW4B,EAAgB,GAAKT,EAAe,OAAPM,CAAO,EACjDN,GAAUnB,EAAA,cAAA,KAAA,CAAG,UAAWa,EAAO,6BAA8B,wBAAyB,CAAE,OAAQM,CAAM,EAAG,GAAIM,CAAA,CAAM,EACnHf,CACH,CAAA,EAIEmB,EAAY,CAAC,CAACV,GAAS,CAACT,EAExBoB,EAA2BlB,EAC/BC,EAAO,sBACPO,GAAQP,EAAO,uBAAuBO,KACtCP,EAAO,uBAAuBL,KAC9B,CACE,CAACK,EAAO,+BAAgC,CAACN,GAASE,EAClD,CAACI,EAAO,qCAAsC,CAAC,CAACH,EAChD,CAACG,EAAO,mCAAoCgB,EAC5C,CAAChB,EAAO,oCAAqC,CAACgB,GAAaZ,CAC7D,EACAI,CAAA,EAGIU,EAAsBC,EAAuB,CAAE,MAAAb,EAAO,GAAIM,EAAM,EAEtE,OACGzB,EAAA,cAAAM,EAAA,CAAa,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,CAAA,EAC3CT,EAAA,cAAA,UAAA,CACC,IAAAgB,EACA,KAAAO,EACA,cAAaC,EACb,mBAAkBS,EAAY,kBAC9B,UAAWH,EACV,GAAGC,CAAA,EAEH/B,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,2BAAA,EACrBd,EAAiBS,IAAY,SAAWW,GAAS,CAACT,EAAW,aAAeF,EAC/E,EACC,CAACqB,GAAaZ,GACZjB,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,4BAAA,EACrBb,EAAA,cAAAkC,EAAA,CAAM,UAAWnB,EAAM,kBAAmB,QAAAG,CAAA,CAAkB,CAC/D,EAEDS,EACH,CAAA,CACF,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx","../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n","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 '../Icons';\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 \"region\". 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    });\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  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n  const ariaRole = role || (variant === 'alert' && 'alert') || 'region';\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <section\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      </section>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown","FluidWrapper","fluid","variant","children","fluidClasses","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","compactVariant","label","size","className","labelId","role","testId","uuid","variantToIconMap","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","notificationPanelClasses","ariaRole","Close","getColor","NotificationPanel$1"],"mappings":"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"}