feat(Heading): add shorthand sizes (#1997)

digdir · May 16, 2024 · 265a3c7 · 265a3c7
1 parent 72a7824
commit 265a3c7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 29 deletions.
diff --git a/packages/css/heading.css b/packages/css/heading.css
@@ -10,56 +10,56 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-heading--3xlarge {
+  .fds-heading--3xl {
     --fdsc-bottom-spacing: var(--fds-spacing-8);
 
     font: var(--fds-typography-heading-3xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--2xlarge {
+  .fds-heading--2xl {
     --fdsc-bottom-spacing: var(--fds-spacing-7);
 
     font: var(--fds-typography-heading-2xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--xlarge {
+  .fds-heading--xl {
     --fdsc-bottom-spacing: var(--fds-spacing-6);
 
     font: var(--fds-typography-heading-xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--large {
+  .fds-heading--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-heading-large);
     font-family: inherit;
   }
 
-  .fds-heading--medium {
+  .fds-heading--md {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-heading-medium);
     font-family: inherit;
   }
 
-  .fds-heading--small {
+  .fds-heading--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-heading-small);
     font-family: inherit;
   }
 
-  .fds-heading--xsmall {
+  .fds-heading--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-2);
 
     font: var(--fds-typography-heading-xsmall);
     font-family: inherit;
   }
 
-  .fds-heading--xxsmall {
+  .fds-heading--2xs {
     --fdsc-bottom-spacing: var(--fds-spacing-1);
 
     font: var(--fds-typography-heading-xxsmall);

diff --git a/packages/react/src/components/Typography/Heading/Heading.stories.tsx b/packages/react/src/components/Typography/Heading/Heading.stories.tsx
@@ -15,6 +15,6 @@ export const Preview: Story = {
   args: {
     children: 'Tittel tekst',
     spacing: false,
-    size: 'xlarge',
+    size: 'xl',
   },
 };
diff --git a/packages/react/src/components/Typography/Heading/Heading.tsx b/packages/react/src/components/Typography/Heading/Heading.tsx
@@ -3,21 +3,36 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
+import { getSize } from '../../../utilities/getSize';
+
+type OldHeadingSizes =
+  | 'xxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | '2xlarge'
+  | '3xlarge';
+
 export type HeadingProps = {
   /** Heading level. This will translate into any h1-6 level unless `as` is defined */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Changes text sizing
-   * @default 'xlarge'
+   * @default 'xl'
+   *
+   * @note `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`, `3xlarge` is deprecated
    */
   size?:
-    | 'xxsmall'
-    | 'xsmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'xlarge'
-    | '2xlarge'
-    | '3xlarge';
+    | '2xs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | OldHeadingSizes;
   /** Adds margin-bottom */
   spacing?: boolean;
   /**
@@ -29,18 +44,9 @@ export type HeadingProps = {
 
 /** Use `Heading` to render h1-6 elements with heading text styles.  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
-    {
-      level = 1,
-      size = 'xlarge',
-      spacing = false,
-      className,
-      asChild,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ level = 1, spacing = false, className, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : (`h${level ?? 1}` as ElementType);
+    const size = getSize(rest.size || 'xl');
 
     return (
       <Component