@helsenorge/designsystem-react 13.0.0-workspaces-beta.1 → 13.0.0-workspaces-beta.2

package/lib/CHANGELOG.md

@@ -1,3 +1,5 @@
+## 13.0.0-workspaces-beta.1 (2025-11-10)
+
 ## 13.0.0-workspaces-beta.0 (2025-11-10)
 
 

package/lib/components/Toast/styles.module.scss.d.ts

@@ -0,0 +1,15 @@
+export type Styles = {
+  toast: string;
+  toast__description: string;
+  toast__icon: string;
+  'toast__icon--check': string;
+  'toast__icon--close': string;
+  'toast__text-container': string;
+  toast__title: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "13.0.0-workspaces-beta.1",
+  "version": "13.0.0-workspaces-beta.2",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -38,6 +38,10 @@
       "types": "./lib/components/Illustrations/*.d.ts",
       "import": "./lib/components/Illustrations/*.js"
     },
+    "./components/*/*": {
+      "types": "./lib/components/*/*.d.ts",
+      "import": "./lib/components/*/index.js"
+    },
     "./components/*": {
       "types": "./lib/components/*/index.d.ts",
       "import": "./lib/components/*/index.js"
@@ -58,14 +62,22 @@
       "types": "./lib/utils/*.d.ts",
       "import": "./lib/utils/*.js"
     },
