feat(Paragraph): add shorthand sizes (#1996)

digdir · May 16, 2024 · 72a7824 · 72a7824
1 parent 878b8bb
commit 72a7824
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/packages/css/paragraph.css b/packages/css/paragraph.css
@@ -10,73 +10,73 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-paragraph--large {
+  .fds-paragraph--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-6);
 
     font: var(--fds-typography-paragraph-large);
     font-family: inherit;
   }
 
-  .fds-paragraph--large.fds-paragraph--short {
+  .fds-paragraph--lg.fds-paragraph--short {
     font: var(--fds-typography-paragraph-short-large);
     font-family: inherit;
   }
 
-  .fds-paragraph--large.fds-paragraph--long {
+  .fds-paragraph--lg.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-large);
   }
 
-  .fds-paragraph--medium {
+  .fds-paragraph--md {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-paragraph-medium);
     font-family: inherit;
   }
 
-  .fds-paragraph--medium.fds-paragraph--short {
+  .fds-paragraph--md.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-paragraph-short-medium);
     font-family: inherit;
   }
 
-  .fds-paragraph--medium.fds-paragraph--long {
+  .fds-paragraph--md.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-medium);
   }
 
-  .fds-paragraph--small {
+  .fds-paragraph--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-paragraph-small);
     font-family: inherit;
   }
 
-  .fds-paragraph--small.fds-paragraph--short {
+  .fds-paragraph--sm.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-paragraph-short-small);
     font-family: inherit;
   }
 
-  .fds-paragraph--small.fds-paragraph--long {
+  .fds-paragraph--sm.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-small);
   }
 
-  .fds-paragraph--xsmall {
+  .fds-paragraph--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-paragraph-xsmall);
     font-family: inherit;
   }
 
-  .fds-paragraph--xsmall.fds-paragraph--short {
+  .fds-paragraph--xs.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-paragraph-short-xsmall);
     font-family: inherit;
   }
 
-  .fds-paragraph--xsmall.fds-paragraph--long {
+  .fds-paragraph--xs.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-xsmall);
   }
 }
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx
@@ -16,6 +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.',
     spacing: false,
-    size: 'medium',
+    size: 'md',
   },
 };
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -3,9 +3,19 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
+import { getSize } from '../../../utilities/getSize';
+
+type OldParagraphSizes = 'xsmall' | 'small' | 'medium' | 'large';
+
 export type ParagraphProps = {
-  /** Changes text sizing */
-  size?: 'xsmall' | 'small' | 'medium' | 'large';
+  /**
+   * Changes text sizing
+   *
+   * @default `md`
+   *
+   * @note `xsmall`, `small`, `medium`, `large` is deprecated
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | OldParagraphSizes;
   /** Adds margin-bottom */
   spacing?: boolean;
   /** Adjusts styling for paragraph length */
@@ -19,8 +29,9 @@ export type ParagraphProps = {
 
 /** Use `Paragraph` to display text with paragraph text styles. */
 export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
-  ({ className, size = 'medium', spacing, asChild, variant, ...rest }, ref) => {
+  ({ className, spacing, asChild, variant, ...rest }, ref) => {
     const Component = asChild ? Slot : 'p';
+    const size = getSize(rest.size || 'md');
 
     return (
       <Component