Skip to content

Commit

Permalink
Merge pull request #75 from joshbruce/form-controls-extraction
Browse files Browse the repository at this point in the history 
[Text input, area, select, and date input]: Form controls made generic
  • Loading branch information
@jenbesergsa
jenbesergsa authored Aug 18, 2016
2 parents 038d751 + aeaf361 commit a9f5458
Show file tree
Hide file tree
Showing 10 changed files with 464 additions and 509 deletions.
69 changes: 69 additions & 0 deletions _includes/code/components/search-result-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{% capture code_preview %}
<h6>Without metadata</h6>
<div class="usa-grid usa-search-result">
<div class="usa-width-one-whole">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula pulvinar elit.</p>
</div>
</div>
<h6>With metadata</h6>
<div class="usa-grid usa-search-result">
<div class="usa-width-two-thirds">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula pulvinar elit.</p>
</div>
<div class="usa-width-one-third">
<p><strong>Metadata 1:</strong> This is a piece of metadata.</p>
</div>
</div>

<h6>With metadata and action</h6>
<div class="usa-grid usa-search-result">
<div class="usa-width-two-thirds">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula pulvinar elit.</p>
</div>
<div class="usa-width-one-third">
<p><span class="usa-label">New</span></p>
<p><strong>Metadata 1:</strong> This is a piece of metadata.</p>
<div class="usa-width-one-whole">
<div class="usa-action-container">
<span><a href="#"><i class="fa fa-archive"></i>Archive</a></span>
</div>
<div class="usa-action-container">
<span><a href="#"><i class="fa fa-pencil-square"></i>Edit</a></span>
</div>
<div class="usa-action-container delete">
<span><a href="#"><i class="fa fa-trash"></i>Delete</a></span>
</div>
</div>
</div>
</div>
{% endcapture %}

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

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

{% capture uikit-docs %}
<h4 class="usa-heading">Search result</h4>
<p>Note: The <code>div</code> with the class of "usa-grid" is not returned by the component and is used for previewing only.</p>
<h5>Required keys</h5>
<ul>
<li><strong>content:</strong> An array of HTML strings to display in the content area of the search result.</li>
</ul>

<h5>Optional keys</h5>
<ul>
<li><strong>metadata:</strong> An array of HTML strings, or components to display in the meta data area of the resource.</li>
<li><strong>actions:</strong> An array of Action configurations. See Action.</li>
</ul>

<h5>Metadata component required keys</h5>
<ul>
<li><strong>template:</strong> UI kit builder class name|function name. ex. "Other|label", is equivalent to SAMUIKit\Other::label() in PHP.</li>
<li><strong>config:</strong> The configuration of the component. See the component details for required and optional keys.</li>
</ul>
{% endcapture %}
64 changes: 64 additions & 0 deletions _includes/code/components/searchbar-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
{% capture code_preview %}
<h6>Search big</h6>

<div class="usa-grid">
<div class="usa-width-one-half">
<form class="usa-search usa-search-big">
<div role="search">
<label class="usa-sr-only" for="search-field-big">Search big</label>
<input id="search-field-big" type="search" name="search">
<button type="submit">
<span class="usa-search-submit-text">Search</span>
</button>
</div>
</form>
</div>
</div>

<h6>Search medium</h6>

<div class="usa-grid">
<div class="usa-width-one-half">
<form class="usa-search">
<div role="search">
<label class="usa-sr-only" for="search-field">Search medium</label>
<input id="search-field" type="search" name="search">
<button type="submit">
<span class="usa-search-submit-text">Search</span>
</button>
</div>
</form>
</div>
</div>

<h6>Search small</h6>

<div class="usa-grid">
<div class="usa-width-one-half">
<form class="usa-search usa-search-small">
<div role="search">
<label class="usa-sr-only" for="search-field-small">Search small</label>
<input id="search-field-small" type="search" name="search">
<button type="submit">
<span class="usa-sr-only">Search</span>
</button>
</div>
</form>
</div>
</div>
{% endcapture %}

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

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

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

<h5>Optional keys</h5>
{% endcapture %}
68 changes: 68 additions & 0 deletions _includes/code/elements/date-input-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
{% capture code_preview %}
<fieldset class="usa-fieldset-inputs">
<legend>Date of birth</legend>
<span class="usa-form-hint usa-datefield-hint" id="dobHint">For example: 04 28 1986</span>

<div class="usa-date-of-birth">
<div class="usa-datefield usa-form-group usa-form-group-month">
<label for="date_of_birth_1">Month</label>
<input aria-describedby="dobHint" class="usa-form-control" id="date_of_birth_1" name="date_of_birth_1" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="">
</div>
<div class="usa-datefield usa-form-group usa-form-group-day">
<label for="date_of_birth_2">Day</label>
<input aria-describedby="dobHint" class="usa-form-control" id="date_of_birth_2" name="date_of_birth_2" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="">
</div>
<div class="usa-datefield usa-form-group usa-form-group-year">
<label for="date_of_birth_3">Year</label>
<input aria-describedby="dobHint" class="usa-form-control" id="date_of_birth_3" name="date_of_birth_3" pattern="[0-9]{4}" type="number" min="1900" max="2000" value="">
</div>
</div>
</fieldset>

<div class="usa-input-error">
<fieldset class="usa-fieldset-inputs">
<legend class="usa-input-error-label">Date of birth</legend>
<span id="date_of_birth-input-error" class="usa-input-error-message" role="alert">Helpful error message</span>
<span class="usa-form-hint usa-datefield-hint" id="dobHint">For example: 04 28 1986</span>

<div class="usa-date-of-birth">
<div class="usa-datefield usa-form-group usa-form-group-month">
<label for="date_of_birth_1">Month</label>
<input aria-describedby="date_of_birth-input-error" class="usa-form-control" id="date_of_birth_1" name="date_of_birth_1" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="">
</div>
<div class="usa-datefield usa-form-group usa-form-group-day">
<label for="date_of_birth_2">Day</label>
<input aria-describedby="date_of_birth-input-error" class="usa-form-control" id="date_of_birth_2" name="date_of_birth_2" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="">
</div>
<div class="usa-datefield usa-form-group usa-form-group-year">
<label for="date_of_birth_3">Year</label>
<input aria-describedby="date_of_birth-input-error" class="usa-form-control" id="date_of_birth_3" name="date_of_birth_3" pattern="[0-9]{4}" type="number" min="1900" max="2000" value="">
</div>
</div>
</fieldset>
</div>
{% endcapture %}

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

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

{% capture uikit-docs %}
<h4 class="usa-heading">Date Input</h4>
{% include partials/formcontroloverview.html %}

<p><strong>Note:</strong> The name will be appended with 1, 2, 3, for month, day, and year, respectively.</p>

<h4 class="usa-heading">Date input</h4>
<h5>Optional keys</h5>
<ul>
<li><strong>month:</strong> The value of the month field.</li>
<li><strong>day:</strong> The value of the day field.</li>
<li><strong>year:</strong> The value of the year field.</li>
</ul>
{% endcapture %}
148 changes: 148 additions & 0 deletions _includes/code/elements/select-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
{% capture code_preview %}
<form>
<div>
<label for="options">Dropdown label</label>
<select name="options" id="options">
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
</div>
</form>

<form>
<div class="usa-input-error">
<label for="options" class="usa-input-error-label">Dropdown label</label>
<span id="options-input-error" class="usa-input-error-message" role="alert">Helpful error message</span>
<select name="options2" id="options" aria-describedby="options-input-error">
<option value="value1">Option A</option>
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
</div>
</form>

<div>
<fieldset class="usa-fieldset-inputs usa-sans">
<legend>Historical figures 1</legend>

<ul class="usa-unstyled-list">
<li>
<input id="apple-pie" type="checkbox" name="pies[]" value="apple-pie" checked />
<label for="apple-pie">Sojourner Truth</label>
</li>
<li>
<input id="key-lime-pie" type="checkbox" name="pies[]" value="key-lime-pie">
<label for="key-lime-pie">Frederick Douglass</label>
</li>
<li>
<input id="peach-pie" type="checkbox" name="pies[]" value="peach-pie">
<label for="peach-pie">Booker T. Washington</label>
</li>
<li>
<input id="disabled" type="checkbox" disabled />
<label for="disabled">George Washington Carver</label>
</li>
</ul>
</fieldset>
</div>

<div class="usa-input-error">
<fieldset class="usa-fieldset-inputs usa-sans">
<span id="pies-input-error" class="usa-input-error-message" role="alert">Helpful error message</span>
<legend class="usa-input-error-label">Historical figures 1</legend>

<ul class="usa-unstyled-list">
<li>
<input id="apple-pie2" type="checkbox" name="pies2[]" value="apple-pie" checked />
<label for="apple-pie2">Sojourner Truth</label>
</li>
<li>
<input id="key-lime-pie2" aria-describedby="pies-input-error" type="checkbox" name="pies2[]" value="key-lime-pie">
<label for="key-lime-pie2">Frederick Douglass</label>
</li>
<li>
<input id="peach-pie2" aria-describedby="pies-input-error" type="checkbox" name="pies2[]" value="peach-pie">
<label for="peach-pie2">Booker T. Washington</label>
</li>
<li>
<input id="disabled" aria-describedby="pies-input-error" type="checkbox" disabled />
<label for="disabled">George Washington Carver</label>
</li>
</ul>

</fieldset>
</div>

<div>
<fieldset class="usa-fieldset-inputs usa-sans">

<legend>Historical figures 2</legend>

<ul class="usa-unstyled-list">
<li>
<input id="pea-soup" type="radio" checked name="soup" value="pea">
<label for="pea-soup">Elizabeth Cady Stanton</label>
</li>
<li>
<input id="chicken-noodle" type="radio" name="soup" value="chicken-noodle">
<label for="chicken-noodle">Susan B. Anthony</label>
</li>
<li>
<input id="tomato" type="radio" name="soup" value="tomato">
<label for="tomato">Harriet Tubman</label>
</li>
</ul>

</fieldset>
</div>

<div class="usa-input-error">
<fieldset class="usa-fieldset-inputs usa-sans">

<legend class="usa-input-error-label">Historical figures 2</legend>
<span id="soup-input-error" class="usa-input-error-message" role="alert">Helpful error message</span>
<ul class="usa-unstyled-list">
<li>
<input id="pea-soup2" aria-describedby="soup-input-error" type="radio" checked name="soup2" value="pea">
<label for="pea-soup2">Elizabeth Cady Stanton</label>
</li>
<li>
<input id="chicken-noodle2" aria-describedby="soup-input-error" type="radio" name="soup2" value="chicken-noodle">
<label for="chicken-noodle2">Susan B. Anthony</label>
</li>
<li>
<input id="tomato2" aria-describedby="soup-input-error" type="radio" name="soup2" value="tomato">
<label for="tomato2">Harriet Tubman</label>
</li>
</ul>

</fieldset>
</div>
{% endcapture %}

{% capture uikit-php %}
// Returns unescaped HTML output without instantiating an object.
SAMUIKit\FormControls::select($config);
{% endcapture %}

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

{% capture uikit-docs %}
{% include partials/formcontroloverview.html %}

<h4 class="usa-heading">Select</h4>
<h5>Required keys</h5>
<ul>
<li><strong>type:</strong> dropdown|checkbox|radio</li>
<li><strong>options:</strong> An array of key-value pairs where the "key" is the option POST/GET value and "value" is the label for the option.</li>
</ul>

<h5>Optional keys</h5>
<ul>
<li><strong>selected:</strong> An array of option values to mark as selected/checked. Note: Only the checkbox type allows multiple selections.</li>
<li><strong>disabled:</strong> An array of option value to mark as disabled. Note: Only the checkbox type allows multiple selections.</li>
</ul>
{% endcapture %}
Loading

0 comments on commit a9f5458

Please sign in to comment.