@daffodil/design 0.39.13 → 0.42.0

package/paginator/examples/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@daffodil/design/paginator/examples",
+  "module": "../../fesm2015/daffodil-design-paginator-examples.mjs",
+  "es2020": "../../fesm2020/daffodil-design-paginator-examples.mjs",
+  "esm2020": "../../esm2020/paginator/examples/daffodil-design-paginator-examples.mjs",
+  "fesm2020": "../../fesm2020/daffodil-design-paginator-examples.mjs",
+  "fesm2015": "../../fesm2015/daffodil-design-paginator-examples.mjs",
+  "typings": "daffodil-design-paginator-examples.d.ts",
+  "sideEffects": false
+}

package/paginator/examples/paginator-examples.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-paginator/basic-paginator.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@daffodil/design";
+export declare class PaginatorExamplesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginatorExamplesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PaginatorExamplesModule, [typeof i1.BasicPaginatorComponent], [typeof i2.CommonModule, typeof i3.DaffPaginatorModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PaginatorExamplesModule>;
+}

package/paginator/examples/public_api.d.ts

@@ -0,0 +1,3 @@
+export { BasicPaginatorComponent } from './basic-paginator/basic-paginator.component';
+export { PaginatorExamplesModule } from './paginator-examples.module';
+export { PAGINATOR_EXAMPLES } from './examples';

package/quantity-field/examples/basic-quantity-field/basic-quantity-field.component.d.ts

@@ -0,0 +1,7 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class BasicQuantityFieldComponent {
+    control: FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicQuantityFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicQuantityFieldComponent, "basic-quantity-field", never, {}, {}, never, never>;
+}

package/quantity-field/examples/basic-quantity-field/basic-quantity-field.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-quantity-field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@daffodil/design";
+export declare class BasicQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicQuantityFieldModule, [typeof i1.BasicQuantityFieldComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffFormFieldModule, typeof i4.DaffQuantityFieldModule], [typeof i1.BasicQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BasicQuantityFieldModule>;
+}

package/quantity-field/examples/custom-range-quantity-field/custom-range-quantity-field.component.d.ts

@@ -0,0 +1,7 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class CustomRangeQuantityFieldComponent {
+    control: FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomRangeQuantityFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomRangeQuantityFieldComponent, "custom-range-quantity-field", never, {}, {}, never, never>;
+}

package/quantity-field/examples/custom-range-quantity-field/custom-range-quantity-field.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./custom-range-quantity-field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@daffodil/design";
+export declare class CustomRangeQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomRangeQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CustomRangeQuantityFieldModule, [typeof i1.CustomRangeQuantityFieldComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffFormFieldModule, typeof i4.DaffQuantityFieldModule], [typeof i1.CustomRangeQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CustomRangeQuantityFieldModule>;
+}

package/quantity-field/examples/daffodil-design-quantity-field-examples.d.ts

@@ -1,8 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@daffodil/design/quantity-field/examples" />
 export * from './index';
-export { BasicQuantityFieldComponent as ɵa } from './basic/basic-quantity-field.component';
-export { CustomRangeQuantityFieldComponent as ɵb } from './customRange/custom-range-quantity-field.component';
-export { DisabledQuantityFieldComponent as ɵc } from './disabled/disabled-quantity-field.component';
-export { SelectMaxQuantityFieldComponent as ɵd } from './selectMax/select-max-quantity-field.component';

package/quantity-field/examples/disabled-quantity-field/disabled-quantity-field.component.d.ts

@@ -0,0 +1,7 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class DisabledQuantityFieldComponent {
+    control: FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledQuantityFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledQuantityFieldComponent, "disabled-quantity-field", never, {}, {}, never, never>;
+}

package/quantity-field/examples/disabled-quantity-field/disabled-quantity-field.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./disabled-quantity-field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@daffodil/design";
+export declare class DisabledQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DisabledQuantityFieldModule, [typeof i1.DisabledQuantityFieldComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffFormFieldModule, typeof i4.DaffQuantityFieldModule], [typeof i1.DisabledQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DisabledQuantityFieldModule>;
+}

