feat(accordion): add icon to the accordion heading

fix(accordion): address code review comments

fix(accordion): improve solution

fix(accordion): fix punctuation

projects/canopy-test-app/src/app/app.component.html

@@ -166,6 +166,14 @@
                   Test primary dark button
                 </button>
               </lg-accordion-item>
+              <lg-accordion-item>
+                <lg-accordion-panel-heading><lg-icon name="notes"></lg-icon>Accordion item with icon</lg-accordion-panel-heading>
+                <p>
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                  aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+                  voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                </p>
+              </lg-accordion-item>
             </lg-accordion>
 
             <lg-separator></lg-separator>
@@ -660,7 +668,7 @@ <h3>Carousel item 3</h3>
                 <lg-progress-header>
                   Thinking long term
                 </lg-progress-header>
-              </lg-progress-indicator>  
+              </lg-progress-indicator>
             </div>
             <lg-separator></lg-separator>
 

projects/canopy-test-app/src/app/app.module.ts

@@ -0,0 +1,132 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  LgAccordionModule,
+  LgAlertModule,
+  lgBrandIconCalendar,
+  LgBrandIconModule,
+  LgBrandIconRegistry,
+  LgBreadcrumbModule,
+  LgButtonModule,
+  LgCardModule,
+  LgCarouselModule,
+  LgCheckboxGroupModule,
+  LgDataPointModule,
+  LgDateFieldModule,
+  LgDetailsModule,
+  LgFilterContainerModule,
+  LgFooterModule,
+  LgGridModule,
+  LgHeaderModule,
+  LgHeadingModule,
+  LgHeroModule,
+  LgHintModule,
+  lgIconAdd,
+  lgIconArrowDown,
+  lgIconClose,
+  lgIconFilter,
+  LgIconModule,
+  LgIconRegistry,
+  lgIconRepeat,
+  lgIconSearch,
+  lgIconSecureMessaging,
+  lgIconCheckmark,
+  LgInputModule,
+  LgLinkMenuModule,
+  LgListWithIconsModule,
+  LgMarginModule,
+  LgPaddingModule,
+  LgPageModule,
+  LgPaginationModule,
+  LgPrimaryMessageModule,
+  LgPromoCardModule,
+  LgQuickActionModule,
+  LgRadioModule,
+  LgSelectModule,
+  LgSeparatorModule,
+  LgSideNavModule,
+  LgSortCodeModule,
+  LgSpinnerModule,
+  LgTabsModule,
+  LgToggleModule,
+  LgProgressBarComponent,
+  LgProgressIndicatorComponent,
+  LgProgressHeaderComponent,
+  lgIconNotes,
+} from 'canopy';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { StoryContentComponent } from './story-content.component';
+
+@NgModule({
+  declarations: [ AppComponent, StoryContentComponent ],
+  imports: [
+    AppRoutingModule,
+    ReactiveFormsModule,
+    BrowserModule,
+    LgAccordionModule,
+    LgAlertModule,
+    LgBrandIconModule,
+    LgBreadcrumbModule,
+    LgButtonModule,
+    LgCardModule,
+    LgCarouselModule,
+    LgCheckboxGroupModule,
+    LgDataPointModule,
+    LgDateFieldModule,
+    LgDetailsModule,
+    LgFilterContainerModule,
+    LgFooterModule,
+    LgGridModule,
+    LgHeaderModule,
+    LgHeadingModule,
+    LgHeroModule,
+    LgHintModule,
+    LgIconModule,
+    LgInputModule,
+    LgListWithIconsModule,
+    LgMarginModule,
+    LgPaddingModule,
+    LgPageModule,
+    LgPaginationModule,
+    LgPaddingModule,
+    LgPrimaryMessageModule,
+    LgPromoCardModule,
+    LgQuickActionModule,
+    LgRadioModule,
+    LgSelectModule,
+    LgSeparatorModule,
+    LgSideNavModule,
+    LgSortCodeModule,
+    LgSpinnerModule,
+    LgTabsModule,
+    LgToggleModule,
+    LgLinkMenuModule,
+    LgProgressBarComponent,
+    LgProgressHeaderComponent,
+    LgProgressIndicatorComponent,
+  ],
+  bootstrap: [ AppComponent ],
+})
+export class AppModule {
+  constructor(
+    private iconRegistry: LgIconRegistry,
+    private brandIconRegistry: LgBrandIconRegistry,
+  ) {
+    this.iconRegistry.registerIcons([
+      lgIconAdd,
+      lgIconArrowDown,
+      lgIconClose,
+      lgIconSearch,
+      lgIconRepeat,
+      lgIconSecureMessaging,
+      lgIconFilter,
+      lgIconCheckmark,
+      lgIconNotes,
+    ]);
+
+    this.brandIconRegistry.registerBrandIcon([ lgBrandIconCalendar ]);
+  }
+}

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.html

