Merge branch 'master' into igniteui-webcomponents-1441

Author: simeonoff

src/components/avatar/themes/shared/avatar.common.scss

@@ -5,6 +5,12 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+
+    ::slotted(igc-icon) {
+        --ig-size: 3;
+
+        color: var-get($theme, 'icon-color');
+    }
 }
 
 [part='base'] {

src/components/avatar/themes/shared/avatar.indigo.scss

@@ -8,7 +8,5 @@ $theme: $indigo;
 
     ::slotted(igc-icon) {
         --ig-size: 1;
-
-        color: var-get($theme, 'icon-color');
     }
 }

stories/avatar.stories.ts

@@ -1,8 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { IgcAvatarComponent, defineComponents } from 'igniteui-webcomponents';
+import {
+  IgcAvatarComponent,
+  IgcIconComponent,
+  defineComponents,
+  registerIcon,
+} from 'igniteui-webcomponents';
+import { html } from 'lit';
 
-defineComponents(IgcAvatarComponent);
+defineComponents(IgcAvatarComponent, IgcIconComponent);
 
 // region default
 const metadata: Meta<IgcAvatarComponent> = {
@@ -57,6 +63,11 @@ interface IgcAvatarArgs {
 }
 type Story = StoryObj<IgcAvatarArgs>;
 
+registerIcon(
+  'home',
+  'https://unpkg.com/[email protected]/action/svg/production/ic_home_24px.svg'
+);
+
 // endregion
 
 export const Image: Story = {
@@ -66,6 +77,14 @@ export const Image: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: () => html`
+    <igc-avatar>
+      <igc-icon name="home"></igc-icon>
+    </igc-avatar>
+  `,
+};
+
 export const WithInitials: Story = {
   args: {
     initials: 'RK',

stories/stepper.stories.ts

@@ -4,6 +4,7 @@ import { html } from 'lit';
 import {
   IgcButtonComponent,
   IgcInputComponent,
+  type IgcStepComponent,
   IgcStepperComponent,
   defineComponents,
 } from 'igniteui-webcomponents';
@@ -122,19 +123,35 @@ const BasicTemplate = ({
   verticalAnimation,
   horizontalAnimation,
 }: IgcStepperArgs) => {
-  const next = () => {
+  document.addEventListener('DOMContentLoaded', () => {
     const stepper = document.getElementById('stepper') as IgcStepperComponent;
-    stepper.next();
-  };
 
-  const prev = () => {
+    stepper.addEventListener('igcInput', () => {
+      checkValidity();
+    });
+    stepper.addEventListener('igcChange', () => {
+      checkValidity();
+    });
+  });
+
+  function checkValidity() {
     const stepper = document.getElementById('stepper') as IgcStepperComponent;
-    stepper.prev();
-  };
+    const activeStep = stepper.steps.find(
+      (step) => step.active
+    ) as IgcStepComponent;
+    const form = activeStep!.querySelector('form') as HTMLFormElement;
+    const isFormInvalid = !form.checkValidity();
 
-  return html`
-    <span>test content top</span>
+    if (activeStep!.optional) {
+      return;
+    }
+
+    if (stepper.linear) {
+      activeStep!.invalid = isFormInvalid;
+    }
+  }
 
+  return html`
     <igc-stepper
       id="stepper"
       .orientation=${orientation}
@@ -146,31 +163,28 @@ const BasicTemplate = ({
       .verticalAnimation=${verticalAnimation}
       .horizontalAnimation=${horizontalAnimation}
     >
-      <igc-step complete>
+      <igc-step invalid>
         <span slot="title">Step1</span>
-        <span slot="subtitle">(completed)</span>
-        <igc-input
-          label="First Name"
-          id="first-name"
-          name="first-name"
-          required
-        ></igc-input>
-        <br /><br />
-        <igc-button @click=${next}>Next</igc-button>
+        <form id="form">
+          <igc-input
+            label="First Name"
+            id="first-name"
+            name="first-name"
+            required
+          ></igc-input>
+        </form>
       </igc-step>
 
-      <igc-step active>
+      <igc-step invalid>
         <span slot="title">Step 2</span>
-        <span slot="subtitle">(default)</span>
-        <igc-input
-          label="Last Name"
-          id="last-name"
-          name="last-name"
-          required
-        ></igc-input>
-        <br /><br />
-        <igc-button @click=${prev}>Prev</igc-button>
-        <igc-button @click=${next}>Next</igc-button>
+        <form id="form">
+          <igc-input
+            label="Last Name"
+            id="last-name"
+            name="last-name"
+            required
+          ></igc-input>
+        </form>
       </igc-step>
 
       <igc-step optional>
@@ -180,9 +194,6 @@ const BasicTemplate = ({
         soluta nulla asperiores, officia ullam recusandae voluptatem omnis
         perferendis vitae non magni magnam praesentium placeat nemo quas
         repudiandae. Nisi, quo ex!
-        <br /><br />
-        <igc-button @click=${prev}>Prev</igc-button>
-        <igc-button @click=${next}>Next</igc-button>
       </igc-step>
 
       <igc-step disabled>
@@ -197,11 +208,8 @@ const BasicTemplate = ({
           repudiandae. Nisi, quo ex!
         </div>
         <br />
-        <igc-button @click=${prev}>Prev</igc-button>
       </igc-step>
     </igc-stepper>
-
-    <span>test content bottom</span>
   `;
 };