@sebgroup/green-angular 6.0.4 → 6.1.0-rc.20250730100346703

package/src/lib/accordion/accordion-list-item.component.html

@@ -0,0 +1,41 @@
+<ng-container data-testid="accordion-list-item-root">
+  <div role="heading" [attr.aria-level]="labelElementLevel" [attr.id]="id">
+    <button
+      data-testid="accordion-list-item-expander-button"
+      [attr.id]="id + '_header'"
+      (click)="toggleExpanded()"
+      tabindex="0"
+      [attr.aria-expanded]="this.isExpanded"
+      [attr.aria-controls]="id + '_section'"
+    >
+      <span data-testid="accordion-list-item-header">{{ listItemHeader }}</span>
+      <span data-testid="accordion-list-item-subheader">{{
+        listItemSubHeader
+      }}</span>
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z"
+          fill="#333333"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    role="region"
+    [hidden]="!this.isExpanded"
+    [ngStyle]="{ height: this.contentHeight }"
+    [id]="id + '_section'"
+    [attr.aria-labelledby]="id + '_header'"
+    data-testid="accordion-list-item-content"
+  >
+    <div>
+      <ng-content></ng-content>
+    </div>
+  </div>
+</ng-container>

package/src/lib/accordion/accordion-list-item.component.spec.ts

@@ -0,0 +1,97 @@
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  waitFor,
+} from '@testing-library/angular'
+
+import { NggAccordionListItemComponent } from './accordion-list-item.component'
+
+describe(NggAccordionListItemComponent.name, () => {
+  let component: RenderResult<NggAccordionListItemComponent>
+  let listItem: NggAccordionListItemComponent
+
+  beforeEach(async () => {
+    component = await render(NggAccordionListItemComponent, {
+      declarations: [NggAccordionListItemComponent],
+      providers: [],
+    })
+    listItem = component.fixture.componentInstance
+  })
+
+  it('should create', () => {
+    expect(listItem).toBeTruthy()
+  })
+
+  it('should toggle expanded when expand button clicked', async () => {
+    const expanderInput = await component.findByTestId(
+      'accordion-list-item-expander-button',
+    )
+    fireEvent.click(expanderInput)
+
+    await waitFor(() => {
+      expect(listItem.isExpanded).toBe(true)
+    })
+
+    expect(listItem.contentHeight).toEqual('auto')
+
+    fireEvent.click(expanderInput)
+
+    await waitFor(() => {
+      expect(listItem.isExpanded).toBe(false)
+    })
+
+    expect(listItem.contentHeight).toEqual('0px')
+  })
+
+  it('should fire expanded change event when button clicked', async () => {
+    const expanderInput = await component.findByTestId(
+      'accordion-list-item-expander-button',
+    )
+    let eventEmitted = false
+
+    listItem.expandedChange.subscribe(() => {
+      eventEmitted = true
+    })
+
+    fireEvent.click(expanderInput)
+
+    await waitFor(() => {
+      expect(eventEmitted).toEqual(true)
+    })
+  })
+
+  it('should expand', () => {
+    listItem.expand()
+
+    expect(listItem.isExpanded).toEqual(true)
+    expect(listItem.contentHeight).toEqual('auto')
+  })
+
+  it('should shrink', () => {
+    listItem.shrink()
+
+    expect(listItem.isExpanded).toEqual(false)
+    expect(listItem.contentHeight).toEqual('0px')
+  })
+
+  it('should display item header', async () => {
+    listItem.listItemHeader = 'Foo'
+    const listItemHeaderElement = await component.findByTestId(
+      'accordion-list-item-header',
+    )
+
+    component.detectChanges()
+    expect(listItemHeaderElement.textContent).toEqual('Foo')
+  })
+
+  it('should display item subheader', async () => {
+    listItem.listItemSubHeader = 'Bar'
+    const listItemSubHeaderElement = await component.findByTestId(
+      'accordion-list-item-subheader',
+    )
+
+    component.detectChanges()
+    expect(listItemSubHeaderElement.textContent).toEqual('Bar')
+  })
+})

