This repository has been archived by the owner on Jun 26, 2018. It is now read-only.
DP-4325 Final Patterns Documentation #546
There are no files selected for viewing
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,7 +1,7 @@ | ||
| { | ||
| "arrowButton": { | ||
| "href": "#", | ||
| "info": "Navigation to previous page", | ||
| "direction": "left" | ||
| } | ||
| } |
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,21 +1,17 @@ | ||
| ### Description | ||
| This Pattern shows a link styled as a button with a directional arrow. | ||
|
|
||
| ### Status | ||
| * Stable as of 5.0.0 | ||
|
|
||
| ### Variables | ||
| ~~~ | ||
| arrowButton: { | ||
| href: | ||
| type: string (url) / required | ||
| info: | ||
| type: string (adds more description to the link) / required | ||
| direction: | ||
| type string ("left","right") / optional | ||
| } | ||
| ~~~ |
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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| ### Description | ||
| This is a variant of the [Action Step](./?p=molecules-action-step) pattern showing an example show it using an accordion. | ||
|
|
||
| ### How to generate | ||
| * set the `accordion` variable to true |
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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| ### Description | ||
| This is a variant of the [Arrow Nav](./?p=molecules-arrow-nav) pattern showing an example showing the next page option. | ||
|
|
||
| ### How to generate | ||
| * set the `arrowButton.direction` variable to "right" |
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,33 +1,30 @@ | ||
| ### Description | ||
| This pattern displays a link to the previous or next page. | ||
|
|
||
| ### Status | ||
| * Stable as of 5.0.0 | ||
|
|
||
| ### Pattern Contains | ||
| * Arrow Button | ||
|
|
||
| ### Variant options | ||
| * This can also be view as a [next](./?p=molecules-arrow-nav-as-next-page) page navigation | ||
|
|
||
| ### Variables | ||
| ~~~ | ||
| arrowNav: { | ||
| arrowButton: { | ||
| type: arrowButton / required | ||
| }, | ||
| title: | ||
| type: string / required | ||
| link: { | ||
| href: | ||
| type: string (url) / required | ||
| text: | ||
| type: string / required | ||
| info: | ||
| type: string (adds more description to the link) / optional | ||
| } | ||
| } | ||
| ~~~ |
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,8 +1,9 @@ | ||
| {% set arrowButton = arrowNav.arrowButton %} | ||
|
|
||
| <section class="ma__arrow-nav {{ arrowButton.direction ? 'ma__arrow-nav--' ~ arrowButton.direction : '' }}"> | ||
| {% include "@atoms/01-buttons/arrow-button.twig" %} | ||
| <h2 class="ma__arrow-nav__title" data-label="{{ arrowNav.label }}"><span>{{ arrowNav.title }}</span></h2> | ||
| <a class="ma__arrow-nav__link" | ||
| href="{{ arrowNav.link.href }}" | ||
| title="{{ arrowNav.link.info }}">{{ arrowNav.link.text }}</a> | ||
| </section> | ||
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,33 +1,28 @@ | ||
| ### Description | ||
| This pattern shows a collection of inputs separated by a custom divider. | ||
|
|
||
| ### Status | ||
| * Stable as of 5.0.0 | ||
|
|
||
| ### Pattern Contains | ||
| * Any input type pattern can be rendered in this pattern by setting the `path` variable to the location of the pattern and setting the `data` variable to container of the data object of that pattern. | ||
| * {% include input.path with input.data %} | ||
|
|
||
| ### Variables | ||
| ~~~ | ||
| dividedInputs: { | ||
| title: | ||
| type: string / optional | ||
| required: | ||
| type: boolean, | ||
| divider: | ||
| type: string / optional, | ||
| inputs: [{ | ||
| path: | ||
| type: string / required | ||
| data: { | ||
| type: object / required (matches the pattern in the path) | ||
| } | ||
| }] | ||
| } | ||
| ~~~ | ||
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
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,30 +1,23 @@ | ||
| ### Description | ||
| This Pattern is a form with an large search input and button. | ||
|
|
||
| ### Status | ||
| * Stable as of 5.0.0 | ||
|
|
||
| ### Pattern Contains | ||
| * Input Text | ||
|
|
||
| ### Variables | ||
| ~~~ | ||
| form: { | ||
| content: { | ||
| action: | ||
| type: string / required | ||
| buttonText: | ||
| type: string / required | ||
| inputText: { | ||
| type: inputText / required | ||
| } | ||
| } | ||
| } | ||
| ~~~ |
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 |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| ### Description | ||
| This patterns shows quoted text along with a citation. | ||
|
|
||
| ### Status | ||
| * Stable as of 2.0.0 | ||
|
|
||
| ### Variables | ||
| ~~~ | ||
| callOut: { | ||
| text: | ||
| type: string / required | ||
| author: | ||
| type: string / required | ||
| title: | ||
| type: string / required | ||
| } | ||
| ~~~ |
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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| ### Description | ||
| This is a variant of the [Helpful Links](./?p=organisms-helpful-links) pattern showing an example rendered in two columns. | ||
|
|
||
| ### How to generate | ||
| * set the `columns` variable to "true" |
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 |
|---|---|---|
|
|
@@ -20,4 +20,4 @@ | |
| "info": "" | ||
| }] | ||
| } | ||
| } | ||
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 |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| ### Description | ||
| List of links that can be rendered stack or as two columns | ||
|
There was a problem hiding this comment. Could this pattern be a variant of a link list organism? There was a problem hiding this comment. Nevermind - I see this is done in a later PR! 👍 |
||
|
|
||
| ### Status | ||
| * Stable as of 5.0.0 | ||
|
|
||
| ### Pattern Contains | ||
| * Comp Heading | ||
| * Decorative Link | ||
|
|
||
| ### Variant options | ||
| * Rendered as [two columns](./?p=organisms-helpful-links-as-columns) | ||
|
|
||
|
|
||
| ### Variables | ||
| ~~~ | ||
| helpfulLinks: { | ||
| columns: | ||
| type: string ("", "true") / optional | ||
| compHeading: { | ||
| type: compHeading / required | ||
| }, | ||
| items: [{ | ||
| type: array of decorativeLink / required | ||
| }] | ||
| } | ||
| ~~~ | ||
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way to relate the arrow button to the arrow nav title/link content? Curious how a screenreader would announce this here...