@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/scss/_body.scss

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

package/scss/_breakpoints.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@import 'spacers';
+@use 'spacers' as spacers;
 
-$grid-gutter-width: map.get($spacers, 5);
+$grid-gutter-width: map.get(spacers.$spacers, 5);
 $grid-columns: 12;
 $grid-breakpoints: (
   xxs: 0,
@@ -21,3 +21,9 @@ $container-max-widths: (
   md: 612px,
   lg: 1056px,
 );
+
+@mixin tiny-screens-media-query {
+  @media (width <= 319px), (height <= 308px) {
+    @content;
+  }
+}

package/scss/_font-mixins.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@import './spacers';
-@import './breakpoints';
+@use './spacers' as spacers;
+@use './breakpoints' as *;
 
 @mixin title-feature {
   font-size: 2.375rem;
@@ -135,6 +135,28 @@
   }
 }
 
+@mixin sublabel {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($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($grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
 @mixin compact-data {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -183,3 +205,36 @@
     line-height: 1.75rem;
   }
 }
+
+@mixin text-list {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get($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($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($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}

package/scss/_fonts.scss

@@ -1,5 +1,3 @@
-@import './font-settings';
-
 /* latin */
 @font-face {
   font-family: 'Source Sans Pro';

package/scss/_input.scss

@@ -1,5 +1,8 @@
 @use 'sass:map';
-@import './font-settings';
+@use './palette' as palette;
+@use './spacers' as spacers;
+@use './font-settings' as font-settings;
+@use './breakpoints' as *;
 
 @mixin input-wrapper {
   width: 100%;
@@ -7,11 +10,11 @@
 
 @mixin input-container {
   display: flex;
-  font-size: $font-size-sm;
+  font-size: font-settings.$font-size-sm;
   width: 100%;
-  border: 2px solid $neutral700;
+  border: 2px solid palette.$neutral700;
   outline: none;
-  background: $white;
+  background: palette.$white;
 
   svg:first-of-type {
     padding-left: 0.375rem;
@@ -22,79 +25,79 @@
   }
 
   &--large {
-    padding: getSpacer(2xs) 0;
+    padding: spacers.getSpacer(2xs) 0;
 
     svg:first-of-type {
-      padding-left: getSpacer(2xs);
+      padding-left: spacers.getSpacer(2xs);
     }
 
     svg:last-of-type {
-      padding-right: getSpacer(2xs);
+      padding-right: spacers.getSpacer(2xs);
     }
   }
 
   &:focus-within {
-    background: $white;
-    border-color: $neutral900;
-    box-shadow: 0 0 0 2px $neutral900;
+    background: palette.$white;
+    border-color: palette.$neutral900;
+    box-shadow: 0 0 0 2px palette.$neutral900;
   }
 
   &:hover {
-    background: $neutral50;
-    border-color: $neutral700;
-    box-shadow: 0 0 0 1px $neutral700;
+    background: palette.$neutral50;
+    border-color: palette.$neutral700;
+    box-shadow: 0 0 0 1px palette.$neutral700;
 
     &:focus-within {
-      border-color: $black;
-      box-shadow: 0 0 0 2px $black;
+      border-color: palette.$black;
+      box-shadow: 0 0 0 2px palette.$black;
     }
   }
 
   &--on-blueberry {
-    border-color: $blueberry500;
+    border-color: palette.$blueberry500;
 
     &:hover {
-      background: $blueberry50;
-      box-shadow: 0 0 0 1px $blueberry500;
-      border-color: $blueberry500;
+      background: palette.$blueberry50;
+      box-shadow: 0 0 0 1px palette.$blueberry500;
+      border-color: palette.$blueberry500;
     }
 
     &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0 0 0 2px $neutral900;
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
     }
   }
 
   &--on-dark {
-    border-color: $blueberry900;
+    border-color: palette.$blueberry900;
 
     &:hover {
-      background: $blueberry50;
-      border-color: $blueberry900;
-      box-shadow: 0 0 0 1px $blueberry900;
+      background: palette.$blueberry50;
+      border-color: palette.$blueberry900;
+      box-shadow: 0 0 0 1px palette.$blueberry900;
     }
 
     &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0 0 0 2px $neutral900;
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
     }
   }
 
   &--invalid {
-    border-color: $cherry600;
+    border-color: palette.$cherry600;
 
     &:hover {
-      background: $cherry100;
-      border-color: $cherry600;
-      box-shadow: 0 0 0 2px $cherry600;
+      background: palette.$cherry100;
+      border-color: palette.$cherry600;
+      box-shadow: 0 0 0 2px palette.$cherry600;
     }
 
     &:focus-within {
-      background: $white;
-      border-color: $neutral900;
-      box-shadow: 0 0 0 2px $neutral900;
+      background: palette.$white;
+      border-color: palette.$neutral900;
+      box-shadow: 0 0 0 2px palette.$neutral900;
     }
   }
 
@@ -102,32 +105,32 @@
     background: transparent;
 
     &:hover {
-      background: $neutral100;
+      background: palette.$neutral100;
     }
 
     &:focus-within {
-      background: $white;
+      background: palette.$white;
     }
   }
   &--transparent#{&}--on-blueberry {
     &:hover {
-      background: $blueberry100;
+      background: palette.$blueberry100;
     }
 
     &:focus-within {
-      background: $white;
+      background: palette.$white;
     }
   }
 
   &--disabled {
     background: transparent;
-    border-color: $neutral600;
+    border-color: palette.$neutral600;
     border-style: dashed;
-    color: $neutral700;
+    color: palette.$neutral700;
 
     &:hover {
       background: transparent;
-      border-color: $neutral600;
+      border-color: palette.$neutral600;
       box-shadow: none;
     }
   }
@@ -135,31 +138,31 @@
   &__input {
     line-height: 1.625rem;
     font-family: inherit;
-    font-size: $font-size-sm;
-    padding: 0 getSpacer(2xs);
+    font-size: font-settings.$font-size-sm;
+    padding: 0 spacers.getSpacer(2xs);
     border: none;
     outline: none;
     background-color: transparent;
     width: 100%;
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      font-size: $font-size-md;
+      font-size: font-settings.$font-size-md;
     }
 
     &::placeholder {
-      color: $neutral500;
+      color: palette.$neutral500;
     }
 
     &--disabled {
-      color: $neutral700;
+      color: palette.$neutral700;
     }
 
     &:first-child {
-      padding-left: getSpacer(s);
+      padding-left: spacers.getSpacer(s);
     }
 
     &:last-child {
-      padding-right: getSpacer(s);
+      padding-right: spacers.getSpacer(s);
     }
   }
 }

package/scss/_print.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import 'palette';
+@use 'palette' as palette;
 @import 'breakpoints';
 
 @media print {
@@ -32,7 +32,7 @@
 
   pre,
   blockquote {
-    border: 1px solid $neutral500;
+    border: 1px solid palette.$neutral500;
     page-break-inside: avoid;
   }
 

package/scss/layout.module.scss

@@ -1,4 +1,4 @@
-@import './breakpoints';
+@use './breakpoints' as *;
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -8,7 +8,7 @@ import designsystemlayout from './scss/layout.scss'
 
 .container-breakout {
   // This is a copy of how bootstrap's row class sets margins inside a container
-  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_grid.scss#L16C1-L17C30
+  // https://github.com/twbs/bootstrap/blob/e5643aaa89eb67327a5b4abe7db976f0ea276b70/scss/mixins/_scss#L16C1-L17C30
   margin-right: -$grid-gutter-width * 0.5;
   margin-left: -$grid-gutter-width * 0.5;
 }

package/scss/typography.module.scss

@@ -1,9 +1,10 @@
 @use 'sass:map';
-@import './spacers';
-@import './breakpoints';
+@use './spacers' as spacers;
+@use './palette' as palette;
+@use './font-mixins' as fonts;
+@use './font-settings' as font-settings;
+@use './breakpoints' as *;
 @import './fonts';
-@import './palette';
-@import './font-mixins';
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -12,99 +13,123 @@ import designsystemtypography from './scss/typography.scss'
 */
 
 .title-feature {
-  @include title-feature;
+  @include fonts.title-feature;
 }
 
 .focused-content {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 }
 
 .title1 {
-  @include title1;
+  @include fonts.title1;
 }
 
 .title2 {
-  @include title2;
+  @include fonts.title2;
 }
 
 .title3 {
-  @include title3;
+  @include fonts.title3;
 }
 
 .title4 {
-  @include title4;
+  @include fonts.title4;
 }
 
 .title5 {
-  @include title5;
+  @include fonts.title5;
 }
 
 .title6 {
-  @include title6;
+  @include fonts.title6;
 }
 
 .body {
-  @include body;
+  @include fonts.body;
 }
 
 .preamble {
-  @include preamble;
+  @include fonts.preamble;
 }
 
 .legend {
-  @include legend;
+  @include fonts.legend;
 }
 
 .label {
-  @include label;
+  @include fonts.label;
+}
+
+.label-subdued {
+  @include fonts.label-subdued;
+}
+
+.sublabel {
+  @include fonts.sublabel;
+}
+
+.sublabel-subdued {
+  @include fonts.sublabel-subdued;
 }
 
 .compact-data {
-  @include compact-data;
+  @include fonts.compact-data;
 }
 
 .table-cell {
-  @include table-cell;
+  @include fonts.table-cell;
 }
 
 .strong {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 }
 
 .form {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
+    font-size: font-settings.$font-size-md;
   }
 }
 
 .status-timestamp {
-  @include status-timestamp;
+  @include fonts.status-timestamp;
 }
 
 .image-caption {
-  @include image-caption;
+  @include fonts.image-caption;
 }
 
 .image-credit {
-  @include image-credit;
+  @include fonts.image-credit;
 }
 
 .input-text {
-  @include input-text;
+  @include fonts.input-text;
 }
 
 .input-text-large {
-  @include input-text-large;
+  @include fonts.input-text-large;
+}
+
+.text-list {
+  @include fonts.text-list;
+}
+
+.definition-list-type {
+  @include fonts.definition-list-type;
+}
+
+.definition-list-data {
+  @include fonts.definition-list-data;
 }
 
 .anchorlink-wrapper {
@@ -114,24 +139,24 @@ import designsystemtypography from './scss/typography.scss'
     overflow-wrap: break-word;
     word-break: break-word;
     text-align: left;
-    color: $blueberry600;
+    color: palette.$blueberry600;
     border: 0.15rem solid transparent;
     text-decoration: underline;
     text-underline-offset: 0.16rem;
-    text-decoration-color: $blueberry400;
+    text-decoration-color: palette.$blueberry400;
     text-decoration-thickness: 0.0625rem;
     padding: 0.1rem;
 
     &:hover {
       cursor: pointer;
-      color: $blueberry700;
-      background-color: $blueberry50;
-      text-decoration-color: $blueberry600;
+      color: palette.$blueberry700;
+      background-color: palette.$blueberry50;
+      text-decoration-color: palette.$blueberry600;
     }
 
     &:focus {
       outline: none;
-      border: 0.15rem solid $black;
+      border: 0.15rem solid palette.$black;
     }
 
     &[target='_blank'] {

package/scss/typography.module.scss.d.ts

@@ -2,6 +2,8 @@ export type Styles = {
   'anchorlink-wrapper': string;
   body: string;
   'compact-data': string;
+  'definition-list-data': string;
+  'definition-list-type': string;
   'focused-content': string;
   form: string;
   'image-caption': string;
@@ -9,11 +11,15 @@ export type Styles = {
   'input-text': string;
   'input-text-large': string;
   label: string;
+  'label-subdued': string;
   legend: string;
   preamble: string;
   'status-timestamp': string;
   strong: string;
+  sublabel: string;
+  'sublabel-subdued': string;
   'table-cell': string;
+  'text-list': string;
   'title-feature': string;
   title1: string;
   title2: string;

package/scss/typography.stories.tsx

@@ -65,6 +65,18 @@ export const Label: Story = {
   render: args => <div className={designsystemtypography.label}>{args.tekst}</div>,
 };
 
+export const LabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['label-subdued']}>{args.tekst}</div>,
+};
+
+export const Sublabel: Story = {
+  render: args => <div className={designsystemtypography.sublabel}>{args.tekst}</div>,
+};
+
+export const SublabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['sublabel-subdued']}>{args.tekst}</div>,
+};
+
 export const CompactData: Story = {
   render: args => <div className={designsystemtypography['compact-data']}>{args.tekst}</div>,
 };
@@ -97,6 +109,18 @@ export const InputTextLarge: Story = {
   render: args => <div className={designsystemtypography['input-text-large']}>{args.tekst}</div>,
 };
 
+export const TextList: Story = {
+  render: args => <div className={designsystemtypography['text-list']}>{args.tekst}</div>,
+};
+
+export const DefinitionListType: Story = {
+  render: args => <div className={designsystemtypography['definition-list-type']}>{args.tekst}</div>,
+};
+
+export const DefinitionListData: Story = {
+  render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
+};
+
 export const AnchorlinkWrapper: Story = {
   render: args => (
     <div className={designsystemtypography['anchorlink-wrapper']}>

package/theme/index.js

@@ -1,6 +1,6 @@
-import { screen, breakpoints } from "./grid.js";
+import { breakpoints, screen } from "./grid.js";
 import { palette } from "./palette.js";
-import { spacer, spacers } from "./spacers.js";
+import { spacers, spacer } from "./spacers.js";
 const theme = {
   spacer,
   spacers,