package/src/lib/accordion/accordion-list-item.component.ts

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+
+import { randomId } from '@sebgroup/extract'
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'div[ngg-accordion-list-item]',
+  templateUrl: './accordion-list-item.component.html',
+})
+export class NggAccordionListItemComponent {
+  @Input() public id: string = randomId()
+  @Input() public labelElementLevel = 2
+  @Input() public listItemHeader = ''
+  @Input() public listItemSubHeader = ''
+  @Output() public expandedChange: EventEmitter<NggAccordionListItemComponent> =
+    new EventEmitter<NggAccordionListItemComponent>()
+
+  public contentHeight = '0px'
+  public isExpanded = false
+
+  public shrink(): void {
+    this.isExpanded = false
+    this.contentHeight = '0px'
+  }
+
+  public expand(): void {
+    this.isExpanded = true
+    this.contentHeight = 'auto'
+  }
+
+  public toggleExpanded(): void {
+    this.isExpanded = !this.isExpanded
+    if (this.isExpanded) {
+      this.contentHeight = 'auto'
+    } else {
+      this.contentHeight = '0px'
+    }
+
+    this.expandedChange.emit(this)
+  }
+}

package/src/lib/accordion/accordion.component.html

@@ -0,0 +1,3 @@
+<div class="accordion" data-testid="accordion-root">
+  <ng-content></ng-content>
+</div>

package/src/lib/accordion/accordion.component.spec.ts

@@ -0,0 +1,172 @@
+import { Component } from '@angular/core'
+import { By } from '@angular/platform-browser'
+import { render, RenderResult, waitFor } from '@testing-library/angular'
+import { Subject } from 'rxjs'
+
+import { NggAccordionListItemComponent } from './accordion-list-item.component'
+import { NggAccordionComponent } from './accordion.component'
+
+describe(NggAccordionComponent.name, () => {
+  let fakeComponent: RenderResult<NggFakeAccordionComponent>
+  let component: NggAccordionComponent
+
+  beforeEach(async () => {
+    fakeComponent = await render(NggFakeAccordionComponent, {
+      declarations: [
+        NggFakeAccordionComponent,
+        NggAccordionListItemComponent,
+        NggAccordionComponent,
+      ],
+      providers: [],
+    })
+
+    fakeComponent.detectChanges()
+    component = fakeComponent.fixture.debugElement.children[0].componentInstance
+  })
+
+  it('should create', () => {
+    const rootElement = component
+    expect(rootElement).toBeDefined()
+  })
+
+  it('should call expand all when closeOthers is false', async () => {
+    const accordionListItems = fakeComponent.fixture.debugElement.queryAll(
+      By.directive(NggAccordionListItemComponent),
+    )
+    const listItem1 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '1',
+    )?.componentInstance as NggAccordionListItemComponent
+    const listItem2 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '2',
+    )?.componentInstance as NggAccordionListItemComponent
+
+    // closeOthers property defaults to false by component so we do not set it here.
+    const expandAllSubject: Subject<void> = new Subject<void>()
+    component.expandAll = expandAllSubject.asObservable()
+
+    expandAllSubject.next()
+
+    await waitFor(() => {
+      expect(listItem1.isExpanded).toEqual(true)
+    })
+    expect(listItem2.isExpanded).toEqual(true)
+  })
+
+  it('should not call expand all when closeOthers is true', async () => {
+    const accordionListItems = fakeComponent.fixture.debugElement.queryAll(
+      By.directive(NggAccordionListItemComponent),
+    )
+    const listItem1 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '1',
+    )?.componentInstance as NggAccordionListItemComponent
+    const listItem2 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '2',
+    )?.componentInstance as NggAccordionListItemComponent
+
+    component.closeOthers = true
+    const expandAllSubject: Subject<void> = new Subject<void>()
+    component.expandAll = expandAllSubject.asObservable()
+
+    expandAllSubject.next()
+
+    await waitFor(() => {
+      expect(listItem1.isExpanded).toEqual(false)
+    })
+    expect(listItem2.isExpanded).toEqual(false)
+  })
+
+  it('should shrink other children when child is expanded if closeOthers is true', async () => {
+    const accordionListItems = fakeComponent.fixture.debugElement.queryAll(
+      By.directive(NggAccordionListItemComponent),
+    )
+    const listItem1 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '1',
+    )?.componentInstance as NggAccordionListItemComponent
+    const listItem2 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '2',
+    )?.componentInstance as NggAccordionListItemComponent
+
+    component.closeOthers = true
+    fakeComponent.detectChanges()
+
+    //both items should be closed initially
+    expect(listItem1.isExpanded).toEqual(false)
+    expect(listItem2.isExpanded).toEqual(false)
+
+    // expand first item
+    listItem1.toggleExpanded()
+
+    // first Item expanded, second item remains closed
+    expect(listItem1.isExpanded).toEqual(true)
+    expect(listItem2.isExpanded).toEqual(false)
+
+    // expand second item
+    listItem2.toggleExpanded()
+
+    // first item should close, since accordion closeOthers is set to true.
+    await waitFor(() => {
+      expect(listItem1.isExpanded).toEqual(false)
+    })
+    expect(listItem2.isExpanded).toEqual(true)
+  })
+
+  it('should not shrink other children when child is expanded if closeOthers is false', async () => {
+    const accordionListItems = fakeComponent.fixture.debugElement.queryAll(
+      By.directive(NggAccordionListItemComponent),
+    )
+    const listItem1 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '1',
+    )?.componentInstance as NggAccordionListItemComponent
+    const listItem2 = accordionListItems.find(
+      (i) =>
+        (i.componentInstance as NggAccordionListItemComponent)
+          .listItemHeader === '2',
+    )?.componentInstance as NggAccordionListItemComponent
+
+    component.closeOthers = false
+    fakeComponent.detectChanges()
+
+    //both items should be closed initially
+    expect(listItem1.isExpanded).toEqual(false)
+    expect(listItem2.isExpanded).toEqual(false)
+
+    // expand first item
+    listItem1.toggleExpanded()
+
+    // first Item expanded, second item remains closed
+    expect(listItem1.isExpanded).toEqual(true)
+    expect(listItem2.isExpanded).toEqual(false)
+
+    // expand second item
+    listItem2.toggleExpanded()
+
+    // first item should remain expanded, since accordion closeOthers is set to false.
+    expect(listItem1.isExpanded).toEqual(true)
+    expect(listItem2.isExpanded).toEqual(true)
+  })
+})
+
+@Component({
+  selector: 'ngg-fake-accordion',
+  template: `
+    <ngg-accordion>
+      <div ngg-accordion-list-item listItemHeader="1"></div>
+      <div ngg-accordion-list-item listItemHeader="2"></div>
+    </ngg-accordion>
+  `,
+})
+class NggFakeAccordionComponent {}

