@daffodil/design 0.63.2 → 0.64.1

package/src/atoms/button/README.md

@@ -1,58 +0,0 @@
-# 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.
-
-## Overview
-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>
-
-> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
-
-### 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>
-
-> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
-
-### Underline Button
-<design-land-example-viewer-container example="underline-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>
-
-## 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, `black` and `white` 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>
-
-## 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

@@ -1,18 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-# 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

@@ -1,36 +0,0 @@
-# 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

@@ -1,24 +0,0 @@
-# Input
-Input is a form control element that can be used in forms.
-
-## Examples
-
-### Basic
-A basic input without using the `DaffFormFieldComponent`.
-
-<design-land-example-viewer-container example="basic-input"></design-land-example-viewer-container>
-
-### With `DaffFormFieldComponent`
-An input using `DaffFormField`
-
-<design-land-example-viewer-container example="input-with-form-field"></design-land-example-viewer-container>
-
-### Disabled
-The input in this example is disabled using the native HTML disabled attribute.
-
-<design-land-example-viewer-container example="input-disabled"></design-land-example-viewer-container>
-
-### With Reactive Forms
-The input in this example uses the `ReactiveFormsModule` to display errors.
-
-<design-land-example-viewer-container example="input-error"></design-land-example-viewer-container>

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

@@ -1,13 +0,0 @@
-# Native 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/form/quantity-field/README.md

@@ -1,24 +0,0 @@
-# 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

@@ -1,55 +0,0 @@
-# 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/image/README.md

@@ -1,31 +0,0 @@
-# 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

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

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

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

package/src/molecules/accordion/README.md

@@ -1,21 +0,0 @@
-# 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

@@ -1,49 +0,0 @@
-# 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

