feat(design): clean up accordion component and update docs (#2800)

- The `initiallyActive` property has been deprecated in favor of `initiallyExpanded`.
- `DaffAccordionItemContentDirective` has been deprecated. It's not necessary to have this directive.

apps/design-land/src/app/accordion/accordion.component.html

@@ -1,7 +1,18 @@
 <h1 daffArticleTitle>Accordion</h1>
+<p daffArticleLead>An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.</p>
 
-<h3>Types</h3>
-<p><code>daff-accordion-item</code> - An accordion that typically holds content.</p>
+<h2>Overview</h2>
+<p>Accordions are made up of <code>&lt;daff-accordion-item&gt;</code>s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.</p>
 
-<h3>Content Accordion Item</h3>
+<h2>Supported Content Types</h2>
+<p>An accordion item can include a <code>[daffAccordionItemTitle]</code>, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.</p>
+
+<p>By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.</p>
+
+<h3>Setting an item to be expanded by default</h3>
+<p>An item content can be visibile on render by setting the <code>initiallyExpanded</code> property to <code>true</code> on <code>&lt;daff-accordion-item&gt;</code>.</p>
+
+<h2>Usage</h2>
+
+<h3>Basic Accordion</h3>
 <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>

apps/design-land/src/app/accordion/accordion.component.ts

@@ -3,6 +3,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'design-land-accordion',
   templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
 })
 export class DesignLandAccordionComponent {}

libs/design/accordion/README.md

@@ -1,21 +1,18 @@
-# Accordion Component
+# Accordion
+An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
 
-The accordion component is a useful component when you're trying to display chunks of content in a compact fashion.
+## Overview
+Accordions are made up of `<daff-accordion-item>`s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
 
-The accordion consists of a global `<daff-accordion>` parent with children `<daff-accordion-item>`s.
+## Supported Content Types
+An accordion item can include a `[daffAccordionItemTitle]`, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.
+
+By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.
+
+### Setting an item to be expanded by default 
+An item content can be visibile on render by setting the `initiallyExpanded` property to `true` on `daff-accordion-item`.
 
 ## Usage
 
-```
-<daff-accordion>
-    <daff-accordion-item initiallyActive="true">
-        <h3 daffAccordionItemTitle>Details</h3>
-        <div daffAccordionItemContent>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-            lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-            et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-            <a>Learn More.</a>
-        </div>
-    </daff-accordion-item>
-</daff-accordion>
-```
+### Basic Accordion
+<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>

libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html

@@ -1,29 +1,23 @@
 <daff-accordion>
-	<daff-accordion-item initiallyActive="true">
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+	<daff-accordion-item [initiallyExpanded]="true">
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 	<daff-accordion-item>
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 	<daff-accordion-item>
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 </daff-accordion>

libs/design/accordion/src/accordion-theme.scss

@@ -7,6 +7,16 @@
 	$base: core.daff-map-deep-get($theme, 'core.base');
 
 	.daff-accordion-item {
-		border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);
+
+		&:last-child {
+			border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&__header {
+			&:after {
+				border-color: currentColor;
+			}
+		}
 	}
 }

libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts

@@ -3,6 +3,9 @@ import {
   HostBinding,
 } from '@angular/core';
 
+/**
+ * @deprecated in v1.0.0
+ */
 @Directive({
   selector: '[daffAccordionItemContent]',
 })

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html

@@ -1,12 +1,11 @@
-<div class="daff-accordion-item__header" (click)="toggleActive()">
+<button type="button" class="daff-accordion-item__header"
+  (click)="toggleActive()"
+  [attr.aria-expanded]="_open === true"
+  [attr.aria-controls]="id">
   <ng-content select="[daffAccordionItemTitle]"></ng-content>
-  <span [hidden]="_open" daffSuffix>
-    <fa-icon [icon]="faChevronDown"></fa-icon>
-  </span>
-  <span [hidden]="!_open" daffSuffix>
-    <fa-icon [icon]="faChevronUp"></fa-icon>
-  </span>
-</div>
-<div [@openAccordion]="_animationState">
-  <ng-content></ng-content>
+</button>
+<div [@openAccordion]="_animationState" [id]="id">
+  <div class="daff-accordion-item__content">
+    <ng-content></ng-content>
+  </div>
 </div>

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss

