feat: implement the plymorphic lesson

Author: code-mattclaffey

src/course/01-introduction/01-Welcome.mdx

@@ -48,12 +48,13 @@ Each lesson is broken down in an exercise file and a final file. The exercise fi
 
 #### 🥈 Silver
 
-- [Compound components pattern](?path=/docs/lessons-🥈-sliver-compound-components-pattern-01-lesson--docs)
-- [Controlled component pattern](?path=/docs/lessons-🥈-sliver-controlled-components-pattern-01-lesson--docs)
-- [Render props pattern](?path=/docs/lessons-🥈-sliver-render-props-pattern-01-lesson--docs)
-- [The Provider pattern](?path=/docs/lessons-🥈-sliver-provider-pattern-01-lesson--docs)
-- [The State Reducer pattern](?path=/docs/lessons-🥈-sliver-state-reducer-pattern-01-lesson--docs)
-- [Portals pattern](?path=/docs/lessons-🥈-sliver-portals-01-lesson--docs)
+- [Compound components pattern](?path=/docs/lessons-🥈-Silver-compound-components-pattern-01-lesson--docs)
+- [Controlled component pattern](?path=/docs/lessons-🥈-Silver-controlled-components-pattern-01-lesson--docs)
+- [Render props pattern](?path=/docs/lessons-🥈-Silver-render-props-pattern-01-lesson--docs)
+- [The Provider pattern](?path=/docs/lessons-🥈-Silver-provider-pattern-01-lesson--docs)
+- [The State Reducer pattern](?path=/docs/lessons-🥈-Silver-state-reducer-pattern-01-lesson--docs)
+- [Portals pattern](?path=/docs/lessons-🥈-Silver-portals-01-lesson--docs)
+- [Polymorphic components pattern](?path=/docs/lessons-🥈-silver-polymorphic-components-01-lesson--docs)
 
 #### 🥇 Gold
 

src/course/02- lessons/02-Silver/Compound/exercise/exercise.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Sliver/Compound Components Pattern/02-Exercise',
+  title: 'Lessons/🥈 Silver/Compound Components Pattern/02-Exercise',
   component: Exercise
 };
 

src/course/02- lessons/02-Silver/Compound/final/final.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Sliver/Compound Components Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/Compound Components Pattern/03-Final',
   component: Final
 };
 

src/course/02- lessons/02-Silver/Compound/lesson.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Sliver/Compound Components Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/Compound Components Pattern/01-Lesson" />
 
 # Compound Components Pattern
 

src/course/02- lessons/02-Silver/Controlled/exercise/exercise.stories.tsx

@@ -4,7 +4,7 @@ import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
   title:
-    'Lessons/🥈 Sliver/Controlled Components Pattern/02-Exercise',
+    'Lessons/🥈 Silver/Controlled Components Pattern/02-Exercise',
   component: Exercise
 };
 

src/course/02- lessons/02-Silver/Controlled/final/final.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Sliver/Controlled Components Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/Controlled Components Pattern/03-Final',
   component: Final
 };
 

src/course/02- lessons/02-Silver/Controlled/lesson.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Sliver/Controlled Components Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/Controlled Components Pattern/01-Lesson" />
 
 # Controlled Components Pattern
 

src/course/02- lessons/02-Silver/PolymorphicComponents/exercise/exercise.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Exercise } from './exercise';
+
+const meta: Meta<typeof Exercise> = {
+  title: 'Lessons/🥈 Silver/Polymorphic Components/02-Exercise',
+  component: Exercise
+};
+
+export default meta;
+type Story = StoryObj<typeof Exercise>;
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Default: Story = {
+  play: async () => {},
+  args: {}
+};

src/course/02- lessons/02-Silver/PolymorphicComponents/exercise/exercise.tsx

