feat: Add 'medium' weight to Heading

Doist · Feb 17, 2024 · 2a021a9 · 2a021a9
1 parent 3366d1e
commit 2a021a9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/src/heading/heading.module.css b/src/heading/heading.module.css
@@ -4,6 +4,10 @@
     font-family: var(--reactist-font-family);
 }
 
+.weight-medium {
+    font-weight: var(--reactist-font-weight-medium);
+}
+
 .weight-light {
     font-weight: var(--reactist-font-weight-regular);
 }

diff --git a/src/heading/heading.stories.tsx b/src/heading/heading.stories.tsx
@@ -128,7 +128,7 @@ export function HeadingPlaygroundStory(props: React.ComponentProps<typeof Headin
 HeadingPlaygroundStory.argTypes = {
     level: select(['1', '2', '3', '4', '5', '6'], '1'),
     size: selectWithNone(['largest', 'larger', 'smaller'], 'none'),
-    weight: select(['regular', 'light'], 'regular'),
+    weight: select(['regular', 'medium', 'light'], 'regular'),
     lineClamp: selectWithNone([1, 2, 3, 4, 5], 'none'),
     tone: select(['normal', 'secondary', 'danger'], 'normal'),
     align: selectWithNone(['start', 'center', 'end', 'justify'], 'none'),

diff --git a/src/heading/heading.test.tsx b/src/heading/heading.test.tsx
@@ -83,6 +83,13 @@ describe('Heading', () => {
             expect(textElement).not.toHaveClass('weight-regular')
             expect(textElement).not.toHaveClass('weight-light')
 
+            rerender(
+                <Heading level="1" data-testid="heading-element" weight="medium">
+                    Heading
+                </Heading>,
+            )
+            expect(textElement).toHaveClass('weight-medium')
+
             rerender(
                 <Heading level="1" data-testid="heading-element" weight="light">
                     Heading

diff --git a/src/heading/heading.tsx b/src/heading/heading.tsx
@@ -21,11 +21,11 @@ type HeadingProps = SupportedHeadingElementProps & {
      */
     level: HeadingLevel
     /**
-     * The weight of the heading. Used to de-emphasize the heading visually when using 'light'.
+     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.
      *
      * @default 'regular'
      */
-    weight?: 'regular' | 'light'
+    weight?: 'regular' | 'medium' | 'light'
     /**
      * Shifts the default heading visual text size up or down, depending on the original size
      * imposed by the `level`. The heading continues to be semantically at the given level.