chore(Stepper): added icon story

Author: amandacxz

docs/INSTALLATION.md

@@ -8,7 +8,7 @@ Install SGDS web components locally with the following command
 
 ```js
 
-npm install @govtechsg/sgds-web-component@3.19.0
+npm install @govtechsg/sgds-web-component@3.19.1
 
 ```
 
@@ -53,14 +53,14 @@ This method registers all SGDS elements up front in the Custom Elements Registry
 
 ```js
 // Load global css file
-<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.0/themes/day.css' rel='stylesheet' type='text/css' />
-<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.0/css/sgds.css' rel='stylesheet' type='text/css' />
+<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.1/themes/day.css' rel='stylesheet' type='text/css' />
+<link href='https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.1/css/sgds.css' rel='stylesheet' type='text/css' />
 
 // it is recommended to load a particular version when using cdn e.g. https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@1.0.2
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.0" async crossorigin="anonymous" integrity="sha384-YyOd0WvMkjNXe/YZvQtV3ubH7kcwNVwNELO7gxbVbs3TZpHcUz421oWhRMq0hHRH"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.1" async crossorigin="anonymous" integrity="sha384-q0ApD7UB4FXJLvsXruVOTA9jSBfelxkXUaN3f6ZHRYc0tr1xyNCNAnKT3igeVKRD"></script>
 
 //or load a single component e.g. Masthead
-<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.0/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-5OKa7RaQpYeIsx/ZOXW2ttNUa7ftAEKXiWuSgFRmlXJUaJ1Bvf3etjlCw2qqjia8"></script>
+<script src="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.19.1/components/Masthead/index.umd.min.js" async crossorigin="anonymous" integrity="sha384-5OKa7RaQpYeIsx/ZOXW2ttNUa7ftAEKXiWuSgFRmlXJUaJ1Bvf3etjlCw2qqjia8"></script>
 
 ```
 

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 = {