Skip to content
This repository was archived by the owner on Sep 29, 2025. It is now read-only.

Input groups #433

Open
dannyk3941 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Input groups #433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d65faf
feat: input-group component base styles with predictive search field
dannyk3941 Aug 16, 2022
456ebe4
chore: inital file upload component
dannyk3941 Oct 7, 2022
bb3586e
feat: time picker field with input type number and text with input mask
dannyk3941 Oct 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 59 additions & 18 deletions ds-css-v2/demo-components/form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="../../dist/styles.css">
<!-- Font awesome loaded locally from assets-->
<link rel="stylesheet" href="../../assets/fontawesome/css/all.min.css">
<script src="https://unpkg.com/imask"></script>

</head>
<body>
Expand Down Expand Up @@ -104,6 +105,38 @@ <h3>Password (Hash) Field</h3>
</div>
</div>

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Add Tags</label>
<span class="cbp-form__description">Required.</span>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This password does not match our records</span>
<div class="cbp-form__password">
<input type="text" name="tag" id="tag" placeholder="Enter Password"></input>
<button type="button">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Input Group</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
Expand Down Expand Up @@ -207,37 +240,43 @@ <h3>Numeric Switch Field</h3>
<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="number" class="cbp-form__label">Phone Number</label>
<span class="cbp-form__description">Required. Country code first, then local number.</span>
<label for="time" class="cbp-form__label">Arrival Time</label>
<span class="cbp-form__description">Required. (HH:MM Format) UTC-6 America/New York</span>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This field is required.</span>
<div class="cbp-form__number cbp-form__number--phone" id="phone-number-demo">
<div class="cbp-dropdown-wrapper" id="dropdown-demo-2">
<button class="cbp-dropdown__custom" id="area-code" data-toggle="dropdown">
<span class="cbp-dropdown__placeholder">US/USA +1</span>
</button>
<div class="cbp-dropdown" id="area-code">
<a href="#" class="cbp-dropdown__item">AF/AFG +93</a>
<a href="#" class="cbp-dropdown__item">AL/ALB +355</a>
<a href="#" class="cbp-dropdown__item">DZ/DZA +213</a>
<a href="#" class="cbp-dropdown__item">AS/ASM +1-684</a>
<a href="#" class="cbp-dropdown__item">AO/AGO +244</a>
</div>
<!-- Component: Time Picker - Default -->
<div class="cbp-form__time" id="time-picker-demo">
<div class="cbp-form__time--input">
<i class="far fa-clock"></i>
<!-- <input type="time" name="time-picker-demo" id="time-picker-demo"> -->
<!-- <input type="text" name="time-picker-demo" placeholder="HH:MM" data-time-period="PM"> -->
<input type="number" name="demo-hours" id="demo-hours" class="hours" placeholder="HH" min="0" max="23" data-time-period="PM" oninput="validity.valid||(value='');">
<span>:</span>
<input type="number" name="demo-minutes" id="demo-minutes" class="minutes" placeholder="MM" min="0" max="59" oninput="validity.valid||(value='');">
</div>
<div class="cbp-btn__time--period">
<button>AM</button>
<button>PM</button>
<button>24HR</button>
</div>
<input type="tel" name="phone" id="phone" placeholder="Enter Phone Number"></input>
</div>
<!-- Component End -->
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Phone Number Field</h3>
<h3>Time Picker Field (Default)</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="phoneError(event, 'phone-number-demo')">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="tpDemo(event, 'time-picker-demo')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="phoneDisable(event, 'phone-number-demo')">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="tpDemo(event, 'time-picker-demo')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="tpDemo(event, 'time-picker-demo')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

Expand All @@ -254,5 +293,7 @@ <h3>Phone Number Field</h3>
<script src="../../js/cbp-components-js/form.js"></script>
<script src="../../js/cbp-components-js/selectDropdown.js"></script>
<script src="../../js/cbp-components-js/number.js"></script>
<script src="../../js/demo/timepicker-demo.js"></script>
<script src="../../js/cbp-components-js/timepicker.js"></script>
</body>
</html>
263 changes: 263 additions & 0 deletions ds-css-v2/demo-components/input-group/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBP Theme Boilerplate</title>
<link rel="stylesheet" href="../../dist/styles.css">
<!-- Font awesome loaded locally from assets-->
<link rel="stylesheet" href="../../assets/fontawesome/css/all.min.css">