package/quantity-field/examples/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@daffodil/design/quantity-field/examples",
-  "main": "../../bundles/daffodil-design-quantity-field-examples.umd.js",
-  "module": "../../fesm2015/daffodil-design-quantity-field-examples.js",
-  "es2015": "../../fesm2015/daffodil-design-quantity-field-examples.js",
-  "esm2015": "../../esm2015/quantity-field/examples/daffodil-design-quantity-field-examples.js",
-  "fesm2015": "../../fesm2015/daffodil-design-quantity-field-examples.js",
+  "module": "../../fesm2015/daffodil-design-quantity-field-examples.mjs",
+  "es2020": "../../fesm2020/daffodil-design-quantity-field-examples.mjs",
+  "esm2020": "../../esm2020/quantity-field/examples/daffodil-design-quantity-field-examples.mjs",
+  "fesm2020": "../../fesm2020/daffodil-design-quantity-field-examples.mjs",
+  "fesm2015": "../../fesm2015/daffodil-design-quantity-field-examples.mjs",
   "typings": "daffodil-design-quantity-field-examples.d.ts",
-  "metadata": "daffodil-design-quantity-field-examples.metadata.json",
   "sideEffects": false
 }

package/quantity-field/examples/public_api.d.ts

@@ -1,5 +1,10 @@
-export { QUANTITY_FIELD_EXAMPLES } from './examples';
-export { BasicQuantityFieldModule } from './basic/basic-quantity-field.module';
-export { CustomRangeQuantityFieldModule } from './customRange/custom-range-quantity-field.module';
-export { DisabledQuantityFieldModule } from './disabled/disabled-quantity-field.module';
-export { SelectMaxQuantityFieldModule } from './selectMax/select-max-quantity-field.module';
+import { BasicQuantityFieldComponent } from './basic-quantity-field/basic-quantity-field.component';
+import { CustomRangeQuantityFieldComponent } from './custom-range-quantity-field/custom-range-quantity-field.component';
+import { DisabledQuantityFieldComponent } from './disabled-quantity-field/disabled-quantity-field.component';
+import { SelectMaxQuantityFieldComponent } from './select-max-quantity-field/select-max-quantity-field.component';
+export { BasicQuantityFieldModule } from './basic-quantity-field/basic-quantity-field.module';
+export { CustomRangeQuantityFieldModule } from './custom-range-quantity-field/custom-range-quantity-field.module';
+export { DisabledQuantityFieldModule } from './disabled-quantity-field/disabled-quantity-field.module';
+export { SelectMaxQuantityFieldModule } from './select-max-quantity-field/select-max-quantity-field.module';
+export declare const QUANTITY_FIELD_EXAMPLES: (typeof BasicQuantityFieldComponent)[];
+export { BasicQuantityFieldComponent, CustomRangeQuantityFieldComponent, DisabledQuantityFieldComponent, SelectMaxQuantityFieldComponent, };

package/quantity-field/examples/select-max-quantity-field/select-max-quantity-field.component.d.ts

@@ -0,0 +1,7 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SelectMaxQuantityFieldComponent {
+    control: FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectMaxQuantityFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectMaxQuantityFieldComponent, "select-max-quantity-field", never, {}, {}, never, never>;
+}

package/quantity-field/examples/select-max-quantity-field/select-max-quantity-field.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./select-max-quantity-field.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@daffodil/design";
+export declare class SelectMaxQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectMaxQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectMaxQuantityFieldModule, [typeof i1.SelectMaxQuantityFieldComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.DaffFormFieldModule, typeof i4.DaffQuantityFieldModule], [typeof i1.SelectMaxQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SelectMaxQuantityFieldModule>;
+}

package/radio/examples/basic-radio/basic-radio.component.d.ts

