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

Jump to bottom

Update button component previews #58

Merged
merged 6 commits into from
Mar 5, 2018
Merged

Update button component previews #58

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90d5bc4
Remove active state, add space between
Feb 26, 2018
3626f2f
Adjust icons tab
Feb 26, 2018
22f4b3d
Remove background color
Feb 26, 2018
51069be
Add example of small toggle button with icons
Feb 26, 2018
3108375
add favicon
Feb 28, 2018
bbc9d68
button icon dropdown integration
Feb 28, 2018
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
15 changes: 6 additions & 9 deletions components/02-components/buttons/01-basic/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
<div class="slab slab--{{modifier}}" style="padding: 2rem">
<div class="slab slab--{{modifier}}" style="padding: 1rem 2rem">
<div>Standard:</div>
<button class="button--standard">Basic button</button>
<button class="is-active button--standard">Active button</button>
<button class="button--standard" style="margin-right: 2rem">Basic button</button>
<button class="is-disabled button--standard">Inactive button</button>
</div>
<div class="slab slab--{{modifier}}" style="padding: 2rem">
<div class="slab slab--{{modifier}}" style="padding: 1rem 2rem">
<div>Call to action:</div>
<button class="button--cta{{button}}">Basic button</button>
<button class="is-active button--cta{{button}}">Active button</button>
<button class="button--cta{{button}}" style="margin-right: 2rem">Basic button</button>
<button class="is-disabled button--cta{{button}}">Inactive button</button>
</div>
<div class="slab slab--{{modifier}}" style="padding: 2rem">
<div class="slab slab--{{modifier}}" style="padding: 1rem 2rem">
<div>Alternate:</div>
<button class="button--alt{{button}}">Basic button</button>
<button class="is-active button--alt{{button}}">Active button</button>
<button class="button--alt{{button}}" style="margin-right: 2rem">Basic button</button>
<button class="is-disabled button--alt{{button}}">Inactive button</button>
</div>
149 changes: 41 additions & 108 deletions components/02-components/buttons/02-buttons-with-icons/buttons-with-icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,55 @@
<div class="slab slab--neutral" style="padding: 1rem 2rem">
Browse button: For links to the datatable view
<div style="padding-bottom: 10px;">
<button class="button--standard button--browse">Button</button>
<button class="button--cta button--browse">Button</button>
<button class="button--alt button--browse">Button</button>
<button class="button--cta-primary button--browse">Button</button>
<button class="button--alt-primary button--browse">Button</button>
<button class="button--cta-secondary button--browse">Button</button>
<button class="button--alt-secondary button--browse">Button</button>
</div>
<div class="slab" style="padding: 1rem 2rem">
<div>Browse button: For links to the datatable view</div>
<button class="button--standard button--browse" style="margin-right: 2rem">Button</button>

Document button
<div style="padding-bottom: 10px;">
<button class="button--standard button--document">Button</button>
<button class="button--cta button--document">Button</button>
<button class="button--alt button--document">Button</button>
<button class="button--cta-primary button--document">Button</button>
<button class="button--alt-primary button--document">Button</button>
<button class="button--cta-secondary button--document">Button</button>
<button class="button--alt-secondary button--document">Button</button>
</div>
<div style="margin-top: 2rem">Document button: for opening documents</div>
<button class="button--standard button--document" style="margin-right: 2rem">Button</button>

Download button
<div style="padding-bottom: 10px;">
<button class="button--standard button--download">Button</button>
<button class="button--cta button--download">Button</button>
<button class="button--alt button--download">Button</button>
<button class="button--cta-primary button--download">Button</button>
<button class="button--alt-primary button--download">Button</button>
<button class="button--cta-secondary button--download">Button</button>
<button class="button--alt-secondary button--download">Button</button>
</div>
<div style="margin-top: 2rem">List button: to show a list view</div>
<button class="button--standard button--list" style="margin-right: 2rem">Button</button>

List button: list view
<div style="padding-bottom: 10px;">
<button class="button--standard button--list">Button</button>
<button class="button--cta button--list">Button</button>
<button class="button--alt button--list">Button</button>
<button class="button--cta-primary button--list">Button</button>
<button class="button--alt-primary button--list">Button</button>
<button class="button--cta-secondary button--list">Button</button>
<button class="button--alt-secondary button--list">Button</button>
</div>
<div style="margin-top: 2rem">Map button: to see a map view</div>
<button class="button--standard button--map" style="margin-right: 2rem">Button</button>

Map button
<div style="padding-bottom: 10px;">
<button class="button--standard button--map">Button</button>
<button class="button--cta button--map">Button</button>
<button class="button--alt button--map">Button</button>
<button class="button--cta-primary button--map">Button</button>
<button class="button--alt-primary button--map">Button</button>
<button class="button--cta-secondary button--map">Button</button>
<button class="button--alt-secondary button--map">Button</button>
</div>
<div style="margin-top: 2rem">Search button: search with text</div>
<button class="button--standard button--search--text" style="margin-right: 2rem">Button</button>