</head>
<body>
<div class="cbp-grid-container">
<div class="cbp-row margin-top-5">
<div class="cbp-grid-col-full">
<h1>Input Group Components</h1>
</div>
</div>
<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Add Person to List</label>
<span class="cbp-form__description">Required.</span>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This field is required.</span>
<div class="cbp-field-group" id="demo-button-text-field">
<input type="text" name="tag" id="tag" placeholder="Add Person"></input>
<button type="button">
Add Person
</button>
</div>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Input Text Group</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-button-text-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-button-text-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-button-text-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Add Tags</label>
<span class="cbp-form__description">Required.</span>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This password does not match our records</span>
<div class="cbp-field-group" id="demo-square-button-field">
<input type="text" name="tag" id="tag" placeholder="Add Tag Keyword"></input>
<button type="button" class="square">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="bacon-tags" style="display: flex;">
<div class="cbp-chips" style="margin-right: 8px;">
<span>Pepperoni</span>
<div class="plus-border">
<i class="fas fa-plus"></i>
</div>
</div>
<div class="cbp-chips">
<span>Mushroom</span>
<div class="plus-border">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Input Group</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-square-button-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-square-button-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-square-button-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Search</label>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This password does not match our records</span>
<div class="cbp-field-group" id="demo-square-button-field">
<input type="text" name="tag" id="tag" placeholder="Enter Search Criteria"></input>
<button type="button" class="square">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Search Field</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-square-button-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-square-button-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-square-button-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Search</label>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This password does not match our records</span>
<form autocomplete="off" style="margin: 0;">
<div class="cbp-field-group autocomplete">
<input type="text" name="myInput" id="myInput" placeholder="Enter Search Criteria"></input>
<button type="button" class="square">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>Search Field w/ Predictive Text</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-square-button-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-square-button-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-square-button-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<!-- <div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label for="password" class="cbp-form__label">Search</label>
<span class="cbp-form__description cbp-form__description--error" hidden><i class="fas fa-exclamation-triangle"></i>&nbsp;This password does not match our records</span>
<form>
<div class="cbp-field-group">
<input type="text" name="autocomplete-demo" id="autocomplete-demo" placeholder="Enter Search Criteria" autocomplete="off"></input>
<button type="button" class="square">
<i class="fas fa-search"></i>
</button>
</div>
<ul class="cbp-autocomplete">
<li class="cbp-autocomplete__item">Uganda</li>
<li class="cbp-autocomplete__item">United States of America</li>
<li class="cbp-autocomplete__item">United Emerites</li>
</ul>
</form>
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>New Search Field w/ Predictive Text</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-square-button-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-square-button-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-square-button-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div> -->

<div class="cbp-row">
<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<div class="cbp-form-wrapper">
<label class="cbp-form__label">Upload Files</label>
<span class="cbp-form__description">Accepted files: .doc, .docx, .pdf, .jpg, .png, .gif. Max File size 10mb per file. Up to 5 files may be uploaded.</span>
<label for="file-upload-demo" class="cbp-form__file">
<i class="fas fa-file-alt"></i>
Drag & Drop Files Here or
<button class="cbp-btn cbp-btn__secondary" tabindex="-1">
<i class="fas fa-upload"></i>
browse
</button>
<input type="file" name="file-upload-demo" id="file-upload-demo" multiple>
</label>
<!-- <div class="cbp-form__upload">
<span>super_duper-fun_times_at_the_beach.jpg</span>
<button><i class="fa fa-times" aria-hidden="true"></i></button>
<progress value="0" max="100">70 %</progress>
</div> -->
<!-- <div class="cbp-form__upload cbp-form__upload--error">
<div>
<span>super_duper-fun_times_at_the_beach.jpg</span>
<button><i class="fa fa-times" aria-hidden="true"></i></button>
</div>
<hr>
<span>
<i class="fas fa-exclamation-triangle"></i>File size exceeds the limit.
</span>
</div> -->
</div>
</div>

<div class="cbp-grid-col-12-sm cbp-grid-col-4-md cbp-grid-col-6-lg cbp-grid-col-6-xl">
<h3>File Upload</h3>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="invalid" id="invalid" onchange="invalidateInputGroup(event, 'demo-square-button-field', 'component')">
<label for="invalid">Error</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="disable" id="disable" onchange="disableInputGroup(event, 'demo-square-button-field', 'component')">
<label for="disable">Disable</label>
</div>
<div class="form-check">
<input type="checkbox" class="cbp-form__checkbox" name="readonly" id="readonly" onchange="readOnlyInputGroup(event, 'demo-square-button-field', 'component')">
<label for="readonly">Read Only</label>
</div>
</div>
</div>

<footer class="cbp-footer">
<span class="font-sans-3xs text-ls-1 text-base-dark">Made with ♥️ by Creative Services</span>
</footer>
</div>

<!-- Required JS for USWDS -->
<script src="../../js/uswds.min.js"></script>
<!-- JS for dropdowns -->
<script src="../../js/universalHeader.js"></script>
<script src="../../js/cbp-components-js/toggle.js"></script>
<script src="../../js/cbp-components-js/demo.js"></script>
<script src="../../js/utilities/autocomplete.js"></script>
<script src="../../js/utilities/new-autocomplete.js"></script>
<script src="../../js/cbp-components-js/fileupload.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions ds-css-v2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ <h3 class="font-sans-md text-md text-ls-1 text-base-darkest padding-top-2">Compl
<th><a href="demo-components/form-select/" class="cbp-link__inline">Dropdown</a></th>
<th></th>
</tr>
<tr>
<th><a href="demo-components/input-group/" class="cbp-link__inline">Input Group</a></th>
<th></th>
</tr>
<tr>
<th><a href="demo-components/breadcrumb/" class="cbp-link__inline">Breadcrumb</a></th>
<th></th>
Expand Down
Loading