Skip to content

Commit 223b304

Browse files
xelaintxelaint
authored
feat(design)!: remove DaffArticleTitleDirective and DaffArticleLeadDirective and set styles directly on <h1> and first <p> of an article (#2887)
BREAKING CHANGE: `DaffArticleTitleDirective` and `DaffArticleLeadDirective` have been removed. The styles from these directives will automatically apply to the `<h1>` and first `<p>` that comes after a `<h1>` in a `<daff-article>`.
1 parent 3d1796f commit 223b304

37 files changed

+78
-152
lines changed

‎apps/design-land/src/app/accordion/accordion.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Accordion</h1>
2-
<p daffArticleLead>An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.</p>
1+
<h1>Accordion</h1>
2+
<p>An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.</p>
33

44
<h2>Overview</h2>
55
<p>Accordions are made up of <code>&lt;daff-accordion-item&gt;</code>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.</p>
@@ -9,7 +9,7 @@ <h2>Supported Content Types</h2>
99

1010
<p>By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.</p>
1111

12-
<h3>Setting an item to be expanded by default</h3>
12+
<h3 id="setting-an-item-to-be-expanded-by-default">Setting an item to be expanded by default</h3>
1313
<p>An item content can be visibile on render by setting the <code>initiallyExpanded</code> property to <code>true</code> on <code>&lt;daff-accordion-item&gt;</code>.</p>
1414

1515
<h2>Usage</h2>

‎apps/design-land/src/app/article/article.component.html

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
<h1 daffArticleTitle>Article</h1>
2-
<p daffArticleLead>Article provides styles to common element selectors to create an article in a content page.</p>
1+
<h1>Article</h1>
2+
<p>Article provides styles to common element selectors to create an article in a content page.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>
66

77
<h2>Headings</h2>
88
<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
99

10-
<h2>Article Lead</h2>
11-
<p>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 <code>daffArticleLead</code> attribute to a paragraph (<code>&lt;p&gt;</code>).</p>
12-
<design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container>
13-
1410
<h2>Article Meta</h2>
1511
<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 <code>daffArticleMeta</code> to a paragraph (<code>&lt;p&gt;</code>).</p>
1612
<design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container>

‎apps/design-land/src/app/button/button.component.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<h1 daffArticleTitle>Button</h1>
2-
<p daffArticleLead>
3-
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.
4-
</p>
1+
<h1>Button</h1>
2+
<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.</p>
53

64
<h2>Overview</h2>
75
<p>Native <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> elements are always used in order to provide an easy, accessible experience for users.</p>

‎apps/design-land/src/app/callout/callout.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Callout</h1>
2-
<p daffArticleLead>Callout is a versatile component that can be used to easily highlight a piece of content.</p>
1+
<h1>Callout</h1>
2+
<p>Callout is a versatile component that can be used to easily highlight a piece of content.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/card/card.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Card</h1>
2-
<p daffArticleLead>Cards are versatile content containers that contain content and actions to convey information about a single subject.</p>
1+
<h1>Card</h1>
2+
<p>Cards are versatile content containers that contain content and actions to convey information about a single subject.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/container/container.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Container</h1>
2-
<p daffArticleLead>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.</p>
1+
<h1>Container</h1>
2+
<p>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.</p>
33

44
<h2>Size</h2>
55
<p>The size of a container can be defined by using the <code>size</code> property. There is no default size set.</p>

‎apps/design-land/src/app/foundations/color/color.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Color</h1>
2-
<p daffArticleLead>Color is used to help us distinguish and create consistent experiences across products.</p>
1+
<h1>Color</h1>
2+
<p>Color is used to help us distinguish and create consistent experiences across products.</p>
33

44
<h2>Accessibility Considerations and Guarantees</h2>
55
<p>We are committed to complying with the <a href="https://www.w3.org/TR/WCAG/" target="_blank">Web Content Accessibility Guidelines (WCAG) 2.1</a>. 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.</p>

‎apps/design-land/src/app/foundations/variables/variables.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Variables</h1>
2-
<p daffArticleLead>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.</p>
1+
<h1>Variables</h1>
2+
<p>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.</p>
33

44
<h2>CSS Custom Properties</h2>
55
<p>Our custom properties are prefixed with <code>daff-</code> to avoid conflicts with third party variables.</p>

‎apps/design-land/src/app/hero/hero.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Hero</h1>
2-
<p daffArticleLead>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.</p>
1+
<h1>Hero</h1>
2+
<p>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.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/image/image.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Image</h1>
2-
<p daffArticleLead>Image utilizes the native HTML <code>img</code> element to display responsive images on a page and prevent content jumping while images are loading. <code>daff-image</code> is an opinionated version that encourages friendly end-user usage.</p>
1+
<h1>Image</h1>
2+
<p>Image utilizes the native HTML <code>img</code> element to display responsive images on a page and prevent content jumping while images are loading. <code>daff-image</code> is an opinionated version that encourages friendly end-user usage.</p>
33

44
<h2>Attributes</h2>
55
<p> The <code>src</code>, <code>width</code>, <code>height</code>, and <code>alt</code> attributes must be defined. An error will be thrown any of these attributes are missing.</p>

‎apps/design-land/src/app/input/input.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Input</h1>
2-
<p daffArticleLead>Input is a form control element that can be used in forms.</p>
1+
<h1>Input</h1>
2+
<p>Input is a form control element that can be used in forms.</p>
33

44
<h2>Examples</h2>
55

‎apps/design-land/src/app/list/list.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>List</h1>
2-
<p daffArticleLead> 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.</p>
1+
<h1>List</h1>
2+
<p> 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.</p>
33

44
<h2>Basic List</h2>
55
<p>A <code>&lt;daff-list&gt;</code> consists of multiple <code>&lt;daff-list-item&gt;s</code>.</p>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Loading Icon</h1>
2-
<p daffArticleLead>Loading icons are used as an indicator of an event in progress.</p>
1+
<h1>Loading Icon</h1>
2+
<p>Loading icons are used as an indicator of an event in progress.</p>
33

44
<h2>Overview</h2>
55
<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>

‎apps/design-land/src/app/media-gallery/media-gallery.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Media Gallery</h1>
2-
<p daffArticleLead>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.</p>
1+
<h1>Media Gallery</h1>
2+
<p>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.</p>
33

44
<h2>Thumbnail</h2>
55
<p><code>[daffThumbnail]</code>should be used as a directive with <code>&lt;daff-image&gt;</code>. (View <a href="/image">Image Documentation</a>)</p>

‎apps/design-land/src/app/menu/menu.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Menu</h1>
2-
<p daffArticleLead>Menu is a small floating panel used to display a list of actions or navigational items.</p>
1+
<h1>Menu</h1>
2+
<p>Menu is a small floating panel used to display a list of actions or navigational items.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/modal/modal.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Modal</h1>
2-
<p daffArticleLead>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.</p>
1+
<h1>Modal</h1>
2+
<p>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.</p>
33

44
<h2>Supported Content Types</h2>
55
<p>These components and directives help to structure the content in your modal.</p>

‎apps/design-land/src/app/navbar/navbar.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Navbar</h1>
2-
<p daffArticleLead>Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.</p>
1+
<h1>Navbar</h1>
2+
<p>Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.</p>
33

44
<h2>Overview</h2>
55
<p>The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the <code>flex</code> display and is customizable with all the flexbox properties. It's required to be used with the native HTML <code>&lt;nav&gt;</code> element to ensure an accessible experience by default.</p>

‎apps/design-land/src/app/notification/notification.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Notification</h1>
2-
<p daffArticleLead>Notifications provides a way to display and communicate information related user actions within a page's content.</p>
1+
<h1>Notification</h1>
2+
<p>Notifications provides a way to display and communicate information related user actions within a page's content.</p>
33

44
<h2>Overview</h2>
55
<p>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 <a routerLink="/toast">Toast</a> component.</p>

‎apps/design-land/src/app/paginator/paginator.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Paginator</h1>
2-
<p daffArticleLead>Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.</p>
1+
<h1>Paginator</h1>
2+
<p>Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.</p>
33

44
<h2>Truncation</h2>
55
<p>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.</p>

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

+18-20
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
<daff-article>
2-
<h1 daffArticleTitle>Progress Bar</h1>
3-
<div daffArticleLead>A progress bar provides visual feedback about the duration or progress of a task or operation.</div>
1+
<h1>Progress Bar</h1>
2+
<div>A progress bar provides visual feedback about the duration or progress of a task or operation.</div>
43

5-
<h2>Types</h2>
6-
<p>There are two types of progress bars: <code>determinate</code> and <code>indeterminate</code>. They are <code>determinate</code> by default.</p>
4+
<h2>Types</h2>
5+
<p>There are two types of progress bars: <code>determinate</code> and <code>indeterminate</code>. They are <code>determinate</code> by default.</p>
76

8-
<h3>Determinate</h3>
9-
<p>Determinate progress bars should be used when the loading percentage of a task or operation is known.</p>
10-
<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
11-
12-
<h3>Indeterminate</h3>
13-
<p>Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.</p>
14-
<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
7+
<h3>Determinate</h3>
8+
<p>Determinate progress bars should be used when the loading percentage of a task or operation is known.</p>
9+
<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
1510

16-
<h2>Theming</h2>
17-
<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>
18-
<p>Supported colors: <code>primary | secondary | tertiary | theme | theme-contrast | white | black</code></p>
11+
<h3>Indeterminate</h3>
12+
<p>Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.</p>
13+
<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
1914

20-
<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>
15+
<h2>Theming</h2>
16+
<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>
17+
<p>Supported colors: <code>primary | secondary | tertiary | theme | theme-contrast | white | black</code></p>
2118

22-
<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
19+
<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>
2320

24-
<h2>Accessibility</h2>
25-
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>.
26-
</daff-article>
21+
<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
22+
23+
<h2>Accessibility</h2>
24+
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>.

‎apps/design-land/src/app/quantity-field/quantity-field.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Quantity Field</h1>
2-
<p daffArticleLead>Quantity field is a form control element that switches between a native select and input element.</p>
1+
<h1>Quantity Field</h1>
2+
<p>Quantity field is a form control element that switches between a native select and input element.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/sidebar/sidebar.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Sidebar</h1>
2-
<p daffArticleLead>Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.</p>
1+
<h1>Sidebar</h1>
2+
<p>Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.</p>
33

44
<h2>Overview</h2>
55
<p>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.</p>

‎apps/design-land/src/app/toast/toast.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Toast</h1>
2-
<p daffArticleLead>Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.</p>
1+
<h1>Toast</h1>
2+
<p>Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.</p>
33

44
<h2>Overview</h2>
55
<p>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 <a routerLink="/notification">Notification</a> component.</p>

‎apps/design-land/src/app/tree/tree.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Tree</h1>
2-
<p daffArticleLead>Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.</p>
1+
<h1>Tree</h1>
2+
<p>Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.</p>
33

44
<h2>Overview</h2>
55
<p>The <code>DaffTreeComponent</code> renders a tree structure. Typically, this is a structure of <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> 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.</p>

‎apps/design-land/src/app/typography/typography.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<h1 daffArticleTitle>Typography</h1>
2-
<p daffArticleLead>We use typography to establish hierarchy, organize information, and guide our users through a product or experience.</p>
1+
<h1>Typography</h1>
2+
<p>We use typography to establish hierarchy, organize information, and guide our users through a product or experience.</p>
33

44
<h2>Type scale</h2>
55
<p>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.</p>

‎libs/design/article/README.md

-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@ Article can be used on any content page that displays large blocks of text-drive
77
## Headings
88
<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>
99

10-
## Article Lead
11-
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>`).
12-
13-
<design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container>
14-
1510
## Article Meta
1611
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>`).
1712

0 commit comments

Comments
 (0)