@helsenorge/designsystem-react 9.4.3 → 10.0.0-beta.0

package/components/Toggle/styles.module.scss

@@ -4,6 +4,7 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 @import '../../scss/supernova/styles/colors';
+@import '../../scss/font-mixins';
 
 .toggle-container {
   display: flex;
@@ -21,9 +22,8 @@
   }
 
   &__label {
-    font-size: $font-size-md;
-    font-weight: 400;
-    line-height: $lineheight-size-xs;
+    @include label;
+
     color: var(--core-color-neutral-900);
     margin-left: getSpacer(xs);
 
@@ -31,8 +31,8 @@
       margin-left: getSpacer(s);
     }
 
-    &__text--semibold {
-      font-weight: 600;
+    &__text--subdued {
+      @include label-subdued;
     }
 
     &--toggle-right {

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

@@ -2,7 +2,7 @@ export type Styles = {
   'toggle-container': string;
   'toggle-container__input': string;
   'toggle-container__label': string;
-  'toggle-container__label__text--semibold': string;
+  'toggle-container__label__text--subdued': string;
   'toggle-container__label--toggle-right': string;
   'toggle-container__row': string;
   'toggle-container__row--right': string;

package/package.json

@@ -7,11 +7,11 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "9.4.3",
+  "version": "10.0.0-beta.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {
-    "framer-motion": "^11.11.8"
+    "motion": "^11.14.3"
   },
   "peerDependencies": {
     "bootstrap": "^4.6.2",

package/scss/_body.scss

@@ -1,17 +1,12 @@
 @use 'sass:map';
-@import './font-settings';
 @import './palette';
 @import './breakpoints';
+@import './font-mixins';
 
 body {
   font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
   background-color: $white;
   color: $black;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
+  @include body;
 }

package/scss/_font-mixins.scss

@@ -0,0 +1,186 @@
+@use 'sass:map';
+@import './spacers';
+@import './breakpoints';
+
+@mixin title-feature {
+  font-size: 2.375rem;
+  line-height: 2.875rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($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($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($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($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($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($grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.563rem;
+    letter-spacing: 0.3375rem;
+  }
+}
+
+@mixin title6 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($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($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($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($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($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($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin compact-data {
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @media (min-width: map.get($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($grid-breakpoints, md)) {
+    line-height: 1.4375rem;
+  }
+}
+
+@mixin input-text-large {
+  font-size: 1.125rem;
+  line-height: 1.563rem;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}

package/scss/_font-settings.scss

@@ -1,5 +1,3 @@
-// @todo Slett denne filen, fontstørrelser skal hardkodes i _title.scss (som renames til _font-mixins.scss)
-
 $font-size-xs: 1rem; // 16px
 $font-size-sm: 1.125rem; // 18px
 $font-size-md: 1.25rem; // 20px

package/scss/_input.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@import './font-settings';
 
 @mixin input-wrapper {
   width: 100%;

package/scss/typography.module.scss

@@ -3,7 +3,7 @@
 @import './breakpoints';
 @import './fonts';
 @import './palette';
-@import './title';
+@import './font-mixins';
 
 /*
 Denne filen er ment til å importeres som en css module:
@@ -40,14 +40,16 @@ import designsystemtypography from './scss/typography.scss'
   @include title5;
 }
 
-.preamble {
-  font-size: 1.375rem;
-  line-height: getSpacer(l);
-  font-weight: 600;
+.title6 {
+  @include title6;
+}
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: getSpacer(m);
-  }
+.body {
+  @include body;
+}
+
+.preamble {
+  @include preamble;
 }
 
 .legend {
@@ -55,22 +57,15 @@ import designsystemtypography from './scss/typography.scss'
 }
 
 .label {
-  font-size: $font-size-sm;
-  line-height: getSpacer(m);
+  @include label;
+}
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-sm;
-  }
+.compact-data {
+  @include compact-data;
 }
 
 .table-cell {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-md;
-  }
+  @include table-cell;
 }
 
 .strong {
@@ -92,19 +87,24 @@ import designsystemtypography from './scss/typography.scss'
   }
 }
 
-.time {
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
+.status-timestamp {
+  @include status-timestamp;
 }
 
 .image-caption {
-  font-size: $spacer;
-  line-height: getSpacer(m);
+  @include image-caption;
 }
 
 .image-credit {
-  font-size: 0.75rem;
-  line-height: $spacer;
+  @include image-credit;
+}
+
+.input-text {
+  @include input-text;
+}
+
+.input-text-large {
+  @include input-text-large;
 }
 
 .anchorlink-wrapper {

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

@@ -1,21 +1,26 @@
 export type Styles = {
   'anchorlink-wrapper': string;
+  body: string;
+  'compact-data': string;
   'focused-content': string;
   form: string;
   'image-caption': string;
   'image-credit': string;
+  'input-text': string;
+  'input-text-large': string;
   label: string;
   legend: string;
   preamble: string;
+  'status-timestamp': string;
   strong: string;
   'table-cell': string;
-  time: string;
   'title-feature': string;
   title1: string;
   title2: string;
   title3: string;
   title4: string;
   title5: string;
+  title6: string;
 };
 
 export type ClassNames = keyof Styles;

package/scss/typography.stories.tsx

@@ -49,6 +49,10 @@ export const Title5: Story = {
   render: args => <div className={designsystemtypography.title5}>{args.tekst}</div>,
 };
 
+export const Title6: Story = {
+  render: args => <div className={designsystemtypography.title6}>{args.tekst}</div>,
+};
+
 export const Preamble: Story = {
   render: args => <div className={designsystemtypography.preamble}>{args.tekst}</div>,
 };
@@ -61,6 +65,10 @@ export const Label: Story = {
   render: args => <div className={designsystemtypography.label}>{args.tekst}</div>,
 };
 
+export const CompactData: Story = {
+  render: args => <div className={designsystemtypography['compact-data']}>{args.tekst}</div>,
+};
+
 export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
@@ -77,8 +85,16 @@ export const ImageCredit: Story = {
   render: args => <div className={designsystemtypography['image-credit']}>{args.tekst}</div>,
 };
 
-export const Time: Story = {
-  render: args => <div className={designsystemtypography.time}>{args.tekst}</div>,
+export const StatusTimestamp: Story = {
+  render: args => <div className={designsystemtypography['status-timestamp']}>{args.tekst}</div>,
+};
+
+export const InputText: Story = {
+  render: args => <div className={designsystemtypography['input-text']}>{args.tekst}</div>,
+};
+
+export const InputTextLarge: Story = {
+  render: args => <div className={designsystemtypography['input-text-large']}>{args.tekst}</div>,
 };
 
 export const AnchorlinkWrapper: Story = {

package/components/EmptyState/NobodyHome.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-declare const NobodyHome: () => React.JSX.Element;
-export default NobodyHome;

package/scss/_title.scss

@@ -1,78 +0,0 @@
-@use 'sass:map';
-@import './spacers';
-@import './breakpoints';
-@import './font-settings';
-
-// @todo rename denne filen til font-mixins e.l.
-
-@mixin title-feature {
-  font-size: 2.375rem;
-  line-height: 2.875rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: 4rem;
-    line-height: 5rem;
-  }
-}
-
-@mixin title1 {
-  font-size: 2.25rem;
-  line-height: 2.75rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: 3.25rem;
-    line-height: 3.75rem;
-  }
-}
-
-@mixin title2 {
-  font-size: 1.625rem;
-  line-height: 2.125rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: 2rem;
-    line-height: 2.75rem;
-  }
-}
-
-@mixin title3 {
-  font-size: 1.375rem;
-  line-height: 1.875rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-@mixin title4 {
-  font-size: $font-size-md;
-  line-height: $lineheight-size-sm;
-  font-weight: 700;
-}
-
-@mixin title5 {
-  font-size: $spacer;
-  line-height: 1.5rem;
-  font-weight: 700;
-  text-transform: uppercase;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: $font-size-sm;
-  }
-}
-
-@mixin legend {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}