From 2bf77ff18caebc4c89cec827f58ed20368e36052 Mon Sep 17 00:00:00 2001
From: Jason Basuil <basuilj@gmail.com>
Date: Tue, 12 Dec 2023 12:25:33 -0800
Subject: [PATCH] make size required, add descriptions for level and size

---
 src/Heading/Heading.stories.tsx | 12 ++++++------
 src/Heading/Heading.tsx         | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Heading/Heading.stories.tsx b/src/Heading/Heading.stories.tsx
index 80bd34bd..e7b2765a 100644
--- a/src/Heading/Heading.stories.tsx
+++ b/src/Heading/Heading.stories.tsx
@@ -62,12 +62,12 @@ export const Default: Story = {
 export const Levels: Story = {
   render: () => (
     <>
-      <Heading level={1}>The fastest way to recruit research participants</Heading>
-      <Heading level={2}>The fastest way to recruit research participants</Heading>
-      <Heading level={3}>The fastest way to recruit research participants</Heading>
-      <Heading level={4}>The fastest way to recruit research participants</Heading>
-      <Heading level={5}>The fastest way to recruit research participants</Heading>
-      <Heading level={6}>The fastest way to recruit research participants</Heading>
+      <Heading level={1} size="xxxl">The fastest way to recruit research participants</Heading>
+      <Heading level={2} size="xxl">The fastest way to recruit research participants</Heading>
+      <Heading level={3} size="xl">The fastest way to recruit research participants</Heading>
+      <Heading level={4} size="lg">The fastest way to recruit research participants</Heading>
+      <Heading level={5} size="md">The fastest way to recruit research participants</Heading>
+      <Heading level={6} size="sm">The fastest way to recruit research participants</Heading>
     </>
   ),
 };
diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx
index 8c2e41ac..efa3e810 100644
--- a/src/Heading/Heading.tsx
+++ b/src/Heading/Heading.tsx
@@ -7,8 +7,22 @@ import './Heading.scss';
 export interface HeadingProps {
   children?: ReactNode;
   className?: string;
+  /**
+   * @type {number}
+   * @description Choose the appropriate heading level (h1 to h6) based on a
+   * page's semantic structure.
+   * Headings define the document structure, and screen readers use them for navigation.
+   * For accessibility, a page must contain at least one h1, headings should follow a
+   * logical hierarchy where each heading level represents a sublevel of the previous one,
+   * and avoid skipping levels.
+   */
   level: 1 | 2 | 3 | 4 | 5 | 6;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+  /**
+   * @type {string}
+   * @description Sizes map to the available font-sizes from the defined list of font-types.
+   * Adjust for visual hierarchy.
+   */
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
   textAlign?: 'left' | 'center' | 'right';
   weight?: 'regular' | 'medium' | 'bold';
 }