feat(design): rename <daff-progress-indicator> to <daff-progress-bar> (…

…#2510)

- feat(demo): update usage to the progress bar component

apps/demo/src/app/routing/indicator/indicator.component.html

@@ -1 +1 @@
-<daff-progress-indicator *ngIf="show" [percentage]="routingPercentage" (finished)="handleFullProgressIndicator()"></daff-progress-indicator>
+<daff-progress-bar *ngIf="show" [percentage]="routingPercentage" (finished)="handleFullProgressIndicator()"></daff-progress-bar>

apps/demo/src/app/routing/routing-component.module.ts

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffProgressIndicatorModule } from '@daffodil/design';
+import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
 
 import { DemoIndicatorComponent } from './indicator/indicator.component';
 
 
 @NgModule({
   imports: [
     CommonModule,
-    DaffProgressIndicatorModule,
+    DaffProgressBarModule,
   ],
   declarations: [
     DemoIndicatorComponent,

apps/design-land/src/app/app-routing.module.ts

@@ -35,6 +35,7 @@ export const appRoutes: Routes = [
       { path: 'modal', loadChildren: () => import('./modal/modal.module').then(m => m.DesignLandModalModule) },
       { path: 'notification', loadChildren: () => import('./notification/notification.module').then(m => m.DesignLandNotificationModule) },
       { path: 'paginator', loadChildren: () => import('./paginator/paginator.module').then(m => m.DesignLandPaginatorModule) },
+      { path: 'progress-bar', loadChildren: () => import('./progress-bar/progress-bar.module').then(m => m.DesignLandProgressBarModule) },
       { path: 'progress-indicator', loadChildren: () => import('./progress-indicator/progress-indicator.module').then(m => m.DesignLandProgressIndicatorModule) },
       { path: 'qty-dropdown', loadChildren: () => import('./qty-dropdown/qty-dropdown.module').then(m => m.DesignLandQtyDropdownModule) },
       { path: 'quantity-field', loadChildren: () => import('./quantity-field/quantity-field.module').then(m => m.DesignLandQuantityFieldModule) },

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

@@ -22,6 +22,7 @@ import { MODAL_EXAMPLES } from '@daffodil/design/modal/examples';
 import { NAVBAR_EXAMPLES } from '@daffodil/design/navbar/examples';
 import { NOTIFICATION_EXAMPLES } from '@daffodil/design/notification/examples';
 import { PAGINATOR_EXAMPLES } from '@daffodil/design/paginator/examples';
+import { PROGRESS_BAR_EXAMPLES } from '@daffodil/design/progress-bar/examples';
 import { QUANTITY_FIELD_EXAMPLES } from '@daffodil/design/quantity-field/examples';
 import { RADIO_EXAMPLES } from '@daffodil/design/radio/examples';
 import { SIDEBAR_EXAMPLES } from '@daffodil/design/sidebar/examples';
@@ -59,6 +60,7 @@ export class DesignLandAppComponent {
       ...QUANTITY_FIELD_EXAMPLES,
       ...LIST_EXAMPLES,
       ...PAGINATOR_EXAMPLES,
+      ...PROGRESS_BAR_EXAMPLES,
       ...IMAGE_EXAMPLES,
       ...INPUT_EXAMPLES,
       ...SIDEBAR_EXAMPLES,

apps/design-land/src/app/progress-bar/progress-bar-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {
+  Routes,
+  RouterModule,
+} from '@angular/router';
+
+import { DesignLandProgressBarComponent } from './progress-bar.component';
+
+export const progressBarRoutes: Routes = [
+  { path: '', component: DesignLandProgressBarComponent },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(progressBarRoutes),
+  ],
+  exports: [
+    RouterModule,
+  ],
+})
+export class DesignLandProgressBarRoutingModule {}

apps/design-land/src/app/progress-bar/progress-bar.component.html

@@ -0,0 +1,26 @@
+<daff-article>
+	<h1 daffArticleTitle>Progress Bar</h1>
+	<div daffArticleLead>A progress bar provides visual feedback about the duration or progress of a task or operation.</div>
+
+	<h2>Types</h2>
+	<p>There are two types of progress bars: <code>determinate</code> and <code>indeterminate</code>. They are <code>determinate</code> by default.</p>
+
+	<h3>Determinate</h3>
+	<p>Determinate progress bars should be used when the loading percentage of a task or operation is known.</p>
+	<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+
+	<h3>Indeterminate</h3>
+	<p>Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.</p>
+	<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
+
+	<h2>Theming</h2>
+	<p> The progress bar color is defined by using the <code>color</code> property. By default, the color is set to <code>primary</code>. This can be changed to one of the supported colors.</p>
+	<p>Supported colors: <code>primary | secondary | tertiary | theme | theme-contrast | white | black</code></p>
+
+	<blockquote><code>theme</code>, <code>theme-contrast</code>, <code>white</code>, and <code>black</code> should be used with caution to ensure that there is sufficient contrast.</blockquote>
+
+	<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
+
+	<h2>Accessibility</h2>
+	The progress bar component works with the ARIA <code>role="progressbar"</code> to provide an accessible experience. A label should always be provided by using <code>label[daffFormLabel]</code>, <code>aria-label</code>, or <code>aria-labelledby</code>.
+</daff-article>

apps/design-land/src/app/progress-bar/progress-bar.component.spec.ts

@@ -0,0 +1,29 @@
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import { DesignLandProgressBarComponent } from './progress-bar.component';
+
+describe('DesignLandProgressBarComponent', () => {
+  let component: DesignLandProgressBarComponent;
+  let fixture: ComponentFixture<DesignLandProgressBarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DesignLandProgressBarComponent ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignLandProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/design-land/src/app/progress-bar/progress-bar.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'design-land-progress-bar',
+  templateUrl: './progress-bar.component.html',
+})
+export class DesignLandProgressBarComponent { }

apps/design-land/src/app/progress-bar/progress-bar.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DaffArticleModule } from '@daffodil/design/article';
+import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
+
+import { DesignLandProgressBarRoutingModule } from './progress-bar-routing.module';
+import { DesignLandProgressBarComponent } from './progress-bar.component';
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
+
+@NgModule({
+  declarations: [
+    DesignLandProgressBarComponent,
+  ],
+  imports: [
+    CommonModule,
+    DesignLandProgressBarRoutingModule,
+    DesignLandExampleViewerModule,
+
+    DaffProgressBarModule,
+    DaffArticleModule,
+  ],
+})
+export class DesignLandProgressBarModule { }

apps/design-land/src/app/progress-indicator/progress-indicator.module.ts

@@ -5,6 +5,7 @@ import { DaffProgressIndicatorModule } from '@daffodil/design';
 
 import { DesignLandProgressIndicatorRoutingModule } from './progress-indicator-routing.module';
 import { DesignLandProgressIndicatorComponent } from './progress-indicator.component';
+import { DesignLandExampleViewerModule } from '../core/code-preview/container/example-viewer.module';
 
 @NgModule({
   declarations: [
@@ -14,6 +15,7 @@ import { DesignLandProgressIndicatorComponent } from './progress-indicator.compo
     CommonModule,
     DaffProgressIndicatorModule,
     DesignLandProgressIndicatorRoutingModule,
+    DesignLandExampleViewerModule,
   ],
 })
 export class DesignLandProgressIndicatorModule { }

apps/design-land/src/assets/nav.json

@@ -81,7 +81,14 @@
           "data": {}
         },
         {
-          "title": "Progress Indicator",
+          "title": "Progress Bar",
+          "url": "progress-bar",
+          "id": "progress-bar",
+          "items": [],
+          "data": {}
+        },
+        {
+          "title": "Progress Indicator (Deprecated)",
           "url": "progress-indicator",
           "id": "progress-indicator",
           "items": [],

libs/design/progress-bar/README.md

@@ -0,0 +1,27 @@
+# Progress Bar
+A progress bar provides visual feedback about the duration or progress of a task or operation.
+
+## Types
+There are two types of progress bars: `determinate` and `indeterminate`. They are `determinate` by default.
+
+### Determinate
+Determinate progress bars should be used when the percentage of a task or operation is known.
+
+<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+
+### Indeterminate
+Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
+
+<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
+
+## Theming
+The progress bar color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
+
+Supported colors: `primary | secondary | tertiary | theme | theme-contrast | white | black`
+
+> `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
+
+<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
+
+## Accessibility
+The progress bar component works with the ARIA `role="progressbar"` to provide an accessible experience. A Label should always be provided by using `label[daffFormLabel]`, `aria-label`, or `aria-labelledby`.

libs/design/progress-bar/examples/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-entrypoint.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../scss"]
+  }
+}

libs/design/progress-bar/examples/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.component.html

@@ -0,0 +1,3 @@
+<daff-progress-bar percentage="25">
+	<label daffProgressBarLabel>Progress bar label</label>
+</daff-progress-bar>

libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.component.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'progress-bar-default',
+  templateUrl: './progress-bar-default.component.html',
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }`],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarDefaultComponent {}

libs/design/progress-bar/examples/src/progress-bar-default/progress-bar-default.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
+
+import { ProgressBarDefaultComponent } from './progress-bar-default.component';
+
+@NgModule({
+  declarations: [
+    ProgressBarDefaultComponent,
+  ],
+  exports: [
+    ProgressBarDefaultComponent,
+  ],
+  imports: [
+    DaffProgressBarModule,
+  ],
+})
+export class ProgressBarDefaultComponentModule { }

libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.component.html

@@ -0,0 +1,3 @@
+<daff-progress-bar indeterminate>
+	<label daffProgressBarLabel>Progress bar label</label>
+</daff-progress-bar>

libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.component.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'progress-bar-indeterminate',
+  templateUrl: './progress-bar-indeterminate.component.html',
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }`],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarIndeterminateComponent {}

libs/design/progress-bar/examples/src/progress-bar-indeterminate/progress-bar-indeterminate.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
+
+import { ProgressBarIndeterminateComponent } from './progress-bar-indeterminate.component';
+
+@NgModule({
+  declarations: [
+    ProgressBarIndeterminateComponent,
+  ],
+  exports: [
+    ProgressBarIndeterminateComponent,
+  ],
+  imports: [
+    DaffProgressBarModule,
+  ],
+})
+export class ProgressBarIndeterminateComponentModule { }

libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.component.html

@@ -0,0 +1,14 @@
+<daff-progress-bar percentage="25" [color]="colorControl.value">
+	<label daffProgressBarLabel>Progress bar label</label>
+</daff-progress-bar>
+
+<select [formControl]="colorControl">
+	<option value="">Default</option>
+	<option value="primary">Primary</option>
+	<option value="secondary">Secondary</option>
+	<option value="tertiary">Tertiary</option>
+	<option value="theme">Theme</option>
+	<option value="theme-contrast">Theme Contrast</option>
+	<option value="white">White</option>
+	<option value="black">Black</option>
+</select>

libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.component.ts

@@ -0,0 +1,26 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { DaffPalette } from '@daffodil/design';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'progress-bar-themes',
+  templateUrl: './progress-bar-themes.component.html',
+  styles: [`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }`],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressBarThemesComponent {
+  color: DaffPalette = 'primary';
+
+  colorControl: FormControl = new FormControl('');
+}

libs/design/progress-bar/examples/src/progress-bar-themes/progress-bar-themes.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
+
+import { ProgressBarThemesComponent } from './progress-bar-themes.component';
+
+@NgModule({
+  declarations: [
+    ProgressBarThemesComponent,
+  ],
+  exports: [
+    ProgressBarThemesComponent,
+  ],
+  imports: [
+    DaffProgressBarModule,
+    ReactiveFormsModule,
+  ],
+})
+export class ProgressBarThemesComponentModule { }

libs/design/progress-bar/examples/src/public_api.ts

@@ -0,0 +1,14 @@
+import { ComponentExample } from '@daffodil/design';
+
+import { ProgressBarDefaultComponent } from './progress-bar-default/progress-bar-default.component';
+import { ProgressBarDefaultComponentModule } from './progress-bar-default/progress-bar-default.module';
+import { ProgressBarIndeterminateComponent } from './progress-bar-indeterminate/progress-bar-indeterminate.component';
+import { ProgressBarIndeterminateComponentModule } from './progress-bar-indeterminate/progress-bar-indeterminate.module';
+import { ProgressBarThemesComponent } from './progress-bar-themes/progress-bar-themes.component';
+import { ProgressBarThemesComponentModule } from './progress-bar-themes/progress-bar-themes.module';
+
+export const PROGRESS_BAR_EXAMPLES: ComponentExample[] = [
+  { component: ProgressBarThemesComponent, module: ProgressBarThemesComponentModule },
+  { component: ProgressBarIndeterminateComponent, module: ProgressBarIndeterminateComponentModule },
+  { component: ProgressBarDefaultComponent, module: ProgressBarDefaultComponentModule },
+];