docs(design): clean up loading icon component docs (#2806)

apps/design-land/src/app/loading-icon/loading-icon.component.html

@@ -1,34 +1,20 @@
 <h1 daffArticleTitle>Loading Icon</h1>
-<p daffArticleLead>
-  The loading icon is used as an indicator of an event in progress.
-</p>
+<p daffArticleLead>Loading icons are used as an indicator of an event in progress.</p>
 
-<h2>About</h2>
-<p>
-  This loading icon can be used to indicate that an event is ocurring and is still in progress.
-  The color and size of the loading icon can be customized to suit the needs of your project.
-</p>
+<h2>Overview</h2>
+<p>Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the <a routerLink="/progress-bar">Progress Bar</a> component instead.</p>
+
+<h2>Diameter</h2>
+<p>The diameter of a loading icon can be defined by using the <code>diameter</code> property. By default, the diameter is set to <code>60</code>.</p>
 
-<h3>Diameter</h3>
-<p>
-  The diameter of a loading icon can be defined by using the <code>diameter</code> property. By default, the diameter is set to <code>60</code>.
-</p>
 <design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
 
-<h3>Theming</h3>
-<p>
-  The loading icon 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>
+<h2>Theming</h2>
+<p>The loading icon 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 | black | white | theme | theme-contrast</code></p>
+
 <design-land-example-viewer-container example="loading-icon-color"></design-land-example-viewer-container>
 
-<h3>Accessibility</h3>
-<p>
-  Loading icons should be given meaningful labels by using <code>aria-label</code> or <code>aria-labelledby</code>.
-  Additionally, if a loading icon is used to indicate a process in progress, using
-  <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live" target="_blank"><code>aria-live</code></a> 
-  and
-  <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy" target="_blank"><code>aria-busy</code></a>
-  should be strongly considered.
-</p>
+<h2>Accessibility</h2>
+<p>Loading icons should be given meaningful labels by using <code>aria-label</code> or <code>aria-labelledby</code>. Additionally, if a loading icon is used to indicate a process in progress, using <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live" target="_blank"><code>aria-live</code></a> and <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy" target="_blank"><code>aria-busy</code></a> should be strongly considered.</p>

libs/design/loading-icon/README.md

@@ -1,7 +1,20 @@
-# Loading Icon Component
+# Loading Icon
+Loading icons are used as an indicator of an event in progress.
 
-## Usage 
+## Overview
+Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](../progress-bar/README.md) component instead.
 
-```
-<daff-loading-icon></daff-loading-icon>
-```
+## Diameter
+The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
+
+<design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
+
+## Theming
+The loading icon 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 | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="loading-icon-color"></design-land-example-viewer-container>
+
+## Accessibility
+Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`. Additionally, if a loading icon is used to indicate a process in progress, using [aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live) and [aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy") should be strongly considered.

libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.component.html

@@ -1,11 +1,5 @@
-<daff-loading-icon [diameter]="50" [color]="colorGroup.get('color').value"></daff-loading-icon>
+<daff-loading-icon [color]="colorControl.value"></daff-loading-icon>
 
-<daff-radio-set [formGroup]="colorGroup" name="color">
-  <daff-radio formControlName="color" value="primary">Primary</daff-radio>
-  <daff-radio formControlName="color" value="secondary">Secondary</daff-radio>
-  <daff-radio formControlName="color" value="tertiary">Tertiary</daff-radio>
-  <daff-radio formControlName="color" value="black">Black</daff-radio>
-  <daff-radio formControlName="color" value="white">White</daff-radio>
-  <daff-radio formControlName="color" value="theme">Theme</daff-radio>
-  <daff-radio formControlName="color" value="theme-contrast">Theme Contrast</daff-radio>
-</daff-radio-set>
+<select [formControl]="colorControl">
+	<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
+</select>

libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.component.ts

@@ -2,19 +2,30 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import {
-  UntypedFormGroup,
-  UntypedFormControl,
-} from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'loading-icon-color',
   templateUrl: './loading-icon-color.component.html',
+  styles: [`
+    select {
+      margin-top: 16px;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoadingIconColorComponent {
-  colorGroup = new UntypedFormGroup({
-    color: new UntypedFormControl('primary'),
-  });
+  colorControl: UntypedFormControl = new UntypedFormControl('primary');
+
+  options = [
+    { value: '', label: 'Default' },
+    { value: 'primary', label: 'Primary' },
+    { value: 'secondary', label: 'Secondary' },
+    { value: 'tertiary', label: 'Tertiary' },
+    { value: 'theme', label: 'Theme' },
+    { value: 'theme-contrast', label: 'Theme Contrast' },
+    { value: 'black', label: 'Black' },
+    { value: 'white', label: 'White' },
+  ];
 }

libs/design/loading-icon/examples/src/loading-icon-color/loading-icon-color.module.ts

@@ -1,12 +1,11 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { DaffRadioModule } from '@daffodil/design';
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 
 import { LoadingIconColorComponent } from './loading-icon-color.component';
 
-
 @NgModule({
   declarations: [
     LoadingIconColorComponent,
@@ -15,8 +14,8 @@ import { LoadingIconColorComponent } from './loading-icon-color.component';
     LoadingIconColorComponent,
   ],
   imports: [
+    CommonModule,
     DaffLoadingIconModule,
-    DaffRadioModule,
     ReactiveFormsModule,
   ],
 })