-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(design-land): update documentation (#1917)
- Loading branch information
Showing
22 changed files
with
655 additions
and
664 deletions.
There are no files selected for viewing
20 changes: 9 additions & 11 deletions
20
apps/design-land/src/app/accordion/accordion.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| <daff-article> | ||
| <h1 daffArticleTitle>Accordion</h1> | ||
| <h1 daffArticleTitle>Accordion</h1> | ||
|
|
||
| <h3>Types</h3> | ||
| <p><code>daff-accordion-item</code> - An accordion that typically holds content.</p> | ||
| <p><code>daff-nav-accordion-item</code> — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.</p> | ||
| <h3>Types</h3> | ||
| <p><code>daff-accordion-item</code> - An accordion that typically holds content.</p> | ||
| <p><code>daff-nav-accordion-item</code> — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.</p> | ||
|
|
||
| <h3>Content Accordion Item</h3> | ||
| <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Navigation Accordion Item</h3> | ||
| <design-land-example-viewer-container example="nav-accordion"></design-land-example-viewer-container> | ||
| </daff-article> | ||
| <h3>Content Accordion Item</h3> | ||
| <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Navigation Accordion Item</h3> | ||
| <design-land-example-viewer-container example="nav-accordion"></design-land-example-viewer-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,45 @@ | ||
| <daff-article> | ||
| <h1 daffArticleTitle>Article</h1> | ||
| <p daffArticleLead>Article provides styles to common element selectors to create an article in a content page.</p> | ||
| <h1 daffArticleTitle>Article</h1> | ||
| <p daffArticleLead>Article provides styles to common element selectors to create an article in a content page.</p> | ||
|
|
||
| <h2>Overview</h2> | ||
| <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> | ||
| <h2>Overview</h2> | ||
| <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> | ||
|
|
||
| <h2>Headings</h2> | ||
| <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container> | ||
| <h2>Headings</h2> | ||
| <design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Article Lead</h2> | ||
| <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><p></code>).</p> | ||
| <design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container> | ||
| <h2>Article Lead</h2> | ||
| <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><p></code>).</p> | ||
| <design-land-example-viewer-container example="article-lead"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Article Meta</h2> | ||
| <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><p></code>).</p> | ||
| <design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container> | ||
| <h2>Article Meta</h2> | ||
| <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><p></code>).</p> | ||
| <design-land-example-viewer-container example="article-meta"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Link</h2> | ||
| <p>The link style in an article uses the default browser link style.</p> | ||
| <design-land-example-viewer-container example="article-link"></design-land-example-viewer-container> | ||
| <h2>Link</h2> | ||
| <p>The link style in an article uses the default browser link style.</p> | ||
| <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> | ||
| <h2>Table</h2> | ||
| <design-land-example-viewer-container example="article-table"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Lists</h2> | ||
| <h3>Unordered List</h3> | ||
| <design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container> | ||
| <h2>Lists</h2> | ||
| <h3>Unordered List</h3> | ||
| <design-land-example-viewer-container example="article-ul"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Ordered List</h3> | ||
| <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container> | ||
| <h3>Ordered List</h3> | ||
| <design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Code</h2> | ||
| <p>These are styles for inline and multiline blocks of code.</p> | ||
| <h2>Code</h2> | ||
| <p>These are styles for inline and multiline blocks of code.</p> | ||
|
|
||
| <h3>Inline code</h3> | ||
| <design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container> | ||
| <h3>Inline code</h3> | ||
| <design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Code blocks</h3> | ||
| <design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container> | ||
| <h3>Code blocks</h3> | ||
| <design-land-example-viewer-container example="article-code-block"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Horizontal Rules</h2> | ||
| <design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container> | ||
| <h2>Horizontal Rules</h2> | ||
| <design-land-example-viewer-container example="article-hr"></design-land-example-viewer-container> | ||
|
|
||
| <h2>Blockquote</h2> | ||
| <design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container> | ||
| </daff-article> | ||
| <h2>Blockquote</h2> | ||
| <design-land-example-viewer-container example="article-blockquote"></design-land-example-viewer-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,57 @@ | ||
| <daff-article> | ||
| <h1 daffArticleTitle>Button</h1> | ||
| <p daffArticleLead> | ||
| 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> | ||
| <h1 daffArticleTitle>Button</h1> | ||
| <p daffArticleLead> | ||
| 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> | ||
|
|
||
| <h3>About</h3> | ||
| <p> | ||
| Native <code><button></code> or <code><a></code> elements are always used in order to provide an easy, accessible experience for users. | ||
| </p> | ||
| <ul> | ||
| <li><code><button></code> should be used when a clickable action is performed within the same page.</li> | ||
| <li><code><a></code> should be used for interactions that will navigate users to a new page or to a different target on the same page.</li> | ||
| </ul> | ||
| <h3>About</h3> | ||
| <p> | ||
| Native <code><button></code> or <code><a></code> elements are always used in order to provide an easy, accessible experience for users. | ||
| </p> | ||
| <ul> | ||
| <li><code><button></code> should be used when a clickable action is performed within the same page.</li> | ||
| <li><code><a></code> should be used for interactions that will navigate users to a new page or to a different target on the same page.</li> | ||
| </ul> | ||
|
|
||
| <h3>Types</h3> | ||
| <p><code>daff-button</code> — Rectangular contained button with background color</p> | ||
| <p><code>daff-icon-button</code> — Icon button used with icon fonts</p> | ||
| <p><code>daff-raised-button</code> — Rectangular contained button with background color and elevation</p> | ||
| <p><code>daff-stroked-button</code> — Rectangular outlined button with no background color</p> | ||
| <h3>Types</h3> | ||
| <p><code>daff-button</code> — Rectangular contained button with background color</p> | ||
| <p><code>daff-icon-button</code> — Icon button used with icon fonts</p> | ||
| <p><code>daff-raised-button</code> — Rectangular contained button with background color and elevation</p> | ||
| <p><code>daff-stroked-button</code> — Rectangular outlined button with no background color</p> | ||
|
|
||
| <h3>Basic Button</h3> | ||
| <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container> | ||
| <h3>Basic Button</h3> | ||
| <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Stroked Button</h3> | ||
| <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container> | ||
| <h3>Stroked Button</h3> | ||
| <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Raised Button</h3> | ||
| <design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container> | ||
| <h3>Raised Button</h3> | ||
| <design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Icon Button</h3> | ||
| <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container> | ||
| <h3>Icon Button</h3> | ||
| <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Underline Button</h3> | ||
| <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container> | ||
| <h3>Underline Button</h3> | ||
| <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Sizes</h3> | ||
| <p>The size of a button can be updated by using the <code>size</code> property. The size of all the button variants will default to <code>md</code> if no size is defined. This can be updated to the three sizes buttons support.</p> | ||
| <p>Supported Sizes: <code>sm | md | lg</code></p> | ||
| <h3>Sizes</h3> | ||
| <p>The size of a button can be updated by using the <code>size</code> property. The size of all the button variants will default to <code>md</code> if no size is defined. This can be updated to the three sizes buttons support.</p> | ||
| <p>Supported Sizes: <code>sm | md | lg</code></p> | ||
|
|
||
| <design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container> | ||
| <design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Theming</h3> | ||
| <p>The default color of a button is light gray, but it can be updated to one of the supported colors by using the <code>color</code> property.</p> | ||
| <p>Supported colors: <code>primary | secondary | tertiary | black | white | theme | theme-contrast</code></p> | ||
| <p><code>white</code> and <code>theme</code> should be used on a darker background in order to have sufficient contrast for certain button types.</p> | ||
| <h3>Theming</h3> | ||
| <p>The default color of a button is light gray, but it can be updated to one of the supported colors by using the <code>color</code> property.</p> | ||
| <p>Supported colors: <code>primary | secondary | tertiary | black | white | theme | theme-contrast</code></p> | ||
| <p><code>white</code> and <code>theme</code> should be used on a darker background in order to have sufficient contrast for certain button types.</p> | ||
|
|
||
| <h3>Status Indicators</h3> | ||
| <p>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.</p> | ||
| <h3>Status Indicators</h3> | ||
| <p>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.</p> | ||
|
|
||
| <p>Supported statuses: <code>warn | danger | success</code></p> | ||
| <p>Supported statuses: <code>warn | danger | success</code></p> | ||
|
|
||
| <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container> | ||
| <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container> | ||
|
|
||
| <h3>Accessibility</h3> | ||
| <p>Daffodil uses native <code><a></code> and <code><button></code> HTML elements to ensure an accessible experience by default. The <code><button></code> element should be used when a clickable action is performed within the same page. The <code><a></code> element should be used to navigate users to a new page or to a different target on the same page.</p> | ||
| <h3>Accessibility</h3> | ||
| <p>Daffodil uses native <code><a></code> and <code><button></code> HTML elements to ensure an accessible experience by default. The <code><button></code> element should be used when a clickable action is performed within the same page. The <code><a></code> element should be used to navigate users to a new page or to a different target on the same page.</p> | ||
|
|
||
| <p>Buttons and links containing only icons (<code><daff-icon-button></code>) need to be given meaningful labels using <code>aria-label</code> or <code>aria-labelledby</code>.</p> | ||
| </daff-article> | ||
| <p>Buttons and links containing only icons (<code><daff-icon-button></code>) need to be given meaningful labels using <code>aria-label</code> or <code>aria-labelledby</code>.</p> |
Oops, something went wrong.