@@ -1,13 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-# Button Set (deprecated)
-
-> The button set will be deprecated in v1.0.0 in favor of allowing endusers to determine how a set of buttons should be displayed.
-
-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>
-```

package/src/molecules/callout/README.md

@@ -1,54 +0,0 @@
-# Callout
-Callout is a versatile component that can be used to easily highlight a piece of content.
-
-## Overview
-Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
-
-## Supported Content Types
-A `<daff-callout>` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
-
-### Icon
-`[daffCalloutIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
-
-### Tagline
-Callout taglines are used by adding `[daffCalloutTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
-
-### Title
-Callout titles are used by adding `[daffCalloutTitle]` to a `<h*>` tag.
-
-### Subtitle
-Callout subtitles are used by adding `[daffCalloutSubtitle]` to a `<p>` tag.
-
-### Body
-`[daffCalloutBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-callout>` and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
-
-## Theming
-The default background color of a callout 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`
-
-<design-land-example-viewer-container example="callout-theming"></design-land-example-viewer-container>
-
-## Text Alignment
-Align callout-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffCalloutBody]` or any additional components or elements that is placed inside of a callout. `textAlignment` is set to `left` by default.
-
-Supported alignments: `left | center | right`
-
-<design-land-example-viewer-container example="callout-text-alignment"></design-land-example-viewer-container>
-
-## Compact Callouts
-Callouts are available in a `compact` mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-callout>`.
-
-<design-land-example-viewer-container example="compact-callout"></design-land-example-viewer-container>
-
-## Gridded Callouts
-Callouts are flexible enough to support grids within them.
-
-### Callout with Two Columns
-<design-land-example-viewer-container example="callout-with-grid"></design-land-example-viewer-container>
-
-## Layout
-The `layout` property is deprecated and replaced by the [`textAlignment`](#text-alignment) property.
-
-## Size
-The `size` property is deprecated and replaced by the [`compact`](#compact-callouts) property.

package/src/molecules/card/README.md

@@ -1,60 +0,0 @@
-# Card
-Cards are versatile content containers that contain content and actions to convey information about a single subject.
-
-## Overview
-There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
-
-## Basic Card
-The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS
-
-<design-land-example-viewer-container example="basic-card"></design-land-example-viewer-container>
-
-## Supported Content Types
-A card supports a wide variety of content and includes minimally pre-styled `image`, `icon`, `tagline`, `title`, `content`, and `actions` content containers.
-
-### Image
-Image can be added to a card by using the `daffCardImage` attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
-
-### Icon
-Icon can be added to a card by using the `daffCardIcon` attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
-
-### Tagline
-Tagline can be added to a card by using the `daffCardTagline` attribute. It's intended to supplement the title by providing a short, memorable description.
-
-### Title
-Title can be added to a card by using the `daffCardTitle` attribute.
-
-### Content
-Content can be added to a card by using the `daffCardContent` attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
-
-### Actions
-Buttons can be added to a card by using the `daffCardActions` attribute. This container will always be positioned at the bottom of a card.
-
-## Properties
-
-### Orientation
-Orientation dictates how a card's content is stacked — `vertical` or `horizontal`. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the `orientation` property. Horizontal cards will stack vertically on smaller screens due to size constraints.
-
-<design-land-example-viewer-container example="card-orientation"></design-land-example-viewer-container>
-
-## Linkable Card
-Cards can be linkable by adding the component selector to the `<a>` tag. All card types are linkable.
-
-<design-land-example-viewer-container example="linkable-card"></design-land-example-viewer-container>
-
-## Raised Card
-A raised card adds elevation to the default card.
-
-<design-land-example-viewer-container example="raised-card"></design-land-example-viewer-container>
-
-## Stroked Card
-A stroked card adds a border to the default card.
-
-<design-land-example-viewer-container example="stroked-card"></design-land-example-viewer-container>
-
-### Theming
-Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the `color` property.
-
-Supported colors: `primary | secondary | tertiary | white | black | theme | theme-contrast`
-
-<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>

package/src/molecules/feature/README.md

@@ -1,48 +0,0 @@
-# Feature Component
-The feature component is deprecated.
-
-The `feature` component can be used to display feature-related content on a page.
-
-## Supported Content Types
-
-A `daff-feature` transcludes:
-
-- `[daffFeatureIcon]`
-- `[daffFeatureSubheader]`
-- `[daffFeatureTitle]`
-- `[daffFeatureSubtitle]`
-- Any additional components
-
-### Icon
-
-- Feature icon is used by adding `[daffFeatureIcon]` to any tag.
-
-### Subheader
-
-- Feature subheader is used by adding `[daffFeatureSubheader]` to any tag.
-
-### Title
-
-- Feature title is used by adding `[daffFeatureTitle]` to any tag.
-
-### Subtitle
-
-- Feature subtitle is used by adding `[daffFeatureSubtitle]` to any tag.
-
-## Modes
-
-- To define a feature mode, add `mode="[value]"` to the `<daff-feature>` tag.
-- The default mode is `normal`
-- Values: `compact` and `normal`
-
-### Usage
-
-```
-<daff-feature mode="compact">
-  <img daffFeatureIcon src="" />
-  <p daffFeatureSubheader>Subheader</p>
-  <h4 daffFeatureTitle>Title</h4>
-  <p daffFeatureSubtitle>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-  Some other content
-</daff-feature>
-```

package/src/molecules/hero/README.md

@@ -1,54 +0,0 @@
-# Hero
-Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.
-
-## Overview
-Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
-
-## Supported Content Types
-A `daff-hero` supports transclusion of any content and includes stylized `icon`, `tagline`, `title`, `subtitle`, and `body` content containers.
-
-### Icon
-`[DaffHeroIcon]` is intended for visual or branding reinforcement. It should not be used for actionable icons.
-
-### Tagline
-Hero taglines are used by adding `[daffHeroTagline]` to a `<p>` tag. It's intended to supplement the title by providing a short, memorable description.
-
-### Title
-Hero titles are used by adding `[daffHeroTitle]` to a `<h1>` tag.
-
-### Subtitle
-Hero subtitles are used by adding `[daffHeroSubtitle]` to a `<h2>` tag.
-
-### Body
-`[daffHeroBody]` is a wrapper container that can be used to place all additional components and content within a `<daff-hero>` and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of hero's properties and only serves as a wrapping and spacing container.
-
-## Theming
-The default background color of a hero 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`
-
-<design-land-example-viewer-container example="hero-theming"></design-land-example-viewer-container>
-
-## Text Alignment
-Align hero-specific text with the `textAlignment` property. `textAlignment` will not cascade the alignment styles down to `[daffHeroBody]` or any additional components or elements that are placed inside of a hero. `textAlignment` is set to `left` by default.
-
-Supported alignments: `left | center | right`
-
-<design-land-example-viewer-container example="hero-text-alignment"></design-land-example-viewer-container>
-
-## Compact Heroes
-Heroes are available in a `compact` mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the `compact` property on `<daff-hero>`.</p>
-
-<design-land-example-viewer-container example="compact-hero"></design-land-example-viewer-container>
-
-## Gridded Heroes
-Heros are flexible enough to support grids within them.
-
-### Hero with Two Columns
-<design-land-example-viewer-container example="hero-with-grid"></design-land-example-viewer-container>
-
-## Size
-The `size` property will be deprecated in v1.0.0. `compact` will be replaced by the `DaffCompactable` interface.
-
-## Layout
-The `layout` property will be deprecated in v1.0.0