@@ -6,9 +6,9 @@
     [class.lg-accordion__heading-toggle--active]="_isActive"
     [attr.aria-expanded]="_isActive"
     [attr.aria-controls]="_panelId"
-    (click)="toggle()"
-  >
+    (click)="toggle()">
     <ng-content></ng-content>
-    <lg-icon class="lg-accordion__heading-icon" name="chevron-down"></lg-icon>
+    <lg-icon class="lg-accordion__heading-icon lg-accordion__heading-icon--animated" name="chevron-down">
+    </lg-icon>
   </button>
 </lg-heading>

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.scss

@@ -34,16 +34,33 @@
   }
 
   .lg-accordion__heading-icon {
-    transition: transform var(--animation-duration) var(--animation-fn);
-    position: absolute;
-    left: 0;
-    top: calc(50% - var(--icon-width) / 2);
     margin-left: var(--space-sm);
     margin-right: var(--space-sm);
+    width: var(--space-md);
+    height: var(--space-md);
     pointer-events: none;
+
+    &--animated {
+      transition: transform var(--animation-duration) var(--animation-fn);
+    }
   }
 
-  &--active .lg-accordion__heading-icon {
+  &--active .lg-accordion__heading-icon--animated {
     transform: rotateX(180deg);
   }
+
+  lg-icon {
+    position: absolute;
+    left: 0;
+    top: calc(50% - var(--space-md) / 2);
+
+    &:first-child {
+      @extend .lg-accordion__heading-icon;
+    }
+
+    & ~ lg-icon {
+      right: 0;
+      left: unset;
+    }
+  }
 }

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.spec.ts

@@ -2,12 +2,26 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MockComponents } from 'ng-mocks';
 import { spy, verify } from '@typestrong/ts-mockito';
+import { Component } from '@angular/core';
 
 import { LgHeadingComponent } from '../../heading';
-import { LgIconComponent } from '../../icon';
+import { LgIconComponent, lgIconIdea, LgIconRegistry } from '../../icon';
 
 import { LgAccordionPanelHeadingComponent } from './accordion-panel-heading.component';
 
+@Component({
+  template: `
+    <lg-accordion-panel-heading>
+      <lg-icon name="idea"></lg-icon>Panel heading
+    </lg-accordion-panel-heading>
+  `,
+})
+class LgAccordionPanelHeadingWithDecorativeIconComponent {
+  constructor(private iconRegistry: LgIconRegistry) {
+    this.iconRegistry.registerIcons([ lgIconIdea ]);
+  }
+}
+
 describe('LgAccordionPanelHeadingComponent', () => {
   let component: LgAccordionPanelHeadingComponent;
   let fixture: ComponentFixture<LgAccordionPanelHeadingComponent>;
@@ -17,6 +31,7 @@ describe('LgAccordionPanelHeadingComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         LgAccordionPanelHeadingComponent,
+        LgAccordionPanelHeadingWithDecorativeIconComponent,
         MockComponents(LgHeadingComponent, LgIconComponent),
       ],
     }).compileComponents();
@@ -126,4 +141,33 @@ describe('LgAccordionPanelHeadingComponent', () => {
       expect().nothing();
     });
   });
+
+  describe('accordion panel heading with decorative icon', () => {
+    let fixtureAccordionPanelHeadingWithIcon: ComponentFixture<LgAccordionPanelHeadingWithDecorativeIconComponent>;
+
+    beforeEach(() => {
+      fixtureAccordionPanelHeadingWithIcon = TestBed.createComponent(
+        LgAccordionPanelHeadingWithDecorativeIconComponent,
+      );
+
+      fixtureAccordionPanelHeadingWithIcon.detectChanges();
+    });
+
+    it('should render an icon when an lg-icon is passed via content projection', () => {
+      const icons = fixtureAccordionPanelHeadingWithIcon.debugElement.queryAll(
+        By.css('lg-icon'),
+      );
+
+      expect(icons[0].attributes.name).toBe('idea');
+    });
+
+    it('should still render the chevron icon', () => {
+      const icons = fixtureAccordionPanelHeadingWithIcon.debugElement.queryAll(
+        By.css('lg-icon'),
+      );
+
+      expect(icons.length).toBe(2);
+      expect(icons[1].attributes.name).toBe('chevron-down');
+    });
+  });
 });

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.ts

@@ -40,6 +40,7 @@ export class LgAccordionPanelHeadingComponent implements AfterViewChecked {
   _toggleId = `lg-accordion-panel-heading-${this._id}`;
   _panelId = `lg-accordion-panel-${this._id}`;
   _isActive = false;
+  _hasDecorativeIcon = false;
 
   constructor(
     private cdr: ChangeDetectorRef,