give default sizes to levels, make weight and size optional

user-interviews · Dec 7, 2023 · cb76a25 · cb76a25
1 parent 480ec92
commit cb76a25
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 26 deletions.
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -9054,16 +9054,16 @@ Array [
 `;
 
 exports[`Storyshots Components/Heading Default 1`] = `
-<h2
-  className="Heading Heading--xxl Heading--bold"
+<h1
+  className="Heading Heading--xxxl Heading--bold"
   style={
     Object {
       "textAlign": undefined,
     }
   }
 >
   The fastest way to recruit research participants
-</h2>
+</h1>
 `;
 
 exports[`Storyshots Components/Heading Levels 1`] = `
@@ -9128,16 +9128,81 @@ Array [
   >
     The fastest way to recruit research participants
   </h6>,
-  <h6
+]
+`;
+
+exports[`Storyshots Components/Heading Sizes 1`] = `
+Array [
+  <h2
+    className="Heading Heading--xxxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xxxl"
+  </h2>,
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xxl"
+  </h2>,
+  <h2
+    className="Heading Heading--xl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xl"
+  </h2>,
+  <h2
+    className="Heading Heading--lg Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="lg"
+  </h2>,
+  <h2
+    className="Heading Heading--md Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="md"
+  </h2>,
+  <h2
+    className="Heading Heading--sm Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="sm"
+  </h2>,
+  <h2
     className="Heading Heading--xs Heading--bold"
     style={
       Object {
         "textAlign": undefined,
       }
     }
   >
-    The fastest way to recruit research participants
-  </h6>,
+    This is a heading level 2 with size="xs"
+  </h2>,
 ]
 `;
 
@@ -10428,8 +10493,8 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
     value="$ 1,250.99"
   />
   <br />
-  <h2
-    className="Heading Heading--xxl Heading--bold"
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
     style={
       Object {
         "textAlign": undefined,
@@ -10438,7 +10503,7 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
   >
     Value: 
     1250.99
-  </h2>
+  </h1>
 </div>
 `;
 
@@ -10472,8 +10537,8 @@ exports[`Storyshots Components/MoneyInput Prefix 1`] = `
     value="USD$ 500"
   />
   <br />
-  <h2
-    className="Heading Heading--xxl Heading--bold"
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
     style={
       Object {
         "textAlign": undefined,
@@ -10482,7 +10547,7 @@ exports[`Storyshots Components/MoneyInput Prefix 1`] = `
   >
     Value: 
     500
-  </h2>
+  </h1>
 </div>
 `;
 
@@ -10516,8 +10581,8 @@ exports[`Storyshots Components/MoneyInput Step 1`] = `
     value="$ 200"
   />
   <br />
-  <h2
-    className="Heading Heading--xxl Heading--bold"
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
     style={
       Object {
         "textAlign": undefined,
@@ -10526,7 +10591,7 @@ exports[`Storyshots Components/MoneyInput Step 1`] = `
   >
     Value: 
     200
-  </h2>
+  </h1>
 </div>
 `;
 

diff --git a/src/Heading/Heading.stories.tsx b/src/Heading/Heading.stories.tsx
@@ -24,6 +24,7 @@ type Story = StoryObj<typeof Heading>;
 export const Default: Story = {
   args: {
     children: 'The fastest way to recruit research participants',
+    level: 1,
   },
 };
 
@@ -61,13 +62,30 @@ export const Default: Story = {
 export const Levels: Story = {
   render: () => (
     <>
-      <Heading level={1} size="xxxl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={2} size="xxl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={3} size="xl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={4} size="lg" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={5} size="md" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={6} size="sm" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={6} size="xs" weight="bold">The fastest way to recruit research participants</Heading>
+      <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>
+    </>
+  ),
+};
+
+/**
+  Headings come with default sizes based on their level, but you are able to
+  adjust its size based on visual hierarchy needs.
+*/
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <Heading level={2} size="xxxl">This is a heading level 2 with size="xxxl"</Heading>
+      <Heading level={2} size="xxl">This is a heading level 2 with size="xxl"</Heading>
+      <Heading level={2} size="xl">This is a heading level 2 with size="xl"</Heading>
+      <Heading level={2} size="lg">This is a heading level 2 with size="lg"</Heading>
+      <Heading level={2} size="md">This is a heading level 2 with size="md"</Heading>
+      <Heading level={2} size="sm">This is a heading level 2 with size="sm"</Heading>
+      <Heading level={2} size="xs">This is a heading level 2 with size="xs"</Heading>
     </>
   ),
 };

diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx
@@ -8,16 +8,27 @@ export interface HeadingProps {
   children?: ReactNode;
   className?: string;
   level: 1 | 2 | 3 | 4 | 5 | 6;
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
   textAlign?: 'left' | 'center' | 'right';
-  weight: 'regular' | 'medium' | 'bold';
+  weight?: 'regular' | 'medium' | 'bold';
 }
 
+const LevelToSizeMap = {
+  1: 'xxxl',
+  2: 'xxl',
+  3: 'xl',
+  4: 'lg',
+  5: 'md',
+  6: 'sm',
+};
+
+const getHeadingSizeClassFromLevel = (level: number) => `Heading--${LevelToSizeMap[level]}`;
+
 const Heading = ({
   children,
   className,
-  level = 2,
-  size = 'xxl',
+  level = 1,
+  size,
   textAlign,
   weight = 'bold',
   ...props
@@ -28,6 +39,7 @@ const Heading = ({
       className: classNames(
         className,
         'Heading',
+        !size && getHeadingSizeClassFromLevel(level),
         {
           [`Heading--${size}`]: !!size,
           [`Heading--${weight}`]: !!weight,