@helsenorge/designsystem-react 11.3.0 → 11.4.1

package/components/Panel/Panel.d.ts

@@ -37,6 +37,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. */
@@ -48,14 +50,7 @@ export interface PanelProps {
     /** Resources for component */
     resources?: Partial<HNDesignsystemPanel>;
 }
-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 +60,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/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/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 */

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/designsystem-react.css

@@ -75,7 +75,7 @@
   --color-base-border-ondark: #d6d4d3;
   --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background-normal: #efe4fd;
+  --color-help-background-normal: #f4ecfe;
   --color-help-graphics-normal: #5b22a6;
   --color-help-border-normal: #5b22a6;
   --core-color-blueberry-100: #cae7ed;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "11.3.0",
+  "version": "11.4.1",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/supernova/styles/colors.css

@@ -75,7 +75,7 @@
   --color-base-border-ondark: #d6d4d3;
   --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background-normal: #efe4fd;
+  --color-help-background-normal: #f4ecfe;
   --color-help-graphics-normal: #5b22a6;
   --color-help-border-normal: #5b22a6;
   --core-color-blueberry-100: #cae7ed;