@helsenorge/designsystem-react 12.0.0-beta.1 → 12.0.0-beta.2

package/components/LinkList/styles.module.scss

@@ -10,6 +10,25 @@
   padding: 0;
   width: inherit;
   margin: 0;
+  position: relative;
+
+  &--outline {
+    &--neutral {
+      border: 1px solid var(--color-base-border-onlight);
+    }
+
+    &--blueberry {
+      border: 1px solid var(--core-color-blueberry-500);
+    }
+
+    &--cherry {
+      border: 1px solid var(--core-color-cherry-400);
+    }
+
+    &--white {
+      border: 1px solid var(--color-base-border-onlight);
+    }
+  }
 
   &__list-item {
     &--line {
@@ -101,6 +120,23 @@
     &--fill,
     &--fill-negative {
       margin-top: spacers.getSpacer(s);
+
+      &--blueberry {
+        border: 1px solid var(--core-color-blueberry-500);
+      }
+
+      &--cherry {
+        border: 1px solid var(--core-color-cherry-400);
+      }
+
+      &--neutral {
+        border: 1px solid var(--color-base-border-onlight);
+      }
+
+      // Skal ikke brukes, men klassen er definert for enkelhets skyld
+      &--white {
+        border: 1px solid var(--color-base-border-onlight);
+      }
     }
 
     &--fill-negative {
@@ -182,6 +218,9 @@
     &:focus,
     &:focus-visible {
       outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: 0; // Override user agent default
+      position: relative;
+      z-index: 1;
     }
 
     &--outline {
@@ -192,6 +231,8 @@
       }
 
       &--blueberry {
+        border-bottom: 1px solid var(--core-color-blueberry-500);
+
         &:hover {
           background-color: var(--core-color-blueberry-50);
         }
@@ -202,6 +243,8 @@
       }
 
       &--cherry {
+        border-bottom: 1px solid var(--core-color-cherry-400);
+
         &:hover {
           background-color: var(--core-color-cherry-50);
         }
@@ -212,6 +255,8 @@
       }
 
       &--neutral {
+        border-bottom: 1px solid var(--color-base-border-onlight);
+
         &:hover {
           background-color: var(--core-color-neutral-50);
         }
@@ -221,5 +266,30 @@
         }
       }
     }
+
+    &--new {
+      background-color: var(--core-color-blueberry-50) !important;
+
+      &:hover {
+        background-color: var(--core-color-blueberry-100) !important;
+      }
+
+      &:active {
+        background-color: var(--core-color-blueberry-200) !important;
+      }
+    }
+  }
+
+  &__status-marker {
+    width: 6px;
+    height: 100%;
+    background-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    &--new {
+      background-color: var(--color-notification-status-info);
+    }
   }
 }

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