package/src/lib/accordion/accordion.component.ts

@@ -0,0 +1,78 @@
+import {
+  AfterContentChecked,
+  Component,
+  ContentChildren,
+  Input,
+  OnDestroy,
+  QueryList,
+} from '@angular/core'
+import { Observable, Subscription } from 'rxjs'
+
+import { NggAccordionListItemComponent } from './accordion-list-item.component'
+
+@Component({
+  selector: 'ngg-accordion',
+  templateUrl: './accordion.component.html',
+})
+export class NggAccordionComponent implements AfterContentChecked, OnDestroy {
+  @ContentChildren(NggAccordionListItemComponent) private items:
+    | QueryList<NggAccordionListItemComponent>
+    | undefined
+  private _expandAll: Observable<void> | undefined
+  private expandAllSubscription: Subscription | undefined
+  @Input() public closeOthers = false
+  @Input()
+  public get expandAll(): Observable<void> | undefined {
+    return this._expandAll
+  }
+  public set expandAll(value: Observable<void> | undefined) {
+    if (value === this._expandAll) return
+    if (this._expandAll) {
+      this.expandAllSubscription?.unsubscribe()
+    }
+
+    this._expandAll = value
+    this.expandAllSubscription = this._expandAll?.subscribe(() => {
+      if (this.closeOthers === false) {
+        const itemArray = this.items ? Array.from(this.items) : undefined
+        if (itemArray) {
+          for (const i of itemArray) {
+            i.expand()
+          }
+        }
+      }
+    })
+  }
+
+  public ngAfterContentChecked(): void {
+    if (this.closeOthers) {
+      const itemArray = this.items ? Array.from(this.items) : undefined
+      if (itemArray) {
+        for (const i of itemArray) {
+          i.expandedChange.subscribe((child) => this.onChildExpanded(child))
+        }
+      }
+    }
+  }
+
+  public ngOnDestroy(): void {
+    if (this.closeOthers) {
+      const itemArray = this.items ? Array.from(this.items) : undefined
+      if (itemArray) {
+        for (const i of itemArray) {
+          i.expandedChange.unsubscribe()
+        }
+      }
+    }
+
+    this.expandAllSubscription?.unsubscribe()
+  }
+
+  private onChildExpanded(childIdentity: NggAccordionListItemComponent) {
+    if (this.closeOthers && childIdentity.isExpanded && this.items) {
+      this.items.forEach((item) => {
+        if (item !== childIdentity) item.shrink()
+      })
+    }
+  }
+}

package/src/lib/accordion/accordion.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+
+import { NggAccordionListItemComponent } from './accordion-list-item.component'
+import { NggAccordionComponent } from './accordion.component'
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [NggAccordionListItemComponent, NggAccordionComponent],
+  declarations: [NggAccordionListItemComponent, NggAccordionComponent],
+})
+export class NggAccordionModule {}

package/src/lib/accordion/accordion.stories.ts

@@ -0,0 +1,108 @@
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular'
+
+import { NggAccordionComponent } from './accordion.component'
+import { NggAccordionModule } from './accordion.module'
+
+export default {
+  title: 'Components/Accordion',
+  component: NggAccordionComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NggAccordionModule],
+    }),
+  ],
+  parameters: {
+    componentIds: ['component-accordion'],
+  },
+} as Meta<NggAccordionComponent>
+
+const Template: StoryFn<NggAccordionComponent> = () => {
+  return {
+    template: `
+        <ngg-accordion [closeOthers]=false>
+            <div ngg-accordion-list-item listItemHeader="First accordion heading" listItemSubHeader="First accordion sublabel">
+                <p>This is the content of the first section</p>
+            </div>
+            <div ngg-accordion-list-item listItemHeader="Second accordion heading" listItemSubHeader="Second accordion sublabel">
+                <p>This is the content of the second section</p>
+            </div>
+            <div ngg-accordion-list-item labelElementLevel="3" listItemHeader="Third accordion heading - aria-level 3" listItemSubHeader="Third accordion sublabel">
+              <p>This is the content of the second section</p>
+            </div>
+        </ngg-accordion>
+        `,
+  }
+}
+
+const NoSubHeadersTemplate: StoryFn<NggAccordionComponent> = () => {
+  return {
+    template: `
+        <ngg-accordion [closeOthers]=false>
+            <div ngg-accordion-list-item listItemHeader="First accordion heading">
+                <p>This is the content of the first section</p>
+            </div>
+            <div ngg-accordion-list-item listItemHeader="Second accordion heading">
+                <p>This is the content of the second section</p>
+            </div>
+            <div ngg-accordion-list-item listItemHeader="Third accordion heading">
+              <p>This is the content of the second section</p>
+            </div>
+        </ngg-accordion>
+        `,
+  }
+}
+
+const CheckBoxTemplate: StoryFn<NggAccordionComponent> = () => {
+  return {
+    template: `
+      <ngg-accordion [closeOthers]=true>
+          <div ngg-accordion-list-item listItemHeader="First accordion accordion" listItemSubHeader="First accordion with just one option">
+            <div>
+              <label class="form-control">
+                <input type="checkbox" />
+                <span>Option one.</span>
+                <i></i>
+              </label>
+            </div>
+          </div>
+          <div ngg-accordion-list-item listItemHeader="Second accordion accordion" listItemSubHeader="Second accordion with three options">
+              <div>
+                <label class="form-control">
+                  <input type="checkbox" />
+                  <span>Option one.</span>
+                  <i></i>
+                </label>
+                <label class="form-control">
+                  <input type="checkbox" />
+                  <span>Option two.</span>
+                  <i></i>
+                </label>
+                <label class="form-control">
+                  <input type="checkbox" />
+                  <span>Option three.</span>
+                  <i></i>
+                  </label>
+              </div>
+          </div>
+          <div ngg-accordion-list-item listItemHeader="Third accordion accordion" listItemSubHeader="Third accordion with two options">
+            <div>
+              <label class="form-control">
+                <input type="checkbox" />
+                <span>Option one.</span>
+                <i></i>
+              </label>
+            <label class="form-control">
+              <input type="checkbox" />
+              <span>Option two.</span>
+              <i></i>
+            </label>
+          </div>
+          </div>
+      </ngg-accordion>
+      `,
+  }
+}
+
+export const Simple = Template.bind({})
+export const Nosubheaders = NoSubHeadersTemplate.bind({})
+export const Closeothers = CheckBoxTemplate.bind({})