Add OK accordion-item

change/@ni-ok-angular-09482ac4-a62c-47fc-be43-c52b823e870e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add OK accordion-item",
+  "packageName": "@ni/ok-angular",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-ok-components-6037eb00-1211-4817-b88c-f456f2305a49.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add OK accordion-item",
+  "packageName": "@ni/ok-components",
+  "email": "1458528+fredvisser@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/angular-workspace/example-client-app/src/app/app.module.ts

@@ -34,6 +34,7 @@ import { NimbleTableColumnMenuButtonModule } from '@ni/nimble-angular/table-colu
 import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text/viewer';
 import { NimbleRichTextEditorModule } from '@ni/nimble-angular/rich-text/editor';
 import { NimbleRichTextMentionUsersModule } from '@ni/nimble-angular/rich-text-mention/users';
+import { OkAccordionItemModule } from 'ok-angular/accordion-item/ok-accordion-item.module';
 import { OkButtonModule } from 'ok-angular/button/ok-button.module';
 import { SprightChatConversationModule } from '@ni/spright-angular/chat/conversation';
 import { SprightChatInputModule } from '@ni/spright-angular/chat/input';
@@ -120,6 +121,7 @@ import { CustomAppComponent } from './customapp/customapp.component';
         NimbleMappingEmptyModule,
         NimbleIconPencilToRectangleModule,
         NimbleIconMessagesSparkleModule,
+        OkAccordionItemModule,
         OkButtonModule,
         SprightChatConversationModule,
         SprightChatInputModule,

packages/angular-workspace/example-client-app/src/app/customapp/customapp.component.html

@@ -519,5 +519,14 @@
             <div class="container-label">Button (Ok)</div>
             <ok-button>Ok</ok-button>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Accordion Item (Ok)</div>
+            <ok-accordion-item i18n-header header="Asset details" [expanded]="true">
+                Calibration assets can expose operator-facing status, location, and ownership details.
+            </ok-accordion-item>
+            <ok-accordion-item i18n-header header="Maintenance history">
+                This section starts collapsed to show the default interaction state.
+            </ok-accordion-item>
+        </div>
     </div>
 </div>

packages/angular-workspace/ok-angular/accordion-item/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

packages/angular-workspace/ok-angular/accordion-item/ok-accordion-item.directive.ts

@@ -0,0 +1,48 @@
+import { booleanAttribute, Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import type { AccordionItem } from '@ni/ok-components/dist/esm/accordion-item';
+import { accordionItemTag } from '@ni/ok-components/dist/esm/accordion-item';
+import type { AccordionItemAppearance } from '@ni/ok-components/dist/esm/accordion-item/types';
+
+export type { AccordionItem };
+export { accordionItemTag };
+
+/**
+ * Directive to provide Angular integration for the accordion item.
+ */
+@Directive({
+    selector: 'ok-accordion-item',
+    standalone: false
+})
+export class OkAccordionItemDirective {
+    public get header(): string {
+        return this.elementRef.nativeElement.header;
+    }
+
+    @Input()
+    public set header(value: string) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'header', value);
+    }
+
+    public get expanded(): boolean {
+        return this.elementRef.nativeElement.expanded;
+    }
+
+    @Input({ transform: booleanAttribute })
+    public set expanded(value: boolean) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'expanded', value);
+    }
+
+    public get appearance(): AccordionItemAppearance {
+        return this.elementRef.nativeElement.appearance;
+    }
+
+    @Input()
+    public set appearance(value: AccordionItemAppearance) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
+    }
+
+    public constructor(
+        private readonly elementRef: ElementRef<AccordionItem>,
+        private readonly renderer: Renderer2
+    ) {}
+}

packages/angular-workspace/ok-angular/accordion-item/ok-accordion-item.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OkAccordionItemDirective } from './ok-accordion-item.directive';
+
+import '@ni/ok-components/dist/esm/accordion-item';
+
+@NgModule({
+    declarations: [OkAccordionItemDirective],
+    imports: [CommonModule],
+    exports: [OkAccordionItemDirective]
+})
+export class OkAccordionItemModule { }

packages/angular-workspace/ok-angular/accordion-item/public-api.ts

@@ -0,0 +1,2 @@
+export * from './ok-accordion-item.directive';
+export * from './ok-accordion-item.module';

packages/angular-workspace/ok-angular/accordion-item/tests/accordion-item.directive.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { OkAccordionItemModule } from '../ok-accordion-item.module';
+
+describe('Ok accordion item', () => {
+    describe('module', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [OkAccordionItemModule]
+            });
+        });
+
+        it('custom element is defined', () => {
+            expect(customElements.get('ok-accordion-item')).not.toBeUndefined();
+        });
+    });
+});

packages/ok-components/src/accordion-item/index.ts