@@ -10,6 +10,10 @@ export type Styles = {
   'link-list__anchor--fill--neutral': string;
   'link-list__anchor--fill--white': string;
   'link-list__anchor--fill-negative': string;
+  'link-list__anchor--fill-negative--blueberry': string;
+  'link-list__anchor--fill-negative--cherry': string;
+  'link-list__anchor--fill-negative--neutral': string;
+  'link-list__anchor--fill-negative--white': string;
   'link-list__anchor--large': string;
   'link-list__anchor--line--blueberry': string;
   'link-list__anchor--line--cherry': string;
@@ -17,6 +21,7 @@ export type Styles = {
   'link-list__anchor--line--white': string;
   'link-list__anchor--medium': string;
   'link-list__anchor--neutral': string;
+  'link-list__anchor--new': string;
   'link-list__anchor--outline': string;
   'link-list__anchor--outline--blueberry': string;
   'link-list__anchor--outline--cherry': string;
@@ -29,6 +34,12 @@ export type Styles = {
   'link-list__list-item--outline--cherry': string;
   'link-list__list-item--outline--neutral': string;
   'link-list__list-item--outline--white': string;
+  'link-list__status-marker': string;
+  'link-list__status-marker--new': string;
+  'link-list--outline--blueberry': string;
+  'link-list--outline--cherry': string;
+  'link-list--outline--neutral': string;
+  'link-list--outline--white': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/NotificationPanel/styles.module.scss

@@ -71,7 +71,7 @@
   }
 
   &--warn {
-    border: 0.125rem solid palette.$banana700;
+    border: 0.125rem solid palette.$banana800;
     background-color: palette.$banana50;
   }
 

package/components/Panel/Panel.d.ts

@@ -25,6 +25,8 @@ export declare enum PanelStatus {
     draft = "draft"
 }
 export interface PanelProps {
+    /** Aria label on call to action button */
+    buttonBottomAriaLabel?: string;
     /** Sets the text on the bottom call to action button */
     buttonBottomText?: string;
     /** Sets the action on the bottom call to action button */
@@ -37,6 +39,8 @@ export interface PanelProps {
     color?: PanelColors;
     /** Sets classes on the outermost container of the panel */
     className?: string;
+    /** Action called when toggling expansion of ExpandedContent */
+    onExpand?: () => void;
     /** Sets the stacking order of the content boxes */
     stacking?: PanelStacking;
     /** Sets the data-testid attribute. */
@@ -47,15 +51,10 @@ export interface PanelProps {
     status?: PanelStatus;
     /** Resources for component */
     resources?: Partial<HNDesignsystemPanel>;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
 }
-declare const Panel: React.FC<PanelProps> & {
-    PreContainer: React.FC<ContentProps>;
-    Title: React.FC<PanelTitleProps>;
-    A: React.FC<ContentProps>;
-    B: React.FC<ContentProps>;
-    C: React.FC<ContentProps>;
-    ExpandedContent: React.FC<ContentProps>;
-};
+declare const PanelRoot: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
 export interface ContentProps {
     /** Children elements to be rendered inside the content box */
     children?: React.ReactNode;
@@ -65,4 +64,13 @@ export declare const A: React.FC<ContentProps>;
 export declare const B: React.FC<ContentProps>;
 export declare const C: React.FC<ContentProps>;
 export declare const ExpandedContent: React.FC<ContentProps>;
+type PanelComponent = typeof PanelRoot & {
+    PreContainer: React.FC<ContentProps>;
+    Title: React.FC<PanelTitleProps>;
+    A: React.FC<ContentProps>;
+    B: React.FC<ContentProps>;
+    C: React.FC<ContentProps>;
+    ExpandedContent: React.FC<ContentProps>;
+};
+declare const Panel: PanelComponent;
 export default Panel;

package/components/Panel/PanelTitle/PanelTitle.d.ts

@@ -7,9 +7,11 @@ export interface PanelTitleProps {
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Title text */
-    title: string;
+    title: string | React.ReactNode;
     /** Title HTML markup */
     titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
 }
 declare const PanelTitle: React.FC<PanelTitleProps>;
 export default PanelTitle;

package/components/Panel/styles.module.scss

@@ -138,7 +138,15 @@
     }
 
     &--fill--neutral {
-      border: 1px solid var(--core-color-neutral-300);
+      border: 1px solid var(--color-base-border-neutral-emphasized);
+    }
+
+    &--fill--new {
+      border: 1px solid var(--core-color-blueberry-200);
+    }
+
+    &--fill--status {
+      border-left: none;
     }
   }
 
@@ -154,6 +162,7 @@
 
   &--new {
     border-left-color: var(--color-notification-status-info);
+    background-color: var(--color-base-background-blueberry);
   }
 
   &--draft {

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

@@ -32,6 +32,8 @@ export type Styles = {
   'expander__button--expanded': string;
   panel: string;
   'panel__border--fill--neutral': string;
+  'panel__border--fill--new': string;
+  'panel__border--fill--status': string;
   'panel__border--line': string;
   'panel__border--outline--inner': string;
   'panel__border--outline--outer': string;

package/components/PanelList/PanelList.d.ts

@@ -7,6 +7,8 @@ export interface PanelListProps {
     variant?: PanelVariant;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Highlights text in title and content. Used for search results */
+    highlightText?: string;
 }
 declare const PanelList: React.ForwardRefExoticComponent<PanelListProps & React.RefAttributes<HTMLDivElement>>;
 export default PanelList;

package/components/PanelList/index.js

@@ -6,10 +6,11 @@ import { b as PanelVariant, P as Panel } from "../../Panel.js";
 import styles from "./styles.module.scss";
 const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === Panel;
 const PanelList = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
-  const { testId, children, variant = PanelVariant.fill } = props;
+  const { testId, children, variant = PanelVariant.fill, highlightText } = props;
   const renderPanel = (panel) => React__default.cloneElement(panel, {
     variant,
-    className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`])
+    className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),
+    highlightText: panel.props.highlightText || highlightText
   });
   return /* @__PURE__ */ jsx(
     "div",

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,UACnBA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,OAAO,EAAE,CAAC;AAAA,EAAA,CACrF;AAGD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,YAAY,aAAa,SAAS;AAAA,MAE1F,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAU,iBAAiB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAM;AAAA,IAAA;AAAA,EAC/F;AAEJ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAoBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;AAEzE,QAAM,cAAc,CAAC,UACnBA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,OAAO,EAAE,CAAC;AAAA,IACpF,eAAe,MAAM,MAAM,iBAAiB;AAAA,EAAA,CAC7C;AAGD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW,WAAW,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,YAAY,aAAa,SAAS;AAAA,MAE1F,UAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAU,iBAAiB,KAAK,IAAI,YAAY,KAAK,IAAI,KAAM;AAAA,IAAA;AAAA,EAC/F;AAEJ,CAAC;"}

package/components/PopOver/PopOver.d.ts

@@ -7,6 +7,10 @@ export declare enum PopOverVariant {
 export type PopOverRole = 'tooltip' | 'dialog';
 export type PopOverPlacement = 'top' | 'bottom';
 export interface PopOverProps {
+    /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */
+    ariaLabel?: string;
+    /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */
+    ariaLabelledById?: string;
     /** Id of the PopOver */
     id?: string;
     /** Content shown inside PopOver. Note that if role="tooltip", you must not include interactive/focusable elements. */

package/components/PopOver/styles.module.scss

@@ -1,6 +1,4 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
@@ -13,7 +11,7 @@
   text-align: start;
   background-color: var(--core-color-white);
   z-index: 3;
-  border: 1px solid var(--color-base-border-onlight);
+  box-shadow: 0 0 0 1px var(--color-base-border-onlight);
   border-radius: 9px;
   filter: drop-shadow(0 4px 16px rgba(0 0 0 / 30%));
   padding: var(--core-space-s);
@@ -23,4 +21,9 @@
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     max-width: 35rem;
   }
+
+  &__arrow {
+    // Fjerner mellomrom mellom pil og boble på ulike zoomnivåer
+    margin: -0.5px 0;
+  }
 }

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

@@ -1,5 +1,6 @@
 export type Styles = {
   popover: string;
+  popover__arrow: string;
 };
 
 export type ClassNames = keyof Styles;

package/components/RadioButton/styles.module.scss

@@ -6,6 +6,9 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 
+$padding-clickable-area-top-bottom: 8px;
+$padding-clickable-area-left: 8px;
+
 @mixin dashed-border() {
   box-shadow: none;
 
@@ -24,6 +27,7 @@
 
 .radio-button-wrapper {
   cursor: pointer;
+  margin-left: -$padding-clickable-area-left;
 
   &__large {
     margin: spacers.getSpacer(2xs) 0;
@@ -51,6 +55,7 @@
   cursor: pointer;
   line-height: font-settings.$lineheight-size-sm;
   color: palette.$black;
+  padding: $padding-clickable-area-top-bottom 0 $padding-clickable-area-top-bottom $padding-clickable-area-left;
 
   &--on-dark {
     color: palette.$white;
@@ -412,7 +417,8 @@
 }
 
 .radiobutton-sublabel-wrapper {
-  padding-left: 2.7rem;
+  margin-top: -$padding-clickable-area-top-bottom;
+  padding-left: calc(2.8rem + $padding-clickable-area-left);
 }
 
 /******** RESET *********/

package/components/StatusDot/StatusDot.d.ts

@@ -19,7 +19,10 @@ export declare enum StatusDotVariant {
     draft = "draft",
     hidden = "hidden",
     login = "login",
-    attachment = "attachment"
+    attachment = "attachment",
+    active = "active",
+    pending = "pending",
+    inactive = "inactive"
 }
 export interface StatusDotIconProps {
     /** Defines the color of the icon */
@@ -41,5 +44,6 @@ export interface StatusDotProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-declare const StatusDot: React.FC<StatusDotProps>;
+export type StatusDotType = React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLElement>>;
+declare const StatusDot: StatusDotType;
 export default StatusDot;

package/components/StatusDot/index.js

@@ -1,8 +1,8 @@
 import { S as StatusDot } from "../../StatusDot.js";
-import { a, b } from "../../StatusDot.js";
+import { b, a } from "../../StatusDot.js";
 export {
-  a as StatusDotOnColor,
-  b as StatusDotVariant,
+  b as StatusDotOnColor,
+  a as StatusDotVariant,
   StatusDot as default
 };
 //# sourceMappingURL=index.js.map

package/components/StatusDot/styles.module.scss

@@ -25,32 +25,38 @@ $status-dot-size: 1rem;
     min-width: $status-dot-size;
     min-height: $status-dot-size;
 
-    &--success {
+    &--success,
+    &--active {
       fill: var(--color-notification-graphics-success);
     }
-    &--success#{&}--on-dark {
+    &--success#{&}--on-dark,
+    &--active#{&}--on-dark {
       fill: var(--core-color-kiwi-200);
     }
 
     &--inprocess,
     &--exception,
     &--unknown,
-    &--inspected {
+    &--inspected,
+    &--pending {
       fill: var(--color-notification-graphics-warning);
     }
     &--inprocess#{&}--on-dark,
     &--exception#{&}--on-dark,
     &--unknown#{&}--on-dark,
-    &--inspected#{&}--on-dark {
+    &--inspected#{&}--on-dark,
+    &--pending#{&}--on-dark {
       fill: var(--core-color-banana-300);
     }
 
     &--cancelled,
-    &--alert {
+    &--alert,
+    &--inactive {
       fill: var(--color-notification-graphics-error);
     }
     &--cancelled#{&}--on-dark,
-    &--alert#{&}--on-dark {
+    &--alert#{&}--on-dark,
+    &--inactive#{&}--on-dark {
       fill: var(--core-color-cherry-100);
     }
 

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

@@ -1,6 +1,7 @@
 export type Styles = {
   statusdot: string;
   statusdot__dot: string;
+  'statusdot__dot--active': string;
   'statusdot__dot--alert': string;
   'statusdot__dot--attachment': string;
   'statusdot__dot--cancelled': string;
@@ -8,12 +9,14 @@ export type Styles = {
   'statusdot__dot--exception': string;
   'statusdot__dot--group': string;
   'statusdot__dot--hidden': string;
+  'statusdot__dot--inactive': string;
   'statusdot__dot--info': string;
   'statusdot__dot--inprocess': string;
   'statusdot__dot--inspected': string;
   'statusdot__dot--login': string;
   'statusdot__dot--noaccess': string;
   'statusdot__dot--on-dark': string;
+  'statusdot__dot--pending': string;
   'statusdot__dot--recurring': string;
   'statusdot__dot--success': string;
   'statusdot__dot--transparent': string;

package/components/Step/Step.d.ts

@@ -6,6 +6,10 @@ export interface StepProps {
     stepper?: React.ReactElement<StepperProps>;
     /** Innhold i steget */
     children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Adds custom classes to the content element. */
+    contentClassName?: string;
     /** Knapp for å gå tilbake. Vises med "outline" variant. */
     backButton?: React.ReactElement<ButtonProps>;
     /** Knapp for å gå videre. Vises med "fill" variant. */

package/components/Step/index.js

@@ -1,10 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { S as StepButtons } from "../../StepButtons.js";
 import styles from "./styles.module.scss";
 const Step = ({
   stepper,
   children,
+  className,
+  contentClassName,
   backButton,
   forwardButton,
   additionalButtons,
@@ -13,9 +16,9 @@ const Step = ({
   testId
 }) => {
   const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;
-  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Step, children: [
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Step, className, children: [
     stepper && /* @__PURE__ */ jsx("div", { className: styles.step__stepper, children: stepper }),
-    /* @__PURE__ */ jsx("div", { className: styles.step__content, children }),
+    /* @__PURE__ */ jsx("div", { className: classNames(styles.step__content, contentClassName), children }),
     hasNavigation && /* @__PURE__ */ jsx(
       StepButtons,
       {

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":[],"mappings":";;;;AA4BA,MAAM,OAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,MAAM;AACE,QAAA,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,8BACG,OAAI,EAAA,eAAa,QAAQ,oBAAkB,YAAY,MACrD,UAAA;AAAA,IAAA,WAAY,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAQ,SAAA;AAAA,IAC1D,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAS;AAAA,IAC/C,iBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GAEJ;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":[],"mappings":";;;;;AAkCA,MAAM,OAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,MAAM;AACE,QAAA,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,8BACG,OAAI,EAAA,eAAa,QAAQ,oBAAkB,YAAY,MAAM,WAC3D,UAAA;AAAA,IAAA,WAAY,oBAAA,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAQ,SAAA;AAAA,IAC3D,oBAAC,SAAI,WAAW,WAAW,OAAO,eAAe,gBAAgB,GAAI,UAAS;AAAA,IAC7E,iBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GAEJ;AAEJ;"}

package/components/Toggle/index.js

@@ -103,7 +103,8 @@ const Toggle = ({
         onChange: handleChange,
         className: styles["toggle-container__input"],
         "aria-label": label.map((l) => l.text).join(" "),
-        "aria-describedby": subLabel ? subLabelId : void 0
+        "aria-describedby": subLabel ? subLabelId : void 0,
+        role: "switch"
       }
     ),
     /* @__PURE__ */ jsx("span", { id: toggleId, className: toggleClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { id: toggleDotId, className: toggleDotClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx(

package/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\n        id={inputId}\n        type=\"checkbox\"\n        checked={checkedState}\n        onChange={handleChange}\n        className={styles['toggle-container__input']}\n        aria-label={label.map(l => l.text).join(' ')}\n        aria-describedby={subLabel ? subLabelId : undefined}\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\n        {label.map(labelText => {\n          const labelClassNames = classNames({\n            [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n          });\n\n          return (\n            <span key={labelId + labelText.text} className={labelClassNames}>\n              {labelText.text}\n            </span>\n          );\n        })}\n      </span>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\n        {togglePosition === TogglePosition.left && (\n          <>\n            {renderToggle()}\n            {renderLabelText()}\n          </>\n        )}\n        {togglePosition === TogglePosition.right && (\n          <>\n            {renderLabelText()}\n            {renderToggle()}\n          </>\n        )}\n      </div>\n      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const inputId = useUuid();\n  const toggleId = useUuid();\n  const toggleDotId = useUuid();\n  const labelId = useUuid();\n  const subLabelId = useUuid();\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n    animate(\n      '#' + toggleDotId,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n  const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n    [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n    [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n      <input\n        id={inputId}\n        type=\"checkbox\"\n        checked={checkedState}\n        onChange={handleChange}\n        className={styles['toggle-container__input']}\n        aria-label={label.map(l => l.text).join(' ')}\n        aria-describedby={subLabel ? subLabelId : undefined}\n        role=\"switch\"\n      />\n      <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n        <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n          <svg\n            width=\"17\"\n            height=\"13\"\n            viewBox=\"0 0 17 13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={styles['toggle-container__toggle__dot__icon']}\n          >\n            <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n          </svg>\n        </span>\n      </span>\n    </label>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <span\n        id={labelId}\n        className={classNames(styles['toggle-container__label'], {\n          [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n        })}\n      >\n        {label.map(labelText => {\n          const labelClassNames = classNames({\n            [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n          });\n\n          return (\n            <span key={labelId + labelText.text} className={labelClassNames}>\n              {labelText.text}\n            </span>\n          );\n        })}\n      </span>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      <div className={toggleRowClassNames}>\n        {togglePosition === TogglePosition.left && (\n          <>\n            {renderToggle()}\n            {renderLabelText()}\n          </>\n        )}\n        {togglePosition === TogglePosition.right && (\n          <>\n            {renderLabelText()}\n            {renderToggle()}\n          </>\n        )}\n      </div>\n      {subLabel && (\n        <div id={subLabelId} className={subLabelClassNames}>\n          {subLabel}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}

package/constants.d.ts

@@ -72,6 +72,7 @@ export declare enum AnalyticsId {
     FormGroup = "form-group",
     FormLayout = "form-layout",
     HelpBubble = "help-bubble",
+    HelpDrawer = "help-drawer",
     HelpExpanderInline = "help-expander-inline",
     HelpExpanderStandalone = "help-expander-standalone",
     HelpTooltip = "help-tooltip",

package/constants.js

@@ -50,6 +50,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
   AnalyticsId2["FormGroup"] = "form-group";
   AnalyticsId2["FormLayout"] = "form-layout";
   AnalyticsId2["HelpBubble"] = "help-bubble";
+  AnalyticsId2["HelpDrawer"] = "help-drawer";
   AnalyticsId2["HelpExpanderInline"] = "help-expander-inline";
   AnalyticsId2["HelpExpanderStandalone"] = "help-expander-standalone";
   AnalyticsId2["HelpTooltip"] = "help-tooltip";