@@ -0,0 +1,102 @@
+import { HTMLAttributes } from 'react';
+
+/**
+ * Exercise: Refactor the Heading component to correctly use the polymorphic pattern.
+ *
+ * 🤔 Observations of this file
+ * In the current component you can see that the as prop is a string so if a developer in a team uses the wrong element they would just get the h2 element.
+ * Font sizes are clearly defined to the element so there is no flexibility in sizes which can lead to developers pleasing designers but... breaking accessibility or vice versa where designs do not look the same as what was provided.
+ *
+ * We need to tackle this in stages...
+ *
+ * Stage one - Refactoring the component to use Polymorphic style so we remove the switch statement.
+ * Stage two - decouple the font size to the element
+ * Stage three - allow for developers to have a size medium breakpoint for special designs.
+ *
+ */
+
+// 🧑🏻‍💻 1.a - Create a type called allowedHTMLElements
+
+// 🧑🏻‍💻 2.a - Create a type called FontSizes and it's a union of 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
+interface IHeading extends HTMLAttributes<HTMLHeadingElement> {
+  // 🧑🏻‍💻 1.b - Update the type of string to be the type you defined as part of 1.a
+  as?: string;
+  // 🧑🏻‍💻 2.b - Create a new prop called size?: FontSizes;
+  // 🧑🏻‍💻 3.a - Create a new prop called sizeMd?: FontSizes;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const Heading = ({
+  // 🧑🏻‍💻 1.c - add : Element = 'h2' what this will do is redefine the prop to be a capital variable which can be used as a React Component.
+  as = 'h2',
+  // 🧑🏻‍💻 2.c - Create a new prop called size
+  // 🧑🏻‍💻 3.b - Create a new prop called sizeMd
+  children,
+  ...rest
+}: IHeading) => {
+  // 🧑🏻‍💻 1.d - Create a variable called elementFontSize which uses useMemo to return a string from an object key mapping. For example: useMemo(() => ({ h1: 'text-3xl' }[Element]), [Element]);
+  // 🧑🏻‍💻 2.d - In the useMemo add the size as a dependency and then check if size exists. If it does, return `text-${size}` if not, return what was there previously. Move onto 3.a.
+
+  // 🧑🏻‍💻 3.c - create another useMemo for largeFontSizes where we find an array of md:text-(sm-3xl) and we need to "find" which one in that array "includes" sizeMd props value.
+
+  // 🧪 3.d Head down to the storybook Exercise Component and add a few more variants in.
+
+  // 🧑🏻‍💻 1.e return the Element with the className={classNames('mb-3 font-semibold', elementFontSize)} don't forget the ...rest
+  // 💣 1.f remove the old code below. Move onto step 2.a.
+  if (as)
+    switch (as) {
+      case 'h1':
+        return (
+          <h1 {...rest} className="text-3xl mb-3 font-semibold">
+            {children}
+          </h1>
+        );
+      case 'h3':
+        return (
+          <h3 {...rest} className="text-xl mb-3 font-semibold">
+            {children}
+          </h3>
+        );
+      case 'h4':
+        return (
+          <h4 {...rest} className="text-lg mb-3 font-semibold">
+            {children}
+          </h4>
+        );
+      case 'h5':
+        return (
+          <h5 {...rest} className="text-md mb-3 font-semibold">
+            {children}
+          </h5>
+        );
+      case 'h6':
+        return (
+          <h6 {...rest} className="text-sm mb-3 font-semibold">
+            {children}
+          </h6>
+        );
+      default:
+        return (
+          <h2 {...rest} className="text-2xl mb-3 font-semibold">
+            {children}
+          </h2>
+        );
+    }
+};
+
+export const Exercise = () => (
+  <article>
+    <Heading as="h1">Heading One</Heading>
+    <Heading as="h2">Heading Two</Heading>
+    <Heading as="h3">Heading Three</Heading>
+    <Heading as="h4">Heading Four</Heading>
+    <Heading as="h5">Heading Five</Heading>
+    <Heading as="h6">Heading Six</Heading>
+    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and size sm */}
+
+    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and size sm and sizeMd is 3xl */}
+
+    {/* 3.e 👨🏻‍💻 Implement a heading as h2 and sizeMd is 3xl */}
+  </article>
+);

src/course/02- lessons/02-Silver/PolymorphicComponents/final/final.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Final } from './final';
+
+const meta: Meta<typeof Final> = {
+  title: 'Lessons/🥈 Silver/Polymorphic Components/03-Final',
+  component: Final
+};
+
+export default meta;
+type Story = StoryObj<typeof Final>;
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const Default: Story = {
+  play: async () => {},
+  args: {}
+};