-    "./scss/*": "./lib/scss/*",
+    "./__mocks__/*": {
+      "types": "./lib/__mocks__/*.d.ts",
+      "import": "./lib/__mocks__/*.js"
+    },
+    "./scss/*": "./scss/*",
+    "./lib/scss/*": "./lib/scss/*",
     "./fonts/*": "./lib/fonts/*"
   },
   "scripts": {
     "start": "storybook dev",
-    "prebuild": "npm-run-all clean generate:iconnames generate:illustrationnames generate:cssdefinitions",
+    "prebuild": "npm-run-all link-scss clean generate:iconnames generate:illustrationnames generate:cssdefinitions",
     "build": "vite build",
-    "postbuild": "node __scripts__/link-root-scss.mjs",
+    "postbuild": "npm run link-scss",
+    "link-scss": "node __scripts__/link-root-scss.mjs",
+    "prepack": "rimraf scss && copyfiles -u 1 'lib/scss/**/*' .",
+    "postpack": "npm run link-scss",
     "build-storybook": "storybook build -o dist",
     "clean": "rimraf lib",
     "generate:iconnames": "node __scripts__/generateIconNames.mjs",

package/scss/_body.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use './palette' as palette;
+@use './font-mixins' as fonts;
+
+body {
+  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  background-color: palette.$white;
+  color: palette.$black;
+
+  @include fonts.body;
+}

package/scss/_breakpoints.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use 'spacers' as spacers;
+
+$grid-gutter-width: map.get(spacers.$spacers, 5);
+$grid-columns: 12;
+$grid-breakpoints: (
+  xxs: 0,
+  xs: 360px,
+  sm: 564px,
+  md: 768px,
+  lg: 1088px,
+  xl: 1450px,
+);
+$grid-max-breakpoints: (
+  xs: map.get($grid-breakpoints, sm) - 0.02,
+  sm: map.get($grid-breakpoints, md) - 0.02,
+  md: map.get($grid-breakpoints, lg) - 0.02,
+);
+$container-max-widths: (
+  sm: 528px,
+  md: 612px,
+  lg: 1056px,
+);
+
+@mixin tiny-screens-media-query {
+  @media (width <= 319px), (height <= 308px) {
+    @content;
+  }
+}

package/scss/_figma-tokens.scss

@@ -0,0 +1,68 @@
+// Do not edit directly
+// Generated on Wed, 05 Oct 2022 11:38:01 GMT
+
+$palette-white: #fff;
+$palette-black: #000;
+$palette-plum900: #3c1471;
+$palette-plum800: #4c1b8c;
+$palette-plum700: #5b22a6;
+$palette-plum600: #6a2abf;
+$palette-plum500: #7a33d7;
+$palette-plum400: #9153e2;
+$palette-plum300: #a875eb;
+$palette-plum200: #bf98f3;
+$palette-plum100: #d7bdf9;
+$palette-plum50: #efe4fd;
+$palette-neutral900: #2b2c2b;
+$palette-neutral800: #474745;
+$palette-neutral700: #62625f;
+$palette-neutral600: #7d7c79;
+$palette-neutral500: #989693;
+$palette-neutral400: #aaa8a6;
+$palette-neutral300: #bdbab9;
+$palette-neutral200: #d6d4d3;
+$palette-neutral100: #eae7e7;
+$palette-neutral50: #f5f3f3;
+$palette-kiwi900: #078141;
+$palette-kiwi800: #099150;
+$palette-kiwi700: #0ca161;
+$palette-kiwi600: #10b172;
+$palette-kiwi500: #33be84;
+$palette-kiwi400: #56ca96;
+$palette-kiwi300: #79d6aa;
+$palette-kiwi200: #9de2bf;
+$palette-kiwi100: #c2edd6;
+$palette-kiwi50: #e6f8ee;
+$palette-cherry900: #7e1c0e;
+$palette-cherry800: #912112;
+$palette-cherry700: #a31f0e;
+$palette-cherry600: #b62e1c;
+$palette-cherry500: #c83521;
+$palette-cherry400: #d56147;
+$palette-cherry300: #e39376;
+$palette-cherry200: #eec0a5;
+$palette-cherry100: #f7e1d2;
+$palette-cherry50: #fff2ea;
+$palette-blueberry900: #084350;
+$palette-blueberry800: #06596c;
+$palette-blueberry700: #08667c;
+$palette-blueberry600: #126f87;
+$palette-blueberry500: #188097;
+$palette-blueberry400: #58aabb;
+$palette-blueberry300: #7abecc;
+$palette-blueberry200: #afdae3;
+$palette-blueberry100: #cae7ed;
+$palette-blueberry50: #e4f7f9;
+$palette-banana900: #764f00;
+$palette-banana800: #916500;
+$palette-banana700: #ab7c00;
+$palette-banana600: #c59302;
+$palette-banana500: #ddab06;
+$palette-banana400: #ebc840;
+$palette-banana300: #f1d460;
+$palette-banana200: #f5e080;
+$palette-banana100: #f9ea9f;
+$palette-banana50: #fcf2bf;
+$font-main: $palette-white;
+$backgrounds-destructive: $palette-cherry600;
+$backgrounds-main: $palette-blueberry600;

package/scss/_font-mixins.scss

@@ -0,0 +1,262 @@
+@use 'sass:map';
+@use './spacers' as spacers;
+@use './breakpoints' as breakpoints;
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 4rem;
+    line-height: 5rem;
+  }
+}
+
+@mixin title1 {
+  font-size: 2rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 3rem;
+    line-height: 3.625rem;
+  }
+}
+
+@mixin title2 {
+  font-size: 1.625rem;
+  line-height: 1.938rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 2rem;
+    line-height: 2.375rem;
+  }
+}
+
+@mixin title3 {
+  font-size: 1.375rem;
+  line-height: 1.813rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.625rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin title4 {
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.375rem;
+    line-height: 1.813rem;
+  }
+}
+
+@mixin title5 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  letter-spacing: 0.03rem;
+  font-weight: 600;
+  text-transform: uppercase;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.563rem;
+  }
+}
+
+@mixin title6 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.563rem;
+  }
+}
+
+@mixin body {
+  font-size: 1.125rem;
+  line-height: 1.688rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+  }
+}
+
+@mixin preamble {
+  font-size: 1.25rem;
+  line-height: 1.625rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 1.938rem;
+  }
+}
+
+@mixin legend {
+  font-size: 1.125rem;
+  line-height: 1.438rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.5rem;
+    line-height: 1.938rem;
+  }
+}
+
+@mixin label {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin label-subdued {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin sublabel {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin sublabel-subdued {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin compact-data {
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.4375rem;
+  }
+}
+
+@mixin table-cell {
+  font-size: 1.125rem;
+  line-height: 1.4375rem;
+}
+
+@mixin image-caption {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@mixin image-credit {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@mixin status-timestamp {
+  font-size: 1.125rem;
+  line-height: 1.25rem;
+}
+
+@mixin input-text {
+  font-size: 1.125rem;
+  line-height: 1.688rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    line-height: 1.4375rem;
+  }
+}
+
+@mixin input-text-large {
+  font-size: 1.125rem;
+  line-height: 1.563rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+@mixin text-list {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-type {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-data {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin help-text {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.575rem;
+  }
+}
+
+@mixin help-trigger-text {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}

package/scss/_font-settings.scss

@@ -0,0 +1,8 @@
+$font-size-xs: 1rem; // 16px
+$font-size-sm: 1.125rem; // 18px
+$font-size-md: 1.25rem; // 20px
+$font-size-lg: 1.5rem; // 24px
+$lineheight-size-xs: 1.5rem; // 24px
+$lineheight-size-sm: 1.75rem; // 28px
+$lineheight-size-md: 1.875rem; // 30px
+$lineheight-size-lg: 2rem; // 32px

package/scss/_fonts.scss

@@ -0,0 +1,155 @@
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Extra Light'),
+    local('SourceSansPro-ExtraLight'),
+    url('../fonts/source-sans-pro-200-extralight.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Extra Light Italic'),
+    local('SourceSansPro-ExtraLightItalic'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-200-extralight-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    url('../fonts/source-sans-pro-300-light.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Light Italic'),
+    local('SourceSansPro-LightItalic'),
+    url('../fonts/source-sans-pro-300-light-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-300-light-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Regular'),
+    local('SourceSansPro-Regular'),
+    url('../fonts/source-sans-pro-400-regular.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Italic'),
+    local('SourceSansPro-Italic'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-400-regular-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Source Sans Pro SemiBold'),
+    local('SourceSansPro-SemiBold'),
+    url('../fonts/source-sans-pro-600-semibold.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src:
+    local('Source Sans Pro SemiBold Italic'),
+    local('SourceSansPro-SemiBoldItalic'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-600-semibold-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Bold'),
+    local('SourceSansPro-Bold'),
+    url('../fonts/source-sans-pro-700-bold.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Bold Italic'),
+    local('SourceSansPro-BoldItalic'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-700-bold-italic.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Black'),
+    local('SourceSansPro-Black'),
+    url('../fonts/source-sans-pro-900-black.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black.woff2') format('woff2');
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src:
+    local('Source Sans Pro Black Italic'),
+    local('SourceSansPro-BlackItalic'),
+    url('../fonts/source-sans-pro-900-black-italic.woff') format('woff'),
+    url('../fonts/source-sans-pro-900-black-italic.woff2') format('woff2');
+}

package/scss/_grid.scss

@@ -0,0 +1,6 @@
+$enable-deprecation-messages: true;
+
+@import './bootstrap/scss/vendor/rfs';
+@import './bootstrap/scss/mixins/deprecate';
+@import './bootstrap/scss/mixins/breakpoints';
+@import './bootstrap/scss/mixins/grid';

package/scss/_icon.scss

@@ -0,0 +1,8 @@
+$icon-sizes: (
+  xxs: 24px,
+  xs: 38px,
+  sm: 48px,
+  md: 64px,
+  lg: 80px,
+  xl: 130px,
+);