alfresco-ng2-components/docs/core/components/about.component.md

Title, Added, Status, Last reviewed

Title	Added	Status	Last reviewed
About Component	v3.5.0	Active	2025-07-23

About Component

A flexible presentational component that displays information in collapsible accordion panels. The About Component is ideal for organizing application information, settings, or any content that benefits from a collapsible interface structure.

Overview

The About Component creates an accordion-style interface using Angular Material's expansion panels. Each panel can contain any content and can be conditionally displayed. This component is commonly used for:

• Application information and version details
• Feature lists and documentation
• Settings panels
• Help and support sections
• Plugin or extension information

Prerequisites

Before using the About Component, ensure you have imported the necessary modules:

import { AboutComponent } from '@alfresco/adf-core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-example',
    imports: [CommonModule, AboutComponent],
    template: `
        <!-- Your template here -->
    `
})
export class ExampleComponent {
    // Component logic
}

API Reference

AboutComponent

Property	Type	Description
panels	QueryList<AboutPanelDirective>	Content children representing the panels to display

AboutPanelDirective (adf-about-panel)

Property	Type	Required	Default	Description
label	string	Yes	-	The title text displayed in the panel header
automationId	string	No	-	Data automation ID for testing purposes

Basic Usage

Simple Panel Structure

<adf-about>
    <adf-about-panel [label]="'Application Information'">
        <ng-template>
            <div class="about-content">
                <h3>My Application</h3>
                <p>Version: 1.0.0</p>
                <p>Built with Angular and ADF</p>
            </div>
        </ng-template>
    </adf-about-panel>

    <adf-about-panel [label]="'Features'">
        <ng-template>
            <ul>
                <li>Document management</li>
                <li>User authentication</li>
                <li>Process workflows</li>
            </ul>
        </ng-template>
    </adf-about-panel>
</adf-about>

Using Automation IDs for Testing

<adf-about>
    <adf-about-panel 
        [label]="'System Information'" 
        automationId="system-info-panel">
        <ng-template>
            <your-system-info-component></your-system-info-component>
        </ng-template>
    </adf-about-panel>
</adf-about>

Advanced Usage

Conditional Panel Display

You can control panel visibility using Angular's structural directives:

<adf-about>
    <!-- Show panel only in development mode -->
    <adf-about-panel 
        *ngIf="isDevelopmentMode" 
        [label]="'Debug Information'"
        automationId="debug-panel">
        <ng-template>
            <div class="debug-info">
                <h4>Debug Tools</h4>
                <button (click)="clearCache()">Clear Cache</button>
                <button (click)="showLogs()">View Logs</button>
            </div>
        </ng-template>
    </adf-about-panel>

    <!-- Always visible panel -->
    <adf-about-panel [label]="'General Information'">
        <ng-template>
            <app-general-info></app-general-info>
        </ng-template>
    </adf-about-panel>
</adf-about>

Working with Observables and Async Data

<adf-about>
    <!-- Panel with async data -->
    <adf-about-panel 
        *ngIf="extensions$ | async as extensions" 
        [label]="'ABOUT.PLUGINS.TITLE' | translate"
        automationId="extensions-panel">
        <ng-template>
            <adf-about-extension-list [data]="extensions"></adf-about-extension-list>
        </ng-template>
    </adf-about-panel>

    <!-- Panel with multiple conditions -->
    <adf-about-panel 
        *ngIf="userPermissions$ | async as permissions; else noPermissions"
        [label]="'User Permissions'"
        automationId="permissions-panel">
        <ng-template>
            <div *ngFor="let permission of permissions" class="permission-item">
                {{ permission.name }}: {{ permission.granted ? 'Granted' : 'Denied' }}
            </div>
        </ng-template>
    </adf-about-panel>

    <ng-template #noPermissions>
        <adf-about-panel [label]="'Permissions'">
            <ng-template>
                <p>Loading permissions...</p>
            </ng-template>
        </adf-about-panel>
    </ng-template>
</adf-about>

Dynamic Panel Generation

// Component logic
export class MyAboutComponent {
    isDevelopmentMode = environment.production === false;
    
    extensions$ = this.extensionService.getExtensions();
    userPermissions$ = this.authService.getUserPermissions();

    panels = [
        { 
            label: 'System Info', 
            content: 'system-info',
            show: true 
        },
        { 
            label: 'Debug Tools', 
            content: 'debug-tools',
            show: this.isDevelopmentMode 
        }
    ];

    clearCache(): void {
        // Clear cache implementation
    }

    showLogs(): void {
        // Show logs implementation
    }
}

<!-- Template using dynamic panels -->
<adf-about>
    <adf-about-panel 
        *ngFor="let panel of panels" 
        [label]="panel.label"
        [automationId]="panel.content + '-panel'"
        *ngIf="panel.show">
        <ng-template>
            <ng-container [ngSwitch]="panel.content">
                <app-system-info *ngSwitchCase="'system-info'"></app-system-info>
                <app-debug-tools *ngSwitchCase="'debug-tools'"></app-debug-tools>
            </ng-container>
        </ng-template>
    </adf-about-panel>
