feat: Add 'medium' weight to Heading (#814)

* feat: Add 'medium' weight to Heading

* Update changelog

* Bump version

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v23.2.0
+
+-   [Feat] Add `medium` as a `weight` option for `Header`.
+
 # v23.1.0
 
 -   [Feat] Add `--reactist-font-family-monospace` with updated font family for monospace elements

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "23.1.0",
+    "version": "23.2.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

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);
 }

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'),

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

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.