Search button: search with text
<div style="padding-bottom: 10px;">
<button class="button--standard button--search--text">Button</button>
<button class="button--cta button--search--text">Button</button>
<button class="button--alt button--search--text">Button</button>
<button class="button--cta-primary button--search--text">Button</button>
<button class="button--alt-primary button--search--text">Button</button>
<button class="button--cta-secondary button--search--text">Button</button>
<button class="button--alt-secondary button--search--text">Button</button>
<div style="margin-top: 2rem">Subscribe button: for subscribing to calendar updates in different formats</div>
<button class="button--standard button--subscribe" style="margin-right: 2rem">Button</button>
<div class="export-widget">
<div class="dropdown">
<button class="button button--standard dropdown__button button--subscribe">Subscribe</button>
</div>

Subscribe button
<div style="padding-bottom: 10px;">
<button class="button--standard button--subscribe">Button</button>
<button class="button--cta button--subscribe">Button</button>
<button class="button--alt button--subscribe">Button</button>
<button class="button--cta-primary button--subscribe">Button</button>
<button class="button--alt-primary button--subscribe">Button</button>
<button class="button--cta-secondary button--subscribe">Button</button>
<button class="button--alt-secondary button--subscribe">Button</button>
</div>

Two candidates button: toggle two-candidate view on map comparison
<div style="padding-bottom: 10px;">
<button class="button--standard button--two-candidates">Button</button>
<button class="button--cta button--two-candidates">Button</button>
<button class="button--alt button--two-candidates">Button</button>
<button class="button--cta-primary button--two-candidates">Button</button>
<button class="button--alt-primary button--two-candidates">Button</button>
<button class="button--cta-secondary button--two-candidates">Button</button>
<button class="button--alt-secondary button--two-candidates">Button</button>
<div style="margin-top: 2rem">Download button: to initiate a download with a choice of formats</div>
<button class="button--standard button--download" style="margin-right: 2rem">Button</button>
<div class="export-widget">
<div class="dropdown">
<button class="button button--standard dropdown__button button--download--dropdown">Download</button>
</div>

Export button
<div style="padding-bottom: 10px;">
<button class="button--standard button--export">Button</button>
<button class="button--cta button--export">Button</button>
<button class="button--alt button--export">Button</button>
<button class="button--cta-primary button--export">Button</button>
<button class="button--alt-primary button--export">Button</button>
<button class="button--cta-secondary button--export">Button</button>
<button class="button--alt-secondary button--export">Button</button>
</div>

Go button
<div style="padding-bottom: 10px;">
<button class="button--standard button--go">Button</button>
<button class="button--cta button--go">Button</button>
<button class="button--alt button--go">Button</button>
<button class="button--cta-primary button--go">Button</button>
<button class="button--alt-primary button--go">Button</button>
<button class="button--cta-secondary button--go">Button</button>
<button class="button--alt-secondary button--go">Button</button>
<div style="margin-top: 2rem">Add to calendar button</div>
<button class="button--standard button--add-calendar" style="margin-right: 2rem">Button</button>
<div class="export-widget">
<div class="dropdown">
<button class="button--standard dropdown__button dropdown__button--mini button--add-calendar--mini"><span class="u-visually-hidden">Download calendar</span></button>
</div>
</div>

Table button
<div style="padding-bottom: 10px;">
<button class="button--standard button--table">Button</button>
<button class="button--cta button--table">Button</button>
<button class="button--alt button--table">Button</button>
<button class="button--cta-primary button--table">Button</button>
<button class="button--alt-primary button--table">Button</button>
<button class="button--cta-secondary button--table">Button</button>
<button class="button--alt-secondary button--table">Button</button>
</div>
<div style="margin-top: 2rem">Two candidates button: toggle two-candidate view on map comparison</div>
<button class="button--standard button--two-candidates" style="margin-right: 2rem">Button</button>

<div style="margin-top: 2rem">Back button</div>
<button class="button--standard button--back" style="margin-right: 2rem">Button</button>

<div style="margin-top: 2rem">Go button: to initiate the next step in a sequence</div>
<button class="button--standard button--go" style="margin-right: 2rem">Go</button>

<div style="margin-top: 2rem">Export button: for exporting files</div>
<button class="button--standard button--export" style="margin-right: 2rem">Button</button>

<div style="margin-top: 2rem">Table button</div>
<button class="button--standard button--table" style="margin-right: 2rem">Button</button>
</div>
2 changes: 1 addition & 1 deletion components/02-components/buttons/03-sizes/sizes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="slab slab--neutral" style="padding: 1rem 2rem">
<div class="slab" style="padding: 1rem 2rem">
<div style="padding-bottom: 10px;">
Small: <button class="button--standard button--sm">Button</button>
</div>
Expand Down
13 changes: 13 additions & 0 deletions components/02-components/filters/04-toggle-button/01-horizontal/horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,16 @@
</fieldset>
</div>
</div>

<div class="slab slab--inline u-padding--left u-padding--right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt">Grid</button>
</div>
<div class="fc-right">
<div class="fc-button-group toggles--buttons">
<button type="button" class="fc-monthTime-button fc-button fc-state-default fc-corner-left button button--list button--alt fc-state-active"><span class="u-visually-hidden">List</button>
<button type="button" class="fc-month-button fc-button fc-state-default fc-corner-right button button--grid button--alt"><span class="u-visually-hidden">Grid</button>
</div>
</div>
</div>