diff --git a/apps/design-land/src/app/accordion/accordion.component.html b/apps/design-land/src/app/accordion/accordion.component.html index 3dab665afa..3b47c72080 100644 --- a/apps/design-land/src/app/accordion/accordion.component.html +++ b/apps/design-land/src/app/accordion/accordion.component.html @@ -1,5 +1,5 @@ -
An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
+An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
Accordions are made up of <daff-accordion-item>
s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.
-An item content can be visibile on render by setting the initiallyExpanded
property to true
on <daff-accordion-item>
.
Article provides styles to common element selectors to create an article in a content page.
+Article provides styles to common element selectors to create an article in a content page.
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.
@@ -7,10 +7,6 @@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 the daffArticleLead
attribute to a paragraph (<p>
).
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>
).
- 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. -
+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.
Callout is a versatile component that can be used to easily highlight a piece of content.
+Callout is a versatile component that can be used to easily highlight a piece of content.
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.
diff --git a/apps/design-land/src/app/card/card.component.html b/apps/design-land/src/app/card/card.component.html index 2e8214ceac..a78218cc7d 100644 --- a/apps/design-land/src/app/card/card.component.html +++ b/apps/design-land/src/app/card/card.component.html @@ -1,5 +1,5 @@ -Cards are versatile content containers that contain content and actions to convey information about a single subject.
+Cards are versatile content containers that contain content and actions to convey information about a single subject.
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.
diff --git a/apps/design-land/src/app/container/container.component.html b/apps/design-land/src/app/container/container.component.html index 074c4539fc..8f521482e3 100644 --- a/apps/design-land/src/app/container/container.component.html +++ b/apps/design-land/src/app/container/container.component.html @@ -1,5 +1,5 @@ -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.
+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.
The size of a container can be defined by using the size
property. There is no default size set.
Color is used to help us distinguish and create consistent experiences across products.
+Color is used to help us distinguish and create consistent experiences across products.
We are committed to complying with the Web Content Accessibility Guidelines (WCAG) 2.1. The component kit is built with the guidelines in mind. If you choose to identify your own color palettes outside of Daffodil's colors, please make sure to choose primary, secondary, tertiary, and extended colors that will pass the guidelines. Ensure there is sufficient color contrast between elements so that people who are visually impaired can see and use your products.
diff --git a/apps/design-land/src/app/foundations/variables/variables.component.html b/apps/design-land/src/app/foundations/variables/variables.component.html index 1c4c792c8b..e0890a03d7 100644 --- a/apps/design-land/src/app/foundations/variables/variables.component.html +++ b/apps/design-land/src/app/foundations/variables/variables.component.html @@ -1,5 +1,5 @@ -Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.
+Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.
Our custom properties are prefixed with daff-
to avoid conflicts with third party variables.
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.
+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.
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.
diff --git a/apps/design-land/src/app/image/image.component.html b/apps/design-land/src/app/image/image.component.html index b381140deb..4fa80fba33 100644 --- a/apps/design-land/src/app/image/image.component.html +++ b/apps/design-land/src/app/image/image.component.html @@ -1,5 +1,5 @@ -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.
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.
The src
, width
, height
, and alt
attributes must be defined. An error will be thrown any of these attributes are missing.
Input is a form control element that can be used in forms.
+Input is a form control element that can be used in forms.
List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
+List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
A <daff-list>
consists of multiple <daff-list-item>s
.
Loading icons are used as an indicator of an event in progress.
+Loading icons are used as an indicator of an event in progress.
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 component instead.
diff --git a/apps/design-land/src/app/media-gallery/media-gallery.component.html b/apps/design-land/src/app/media-gallery/media-gallery.component.html index b832c4c5e8..972ccfde22 100644 --- a/apps/design-land/src/app/media-gallery/media-gallery.component.html +++ b/apps/design-land/src/app/media-gallery/media-gallery.component.html @@ -1,5 +1,5 @@ -Media gallery is used to display a group of thumbnails in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
+Media gallery is used to display a group of thumbnails in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
[daffThumbnail]
should be used as a directive with <daff-image>
. (View Image Documentation)
Menu is a small floating panel used to display a list of actions or navigational items.
+Menu is a small floating panel used to display a list of actions or navigational items.
Menus only appear when a user interacts with a menu activator button. They should be used for secondary actions or options where users don't need immediate access to.
diff --git a/apps/design-land/src/app/modal/modal.component.html b/apps/design-land/src/app/modal/modal.component.html index 843c3a7560..f96e0d78b6 100644 --- a/apps/design-land/src/app/modal/modal.component.html +++ b/apps/design-land/src/app/modal/modal.component.html @@ -1,5 +1,5 @@ -Modal is a dynamically rendered element that floats about the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
+Modal is a dynamically rendered element that floats about the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
These components and directives help to structure the content in your modal.
diff --git a/apps/design-land/src/app/navbar/navbar.component.html b/apps/design-land/src/app/navbar/navbar.component.html index 3b74d79321..d4c31e3131 100644 --- a/apps/design-land/src/app/navbar/navbar.component.html +++ b/apps/design-land/src/app/navbar/navbar.component.html @@ -1,5 +1,5 @@ -Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
+Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the flex
display and is customizable with all the flexbox properties. It's required to be used with the native HTML <nav>
element to ensure an accessible experience by default.
Notifications provides a way to display and communicate information related user actions within a page's content.
+Notifications provides a way to display and communicate information related user actions within a page's content.
Notifications are used to display short messages that provide context in close promixity to a piece of content. They're often used to provide feedback or to notify users about an action they performed within a page. Notifications should not be used to display app-level alerts. Instead, use the Toast component.
diff --git a/apps/design-land/src/app/paginator/paginator.component.html b/apps/design-land/src/app/paginator/paginator.component.html index e8b7233143..53dae7f946 100644 --- a/apps/design-land/src/app/paginator/paginator.component.html +++ b/apps/design-land/src/app/paginator/paginator.component.html @@ -1,5 +1,5 @@ -Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
+Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.
An ellipsis is used to truncate pages when the number of pages exceed the maximum display limit. Double truncation appears when the current page is separated by more than three pages from both the first and last page.
diff --git a/apps/design-land/src/app/progress-bar/progress-bar.component.html b/apps/design-land/src/app/progress-bar/progress-bar.component.html index 5a4b69f57c..69cc48fb34 100644 --- a/apps/design-land/src/app/progress-bar/progress-bar.component.html +++ b/apps/design-land/src/app/progress-bar/progress-bar.component.html @@ -1,26 +1,24 @@ -There are two types of progress bars: determinate
and indeterminate
. They are determinate
by default.
There are two types of progress bars: determinate
and indeterminate
. They are determinate
by default.
Determinate progress bars should be used when the loading percentage of a task or operation is known.
-Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
-Determinate progress bars should be used when the loading percentage of a task or operation is known.
+ 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
Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
++theme
,theme-contrast
,white
, andblack
should be used with caution to ensure that there is sufficient contrast.
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
, andblack
should be used with caution to ensure that there is sufficient contrast.
role="progressbar"
to provide an accessible experience. A label should always be provided by using label[daffFormLabel]
, aria-label
, or aria-labelledby
.
-role="progressbar"
to provide an accessible experience. A label should always be provided by using label[daffFormLabel]
, aria-label
, or aria-labelledby
.
diff --git a/apps/design-land/src/app/quantity-field/quantity-field.component.html b/apps/design-land/src/app/quantity-field/quantity-field.component.html
index ec4082c34c..08d75ec37e 100644
--- a/apps/design-land/src/app/quantity-field/quantity-field.component.html
+++ b/apps/design-land/src/app/quantity-field/quantity-field.component.html
@@ -1,5 +1,5 @@
-Quantity field is a form control element that switches between a native select and input element.
+Quantity field is a form control element that switches between a native select and input element.
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.
diff --git a/apps/design-land/src/app/sidebar/sidebar.component.html b/apps/design-land/src/app/sidebar/sidebar.component.html index c5b941305d..42cd79c058 100644 --- a/apps/design-land/src/app/sidebar/sidebar.component.html +++ b/apps/design-land/src/app/sidebar/sidebar.component.html @@ -1,5 +1,5 @@ -Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.
+Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.
Sidebars are often used for navigation, but it's built to be flexible and extensible so that it can be used for any content. Sidebar supports a header and footer component with minimal default styling.
diff --git a/apps/design-land/src/app/toast/toast.component.html b/apps/design-land/src/app/toast/toast.component.html index 6cd9262e91..acc2402d01 100644 --- a/apps/design-land/src/app/toast/toast.component.html +++ b/apps/design-land/src/app/toast/toast.component.html @@ -1,5 +1,5 @@ -Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.
+Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.
Toasts should be used to display temporary messages about actions or events that occured or in need of attention, with no relation to content on a page. For messaging that provide context in close promixity to a piece of content within a page, use the Notification component.
diff --git a/apps/design-land/src/app/tree/tree.component.html b/apps/design-land/src/app/tree/tree.component.html index 2f80c561bb..f038cd1f06 100644 --- a/apps/design-land/src/app/tree/tree.component.html +++ b/apps/design-land/src/app/tree/tree.component.html @@ -1,5 +1,5 @@ -Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
+Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
The DaffTreeComponent
renders a tree structure. Typically, this is a structure of <a>
and <button>
elements that allow users to either navigate to a page, or explore the tree to find an item inside the tree that they want to navigate to.
We use typography to establish hierarchy, organize information, and guide our users through a product or experience.
+We use typography to establish hierarchy, organize information, and guide our users through a product or experience.
The Design Land typopgrahic scale is designed with visual distinctions to help our users better understand content and UI. Text sizes, styles, and layouts were selected to maintain logical hierarchies and drive consistency throughout an application.
diff --git a/libs/design/article/README.md b/libs/design/article/README.md index 1ff6a3bbd2..c33bb432e7 100644 --- a/libs/design/article/README.md +++ b/libs/design/article/README.md @@ -7,11 +7,6 @@ Article can be used on any content page that displays large blocks of text-drive ## Headings`).
-
-
`).
diff --git a/libs/design/article/examples/src/article-lead/article-lead.component.html b/libs/design/article/examples/src/article-lead/article-lead.component.html
deleted file mode 100644
index ff9b3cc82c..0000000000
--- a/libs/design/article/examples/src/article-lead/article-lead.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
- This is an Article Lead.