@@ -1,7 +1,10 @@
 import { OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import * as i0 from "@angular/core";
 export declare class BasicRadioComponent implements OnInit {
     radioGroup: FormGroup;
     constructor();
     ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicRadioComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicRadioComponent, "basic-radio", never, {}, {}, never, never>;
 }

package/radio/examples/basic-radio/basic-radio.module.d.ts

@@ -1,2 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-radio.component";
+import * as i2 from "@daffodil/design";
+import * as i3 from "@angular/forms";
 export declare class BasicRadioModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicRadioModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicRadioModule, [typeof i1.BasicRadioComponent], [typeof i2.DaffRadioModule, typeof i3.ReactiveFormsModule], [typeof i1.BasicRadioComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BasicRadioModule>;
 }

package/radio/examples/daffodil-design-radio-examples.d.ts

@@ -1,6 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@daffodil/design/radio/examples" />
 export * from './index';
-export { BasicRadioComponent as ɵa } from './basic-radio/basic-radio.component';
-export { BasicRadioModule as ɵb } from './basic-radio/basic-radio.module';

package/radio/examples/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@daffodil/design/radio/examples",
-  "main": "../../bundles/daffodil-design-radio-examples.umd.js",
-  "module": "../../fesm2015/daffodil-design-radio-examples.js",
-  "es2015": "../../fesm2015/daffodil-design-radio-examples.js",
-  "esm2015": "../../esm2015/radio/examples/daffodil-design-radio-examples.js",
-  "fesm2015": "../../fesm2015/daffodil-design-radio-examples.js",
+  "module": "../../fesm2015/daffodil-design-radio-examples.mjs",
+  "es2020": "../../fesm2020/daffodil-design-radio-examples.mjs",
+  "esm2020": "../../esm2020/radio/examples/daffodil-design-radio-examples.mjs",
+  "fesm2020": "../../fesm2020/daffodil-design-radio-examples.mjs",
+  "fesm2015": "../../fesm2015/daffodil-design-radio-examples.mjs",
   "typings": "daffodil-design-radio-examples.d.ts",
-  "metadata": "daffodil-design-radio-examples.metadata.json",
   "sideEffects": false
 }

package/src/atoms/button/README.md

