rest of typography

digdir · Oct 9, 2024 · 4024f38 · 4024f38
1 parent 1ff8461
commit 4024f38
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 53 deletions.
diff --git a/packages/css/base/typography.css b/packages/css/base/typography.css
@@ -126,61 +126,21 @@
 
 /** Validation message */
 
-.ds-validation-message--xs {
-  font-weight: var(--ds-error_message-xs-font-weight);
-  line-height: var(--ds-error_message-xs-line-height);
-  font-size: var(--ds-error_message-xs-font-size);
-  letter-spacing: var(--ds-error_message-xs-letter-spacing);
-
-  &[data-error] {
-    color: var(--ds-color-danger-text-subtle);
-  }
-}
+.ds-validation-message {
+  margin: 0;
 
-.ds-validation-message--sm {
-  font-weight: var(--ds-error_message-sm-font-weight);
-  line-height: var(--ds-error_message-sm-line-height);
-  font-size: var(--ds-error_message-sm-font-size);
-  letter-spacing: var(--ds-error_message-sm-letter-spacing);
+  /* color comes from the composed classes */
+  @composes ds-validation-message--md from '../utilities.css';
 
-  &[data-error] {
-    color: var(--ds-color-danger-text-subtle);
+  &[data-size='xs'] {
+    @composes ds-validation-message--xs from '../utilities.css';
   }
-}
-
-.ds-validation-message--md {
-  font-size: var(--ds-error_message-md-font-size);
-  font-weight: var(--ds-error_message-md-font-weight);
-  letter-spacing: var(--ds-error_message-md-letter-spacing);
-  line-height: var(--ds-error_message-md-line-height);
-  margin: 0;
 
-  &[data-error] {
-    color: var(--ds-color-danger-text-subtle);
+  &[data-size='sm'] {
+    @composes ds-validation-message--sm from '../utilities.css';
   }
-}
-
-.ds-validation-message--lg {
-  font-weight: var(--ds-error_message-lg-font-weight);
-  line-height: var(--ds-error_message-lg-line-height);
-  font-size: var(--ds-error_message-lg-font-size);
-  letter-spacing: var(--ds-error_message-lg-letter-spacing);
 
-  &[data-error] {
-    color: var(--ds-color-danger-text-subtle);
+  &[data-size='lg'] {
+    @composes ds-validation-message--lg from '../utilities.css';
   }
 }
-
-/** Line height
- ** used for long, short Paragraph */
-.ds-line-height--sm {
-  line-height: var(--ds-line-height-sm);
-}
-
-.ds-line-height--md {
-  line-height: var(--ds-line-height-md);
-}
-
-.ds-line-height--lg {
-  line-height: var(--ds-line-height-lg);
-}
diff --git a/packages/css/index.css b/packages/css/index.css
@@ -4,8 +4,8 @@
 
 /** Import order defines ordinal specificity for layers */
 @import url('./base/ds-reset.css') layer(ds.reset);
-@import url('./base/typography.css') layer(ds.base.typography);
 @import url('./utilities.css') layer(ds.base.utilities);
+@import url('./base/typography.css') layer(ds.base.typography);
 @import url('./button.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./popover.css') layer(ds.components);

diff --git a/packages/css/utilities.css b/packages/css/utilities.css
@@ -226,3 +226,48 @@
   font-size: var(--ds-label-lg-font-size);
   letter-spacing: var(--ds-label-lg-letter-spacing);
 }
+
+.ds-validation-message--xs {
+  font-weight: var(--ds-error_message-xs-font-weight);
+  line-height: var(--ds-error_message-xs-line-height);
+  font-size: var(--ds-error_message-xs-font-size);
+  letter-spacing: var(--ds-error_message-xs-letter-spacing);
+
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
+}
+
+.ds-validation-message--sm {
+  font-weight: var(--ds-error_message-sm-font-weight);
+  line-height: var(--ds-error_message-sm-line-height);
+  font-size: var(--ds-error_message-sm-font-size);
+  letter-spacing: var(--ds-error_message-sm-letter-spacing);
+
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
+}
+
+.ds-validation-message--md {
+  font-size: var(--ds-error_message-md-font-size);
+  font-weight: var(--ds-error_message-md-font-weight);
+  letter-spacing: var(--ds-error_message-md-letter-spacing);
+  line-height: var(--ds-error_message-md-line-height);
+  margin: 0;
+
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
+}
+
+.ds-validation-message--lg {
+  font-weight: var(--ds-error_message-lg-font-weight);
+  line-height: var(--ds-error_message-lg-line-height);
+  font-size: var(--ds-error_message-lg-font-size);
+  letter-spacing: var(--ds-error_message-lg-letter-spacing);
+
+  &[data-error] {
+    color: var(--ds-color-danger-text-subtle);
+  }
+}
diff --git a/packages/react/src/components/Label/Label.stories.tsx b/packages/react/src/components/Label/Label.stories.tsx
@@ -15,5 +15,6 @@ export const Preview: Story = {
   args: {
     children: 'Vennligst skriv inn fødselsnummer. 11 tegn',
     size: 'md',
+    weight: 'medium',
   },
 };
diff --git a/packages/react/src/components/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Paragraph/Paragraph.stories.tsx
@@ -16,5 +16,6 @@ export const Preview: Story = {
     children:
       'Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har.',
     size: 'md',
+    variant: 'default',
   },
 };
diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -30,9 +30,10 @@ export const ValidationMessage = forwardRef<
 
   return (
     <Component
-      className={cl(`ds-validation-message--${size}`, className)}
-      data-error={error || undefined}
       ref={ref}
+      className={cl('ds-validation-message', className)}
+      data-error={error || undefined}
+      data-size={size}
       {...rest}
     />
   );

diff --git a/packages/react/stories/Typography.mdx b/packages/react/stories/Typography.mdx
@@ -69,3 +69,7 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne
 ## Eksempel
 
 <Canvas of={typographyStories.EksempelTekst} />
+
+Vi endrer `color` og `background-color` for deg når du setter `data-ds-color-mode`.
+
+<Canvas of={typographyStories.EksempelTekstDark} />
diff --git a/packages/react/stories/Typography.stories.tsx b/packages/react/stories/Typography.stories.tsx
@@ -85,3 +85,81 @@ export const EksempelTekst: StoryFn = () => (
     </Paragraph>
   </>
 );
+
+export const EksempelTekstDark: StoryFn = () => (
+  <div data-ds-color-mode='dark'>
+    <Heading
+      level={1}
+      size='xl'
+      style={{ marginBottom: 'var(--ds-spacing-2)' }}
+    >
+      Samordnet registermelding (H1)
+    </Heading>
+
+    <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }} variant='long'>
+      Her kan du registrere nye virksomheter, som for eksempel
+      enkeltpersonforetak, foreninger, aksjeselskap, ansvarlige selskap,
+      samvirkeforetak og stiftelser. De aller fleste organisasjonsformene kan
+      bruke denne tjenesten.
+    </Paragraph>
+
+    <Heading
+      level={2}
+      size='lg'
+      style={{ marginBottom: 'var(--ds-spacing-2)' }}
+    >
+      Når skal du bruke skjemaet? (H2)
+    </Heading>
+
+    <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      Denne tjenesten kan du bruke for å melde opplysninger til
+      Enhetsregisteret, Foretaksregisteret, Frivillighetsregisteret, NAV
+      Aa-registeret, Virksomhets- og foretaksregisteret hos SSB,
+      Stiftelsesregisteret og Skattedirektoratets register over upersonlige
+      skattytere.
+    </Paragraph>
+
+    <Heading
+      level={3}
+      size='md'
+      style={{ marginBottom: 'var(--ds-spacing-2)' }}
+    >
+      Signering (H3)
+    </Heading>
+
+    <Paragraph variant='short' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      Når du skal signere meldingen vil du motta en signeringsoppgave i
+      meldingsboksen din i Altinn. Meldingen blir ikke sendt til behandling før
+      alle har signert.
+    </Paragraph>
+
+    <Heading
+      level={4}
+      size='sm'
+      style={{ marginBottom: 'var(--ds-spacing-2)' }}
+    >
+      Krav om rolle for signering (H4)
+    </Heading>
+
+    <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      For å signere på vegne av en virksomhet, trenger du Altinn-rollen Signerer
+      av Samordnet registermelding. Du kan se hvilke roller du har for en aktør
+      på menypunktet Profil, Skjema og tjenester du har rettighet til. Om du
+      ikke har disse rollene, må du få noen som har rollene til å delegere dem
+      til deg.
+    </Paragraph>
+
+    <Heading
+      level={5}
+      size='xs'
+      style={{ marginBottom: 'var(--ds-spacing-2)' }}
+    >
+      Personvern (H5)
+    </Heading>
+
+    <Paragraph variant='short' style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+      Personvernerklæringen gir informasjon om hvilke personopplysninger vi
+      behandler, hvordan disse blir behandlet og hvilke rettigheter du har.
+    </Paragraph>
+  </div>
+);