@@ -0,0 +1,38 @@
+import { attr } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
+import { styles } from './styles';
+import { template } from './template';
+import { AccordionItemAppearance } from './types';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-accordion-item': AccordionItem;
+    }
+}
+
+/**
+ * An accordion item component that can be expanded or collapsed to
+ * show or hide its content.
+ */
+export class AccordionItem extends FoundationElement {
+    @attr
+    public header = '';
+
+    @attr({ mode: 'boolean' })
+    public expanded = false;
+
+    @attr()
+    public appearance: AccordionItemAppearance = AccordionItemAppearance.outline;
+}
+
+const okAccordionItem = AccordionItem.compose({
+    baseName: 'accordion-item',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate()
+    .withPrefix('ok')
+    .register(okAccordionItem());
+export const accordionItemTag = 'ok-accordion-item';

packages/ok-components/src/accordion-item/styles.ts

@@ -0,0 +1,118 @@
+import { css } from '@ni/fast-element';
+import {
+    bodyPlus1EmphasizedFont,
+    bodyPlus1EmphasizedFontColor,
+    borderHoverColor,
+    borderRgbPartialColor,
+    dividerWidth,
+    iconSize,
+    mediumDelay,
+    mediumPadding,
+    smallDelay,
+    standardPadding
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { appearanceBehavior } from '@ni/nimble-components/dist/esm/utilities/style/appearance';
+import { display } from '../utilities/style/display';
+import { AccordionItemAppearance } from './types';
+
+export const styles = css`
+    ${display('block')}
+
+    .accordion-item-details > .accordion-item-summary {
+        display: flex;
+        box-sizing: border-box;
+        height: 36px;
+        align-items: center;
+        margin-left: calc(-1 * ${mediumPadding});
+        border: ${dividerWidth} solid transparent;
+        list-style: none;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .accordion-item-details > .accordion-item-summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .accordion-item-details > .accordion-item-summary::marker {
+        content: "";
+    }
+
+    .accordion-item-details > .accordion-item-summary:hover {
+        border: ${dividerWidth} solid ${borderHoverColor};
+        transition: ${smallDelay} ease-in;
+    }
+
+    .accordion-item-details > .accordion-item-summary:focus-visible {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .accordion-item-icon {
+        transition: transform ${mediumDelay} ease-in;
+        margin: ${mediumPadding};
+        min-width: ${iconSize};
+    }
+
+    .accordion-item-details[open] > .accordion-item-summary > .accordion-item-icon {
+        transform: rotate(90deg);
+    }
+
+    .accordion-item-title {
+        flex: 1;
+        width: 100%;
+        position: relative;
+        font: ${bodyPlus1EmphasizedFont};
+        line-height: 20px;
+        color: ${bodyPlus1EmphasizedFontColor};
+        text-align: left;
+        display: block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        overflow-wrap: normal;
+    }
+
+    .accordion-item-content {
+        display: flex;
+        flex-direction: column;
+        gap: ${mediumPadding};
+        margin-left: calc(${iconSize} + ${mediumPadding});
+        margin-top: ${mediumPadding};
+        padding-bottom: ${standardPadding};
+    }
+`.withBehaviors(
+    appearanceBehavior(
+        AccordionItemAppearance.outline,
+        css`
+            :host {
+                border-bottom: ${dividerWidth} solid rgba(${borderRgbPartialColor}, 0.2);
+            }
+        `
+    ),
+    appearanceBehavior(
+        AccordionItemAppearance.block,
+        css`
+            :host {
+                margin-bottom: 2px;
+            }
+
+            .accordion-item-details > .accordion-item-summary {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                margin-left: 0;
+                padding-left: 0;
+                border: none;
+            }
+
+            .accordion-item-details > .accordion-item-summary:hover {
+                border: none;
+                outline: ${dividerWidth} solid ${borderHoverColor};
+                outline-offset: -1px;
+            }
+
+            .accordion-item-content {
+                margin-left: calc(${iconSize} + (2 * ${mediumPadding}));
+            }
+        `
+    )
+);

packages/ok-components/src/accordion-item/template.ts

@@ -0,0 +1,31 @@
+import { html } from '@ni/fast-element';
+import { iconArrowExpanderRightTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
+import type { AccordionItem } from '.';
+
+const arrowExpanderRightTag = iconArrowExpanderRightTag;
+
+export const template = html<AccordionItem>`
+    <details
+        class="accordion-item-details"
+        ?open="${x => x.expanded}"
+        @toggle="${(x, c) => {
+        const details = c.event.target as HTMLDetailsElement;
+        x.expanded = details.open;
+    }}"
+    >
+        <summary
+            class="accordion-item-summary"
+            aria-expanded="${x => x.expanded}"
+        >
+            <${arrowExpanderRightTag}
+                class="accordion-item-icon"
+            ></${arrowExpanderRightTag}>
+            <span class="accordion-item-title" title="${x => x.header}">
+                ${x => x.header}
+            </span>
+        </summary>
+        <div class="accordion-item-content">
+            <slot></slot>
+        </div>
+    </details>
+`;