@@ -1,40 +1,65 @@
-@use '../../../../scss/typography' as t;
 @use '../../../../scss/interactions';
 @use '../../../../scss/layout';
 
 .daff-accordion-item {
+	$root: &;
 	display: block;
-	padding: 15px 0;
-	width: 100%;
-
-	@include layout.breakpoint(tablet) {
-		padding: 30px 0;
-	}
 
 	&__header {
 		@include interactions.clickable;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		width: 100%;
+		gap: 8px;
+		background: none;
+		border: none;
+		inline-size: 100%;
+		margin: 0;
+		padding: 16px;
+		position: relative;
 
-		.daff-suffix {
-			margin: 0 10px;
+		&::after {
+      content: '';
+      position: absolute;
+      top: 48%;
+      right: 2px;
+      display: inline-block;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      width: 8px;
+      height: 8px;
+      transform: translateY(-50%) rotate(45deg);
+      transition: transform 150ms;
+    }
+	}
+
+	&.open {
+		#{$root}__header {
+			&:after {
+				top: 56%;
+				transform: translateY(-50%) rotate(225deg);
+			}
 		}
 	}
 
 	&__title {
-		@include t.embolden;
-		@include t.uppercase;
 		font-size: 1rem;
+		font-weight: 500;
+		inline-size: 100%;
 		margin: 0;
+		padding: 0 32px 0 0;
+		text-align: start;
 	}
 
 	&__content {
-		padding-top: 15px;
+		padding: 0 16px 16px;
+
+		> p {
+			margin: 0 0 16px;
 
-		@include layout.breakpoint(tablet) {
-			padding-top: 30px;
+			&:last-child {
+				margin: 0;
+			}
 		}
 	}
 }

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts

@@ -15,13 +15,13 @@ import { DaffAccordionItemComponent } from './accordion-item.component';
 
 
 @Component({ template: `
-<daff-accordion-item [initiallyActive]="initiallyActiveValue">
+<daff-accordion-item [initiallyExpanded]="initiallyExpandedValue">
   <h3 daffAccordionItemTitle>Size and Fit</h3>
   <div daffAccordionItemContent>no content</div>
 </daff-accordion-item>
 ` })
 class WrapperComponent {
-  initiallyActiveValue: boolean;
+  initiallyExpandedValue: boolean;
 }
 
 describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
@@ -66,26 +66,26 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
     expect(daffAccordionItem._animationState).toEqual('void');
   });
 
-  it('should be able to accept an initiallyActive input', () => {
-    wrapper.initiallyActiveValue = false;
+  it('should be able to accept an initiallyExpanded input', () => {
+    wrapper.initiallyExpandedValue = false;
 
     fixture.detectChanges();
 
-    expect(daffAccordionItem.initiallyActive).toEqual(false);
+    expect(daffAccordionItem.initiallyExpanded).toEqual(false);
 
-    wrapper.initiallyActiveValue = true;
+    wrapper.initiallyExpandedValue = true;
 
     fixture.detectChanges();
 
-    expect(daffAccordionItem.initiallyActive).toEqual(true);
+    expect(daffAccordionItem.initiallyExpanded).toEqual(true);
   });
 
   describe('ngOnInit', () => {
 
-    describe('when initiallyActive is true', () => {
+    describe('when initiallyExpanded is true', () => {
 
       beforeEach(() => {
-        wrapper.initiallyActiveValue = true;
+        wrapper.initiallyExpandedValue = true;
         fixture.detectChanges();
       });
 
@@ -95,10 +95,10 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
       });
     });
 
-    describe('when initiallyActive is not set', () => {
+    describe('when initiallyExpanded is not set', () => {
 
       beforeEach(() => {
-        wrapper.initiallyActiveValue = undefined;
+        wrapper.initiallyExpandedValue = undefined;
         fixture.detectChanges();
       });
 

libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts

@@ -14,6 +14,8 @@ import {
 import { daffAccordionAnimations } from '../animation/accordion-animation';
 import { getAnimationState } from '../animation/accordion-animation-state';
 
+let daffAccordionItemId = 0;
+
 @Component({
   selector: 'daff-accordion-item',
   templateUrl: './accordion-item.component.html',
@@ -39,7 +41,20 @@ export class DaffAccordionItemComponent implements OnInit {
    */
   @HostBinding('class.daff-accordion-item') class = true;
 
+  @HostBinding('class.open') get openClass() {
+    return this._open;
+  }
+
+  _daffAccordionItemId = 'daff-accordion-item' + '-' + ++daffAccordionItemId;
+
+  @Input() id: string = this._daffAccordionItemId;
+
+  /** @deprecated in v1.0.0 in favor of `initiallyExpanded` */
   @Input() initiallyActive: boolean;
+
+  /** Whether or not the item is initiallyExpanded by default. */
+  @Input() initiallyExpanded = false;
+
   /**
    * @docs-private
    */
@@ -54,6 +69,7 @@ export class DaffAccordionItemComponent implements OnInit {
    */
   ngOnInit() {
     this._open = this.initiallyActive ? this.initiallyActive : this._open;
+    this._open = this.initiallyExpanded ? this.initiallyExpanded : this._open;
     this._animationState = getAnimationState(this._open);
   }
 

libs/design/accordion/src/accordion/accordion/accordion.component.ts

@@ -18,8 +18,12 @@ const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
 
 @Component({
   selector: 'daff-accordion',
-  templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
+  template: '<ng-content></ng-content>',
+  styles: [`
+    :host {
+      display: block;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })