Skip to content

Commit

Permalink
Merge pull request #76 from joshbruce/buttons-actions-support-form
Browse files Browse the repository at this point in the history 
[Buttons, Actions, Support form]: Remove dependency on JS for code example
  • Loading branch information
@jenbesergsa
jenbesergsa authored Aug 18, 2016
2 parents db36410 + aae2a1d commit 038d751
Show file tree
Hide file tree
Showing 9 changed files with 154 additions and 194 deletions.
18 changes: 18 additions & 0 deletions _includes/code/components/support-form-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% capture code_preview %}

{% endcapture %}

{% capture uikit-php %}
...
{% endcapture %}

{% capture uikit-js %}
...
{% endcapture %}

{% capture uikit-docs %}
<h4 class="usa-heading">Support form</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
{% endcapture %}
18 changes: 18 additions & 0 deletions _includes/code/elements/actions-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% capture code_preview %}

{% endcapture %}

{% capture uikit-php %}
...
{% endcapture %}

{% capture uikit-js %}
...
{% endcapture %}

{% capture uikit-docs %}
<h4 class="usa-heading">Actions</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
{% endcapture %}
72 changes: 72 additions & 0 deletions _includes/code/elements/buttons-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{% capture code_preview %}
<h6>Primary Button</h6>
<div class="button_wrapper">
<button>Default</button>
<button class="usa-button-active">Active</button>
<button class="usa-button-hover">Hover</button>
</div>

<h6>Secondary Buttons</h6>
<div class="button_wrapper">
<button class="usa-button-secondary">Default</button>
<button class="usa-button-secondary usa-button-active">Active</button>
<button class="usa-button-secondary usa-button-hover">Hover</button>
</div>

<div class="button_wrapper">
<button class="usa-button-outline" type="button">Default</button>
<button class="usa-button-outline usa-button-active">Active</button>
<button class="usa-button-outline usa-button-hover">Hover</button>
</div>

<div class="button_wrapper button_wrapper-dark">
<button class="usa-button-outline-inverse" type="button">Default</button>
<button class="usa-button-outline-inverse usa-button-active">Active</button>
<button class="usa-button-outline-inverse usa-button-hover">Hover</button>
</div>

<h6>Disabled Button</h6>
<div class="button_wrapper">
<button class="usa-button-disabled">Default</button>
</div>

<h6>Button with cancel</h6>
<div class="button_wrapper">
<a class="usa-cancel" href="#">cancel</a> <button>Cancel</button>
</div>

<h6>Dismiss Button</h6>
<div class="button_wrapper">
<button class="usa-button-dismiss"><span class="usa-sr-only">Dismiss</span></button>
</div>

<h6>Button Focus</h6>
<div class="button_wrapper">
<button class="usa-button-focus">Default</button>
<button class="usa-button-primary-alt usa-button-focus">Default</button>
<button class="usa-button-secondary usa-button-focus">Default</button>
</div>
{% endcapture %}

{% capture uikit-php %}
// render unescaped HTML string
echo SAMUIKit\Other::button($config);
{% endcapture %}

{% capture uikit-js %}
...
{% endcapture %}

{% capture uikit-docs %}
<h4 class="usa-heading">Buttons</h4>
<h5>Required keys</h5>
<ul>
<li><strong>title:</strong> The text to display within the button.</li>
</ul>

<h5>Optional keys</h5>
<ul>
<li><strong>type:</strong> primary|alt|secondary|gray|outline|outline-inverse|big|disabled (default is primary).</li>
<li><strong>cancel:</strong> Anchor href target for the cancel link. Usually not necessary.</li>
</ul>
{% endcapture %}
18 changes: 18 additions & 0 deletions _includes/code/elements/icons-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% capture code_preview %}

{% endcapture %}

{% capture uikit-php %}
...
{% endcapture %}

{% capture uikit-js %}
...
{% endcapture %}

{% capture uikit-docs %}
<h4 class="usa-heading">Icons</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
{% endcapture %}
38 changes: 2 additions & 36 deletions _includes/components/supportform.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,8 @@ <h3 class="usa-alert-heading">Extension of the US Web Design Standards</h3>
</div>
</div>

<div class="preview">
</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">Actions</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
</div>
</li>
</ul>
</div>
{% include code/components/support-form-code.html %}
{% include code/main.html %}

<div class="usa-accordion-bordered">
<button class="usa-button-unstyled usa-accordion-button"
Expand Down
40 changes: 4 additions & 36 deletions _includes/elements/actions.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<h2 id="actions">Actions</h2>

<p class="usa-font-lead">Actions allow users to manipulate data.</p>

<div class="usa-alert usa-alert-info">
Expand All @@ -7,42 +9,8 @@ <h3 class="usa-alert-heading">Extension of the US Web Design Standards</h3>
</div>
</div>

<div class="preview">
</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">Actions</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
</div>
</li>
</ul>
</div>
{% include code/elements/actions-code.html %}
{% include code/main.html %}

<div class="usa-accordion-bordered">
<button class="usa-button-unstyled usa-accordion-button"
Expand Down
94 changes: 8 additions & 86 deletions _includes/elements/buttons.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
<p class="usa-font-lead">See <a class="usa-external_link" href="https://standards.usa.gov/buttons/">US Web Design Standards</a> for details regarding when to use this element.</p>

<div class="usa-alert usa-alert-info">
<div class="usa-alert-body">
<h3 class="usa-alert-heading">Deviation from the US Web Design Standards</h3>
Expand All @@ -14,95 +12,19 @@ <h3 class="usa-alert-heading">Extenstion of the US Web Design Standards</h3>
</div>
</div>

<div class="preview">
<h6>Primary Button</h6>
<div class="button_wrapper">
<button>Default</button>
<button class="usa-button-active">Active</button>
<button class="usa-button-hover">Hover</button>
</div>

<h6>Secondary Buttons</h6>
<div class="button_wrapper">
<button class="usa-button-secondary">Default</button>
<button class="usa-button-secondary usa-button-active">Active</button>
<button class="usa-button-secondary usa-button-hover">Hover</button>
</div>

<div class="button_wrapper">
<button class="usa-button-outline" type="button">Default</button>
<button class="usa-button-outline usa-button-active">Active</button>
<button class="usa-button-outline usa-button-hover">Hover</button>
</div>

<div class="button_wrapper button_wrapper-dark">
<button class="usa-button-outline-inverse" type="button">Default</button>
<button class="usa-button-outline-inverse usa-button-active">Active</button>
<button class="usa-button-outline-inverse usa-button-hover">Hover</button>
</div>

<h6>Disabled Button</h6>
<div class="button_wrapper">
<button class="usa-button-disabled">Default</button>
</div>

<h6>Button with cancel</h6>
<div class="button_wrapper">
<a class="usa-cancel" href="#">cancel</a> <button>Cancel</button>
</div>

<h6>Dismiss Button</h6>
<div class="button_wrapper">
<button class="usa-button-dismiss"><span class="usa-sr-only">Dismiss</span></button>
</div>

<h6>Button Focus</h6>
<div class="button_wrapper">
<button class="usa-button-focus">Default</button>
<button class="usa-button-primary-alt usa-button-focus">Default</button>
<button class="usa-button-secondary usa-button-focus">Default</button>
</div>
</div>
{% include code/elements/buttons-code.html %}
{% include code/main.html %}

<div class="usa-accordion-bordered usa-accordion-docs">
<div class="usa-accordion-bordered">
<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::button($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 class="usa-button-unstyled" aria-expanded="true" aria-controls="element-documentation">
Element documentation
</button>
<div id="collapsible-2" class="usa-accordion-content" aria-hidden="true">
<h4 class="usa-heading">Buttons</h4>
<h5>Required keys</h5>
<ul>
<li><strong>title:</strong> The text to display within the button.</li>
</ul>

<h5>Optional keys</h5>
<ul>
<li><strong>type:</strong> primary|alt|secondary|gray|outline|outline-inverse|big|disabled (default is primary).</li>
<li><strong>cancel:</strong> Anchor href target for the cancel link. Usually not necessary.</li>
</ul>
<div id="element-documentation" class="usa-accordion-content" aria-hidden="false">
<p>See <a class="usa-external_link" href="https://standards.usa.gov/buttons/">US Web Design Standards</a> for details regarding when to use this element.</p>
</div>
</li>
</ul>
</div>

40 changes: 4 additions & 36 deletions _includes/elements/icons.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
<h2 id="icons">Icons</h2>

<p class="usa-font-lead">Icons are used to communicate without words.</p>

<div class="usa-alert usa-alert-info">
Expand All @@ -7,42 +9,8 @@ <h3 class="usa-alert-heading">Extension of the US Web Design Standards</h3>
</div>
</div>

<div class="preview">
</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">Actions</h4>
<h5>Required keys</h5>

<h5>Optional keys</h5>
</div>
</li>
</ul>
</div>
{% include code/elements/icons-code.html %}
{% include code/main.html %}

<div class="usa-accordion-bordered">
<button class="usa-button-unstyled usa-accordion-button"
Expand Down
Loading

0 comments on commit 038d751

Please sign in to comment.