</adf-about>

Styling and Customization

CSS Classes

The About Component uses these CSS classes that you can customize:

• .adf-about-panel - Main accordion container
• .adf-about-panel-header - Panel header styling
• .adf-about-panel-header__title - Panel title styling

Custom Styling Example

// Custom panel styling
.adf-about-panel {
    .mat-expansion-panel {
        margin-bottom: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        
        &:not(.mat-expanded) {
            .mat-expansion-panel-header {
                background-color: #f5f5f5;
            }
        }
    }
    
    .adf-about-panel-header__title {
        font-weight: 600;
        color: #333;
    }
}

// Custom content styling
.about-content {
    padding: 16px 0;
    
    h3 {
        margin-top: 0;
        color: #1976d2;
    }
    
    .permission-item {
        padding: 4px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
            border-bottom: none;
        }
    }
}

Accessibility Features

The About Component inherits accessibility features from Angular Material's expansion panels:

• Keyboard Navigation: Use Tab to navigate between panels, Enter/Space to expand/collapse
• Screen Reader Support: Panels are properly labeled and state changes are announced
• ARIA Attributes: Proper ARIA attributes are automatically applied
• Focus Management: Focus is managed correctly when panels are expanded/collapsed

Enhancing Accessibility

<adf-about>
    <adf-about-panel 
        [label]="'System Information'"
        automationId="system-info-panel"
        role="region"
        [attr.aria-label]="'System information panel'">
        <ng-template>
            <div role="tabpanel" aria-live="polite">
                <h3 id="system-heading">Current System Status</h3>
                <p aria-describedby="system-heading">
                    All systems are operational.
                </p>
            </div>
        </ng-template>
    </adf-about-panel>
</adf-about>

Testing

Unit Testing Example

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutComponent } from '@alfresco/adf-core';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

describe('AboutComponent', () => {
    let component: AboutComponent;
    let fixture: ComponentFixture<AboutComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [AboutComponent]
        }).compileComponents();

        fixture = TestBed.createComponent(AboutComponent);
        component = fixture.componentInstance;
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('should display panels with correct labels', () => {
        const panels = fixture.debugElement.queryAll(
            By.css('[data-automation-id="system-info-panel"]')
        );
        expect(panels.length).toBeGreaterThan(0);
    });
});

E2E Testing with Automation IDs

// Page object example
export class AboutPage {
    async expandPanel(automationId: string): Promise<void> {
        const panel = element(by.css(`[data-automation-id="${automationId}"]`));
        const header = panel.element(by.css('.mat-expansion-panel-header'));
        await header.click();
    }

    async isPanelExpanded(automationId: string): Promise<boolean> {
        const panel = element(by.css(`[data-automation-id="${automationId}"]`));
        const classes = await panel.getAttribute('class');
        return classes.includes('mat-expanded');
    }
}

Best Practices

1. Use Descriptive Labels

<!-- Good: Descriptive and clear -->
<adf-about-panel [label]="'Application Version Information'">

<!-- Avoid: Vague labels -->
<adf-about-panel [label]="'Info'">

2. Provide Automation IDs for Testing

<!-- Always include automation IDs for testing -->
<adf-about-panel 
    [label]="'User Settings'" 
    automationId="user-settings-panel">

3. Handle Loading States

<adf-about-panel 
    *ngIf="data$ | async as data; else loadingPanel"
    [label]="'Dynamic Content'">
    <ng-template>
        <div>{{ data.content }}</div>
    </ng-template>
</adf-about-panel>

<ng-template #loadingPanel>
    <adf-about-panel [label]="'Loading...'">
        <ng-template>
            <mat-spinner diameter="20"></mat-spinner>
        </ng-template>
    </adf-about-panel>
</ng-template>

4. Organize Related Information

Group related information into logical panels to improve user experience and information architecture.

Common Use Cases

Application Information Dashboard

<adf-about>
    <adf-about-panel [label]="'Application Details'" automationId="app-details">
        <ng-template>
            <div class="app-info">
                <h3>{{ appName }}</h3>
                <p>Version: {{ appVersion }}</p>
                <p>Build: {{ buildNumber }}</p>
                <p>Environment: {{ environment }}</p>
            </div>
        </ng-template>
    </adf-about-panel>

    <adf-about-panel [label]="'Dependencies'" automationId="dependencies">
        <ng-template>
            <ul>
                <li *ngFor="let dep of dependencies">
                    {{ dep.name }}: {{ dep.version }}
                </li>
            </ul>
        </ng-template>
    </adf-about-panel>
</adf-about>

See Also

• Angular Material Expansion Panel
• ADF Core Components
• Accessibility Guidelines