From 223b304fdb1960aaa6e616a1856c4a032290d583 Mon Sep 17 00:00:00 2001 From: Elain T Date: Fri, 21 Jun 2024 11:19:03 -0600 Subject: [PATCH] feat(design)!: remove DaffArticleTitleDirective and DaffArticleLeadDirective and set styles directly on

and first

of an article (#2887) BREAKING CHANGE: `DaffArticleTitleDirective` and `DaffArticleLeadDirective` have been removed. The styles from these directives will automatically apply to the `

` and first `

` that comes after a `

` in a ``. --- .../app/accordion/accordion.component.html | 6 +-- .../src/app/article/article.component.html | 8 +--- .../src/app/button/button.component.html | 6 +-- .../src/app/callout/callout.component.html | 4 +- .../src/app/card/card.component.html | 4 +- .../app/container/container.component.html | 4 +- .../foundations/color/color.component.html | 4 +- .../variables/variables.component.html | 4 +- .../src/app/hero/hero.component.html | 4 +- .../src/app/image/image.component.html | 4 +- .../src/app/input/input.component.html | 4 +- .../src/app/list/list.component.html | 4 +- .../loading-icon/loading-icon.component.html | 4 +- .../media-gallery.component.html | 4 +- .../src/app/menu/menu.component.html | 4 +- .../src/app/modal/modal.component.html | 4 +- .../src/app/navbar/navbar.component.html | 4 +- .../notification/notification.component.html | 4 +- .../app/paginator/paginator.component.html | 4 +- .../progress-bar/progress-bar.component.html | 38 +++++++++---------- .../quantity-field.component.html | 4 +- .../src/app/sidebar/sidebar.component.html | 4 +- .../src/app/toast/toast.component.html | 4 +- .../src/app/tree/tree.component.html | 4 +- .../app/typography/typography.component.html | 4 +- libs/design/article/README.md | 5 --- .../article-lead/article-lead.component.html | 3 -- .../article-lead/article-lead.component.ts | 12 ------ libs/design/article/examples/src/examples.ts | 2 - .../design/article/examples/src/public_api.ts | 1 - .../article-lead.directive.spec.ts | 0 .../article-lead/article-lead.directive.ts | 15 -------- .../article-title.directive.spec.ts | 0 .../article-title/article-title.directive.ts | 15 -------- libs/design/article/src/article.module.ts | 6 --- .../src/article/article.component.scss | 27 ++++++------- libs/design/article/src/public_api.ts | 2 - 37 files changed, 78 insertions(+), 152 deletions(-) delete mode 100644 libs/design/article/examples/src/article-lead/article-lead.component.html delete mode 100644 libs/design/article/examples/src/article-lead/article-lead.component.ts delete mode 100644 libs/design/article/src/article-lead/article-lead.directive.spec.ts delete mode 100644 libs/design/article/src/article-lead/article-lead.directive.ts delete mode 100644 libs/design/article/src/article-title/article-title.directive.spec.ts delete mode 100644 libs/design/article/src/article-title/article-title.directive.ts 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 @@ -

Accordion

-

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

+

Accordion

+

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

Overview

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.

@@ -9,7 +9,7 @@

Supported Content Types

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

-

Setting an item to be expanded by default

+

Setting an item to be expanded by default

An item content can be visibile on render by setting the initiallyExpanded property to true on <daff-accordion-item>.

Usage

diff --git a/apps/design-land/src/app/article/article.component.html b/apps/design-land/src/app/article/article.component.html index f4dea7d502..e9e5f30b77 100644 --- a/apps/design-land/src/app/article/article.component.html +++ b/apps/design-land/src/app/article/article.component.html @@ -1,5 +1,5 @@ -

Article

-

Article provides styles to common element selectors to create an article in a content page.

+

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.

@@ -7,10 +7,6 @@

Overview

Headings

-

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 the daffArticleLead attribute to a paragraph (<p>).

- -

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>).

diff --git a/apps/design-land/src/app/button/button.component.html b/apps/design-land/src/app/button/button.component.html index d28b55a835..769362eb52 100644 --- a/apps/design-land/src/app/button/button.component.html +++ b/apps/design-land/src/app/button/button.component.html @@ -1,7 +1,5 @@ -

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. -

+

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.

diff --git a/apps/design-land/src/app/callout/callout.component.html b/apps/design-land/src/app/callout/callout.component.html index b8545e1511..200676ebca 100644 --- a/apps/design-land/src/app/callout/callout.component.html +++ b/apps/design-land/src/app/callout/callout.component.html @@ -1,5 +1,5 @@ -

Callout

-

Callout is a versatile component that can be used to easily highlight a piece of content.

+

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.

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 @@ -

Card

-

Cards are versatile content containers that contain content and actions to convey information about a single subject.

+

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.

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

-

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

+

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.

diff --git a/apps/design-land/src/app/foundations/color/color.component.html b/apps/design-land/src/app/foundations/color/color.component.html index d36bef002d..825f41b58f 100644 --- a/apps/design-land/src/app/foundations/color/color.component.html +++ b/apps/design-land/src/app/foundations/color/color.component.html @@ -1,5 +1,5 @@ -

Color

-

Color is used to help us distinguish and create consistent experiences across products.

+

Color

+

Color is used to help us distinguish and create consistent experiences across products.

Accessibility Considerations and Guarantees

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 @@ -

Variables

-

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.

+

Variables

+

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.

CSS Custom Properties

Our custom properties are prefixed with daff- to avoid conflicts with third party variables.

diff --git a/apps/design-land/src/app/hero/hero.component.html b/apps/design-land/src/app/hero/hero.component.html index cef40441e8..b9652155dc 100644 --- a/apps/design-land/src/app/hero/hero.component.html +++ b/apps/design-land/src/app/hero/hero.component.html @@ -1,5 +1,5 @@ -

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.

+

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.

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

-

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

+

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.

diff --git a/apps/design-land/src/app/input/input.component.html b/apps/design-land/src/app/input/input.component.html index a091935d08..9f30c8d256 100644 --- a/apps/design-land/src/app/input/input.component.html +++ b/apps/design-land/src/app/input/input.component.html @@ -1,5 +1,5 @@ -

Input

-

Input is a form control element that can be used in forms.

+

Input

+

Input is a form control element that can be used in forms.

Examples

diff --git a/apps/design-land/src/app/list/list.component.html b/apps/design-land/src/app/list/list.component.html index e3779fafe7..d53297cae5 100644 --- a/apps/design-land/src/app/list/list.component.html +++ b/apps/design-land/src/app/list/list.component.html @@ -1,5 +1,5 @@ -

List

-

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

+

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.

Basic List

A <daff-list> consists of multiple <daff-list-item>s.

diff --git a/apps/design-land/src/app/loading-icon/loading-icon.component.html b/apps/design-land/src/app/loading-icon/loading-icon.component.html index 976118a68a..9d79f14994 100644 --- a/apps/design-land/src/app/loading-icon/loading-icon.component.html +++ b/apps/design-land/src/app/loading-icon/loading-icon.component.html @@ -1,5 +1,5 @@ -

Loading Icon

-

Loading icons are used as an indicator of an event in progress.

+

Loading Icon

+

Loading icons are used as an indicator of an event in progress.

Overview

Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the Progress Bar 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

-

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

+

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.

Thumbnail

[daffThumbnail]should be used as a directive with <daff-image>. (View Image Documentation)

diff --git a/apps/design-land/src/app/menu/menu.component.html b/apps/design-land/src/app/menu/menu.component.html index 915809453a..6b10498767 100644 --- a/apps/design-land/src/app/menu/menu.component.html +++ b/apps/design-land/src/app/menu/menu.component.html @@ -1,5 +1,5 @@ -

Menu

-

Menu is a small floating panel used to display a list of actions or navigational items.

+

Menu

+

Menu is a small floating panel used to display a list of actions or navigational items.

Overview

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

-

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

+

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.

Supported Content Types

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

-

Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.

+

Navbar

+

Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.

Overview

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.

diff --git a/apps/design-land/src/app/notification/notification.component.html b/apps/design-land/src/app/notification/notification.component.html index baba6d7a8b..0fd9bdcfb4 100644 --- a/apps/design-land/src/app/notification/notification.component.html +++ b/apps/design-land/src/app/notification/notification.component.html @@ -1,5 +1,5 @@ -

Notification

-

Notifications provides a way to display and communicate information related user actions within a page's content.

+

Notification

+

Notifications provides a way to display and communicate information related user actions within a page's content.

Overview

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

-

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

+

Paginator

+

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

Truncation

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 @@ - -

Progress Bar

-
A progress bar provides visual feedback about the duration or progress of a task or operation.
+

Progress Bar

+
A progress bar provides visual feedback about the duration or progress of a task or operation.
-

Types

-

There are two types of progress bars: determinate and indeterminate. They are determinate by default.

+

Types

+

There are two types of progress bars: determinate and indeterminate. They are determinate by default.

-

Determinate

-

Determinate progress bars should be used when the loading percentage of a task or operation is known.

- - -

Indeterminate

-

Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.

- +

Determinate

+

Determinate progress bars should be used when the loading percentage of a task or operation is known.

+ -

Theming

-

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

+

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, and black should be used with caution to ensure that there is sufficient contrast.
+

Theming

+

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, and black should be used with caution to ensure that there is sufficient contrast.
-

Accessibility

- The progress bar component works with the ARIA role="progressbar" to provide an accessible experience. A label should always be provided by using label[daffFormLabel], aria-label, or aria-labelledby. - + + +

Accessibility

+The progress bar component works with the ARIA 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

-

Quantity field is a form control element that switches between a native select and input element.

+

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.

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

-

Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.

+

Sidebar

+

Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.

Overview

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 @@ -

Toast

-

Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.

+

Toast

+

Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.

Overview

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 @@ -

Tree

-

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.

+

Tree

+

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.

Overview

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.

diff --git a/apps/design-land/src/app/typography/typography.component.html b/apps/design-land/src/app/typography/typography.component.html index 5cd90342b4..5a9ecfe8ae 100644 --- a/apps/design-land/src/app/typography/typography.component.html +++ b/apps/design-land/src/app/typography/typography.component.html @@ -1,5 +1,5 @@ -

Typography

-

We use typography to establish hierarchy, organize information, and guide our users through a product or experience.

+

Typography

+

We use typography to establish hierarchy, organize information, and guide our users through a product or experience.

Type scale

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 -## 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 (`

`). - - - ## 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 (`

`). 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.

- \ No newline at end of file diff --git a/libs/design/article/examples/src/article-lead/article-lead.component.ts b/libs/design/article/examples/src/article-lead/article-lead.component.ts deleted file mode 100644 index 62397d1174..0000000000 --- a/libs/design/article/examples/src/article-lead/article-lead.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, -} from '@angular/core'; - -@Component({ - // eslint-disable-next-line @angular-eslint/component-selector - selector: 'article-lead', - templateUrl: './article-lead.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class ArticleLeadComponent {} diff --git a/libs/design/article/examples/src/examples.ts b/libs/design/article/examples/src/examples.ts index 4b47e3b20f..420dd0483d 100644 --- a/libs/design/article/examples/src/examples.ts +++ b/libs/design/article/examples/src/examples.ts @@ -3,7 +3,6 @@ import { ArticleCodeBlockComponent } from './article-code-block/article-code-blo import { ArticleCodeInlineComponent } from './article-code-inline/article-code-inline.component'; import { ArticleHeadingsComponent } from './article-headings/article-headings.component'; import { ArticleHrComponent } from './article-hr/article-hr.component'; -import { ArticleLeadComponent } from './article-lead/article-lead.component'; import { ArticleLinkComponent } from './article-link/article-link.component'; import { ArticleMetaComponent } from './article-meta/article-meta.component'; import { ArticleOlComponent } from './article-ol/article-ol.component'; @@ -16,7 +15,6 @@ export const ARTICLE_EXAMPLES = [ ArticleCodeInlineComponent, ArticleHeadingsComponent, ArticleHrComponent, - ArticleLeadComponent, ArticleLinkComponent, ArticleMetaComponent, ArticleOlComponent, diff --git a/libs/design/article/examples/src/public_api.ts b/libs/design/article/examples/src/public_api.ts index 2ea1b75cea..16f6ed176c 100644 --- a/libs/design/article/examples/src/public_api.ts +++ b/libs/design/article/examples/src/public_api.ts @@ -5,7 +5,6 @@ export { ArticleOlComponent } from './article-ol/article-ol.component'; export { ArticleUlComponent } from './article-ul/article-ul.component'; export { ArticleMetaComponent } from './article-meta/article-meta.component'; export { ArticleLinkComponent } from './article-link/article-link.component'; -export { ArticleLeadComponent } from './article-lead/article-lead.component'; export { ArticleBlockquoteComponent } from './article-blockquote/article-blockquote.component'; export { ArticleTableComponent } from './article-table/article-table.component'; diff --git a/libs/design/article/src/article-lead/article-lead.directive.spec.ts b/libs/design/article/src/article-lead/article-lead.directive.spec.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/design/article/src/article-lead/article-lead.directive.ts b/libs/design/article/src/article-lead/article-lead.directive.ts deleted file mode 100644 index 230dffb2df..0000000000 --- a/libs/design/article/src/article-lead/article-lead.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive({ - selector: '[daffArticleLead]', -}) -export class DaffArticleLeadDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-article__lead') class = true; -} diff --git a/libs/design/article/src/article-title/article-title.directive.spec.ts b/libs/design/article/src/article-title/article-title.directive.spec.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/design/article/src/article-title/article-title.directive.ts b/libs/design/article/src/article-title/article-title.directive.ts deleted file mode 100644 index b48618f1af..0000000000 --- a/libs/design/article/src/article-title/article-title.directive.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - Directive, - HostBinding, -} from '@angular/core'; - -@Directive({ - selector: '[daffArticleTitle]', -}) -export class DaffArticleTitleDirective { - - /** - * @docs-private - */ - @HostBinding('class.daff-article__title') class = true; -} diff --git a/libs/design/article/src/article.module.ts b/libs/design/article/src/article.module.ts index 5944d51501..ea4c973ff4 100644 --- a/libs/design/article/src/article.module.ts +++ b/libs/design/article/src/article.module.ts @@ -2,9 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { DaffArticleComponent } from './article/article.component'; -import { DaffArticleLeadDirective } from './article-lead/article-lead.directive'; import { DaffArticleMetaDirective } from './article-meta/article-meta.directive'; -import { DaffArticleTitleDirective } from './article-title/article-title.directive'; @NgModule({ imports: [ @@ -12,14 +10,10 @@ import { DaffArticleTitleDirective } from './article-title/article-title.directi ], declarations: [ DaffArticleComponent, - DaffArticleTitleDirective, - DaffArticleLeadDirective, DaffArticleMetaDirective, ], exports: [ DaffArticleComponent, - DaffArticleTitleDirective, - DaffArticleLeadDirective, DaffArticleMetaDirective, ], }) diff --git a/libs/design/article/src/article/article.component.scss b/libs/design/article/src/article/article.component.scss index 1fcd944d22..dc1202df0e 100644 --- a/libs/design/article/src/article/article.component.scss +++ b/libs/design/article/src/article/article.component.scss @@ -32,6 +32,17 @@ @include stopsArticleCascade(h1) { @include t.headline-lg; + + + p { + @include t.body-md; + font-weight: 400; + + code { + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: 400; + } + } } @include stopsArticleCascade(h2) { @@ -94,22 +105,6 @@ padding: 0.25em; } - &__title { - @include t.headline-lg; - } - - &__lead { - @include t.body-md; - font-weight: 400; - margin: 0; - - code { - font-size: 1.25rem; - line-height: 1.5rem; - font-weight: 400; - } - } - &__meta { font-size: t.$small-font-size; } diff --git a/libs/design/article/src/public_api.ts b/libs/design/article/src/public_api.ts index 60c37264b9..b6670a1b12 100644 --- a/libs/design/article/src/public_api.ts +++ b/libs/design/article/src/public_api.ts @@ -1,6 +1,4 @@ export { DaffArticleComponent } from './article/article.component'; export { DaffArticleModule } from './article.module'; -export { DaffArticleTitleDirective } from './article-title/article-title.directive'; -export { DaffArticleLeadDirective } from './article-lead/article-lead.directive'; export { DaffArticleMetaDirective } from './article-meta/article-meta.directive';