Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add illustration to radio and checkbox tiles #296

Merged
merged 19 commits into from
Feb 16, 2022
Merged

Add illustration to radio and checkbox tiles #296

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c7ead3c
Add illustration tile, sample svg
jmdembe Feb 14, 2022
e8ea135
changed structure of illustration tile,removed css classes
jmdembe Feb 14, 2022
a415c84
fix for desktop and mobile
jmdembe Feb 15, 2022
8ece38a
apply styles to checkbox
jmdembe Feb 15, 2022
64faa3b
fix lint errors
jmdembe Feb 15, 2022
547753f
Edit class names for tiles with illustration
jmdembe Feb 15, 2022
80196c4
fix margin; edit classes on radio tiles
jmdembe Feb 15, 2022
5d78084
edit margin-right on image
jmdembe Feb 15, 2022
6677b03
remove "grid-col-auto" from radio text
jmdembe Feb 15, 2022
4dbe7e4
address first round of code review comments
jmdembe Feb 15, 2022
07411d8
remove span from option title, fix css
jmdembe Feb 15, 2022
1606098
fix desktop layout
jmdembe Feb 16, 2022
927d124
add and fix alt attribute on images
jmdembe Feb 16, 2022
d88c8fc
Update docs/_components/form-fields.md
jmdembe Feb 16, 2022
2ababfc
Update docs/_components/form-fields.md
jmdembe Feb 16, 2022
34f7f0a
make sure new changes are reflected
jmdembe Feb 16, 2022
44e0d07
moved fingerprint svg to docs; added flex-start to illustrated label
jmdembe Feb 16, 2022
33ecc3a
Add new change to CHANGELOG
jmdembe Feb 16, 2022
1c74d9d
address PR comments
jmdembe Feb 16, 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
Prev Previous commit
Next Next commit
apply styles to checkbox
@jmdembe
jmdembe committed Feb 16, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
commit 8ece38a73ddd80e716524400355fac4e39488c36
16 changes: 8 additions & 8 deletions docs/_components/form-fields.md
View file
Original file line number Diff line number Diff line change
@@ -270,14 +270,14 @@ Three styles of checkboxes are provided as well.
</li>
<li>
<input id="abc123" class="usa-checkbox__input usa-checkbox__input--tile" type="checkbox" name="abc123">
<label for="abc123" class="usa-radio__label">
<div class="img-container">
<img src = "{{ site.baseurl}}/assets/img/fingerprint-icon.svg" class="label-illustration">
<div>
<span>Option - Illustration</span>
<span class="usa-radio__label-description">Support text</span>
</div>
</div>
<label for="abc123" class="usa-checkbox__label">
<div class="container">
<img class="container__image" src="{{ site.baseurl}}/assets/img/fingerprint-icon.svg">
<div class="container__text">
<span class="grid-col-fill">Option - Illustration</span>
<span class="usa-checkbox__label-description">Support text</span>
</div>
</div>
</label>
</li>
<li>