chore(Stepper): added icon story

Author: amandacxz

stories/component-templates/Stepper/additional.mdx

@@ -24,6 +24,14 @@ export interface SgdsStepProperties {
   <Story of={StepperStories.StepComponentClickable} />
 </Canvas>
 
+### Custom Icon
+
+Use the `iconName` prop on `<sgds-step>` to replace the default step number with an icon from the SGDS icon set.
+
+<Canvas of={StepperStories.CustomIcon}>
+  <Story of={StepperStories.CustomIcon} />
+</Canvas>
+
 ### Step states (active, completed, disabled)
 
 <Canvas of={StepperStories.StepStates}>

stories/component-templates/Stepper/additional.stories.js

@@ -147,6 +147,28 @@ export const SlottedClickable = {
   tags: ["!dev"]
 };
 
+const CustomIconTemplate = () => html`
+  <sgds-stepper activeStep="1">
+    <sgds-step stepHeader="Personal Details" iconName="user-circle">
+      <div>Provide your personal information.</div>
+    </sgds-step>
+    <sgds-step stepHeader="Address" iconName="geo-alt">
+      <div>Enter your address and contact details.</div>
+    </sgds-step>
+    <sgds-step stepHeader="Review" iconName="check-circle-fill">
+      <div>Review all details before submitting.</div>
+    </sgds-step>
+  </sgds-stepper>
+`;
+
+export const CustomIcon = {
+  render: CustomIconTemplate.bind({}),
+  name: "Custom Icon",
+  args: {},
+  parameters: {},
+  tags: ["!dev"]
+};
+
 const MockStepperTemplate = () => html`<mock-stepper></mock-stepper>`;
 
 export const StepperExample = {