-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #73 from joshbruce/labels-lists-links
[Links, lists, labels]: Separating code under new pattern
- Loading branch information
Showing
6 changed files
with
138 additions
and
161 deletions.
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 |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| {% capture code_preview %} | ||
| <h6>Small</h6> | ||
| <span class="usa-label">New</span> | ||
|
|
||
| <h6>Large</h6> | ||
| <span class="usa-label-big">New</span> | ||
|
|
||
| <h6>Small surrounded by <a href="#">|</a></h6> | ||
| <a href="#"><span class="usa-label">New</span></a> | ||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-php %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-js %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-docs %} | ||
| <h4 class="usa-heading">Labels</h4> | ||
| <h5>Required keys</h5> | ||
| <ul> | ||
| <li><strong>title:</strong> The text to display within the label.</li> | ||
| </ul> | ||
| <h5>Optional keys</h5> | ||
| <ul> | ||
| <li><strong>big:</strong> true|false (default is false). Whether to use the "big" label from USWDS or not.</li> | ||
| <li><strong>surround:</strong> HTML string, separated by a vertical bar to wrap the label span in.</li> | ||
| </ul> | ||
| <h5>Keys being reconsidered</h5> | ||
| <ul> | ||
| <li><strong>moreClass:</strong> Extra classes to add to the label span.</li> | ||
| <li><strong>background:</strong> Class name for background color.</li> | ||
| <li><strong>icon:</strong> Approved font-awesome icon to include. See Icon.</li> | ||
| </ul> | ||
| {% endcapture %} |
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,28 @@ | ||
| {% capture code_preview %} | ||
| <p><a href="#">This</a> is a text link on a light background.</p> | ||
|
|
||
| <p><a class="usa-color-text-visited" href="#">This</a> is a visited link.</p> | ||
|
|
||
| <p>This is a link that goes to an <a class="usa-external_link" href="http://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif">external website</a>.</p> | ||
|
|
||
| <div class="usa-background-dark"> | ||
| <p><a href="#">This</a> is a text link on a dark background.</p> | ||
| </div> | ||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-php %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-js %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-docs %} | ||
| <h4 class="usa-heading">Links</h4> | ||
| <h5>Required keys</h5> | ||
|
|
||
| <h5>Optional keys</h5> | ||
| {% endcapture %} |
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,44 @@ | ||
| {% capture code_preview %} | ||
| <div class="usa-grid-full"> | ||
| <div class="usa-width-one-third"> | ||
|
|
||
| <h6 class="usa-heading-alt">Unordered list</h6> | ||
|
|
||
| <ul> | ||
| <li>Unordered list item</li> | ||
| <li>Unordered list item</li> | ||
| <li>Unordered list item</li> | ||
| </ul> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="usa-width-one-third"> | ||
|
|
||
| <h6 class="usa-heading-alt mt0">Ordered list</h6> | ||
|
|
||
| <ol> | ||
| <li>Ordered list item</li> | ||
| <li>Ordered list item</li> | ||
| <li>Ordered list item</li> | ||
| </ol> | ||
|
|
||
| </div> | ||
| </div> | ||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-php %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-js %} | ||
| ... | ||
|
|
||
| {% endcapture %} | ||
|
|
||
| {% capture uikit-docs %} | ||
| <h4 class="usa-heading">Lists</h4> | ||
| <h5>Required keys</h5> | ||
|
|
||
| <h5>Optional keys</h5> | ||
| {% endcapture %} |
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,64 +1,14 @@ | ||
| <h2 class="usa-heading" id="labels">Labels</h2> | ||
|
|
||
| <p class="usa-font-lead">See <a class="usa-external_link" href="https://standards.usa.gov/labels/">US Web Design Standards</a> for details regarding when to use this element.</p> | ||
|
|
||
| <div class="preview"> | ||
|
|
||
| <h6>Small</h6> | ||
| <span class="usa-label">New</span> | ||
|
|
||
| <h6>Large</h6> | ||
| <span class="usa-label-big">New</span> | ||
|
|
||
| <h6>Small surrounded by <a href="#">|</a></h6> | ||
| <a href="#"><span class="usa-label">New</span></a> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="usa-accordion-bordered usa-accordion-docs"> | ||
| <ul class="usa-unstyled-list"> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-0"> | ||
| PHP UI kit usage | ||
| </button> | ||
| <div id="collapsible-0" class="usa-accordion-content" aria-hidden="true"> | ||
| <pre><code class="language-php"> | ||
| // render unescaped HTML string | ||
| echo SAMUIKit\Other::label($config); | ||
| </code></pre> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-1"> | ||
| JavaScript UI kit usage | ||
| </button> | ||
| <div id="collapsible-1" class="usa-accordion-content" aria-hidden="true"> | ||
| <pre><code class="language-js"> | ||
| </code></pre> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="true" aria-controls="collapsible-2"> | ||
| UI kit documentation | ||
| </button> | ||
| <div id="collapsible-2" class="usa-accordion-content" aria-hidden="true"> | ||
| <h4 class="usa-heading">Labels</h4> | ||
| <h5>Required keys</h5> | ||
| <ul> | ||
| <li><strong>title:</strong> The text to display within the label.</li> | ||
| </ul> | ||
| <h5>Optional keys</h5> | ||
| <ul> | ||
| <li><strong>big:</strong> true|false (default is false). Whether to use the "big" label from USWDS or not.</li> | ||
| <li><strong>surround:</strong> HTML string, separated by a vertical bar to wrap the label span in.</li> | ||
| </ul> | ||
| <h5>Keys being reconsidered</h5> | ||
| <ul> | ||
| <li><strong>moreClass:</strong> Extra classes to add to the label span.</li> | ||
| <li><strong>background:</strong> Class name for background color.</li> | ||
| <li><strong>icon:</strong> Approved font-awesome icon to include. See Icon.</li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| {% include code/elements/labels-code.html %} | ||
| {% include code/main.html %} | ||
|
|
||
| <div class="usa-accordion-bordered"> | ||
| <button class="usa-button-unstyled usa-accordion-button" | ||
| aria-expanded="true" aria-controls="collapsible-0"> | ||
| Documentation | ||
| </button> | ||
| <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content"> | ||
| <p>See <a class="usa-external_link" href="https://standards.usa.gov/labels/">US Web Design Standards</a> for details regarding when to use this element.</p> | ||
| </div> | ||
| </div> |
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,66 +1,15 @@ | ||
| <h2 class="usa-heading" id="lists">Lists</h2> | ||
|
|
||
| <p class="usa-font-lead">See <a class="usa-external_link" href="https://standards.usa.gov/typography/#lists">US Web Design Standards</a> for details regarding when to use this element.</p> | ||
| {% include code/elements/lists-code.html %} | ||
| {% include code/main.html %} | ||
|
|
||
| <div class="preview preview-lists"> | ||
| <div class="usa-accordion-bordered"> | ||
| <button class="usa-button-unstyled usa-accordion-button" | ||
| aria-expanded="true" aria-controls="collapsible-0"> | ||
| Documentation | ||
| </button> | ||
| <div id="collapsible-0" aria-hidden="false" class="usa-accordion-content"> | ||
| <p>See <a class="usa-external_link" href="https://standards.usa.gov/typography/#lists">US Web Design Standards</a> for details regarding when to use this element.</p> | ||
|
|
||
| <div class="usa-grid-full"> | ||
| <div class="usa-width-one-third"> | ||
|
|
||
| <h6 class="usa-heading-alt">Unordered list</h6> | ||
|
|
||
| <ul> | ||
| <li>Unordered list item</li> | ||
| <li>Unordered list item</li> | ||
| <li>Unordered list item</li> | ||
| </ul> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="usa-width-one-third"> | ||
|
|
||
| <h6 class="usa-heading-alt mt0">Ordered list</h6> | ||
|
|
||
| <ol> | ||
| <li>Ordered list item</li> | ||
| <li>Ordered list item</li> | ||
| <li>Ordered list item</li> | ||
| </ol> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="usa-accordion-bordered usa-accordion-docs"> | ||
| <ul class="usa-unstyled-list"> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-0"> | ||
| PHP UI kit usage | ||
| </button> | ||
| <div id="collapsible-0" class="usa-accordion-content" aria-hidden="true"> | ||
| <pre><code class="language-php"> | ||
| </code></pre> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="false" aria-controls="collapsible-1"> | ||
| JavaScript UI kit usage | ||
| </button> | ||
| <div id="collapsible-1" class="usa-accordion-content" aria-hidden="true"> | ||
| <pre><code class="language-js"> | ||
| </code></pre> | ||
| </div> | ||
| </li> | ||
| <li> | ||
| <button class="usa-button-unstyled" aria-expanded="true" aria-controls="collapsible-2"> | ||
| UI kit documentation | ||
| </button> | ||
| <div id="collapsible-2" class="usa-accordion-content" aria-hidden="true"> | ||
| <h4 class="usa-heading">Links</h4> | ||
| <h5>Required keys</h5> | ||
|
|
||
| <h5>Optional keys</h5> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> |