@@ -0,0 +1,53 @@
+# Button
+The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
+
+Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
+- `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
+- `<button>` should be used when a clickable action is performed within the same page.
+
+## Types
+- `daff-button` -- Rectangular contained button with background color
+- `daff-icon-button` -- Icon button used with icon fonts
+- `daff-raised-button` - Rectangular contained button with background color and elevation
+- `daff-stroked-button` -- Rectangular outlined button with no background color
+
+### Basic Button
+<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
+
+### Stroked Button
+<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
+
+### Raised Button
+<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
+
+### Icon Button
+<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
+
+### Underline Button
+<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
+
+## Theming
+The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+> For select button types, `white` and `theme` should be used on a darker background in order to have sufficient contrast.
+
+## Status Indicators
+Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
+
+Supported statuses: `warn | danger | success`
+
+<design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
+
+## Sizes
+The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
+
+Supported Sizes: `sm | md | lg`
+
+<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
+
+## Accessbility
+Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default. The `<button>` element should be used when a clickable action is performed within the same page. The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
+
+Buttons and links containing only icons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.

package/src/atoms/container/README.md

@@ -0,0 +1,18 @@
+# Container
+Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin.
+
+## Size
+The size of a container can be defined by using the `size` property. There is no default size set.
+
+Supported sizes: `xs | sm | md | lg | xl`
+
+| Size        | Syntax | Max wdith |
+| ----------- | ------ | --------- |
+| Extra small | xs     | 640px     |
+| Small       | sm     | 800px     |
+| Medium      | md     | 1040px    |
+| Large       | lg     | 1340px    |
+| Extra large | xl     | 1920px    |
+
+## Usage
+<design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>

package/src/atoms/form/error-message/README.md

@@ -0,0 +1,11 @@
+# Error Message
+`<daff-error-message>` is a component that works alongside the `<daff-form-field>` component to style and place the error message and its associated form control element appropriately.
+
+## Usage
+
+```
+<daff-form-field>
+  <input daff-input type="text" placeholder="Email" name="email" />
+  <daff-error-message *ngIf="requiredError">This field is required.</daff-error-message>
+</daff-form-field>
+```

package/src/atoms/form/form-field/README.md

@@ -0,0 +1,36 @@
+# Form Field Component
+
+`daff-form-field` is a wrapping component for form control elements. It is used to style certain controls that would otherwise be impossible to style with normal css and organize error messages alongside their associated form controls.
+
+## Usage
+
+```
+<daff-form-field>
+  <input daff-input type="text" placeholder="Email" name="email" />
+  <daff-error-message *ngIf="requiredError">This field is required.</daff-error-message>
+</daff-form-field>
+```
+
+## Creating a custom DaffFormFieldControl that works with DaffFormField
+
+Creating a control that works easily with the form field is fairly straightforward. We've provided the `DaffFormFieldControl` abstract class to allow you to implement the required methods and properties on your control in a consistent manner. Implementing this interface will also ensure that any breaking updates will be caught at build time, instead of runtime.
+
+To start, your control component must implement the `DaffFormFieldControl` interface. Once implemented, all you have to is provide the appropriate dependency key for the `DaffFormField` to hook into. You can do this by adding the key to the `providers` key of your component definition as follows:
+
+```ts
+@Component({
+  selector: 'some-component',
+  ...
+  providers: [{provide: DaffFormFieldControl, useExisting: SomeComponent}],
+})
+export class SomeComponent implements DaffFormFieldControl<any> {
+  ...
+}
+```
+
+You can see examples of controls meeting this interface on `DaffInput` and `DaffNativeSelect`. 
+
+## Troubleshooting
+
+### Error: A DaffFormFieldComponent must contain a DaffFormFieldControl
+This error appears when your `DaffFormField` is missing a child control. As this component is intended to only be used with a child component that implements `DaffFormFieldControl` this error enforces that constraint at development time. To fix, make sure that your `daff-form-field` has a child component that implements this interface. An example of some components that we've built include: `daff-input` and `daff-native-select`.

package/src/atoms/form/input/README.md

@@ -0,0 +1,11 @@
+# Input Component
+
+`daff-input`  is a form control element that can be used in forms.
+
+Make sure to use the appropriate `type` attribute on all inputs.
+
+## Usage
+
+```
+<input daff-input type="text" placeholder="Email" name="email" />
+```

package/src/atoms/form/quantity-field/README.md

@@ -0,0 +1,24 @@
+# Quantity Field
+Quantity field is a form control element that switches between a native select and input element.
+
+## Overview
+Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.
+
+## Range Limits
+The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more information.
+
+## Usage
+
+### Basic
+<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>
+
+### Disabled
+<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>
+
+### Custom Select Max Value (15)
+The maximum value at which the field will switch to using an input is configurable.
+<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>
+
+### Custom Range Limits (5 - 50)
+Custom range limits is the absolute minimum and maximum values can be specified.
+<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>

package/src/atoms/form/radio/README.md

@@ -0,0 +1,55 @@
+# Radio and Radio Set
+The `DaffRadioComponent` is used to select a single value from a selection of values. It can be hooked into Angular's `FormControl` to accomodate custom functionality. The `DaffRadioSetComponent` serves as a wrapper around a logical group of radios to provide styling.
+
+## Accessibility
+The `DaffRadioComponent` uses native `<input>` HTML elements to ensure an accesible experience by default. It supports inputs to customize the experience for accessibility by allowing native input for `aria-label` and `aria-labelledby`.
+
+## Radio Properties
+
+Property | Name            |  Type   |                                                                                         Description
+---------|------- | :-----: | ---------------------------------------------------------------------------:
+Input | checked | boolean | The value representing whether the radio is checked. default is equal to `false`|
+Input | value   | string  | The value of the radio | 
+Input |  id | string | The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique |
+Input |  name | string | The name of the radio |
+Input |  label | string | The label for the radio. Used for setting `aria-label` attribute. Defaults to equal name if nothing is provided. |
+Output | selectionChange | boolean | An event that emits everytime a selection has been changed.|
+
+
+
+## Radio Set Properties
+
+Name    |  type   |                                                                  Description
+------- | :-----: | ---------------------------------------------------------------------------:
+| name | string | The name of the radio-set |
+
+## Usage
+
+##### component.html
+```html
+<h1>Daff Radio</h1>
+
+<daff-radio-set [formGroup]="radioGroup" name="race">
+  <daff-radio formControlName="race" value="Terran">Terran</daff-radio>
+  <daff-radio formControlName="race" value="Protoss">Protoss</daff-radio>
+  <daff-radio formControlName="race" value="Zerg">Zerg</daff-radio>
+</daff-radio-set>
+```
+##### component.ts
+```ts
+import { Component } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'radio-component',
+  templateUrl: './radio.component.html',
+  styleUrls: ['./radio.component.scss']
+})
+export class RadioComponent {
+
+  radioGroup = new FormGroup({
+    race: new FormControl('Terran')
+  });
+
+}
+```

package/src/atoms/form/select/README.md

@@ -0,0 +1,13 @@
+# Select Component
+
+`daff-native-select` is a form control element that can be used in forms to select a value from a set of options.
+
+## Usage
+
+```
+<select daff-native-select name="name" [formControl]="form.controls['name']" [formSubmitted]="submitted">
+  <option>Option 1</option>
+  <option>Option 2</option>
+  <option>Option</option>
+</select>
+```

package/src/atoms/image/README.md

@@ -0,0 +1,31 @@
+# Image
+Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. `<daff-image>` is an opinionated version that encourages friendly end-user usage.
+
+## Attributes
+The `src`, `width`, `height`, and `alt` attributes must be defined. An error will be thrown any of these attributes are missing.
+
+`width` and `height` are required to calculate the aspect ratio of an image, used for the [aspect ratio padding trick](https://css-tricks.com/aspect-ratio-boxes/) that helps to prevent content jumping while images are loading. The `width` and `height` values are rendered as pixels.
+
+## Errors
+
+**DaffImageComponent must have a defined src attribute.**
+This error appears when `<daff-image>` is missing a `src` attribute.
+
+**DaffImageComponent must have a defined alt attribute.**
+This error appears when `<daff-image>` is missing an `alt` attribute. The `alt` tag specifies an alternate text for an image.
+
+**DaffImageComponent must have a defined width attribute.**
+This error appears when `<daff-image>` is missing a `width` attribute. The width must be defined in order to correctly calculate the aspect ratio of the image.
+
+**DaffImageComponent must have a defined height attribute.**
+This error appears when `<daff-image>` is missing a `height` attribute. The height must be defined in order to correctly calculate the aspect ratio of the image.
+
+## Accessbility
+Images should be given a meaningful description using the native `alt` attribute to ensure an accessible experience by default. An error will be thrown if the `alt` attribute is missing.
+
+## Usage
+### Basic Image
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
+
+### Image Load Output
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>

package/src/atoms/loading-icon/README.md

@@ -0,0 +1,7 @@
+# Loading Icon Component
+
+## Usage 
+
+```
+<daff-loading-icon></daff-loading-icon>
+```

package/src/atoms/progress-indicator/README.md

@@ -0,0 +1,2 @@
+# Progress Indicator
+The progress indicator is used to display a progress through a linear sequence of events.

package/src/molecules/accordion/README.md

@@ -0,0 +1,21 @@
+# Accordion Component
+
+The accordion component is a useful component when you're trying to display chunks of content in a compact fashion.
+
+The accordion consists of a global `<daff-accordion>` parent with children `<daff-accordion-item>`s.
+
+## 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>
+```

