@helsenorge/designsystem-react 11.2.0 → 11.4.0

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,9 +75,9 @@
   --color-base-border-ondark: #d6d4d3;
   --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background: #efe4fd;
-  --color-help-graphics: #5b22a6;
-  --color-help-border: #5b22a6;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5b22a6;
+  --color-help-border-normal: #5b22a6;
   --core-color-blueberry-100: #cae7ed;
   --core-color-blueberry-200: #afdae3;
   --core-color-blueberry-300: #7abecc;
@@ -172,8 +172,6 @@
   --color-placeholder-text-onlight: #62625f;
   --color-base-border-onlight-subtle: #d6d4d3;
   --color-base-border-neutral: #d6d4d3;
-
-  /* Subtle border for Blueberry 50 background */
   --color-base-border-blueberry: #afdae3;
   --color-base-border-cherry: #eec0a5;
 
@@ -186,4 +184,18 @@
   --color-notification-text-success: #078141;
   --color-base-border-neutral-emphasized: #bdbab9;
   --color-notification-status-draft: #7d7c79;
+
+  /* hoverstate on help components on white background */
+  --color-help-background-transparent-onlight-hover: #6c36b31a;
+  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-background-transparent-onlight-active: #6c38b34d;
+  --color-action-background-transparent-onlight-active: #126f874d;
+
+  /* Background outside of modal and bottomsheet to mask inactive screen-area */
+  --color-shadow-pagemask: #2c2b2cb8;
+  --color-help-border-subtle-wcag: #9153e2;
+  --color-help-graphics-dark: #4c1b8c;
+  --color-help-border-dark: #4c1b8c;
+  --color-help-graphics-verydark: #3c1471;
+  --color-help-border-verydark: #3c1471;
 }

package/package.json

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

package/scss/supernova/styles/colors.css

@@ -75,9 +75,9 @@
   --color-base-border-ondark: #d6d4d3;
   --color-base-border-onlight: #7d7c79;
   --color-base-border-onlight-emphasized: #62625f;
-  --color-help-background: #efe4fd;
-  --color-help-graphics: #5b22a6;
-  --color-help-border: #5b22a6;
+  --color-help-background-normal: #f4ecfe;
+  --color-help-graphics-normal: #5b22a6;
+  --color-help-border-normal: #5b22a6;
   --core-color-blueberry-100: #cae7ed;
   --core-color-blueberry-200: #afdae3;
   --core-color-blueberry-300: #7abecc;
@@ -172,8 +172,6 @@
   --color-placeholder-text-onlight: #62625f;
   --color-base-border-onlight-subtle: #d6d4d3;
   --color-base-border-neutral: #d6d4d3;
-
-  /* Subtle border for Blueberry 50 background */
   --color-base-border-blueberry: #afdae3;
   --color-base-border-cherry: #eec0a5;
 
@@ -186,4 +184,18 @@
   --color-notification-text-success: #078141;
   --color-base-border-neutral-emphasized: #bdbab9;
   --color-notification-status-draft: #7d7c79;
+
+  /* hoverstate on help components on white background */
+  --color-help-background-transparent-onlight-hover: #6c36b31a;
+  --color-help-background-transparent-onlight-hover-selected: #6c38b333;
+  --color-help-background-transparent-onlight-active: #6c38b34d;
+  --color-action-background-transparent-onlight-active: #126f874d;
+
+  /* Background outside of modal and bottomsheet to mask inactive screen-area */
+  --color-shadow-pagemask: #2c2b2cb8;
+  --color-help-border-subtle-wcag: #9153e2;
+  --color-help-graphics-dark: #4c1b8c;
+  --color-help-border-dark: #4c1b8c;
+  --color-help-graphics-verydark: #3c1471;
+  --color-help-border-verydark: #3c1471;
 }

package/scss/supernova/styles/typography.css

@@ -97,13 +97,13 @@
   /* Renders clumping in ordinary clumps */
   --mobile-textlist: 400 1.125rem/120% "Source Sans Pro";
 
-  /* For use as body text in help components */
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
   --desktop-help-text: 400 1.125rem/140% "Source Sans Pro";
 
   /* For use in Help trigger components */
   --desktop-help-trigger-text: 600 1.125rem/130% "Source Sans 3";
 
-  /* For use as body text in help components */
+  /* For use as body text in smaller help components as HelpExpander (detail panel), HelpBubble and HelpTooltip */
   --mobile-help-text: 400 1rem/150% "Source Sans Pro";
 
   /* For use in Help trigger components */