feat(stepper): separate header panel from accordion, update icons and…

… number positions (#1583)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Success and error icons are replacing the step number upon event.

Issue Number: CDE-1211

## What is the new behavior?
Success and error icons have reserved space before step number and are not replacing it.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: GitHub <[email protected]>

projects/angular/clarity.api.md

@@ -297,10 +297,6 @@ export class ClrAccordionPanel implements OnInit, OnChanges {
     constructor(commonStrings: ClrCommonStringsService, accordionService: AccordionService, ifExpandService: IfExpandService, cdr: ChangeDetectorRef);
     // (undocumented)
     accordionDescription: QueryList<ClrAccordionDescription>;
-    // Warning: (ae-forgotten-export) The symbol "AccordionStatus" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    readonly AccordionStatus: typeof AccordionStatus;
     // (undocumented)
     collapsePanelOnAnimationDone(panel: AccordionPanelModel): void;
     // (undocumented)
@@ -317,8 +313,6 @@ export class ClrAccordionPanel implements OnInit, OnChanges {
     get id(): string;
     set id(value: string);
     // (undocumented)
-    isAccordion: boolean;
-    // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
     ngOnInit(): void;
@@ -3920,6 +3914,10 @@ export class ClrStepperModule {
 // @public (undocumented)
 export class ClrStepperPanel extends ClrAccordionPanel implements OnInit {
     constructor(platformId: any, commonStrings: ClrCommonStringsService, formGroupName: FormGroupName, ngModelGroup: NgModelGroup, stepperService: StepperService, ifExpandService: IfExpandService, cdr: ChangeDetectorRef);
+    // Warning: (ae-forgotten-export) The symbol "AccordionStatus" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    readonly AccordionStatus: typeof AccordionStatus;
     // (undocumented)
     commonStrings: ClrCommonStringsService;
     // (undocumented)
@@ -3930,13 +3928,11 @@ export class ClrStepperPanel extends ClrAccordionPanel implements OnInit {
     get id(): string;
     set id(_value: string);
     // (undocumented)
-    isAccordion: boolean;
-    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStepperPanel, "clr-stepper-panel", never, {}, {}, never, ["clr-accordion-title, clr-step-title", "clr-accordion-description, clr-step-description", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrStepperPanel, "clr-stepper-panel", never, {}, {}, never, ["clr-step-title", "clr-step-description", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrStepperPanel, [null, null, { optional: true; }, { optional: true; }, null, null, null]>;
 }

projects/angular/src/accordion/_accordion.clarity.scss

@@ -69,11 +69,6 @@
     }
   }
 
-  .clr-accordion-number {
-    padding: 0 tokens.$cds-global-space-7;
-    display: none !important;
-  }
-
   .clr-accordion-header-button {
     display: flex;
     flex-flow: row wrap;
@@ -144,7 +139,7 @@
     }
 
     &.ng-trigger {
-      padding: 0; // inner element/padding to prevent extra hight in ng animation
+      padding: 0; // inner element/padding to prevent extra height in ng animation
     }
 
     @media (min-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
@@ -165,14 +160,6 @@
     transform: rotate(90deg);
   }
 
-  .clr-accordion-error-icon,
-  .clr-accordion-complete-icon {
-    @include mixins.equilateral(tokens.$cds-global-space-9);
-    display: none;
-    padding: 0;
-    margin: 0 tokens.$cds-global-space-6;
-  }
-
   // panel states
   .clr-accordion-panel-open {
     .clr-accordion-header {
@@ -229,9 +216,6 @@
   .clr-accordion-panel-error {
     & > .clr-accordion-header {
       box-shadow: inset tokens.$cds-global-space-5 0 0 accordion-variables.$clr-accordion-border-left-color-error;
-      border-color: accordion-variables.$clr-accordion-error-color;
-      border-bottom: tokens.$cds-global-space-1 solid accordion-variables.$clr-accordion-border-left-color-error;
-      background-color: accordion-variables.$clr-accordion-active-background-color;
     }
 
     & > .clr-accordion-error-icon {

projects/angular/src/accordion/accordion-panel.html

@@ -6,28 +6,18 @@
         class="clr-accordion-header-button"
         (click)="togglePanel()"
         [id]="getAccordionHeaderId(panel.templateId)"
-        [disabled]="isAccordion && panel.disabled"
-        [attr.aria-disabled]="!isAccordion && panel.disabled"
+        [disabled]="panel.disabled"
         [attr.aria-controls]="getAccordionContentId(panel.templateId)"
         [attr.aria-expanded]="panel.open"
         [class.clr-accordion-header-has-description]="(accordionDescription.changes | async)?.length || accordionDescription.length"
         #headerButton
       >
         <span class="clr-accordion-status">
           <cds-icon shape="angle" direction="right" class="clr-accordion-angle"></cds-icon>
-          <span class="clr-accordion-number">{{panelNumber}}.</span>
-          <cds-icon status="danger" shape="exclamation-circle" class="clr-accordion-error-icon"></cds-icon>
-          <cds-icon status="success" shape="check-circle" class="clr-accordion-complete-icon"></cds-icon>
         </span>
         <ng-content select="clr-accordion-title, clr-step-title"></ng-content>
         <ng-content select="clr-accordion-description, clr-step-description"></ng-content>
       </button>
-      <div class="clr-sr-only" role="status">
-        <ng-container *ngIf="panel.status === AccordionStatus.Error"> {{ stepErrorText(panelNumber)}} </ng-container>
-        <ng-container *ngIf="panel.status === AccordionStatus.Complete">
-          {{ stepCompleteText(panelNumber)}}
-        </ng-container>
-      </div>
     </div>
     <div
       @skipInitialRender

projects/angular/src/accordion/accordion-panel.ts

@@ -26,7 +26,6 @@ import { IfExpandService } from '../utils/conditional/if-expanded.service';
 import { ClrCommonStringsService } from '../utils/i18n/common-strings.service';
 import { uniqueIdFactory } from '../utils/id-generator/id-generator.service';
 import { ClrAccordionDescription } from './accordion-description';
-import { AccordionStatus } from './enums/accordion-status.enum';
 import { AccordionPanelModel } from './models/accordion.model';
 import { AccordionService } from './providers/accordion.service';
 import { panelAnimation } from './utils/animation';
@@ -47,9 +46,6 @@ export class ClrAccordionPanel implements OnInit, OnChanges {
 
   @ContentChildren(ClrAccordionDescription) accordionDescription: QueryList<ClrAccordionDescription>;
 
-  readonly AccordionStatus = AccordionStatus;
-
-  isAccordion = true;
   panel: Observable<AccordionPanelModel>;
 
   private _id = uniqueIdFactory();

projects/angular/src/accordion/stepper/_stepper.clarity.scss

@@ -13,95 +13,94 @@
 
 @include mixins.exports('stepper.clarity') {
   .clr-stepper-forms {
-    & > .clr-accordion-panel {
-      & > .clr-accordion-panel-open,
-      & > .clr-accordion-panel-inactive,
-      & > .clr-accordion-panel-error,
-      & > .clr-accordion-panel-complete {
-        & > .clr-accordion-header > .clr-accordion-header-button {
-          align-items: center;
-          gap: tokens.$cds-global-space-12;
-          min-height: mixins.baselinePx(56);
-          padding: tokens.$cds-global-space-5 tokens.$cds-global-space-9 tokens.$cds-global-space-5
-            tokens.$cds-global-space-10;
-
-          @include mixins.generate-typography-token('BODY-14-SB-STD');
-
-          .clr-accordion-description {
-            @include mixins.generate-typography-token('BODY-14-RG-STD');
-          }
+    .clr-stepper-header > .clr-accordion-header-button {
+      align-items: center;
+      gap: tokens.$cds-global-space-9;
+      min-height: mixins.baselinePx(56);
+      padding: tokens.$cds-global-space-5 tokens.$cds-global-space-8 tokens.$cds-global-space-5
+        tokens.$cds-global-space-9;
 
-          .clr-accordion-status {
-            min-width: tokens.$cds-global-space-14;
-          }
+      > .clr-step-status {
+        min-height: tokens.$cds-global-space-9;
+        height: tokens.$cds-global-space-9;
+        min-width: tokens.$cds-global-space-12;
+        width: tokens.$cds-global-space-12;
+        display: inline-flex;
+        gap: tokens.$cds-global-space-5;
+        align-items: center;
 
-          @media (max-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
-            gap: tokens.$cds-global-space-9;
-          }
+        > .clr-step-error-icon,
+        > .clr-step-complete-icon {
+          @include mixins.equilateral(tokens.$cds-global-space-9);
+          padding: 0;
+        }
+
+        > .clr-step-error-icon {
+          color: accordion-variables.$clr-accordion-error-color;
+        }
+
+        > .clr-step-complete-icon {
+          color: accordion-variables.$clr-accordion-complete-color;
         }
       }
-    }
 
-    &
-      > .clr-accordion-panel
-      > .clr-accordion-panel-inactive
-      > .clr-accordion-header
-      > .clr-accordion-header-button
-      > .clr-accordion-status
-      > .clr-accordion-number {
-      padding: 0 tokens.$cds-global-space-7;
-      display: inline-block !important;
-    }
+      > .clr-step-title-wrapper {
+        min-width: accordion-variables.$clr-accordion-step-title-min-width;
+        max-width: calc(264 * (1rem / var(--cds-global-base)));
+        width: 100%;
+        display: inline-flex;
+        gap: tokens.$cds-global-space-3;
+        align-items: center;
 
-    &
-      > .clr-accordion-panel
-      > .clr-accordion-panel-error
-      > .clr-accordion-header
-      > .clr-accordion-header-button
-      > .clr-accordion-status
-      > .clr-accordion-error-icon {
-      display: inline-block;
-      color: accordion-variables.$clr-accordion-error-color;
-    }
+        @include mixins.generate-typography-token('BODY-14-SB-STD');
 
-    &
-      > .clr-accordion-panel
-      > .clr-accordion-panel-complete
-      > .clr-accordion-header
-      > .clr-accordion-header-button
-      > .clr-accordion-status
-      > .clr-accordion-complete-icon {
-      display: inline-block;
-      color: accordion-variables.$clr-accordion-complete-color;
-    }
+        > .clr-step-number {
+          min-width: tokens.$cds-global-space-9;
+        }
 
-    &
-      > .clr-accordion-panel
-      > .clr-accordion-panel-inactive
-      > .clr-accordion-header
-      > .clr-accordion-header-button
-      > .clr-accordion-status
-      > .clr-accordion-angle {
-      visibility: hidden;
-    }
+        > .clr-accordion-title {
+          min-width: initial;
+          max-width: initial;
+          width: initial;
+          margin-left: 0;
+        }
+      }
 
-    &
-      > .clr-accordion-panel
-      > .clr-accordion-panel-open
-      > .clr-accordion-header
-      > .clr-accordion-header-button
-      > .clr-accordion-status
-      > .clr-accordion-angle {
-      visibility: visible;
-    }
+      > .clr-accordion-description,
+      > .clr-step-description {
+        margin-left: tokens.$cds-global-space-9;
+        @include mixins.generate-typography-token('BODY-14-RG-STD');
+      }
 
-    .clr-accordion-number {
-      padding: 0 tokens.$cds-global-space-7;
-      display: inline-block;
+      @media (max-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
+        gap: tokens.$cds-global-space-3;
+
+        > .clr-step-status {
+          min-width: initial;
+          width: initial;
+        }
+
+        > .clr-step-title-wrapper {
+          width: initial;
+
+          > .clr-step-number {
+            min-width: initial;
+          }
+        }
+
+        > .clr-accordion-description,
+        > .clr-step-description {
+          margin-left: 0;
+        }
+      }
     }
 
-    .clr-accordion-description {
-      display: inline-block;
+    .clr-accordion-panel-inactive:not(.clr-accordion-panel-open) > .clr-stepper-header .clr-step-angle {
+      visibility: hidden;
+
+      @media (max-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
+        display: none;
+      }
     }
 
     .clr-step-button {

projects/angular/src/accordion/stepper/stepper-panel.html

@@ -0,0 +1,63 @@
+<ng-container *ngIf="panel | async; let panel">
+  <div [ngClass]="getPanelStateClasses(panel)">
+    <div class="clr-accordion-header clr-stepper-header">
+      <button
+        type="button"
+        class="clr-accordion-header-button"
+        (click)="togglePanel()"
+        [id]="getAccordionHeaderId(panel.templateId)"
+        [attr.aria-disabled]="panel.disabled"
+        [attr.aria-controls]="getAccordionContentId(panel.templateId)"
+        [attr.aria-expanded]="panel.open"
+        [class.clr-accordion-header-has-description]="(accordionDescription.changes | async)?.length || accordionDescription.length"
+        #headerButton
+      >
+        <span class="clr-step-status">
+          <cds-icon shape="angle" direction="right" class="clr-accordion-angle clr-step-angle"></cds-icon>
+          <cds-icon
+            status="danger"
+            *ngIf="panel.status === AccordionStatus.Error"
+            shape="exclamation-circle"
+            class="clr-step-error-icon"
+          ></cds-icon>
+          <cds-icon
+            status="success"
+            *ngIf="panel.status === AccordionStatus.Complete"
+            shape="check-circle"
+            class="clr-step-complete-icon"
+          ></cds-icon>
+        </span>
+        <span class="clr-step-title-wrapper">
+          <span class="clr-step-number">{{panelNumber}}.</span>
+          <ng-content select="clr-step-title"></ng-content>
+        </span>
+        <ng-content select="clr-step-description"></ng-content>
+      </button>
+      <div class="clr-sr-only" role="status">
+        <ng-container *ngIf="panel.status === AccordionStatus.Error"> {{ stepErrorText(panelNumber)}} </ng-container>
+        <ng-container *ngIf="panel.status === AccordionStatus.Complete">
+          {{ stepCompleteText(panelNumber)}}
+        </ng-container>
+      </div>
+    </div>
+    <div
+      @skipInitialRender
+      role="region"
+      class="clr-accordion-content-region"
+      [id]="getAccordionContentId(panel.templateId)"
+      [attr.aria-hidden]="!panel.open"
+      [attr.aria-labelledby]="getAccordionHeaderId(panel.templateId)"
+    >
+      <div
+        *ngIf="panel.open"
+        @toggle
+        (@toggle.done)="collapsePanelOnAnimationDone(panel)"
+        class="clr-accordion-content"
+      >
+        <div class="clr-accordion-inner-content">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-container>

projects/angular/src/accordion/stepper/stepper-panel.ts

@@ -32,16 +32,15 @@ import { StepperService } from './providers/stepper.service';
 
 @Component({
   selector: 'clr-stepper-panel',
-  templateUrl: '../accordion-panel.html',
-  host: { '[class.clr-accordion-panel]': 'true' },
+  templateUrl: 'stepper-panel.html',
+  host: { '[class.clr-stepper-panel]': 'true' },
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: stepAnimation,
   providers: [IfExpandService],
 })
 export class ClrStepperPanel extends ClrAccordionPanel implements OnInit {
-  override isAccordion = false;
-
   @ViewChild('headerButton') headerButton: ElementRef<HTMLButtonElement>;
+  readonly AccordionStatus = AccordionStatus;
 
   private subscriptions: Subscription[] = [];