package/src/molecules/article/README.md

@@ -0,0 +1,49 @@
+# Article
+Article provides styles to common element selectors to create an article in a content page.
+
+## Overview
+Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
+
+## Headings
+<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
+
+## Article Lead
+Lead is used as the opening paragraph to provide a summary or leading information for an article. Lead is a custom directive of article and is not a native element selector. To use it, add `daffArticleLead` to a paragraph (`<p>`).
+
+<design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container>
+
+## Article Meta
+Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add `daffArticleMeta` to a paragraph (`<p>`).
+
+<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>
+
+## Link
+The link style in an article uses the default browser link style.
+
+<design-land-example-viewer-container example="article-link"></design-land-example-viewer-container>
+
+<h2>Table</h2>
+<design-land-example-viewer-container example="article-table"></design-land-example-viewer-container>
+
+## Lists
+
+### Unordered List
+<design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container>
+
+### Ordered List
+<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
+
+## Code
+These are styles for inline and multiline blocks of code.
+
+### Inline code
+<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
+
+### Code blocks
+<design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container>
+
+## Horizontal Rules
+<design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container>
+
+## Blockquote
+<design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container>

package/src/molecules/backdrop/README.md

@@ -0,0 +1,13 @@
+# Backdrop Component
+
+The `daff-backdrop` component is a simple component used to "backdrop" other components. `daff-backdrop` is often used alongside modals, dialogs, overlays, and lightboxes.
+
+## Animations
+
+`daff-backdrop` provides and manages its own animation.
+
+## Usage
+
+```
+<daff-backdrop [backdropIsVisible]="backdropIsVisible" (backdropClicked)="backdropClicked()"></daff-backdrop>
+```

package/src/molecules/button-set/README.md

@@ -0,0 +1,13 @@
+# Button Set Component
+
+The button set component is used when there are two or more buttons grouped together in a row.
+
+## Usage
+
+```
+<daff-button-set>
+    <button></button>
+    <button></button>
+    <button></button>
+</daff-button-set>
+```