make size required, add descriptions for level and size

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

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