├── public ├── js │ └── .gitkeep ├── components │ ├── page-custom.png │ ├── example-image.png │ ├── page-meeting.png │ ├── page-resource.png │ ├── page-updates.png │ ├── page-collection.png │ ├── thumbnail--form1.png │ ├── type-ahead-only.gif │ ├── page-commissioner.png │ ├── page-document-feed.png │ ├── is_active_typeahead.png │ ├── page-reports-landing.png │ ├── page-reporting-example.png │ ├── type-ahead-and-free-text.gif │ ├── i-table--primary.svg │ ├── i-elections--primary.svg │ └── i-profiles--primary.svg └── nginx.conf ├── components ├── 02-components │ ├── buttons │ │ ├── 03-sizes │ │ │ ├── sizes.config.json │ │ │ ├── sizes.html │ │ │ └── README.md │ │ ├── 02-buttons-with-icons │ │ │ ├── buttons-with-icons.config.json │ │ │ └── README.md │ │ └── 01-basic │ │ │ ├── basic.config.json │ │ │ ├── basic.html │ │ │ └── README.md │ ├── filter-tags │ │ ├── filter-tags.config.json │ │ └── README.md │ ├── filters │ │ ├── 06-range │ │ │ ├── 01-range │ │ │ │ ├── range.config.json │ │ │ │ ├── README.md │ │ │ │ └── range.html │ │ │ └── 02-range-limited │ │ │ │ ├── range-limited.config.json │ │ │ │ └── README.md │ │ ├── 02-radio-buttons │ │ │ ├── radio-buttons.config.json │ │ │ ├── radio-buttons.html │ │ │ └── README.md │ │ ├── 05-cycle-select │ │ │ ├── cycle-select.config.json │ │ │ ├── README.md │ │ │ └── cycle-select.html │ │ ├── 01-checkboxes │ │ │ ├── 01-multiple │ │ │ │ ├── multiple.config.json │ │ │ │ ├── multiple.html │ │ │ │ └── README.md │ │ │ └── 02-standalone │ │ │ │ ├── standalone.config.json │ │ │ │ ├── README.md │ │ │ │ └── standalone.html │ │ ├── 04-toggle-button │ │ │ ├── 02-vertical │ │ │ │ ├── vertical.config.json │ │ │ │ ├── README.md │ │ │ │ └── vertical.html │ │ │ └── 01-horizontal │ │ │ │ ├── horizontal.config.json │ │ │ │ ├── README.md │ │ │ │ └── horizontal.html │ │ ├── 03-dropdowns │ │ │ ├── 01-single-select │ │ │ │ ├── single-select.config.json │ │ │ │ ├── single-select.html │ │ │ │ └── README.md │ │ │ ├── 02-multi-select │ │ │ │ ├── multi-select.config.json │ │ │ │ └── README.md │ │ │ └── 03-multi-select-with-suggestions │ │ │ │ ├── multi-select-with-suggestions.config.json │ │ │ │ └── README.md │ │ └── 07-search │ │ │ ├── 03-free-text-only │ │ │ ├── free-text-only.config.json │ │ │ ├── README.md │ │ │ └── free-text-only.html │ │ │ ├── 01-type-ahead-only │ │ │ ├── type-ahead-only.config.json │ │ │ ├── README.md │ │ │ └── type-ahead-only.html │ │ │ ├── 02-type-ahead-and-free-text │ │ │ ├── type-ahead-and-free-text.config.json │ │ │ ├── README.md │ │ │ └── type-ahead-and-free-text.html │ │ │ └── 04-free-text-with-boolean-logic │ │ │ ├── free-text-with-boolean-logic.config.json │ │ │ └── README.md │ ├── contact-items │ │ ├── contact-items.config.json │ │ ├── contact-items.html │ │ └── README.md │ ├── icon-headings │ │ ├── icon-headings.config.json │ │ ├── README.md │ │ └── icon-headings.html │ ├── tables │ │ ├── 06-data-table │ │ │ ├── data-table.config.json │ │ │ └── README.md │ │ ├── 02-dense-table │ │ │ ├── dense-table.config.json │ │ │ ├── README.md │ │ │ └── dense-table.html │ │ ├── 04-chart-table │ │ │ ├── chart-table.config.json │ │ │ └── README.md │ │ ├── 01-simple-table │ │ │ ├── simple-table.config.json │ │ │ ├── README.md │ │ │ └── simple-table.html │ │ ├── 03-custom-table │ │ │ ├── custom-table.config.json │ │ │ ├── README.md │ │ │ └── custom-table.html │ │ └── 05-balance-sheet-table │ │ │ ├── balance-sheet-table.config.json │ │ │ └── README.md │ ├── cards │ │ ├── 03-major-cards │ │ │ ├── major-cards.config.json │ │ │ ├── README.md │ │ │ └── major-cards.html │ │ ├── 02-vertical-cards │ │ │ ├── vertical-cards.config.json │ │ │ ├── README.md │ │ │ └── vertical-cards.html │ │ └── 01-horizontal-cards │ │ │ ├── horizontal-cards.config.json │ │ │ └── README.md │ ├── examples │ │ ├── example-form │ │ │ ├── example-form.config.json │ │ │ ├── example-form.html │ │ │ └── README.md │ │ ├── example-image │ │ │ ├── example-image.config.json │ │ │ ├── README.md │ │ │ └── example-image.html │ │ └── example-paragraph │ │ │ ├── example-paragraph.config.json │ │ │ ├── example-paragraph.html │ │ │ └── README.md │ ├── loading-overlay │ │ ├── loading-overlay.config.json │ │ ├── loading-overlay.html │ │ └── README.md │ ├── messages │ │ ├── 01-message-sizes │ │ │ ├── message-sizes.config.json │ │ │ ├── README.md │ │ │ └── message-sizes.html │ │ ├── 04-message-alert │ │ │ ├── message-alert.config.json │ │ │ ├── README.md │ │ │ └── message-alert.html │ │ ├── 05-message-error │ │ │ ├── message-error.config.json │ │ │ ├── README.md │ │ │ └── message-error.html │ │ ├── 02-message-info │ │ │ ├── message-info.config.json │ │ │ ├── message-info.html │ │ │ └── README.md │ │ ├── 03-message-success │ │ │ ├── message-success.config.json │ │ │ ├── README.md │ │ │ └── message-success.html │ │ └── 06-message-no-results │ │ │ ├── message-no-results.config.json │ │ │ ├── message-no-results.html │ │ │ └── README.md │ ├── committee-status │ │ ├── committee-status.config.json │ │ ├── committee-status.html │ │ └── README.md │ ├── option-components │ │ ├── option-components.config.json │ │ ├── README.md │ │ └── option-components.html │ ├── feed │ │ ├── 01-single-category │ │ │ ├── single-category.config.json │ │ │ ├── README.md │ │ │ └── single-category.html │ │ └── 02-multiple-category │ │ │ ├── multiple-category.config.json │ │ │ ├── README.md │ │ │ └── multiple-category.html │ ├── filter-validation │ │ ├── 02-error-validation │ │ │ ├── error-validation.config.json │ │ │ ├── README.md │ │ │ └── error-validation.html │ │ └── 01-success-validation │ │ │ ├── success-validation.config.json │ │ │ ├── README.md │ │ │ └── success-validation.html │ ├── pagination │ │ ├── 01-data-pagination │ │ │ ├── data-pagination.config.json │ │ │ ├── README.md │ │ │ └── data-pagination.html │ │ └── 02-feed-pagination │ │ │ ├── feed-pagination.config.json │ │ │ ├── feed-pagination.html │ │ │ └── README.md │ ├── reaction-box │ │ ├── reaction-box.config.json │ │ ├── README.md │ │ └── reaction-box.html │ ├── secondary-navigation │ │ ├── 01-side-navigation │ │ │ ├── side-navigation.config.json │ │ │ ├── README.md │ │ │ └── side-navigation.html │ │ └── 02-inpage-navigation │ │ │ ├── inpage-navigation.config.json │ │ │ ├── README.md │ │ │ └── inpage-navigation.html │ ├── slabs │ │ ├── slabs.html │ │ ├── README.md │ │ └── slabs.config.json │ ├── callout │ │ ├── README.md │ │ ├── callout.config.json │ │ └── callout.html │ ├── tooltips │ │ ├── tooltips.html │ │ └── README.md │ ├── footer │ │ ├── README.md │ │ └── footer.html │ ├── header │ │ ├── README.md │ │ └── header.html │ ├── figures │ │ └── README.md │ ├── documents │ │ ├── README.md │ │ └── documents.html │ ├── resource-bar │ │ ├── 01-sidebar │ │ │ ├── sidebar.html │ │ │ └── README.md │ │ └── 02-endbar │ │ │ ├── README.md │ │ │ └── endbar.html │ ├── heroes │ │ ├── heroes.config.json │ │ ├── README.md │ │ └── heroes.html │ ├── breadcrumbs │ │ ├── README.md │ │ └── breadcrumbs.html │ └── accordions │ │ ├── accordions.html │ │ └── README.md ├── _preview.html └── 01-basics │ ├── _reports-landing-page.html │ ├── _document-feed-page.html │ ├── _reporting-example-page.html │ ├── _collection-page.html │ ├── _meeting-page.html │ ├── _commissioner-page.html │ ├── _custom-page.html │ └── _update-pages.html ├── .gitignore ├── .github └── PULL_REQUEST_TEMPLATE.md ├── manifest.yml ├── documentation ├── 03-colors.md ├── 04-icons.md ├── 05-grid.md ├── 02-typography.md ├── 06-page-layouts │ ├── custom-page.md │ ├── collection-page.md │ ├── meeting-page.md │ ├── resource-page.md │ ├── update-pages.md │ ├── commissioner-page.md │ ├── document-feed-page.md │ ├── reports-landing-page.md │ └── reporting-example-page.md └── 01-index.md ├── LICENSE.md ├── static ├── templates │ ├── icon-classes.scss │ └── icons-component.html ├── js │ ├── modules │ │ └── listeners.js │ └── init.js └── scss │ └── styles.scss ├── bin └── cf_deploy.sh ├── CONTRIBUTING.md ├── package.json ├── fractal.config.js ├── .circleci └── config.yml ├── gulpfile.js └── README.md /public/js/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/02-components/buttons/03-sizes/sizes.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Sizes" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filter-tags/filter-tags.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Filter tags" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filters/06-range/01-range/range.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Range" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/contact-items/contact-items.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Contact items" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/icon-headings/icon-headings.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Icon headings" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/06-data-table/data-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Data table" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/cards/03-major-cards/major-cards.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Major cards" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/examples/example-form/example-form.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Example form" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/loading-overlay/loading-overlay.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Loading overlay" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/01-message-sizes/message-sizes.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Sizes" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/04-message-alert/message-alert.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Warning" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/05-message-error/message-error.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Error" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/02-dense-table/dense-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Dense table" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/04-chart-table/chart-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Chart table" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/committee-status/committee-status.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Committee status" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/examples/example-image/example-image.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Example image" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filters/02-radio-buttons/radio-buttons.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Radio buttons" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filters/05-cycle-select/cycle-select.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Cycle select" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/02-message-info/message-info.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Informational" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/03-message-success/message-success.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Success" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/01-simple-table/simple-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Simple table" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/03-custom-table/custom-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Custom table" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/cards/02-vertical-cards/vertical-cards.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Vertical cards" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/option-components/option-components.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Option components" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/cards/01-horizontal-cards/horizontal-cards.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Horizontal cards" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/examples/example-paragraph/example-paragraph.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Example paragraph" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/feed/01-single-category/single-category.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Single category feed" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/02-error-validation/error-validation.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Error" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/01-multiple/multiple.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Checkbox: multiple" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/messages/06-message-no-results/message-no-results.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "No results" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/pagination/01-data-pagination/data-pagination.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Data pagination" 3 | } 4 | -------------------------------------------------------------------------------- /public/components/page-custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-custom.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | !docs/.gitkeep 3 | docs/ 4 | 5 | public/css/ 6 | public/js/main.js 7 | public/img/ 8 | public/fonts/ 9 | -------------------------------------------------------------------------------- /components/02-components/feed/02-multiple-category/multiple-category.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Multiple category feed" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/01-success-validation/success-validation.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Success" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/02-standalone/standalone.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Checkbox: standalone" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/reaction-box/reaction-box.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reaction box", 3 | "status": "unused" 4 | } 5 | -------------------------------------------------------------------------------- /public/components/example-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/example-image.png -------------------------------------------------------------------------------- /public/components/page-meeting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-meeting.png -------------------------------------------------------------------------------- /public/components/page-resource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-resource.png -------------------------------------------------------------------------------- /public/components/page-updates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-updates.png -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/02-vertical/vertical.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Toggle button: vertical" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/01-side-navigation/side-navigation.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Side navigation" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/tables/05-balance-sheet-table/balance-sheet-table.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Balance sheet table" 3 | } 4 | -------------------------------------------------------------------------------- /public/components/page-collection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-collection.png -------------------------------------------------------------------------------- /public/components/thumbnail--form1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/thumbnail--form1.png -------------------------------------------------------------------------------- /public/components/type-ahead-only.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/type-ahead-only.gif -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/01-horizontal/horizontal.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Toggle button: horizontal" 3 | } 4 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/02-inpage-navigation/inpage-navigation.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Inpage navigation" 3 | } 4 | -------------------------------------------------------------------------------- /public/components/page-commissioner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-commissioner.png -------------------------------------------------------------------------------- /public/components/page-document-feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-document-feed.png -------------------------------------------------------------------------------- /public/components/is_active_typeahead.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/is_active_typeahead.png -------------------------------------------------------------------------------- /public/components/page-reports-landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-reports-landing.png -------------------------------------------------------------------------------- /components/02-components/pagination/02-feed-pagination/feed-pagination.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Feed pagination", 3 | "status": "future" 4 | } 5 | -------------------------------------------------------------------------------- /public/components/page-reporting-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/page-reporting-example.png -------------------------------------------------------------------------------- /components/02-components/buttons/02-buttons-with-icons/buttons-with-icons.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Icons", 3 | "title": "Buttons with icons" 4 | } 5 | -------------------------------------------------------------------------------- /public/components/type-ahead-and-free-text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fecgov/fec-pattern-library/HEAD/public/components/type-ahead-and-free-text.gif -------------------------------------------------------------------------------- /components/02-components/filters/06-range/02-range-limited/range-limited.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Range: limited", 3 | "label": "Range: limited" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/loading-overlay/loading-overlay.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Summary of changes 2 | 3 | - Addresses # [_Issue number_] 4 | _Include a summary of proposed changes._ 5 | 6 | 7 | ## Screenshots 8 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/01-single-select/single-select.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Single select", 3 | "title": "Dropdown: single-select" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/02-multi-select/multi-select.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Multi select", 3 | "title": "Dropdown: multi-select" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/filters/06-range/01-range/README.md: -------------------------------------------------------------------------------- 1 | A range allows users to set a custom minimum and maximum value. Often used for financial or time ranges. 2 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/03-free-text-only/free-text-only.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Free text only", 3 | "title": "Search: free text only" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/01-type-ahead-only/type-ahead-only.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Type-ahead only", 3 | "title": "Search: type-ahead only" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/02-type-ahead-and-free-text/type-ahead-and-free-text.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Type-ahead and free text", 3 | "title": "Search: type-ahead and free text" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/tables/04-chart-table/README.md: -------------------------------------------------------------------------------- 1 | Chart tables are the styles used on breakdown charts, which accommodate bar charts and graphics inside rows. They are visually similar to `simple-table`. 2 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/04-free-text-with-boolean-logic/free-text-with-boolean-logic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Free text with boolean logic", 3 | "title": "Search: free text with boolean logic" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/03-multi-select-with-suggestions/multi-select-with-suggestions.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Multi select with suggestions", 3 | "title": "Dropdown: multi-select with suggestions" 4 | } 5 | -------------------------------------------------------------------------------- /components/02-components/slabs/slabs.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Heading in a slab

4 | This is a slab with a link 5 |
6 |
7 | -------------------------------------------------------------------------------- /components/02-components/buttons/02-buttons-with-icons/README.md: -------------------------------------------------------------------------------- 1 | Icons provide a visual cue for the event or action that the button will initiate. 2 | 3 | The icon and button text should always be the same color in every interaction state. 4 | -------------------------------------------------------------------------------- /manifest.yml: -------------------------------------------------------------------------------- 1 | --- 2 | applications: 3 | - name: fec-pattern-library 4 | instances: 1 5 | memory: 64M 6 | disk_quota: 256M 7 | buildpacks: 8 | - staticfile_buildpack 9 | env: 10 | FORCE_HTTPS: true 11 | path: ./docs 12 | stack: cflinuxfs4 13 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/03-free-text-only/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - When the search field can only accept free text keywords 3 | 4 | ### GitHub issues 5 | - [#1828: Unify text input filter patterns](https://github.com/fecgov/openFEC/issues/1828) 6 | -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/02-vertical/README.md: -------------------------------------------------------------------------------- 1 | When horizontal space is limited, such as in a filter panel or mobile view, toggle buttons can stack vertically. 2 | 3 | ### GitHub issues 4 | - [#297: Implement new button styles](https://github.com/18F/fec-style/issues/297) 5 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/04-free-text-with-boolean-logic/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - When highly specific, complex keyword searches are necessary to disambiguate between search results.
_Ex: [Keyword search for matters under review](https://www.fec.gov/data/legal/search/enforcement/)_ 3 | -------------------------------------------------------------------------------- /documentation/03-colors.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/04-icons.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/05-grid.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /components/02-components/filters/05-cycle-select/README.md: -------------------------------------------------------------------------------- 1 | The cycle select combines a single select dropdown with a toggle button for a very specific use case: limiting and refining the period of time users can review data for. 2 | 3 | This component is used on candidate profiles, committee profiles, and election summary pages. 4 | -------------------------------------------------------------------------------- /components/02-components/callout/README.md: -------------------------------------------------------------------------------- 1 | Callouts allow us to put a container around complex structured content or a group of related links. Use a callout when you need to provide a single main link with supplementary information, which can include more minor related links. 2 | 3 | This component is styled in a similar way to a card. 4 | -------------------------------------------------------------------------------- /documentation/02-typography.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/custom-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Licensing and attribution 2 | 3 | This project includes a mix of the following: 4 | 5 | * Open source works that are not in the public domain 6 | * Open source work by the U.S. government that is in the public domain 7 | 8 | This project is covered by the FEC's [Default License](https://github.com/fecgov/FEC/blob/master/LICENSE.md). 9 | -------------------------------------------------------------------------------- /components/02-components/buttons/03-sizes/sizes.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Small: 4 |
5 | 6 |
7 | Large: 8 |
9 |
10 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/collection-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/meeting-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/resource-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/update-pages.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/commissioner-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/document-feed-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/reports-landing-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /documentation/06-page-layouts/reporting-example-page.md: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /components/02-components/cards/02-vertical-cards/README.md: -------------------------------------------------------------------------------- 1 | Vertical cards have an icon above a text element. Since they are large elements within a composition, a neutral background is recommended so that they don't overwhelm the visual hierarchy. 2 | 3 | Refer to [horizontal cards](/components/detail/horizontal-cards) for guidance on when and how to best use cards. 4 | -------------------------------------------------------------------------------- /components/_preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Preview Layout 7 | 8 | 9 | {{ yield }} 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components/02-components/loading-overlay/README.md: -------------------------------------------------------------------------------- 1 | The loading overlay indicates to users that the site is responding to their actions and actively processing an action. An overlay is placed over a table or list while results are filtered, sorted, or loaded. 2 | 3 | ### GitHub issues 4 | - [#24: Design loading state on tables](https://github.com/18F/fec-style/issues/24) 5 | -------------------------------------------------------------------------------- /components/02-components/tooltips/tooltips.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |

Explanatory content about this element

6 |
7 |
8 |
9 | -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/01-horizontal/README.md: -------------------------------------------------------------------------------- 1 | A styled set of radio buttons that can have a single entry selected at any one time. Use a toggle button when the interaction indicates whether a setting is on or off for an entire view. Toggles should have as few options as possible. 2 | 3 | ### GitHub issues 4 | - [#297: Implement new button styles](https://github.com/18F/fec-style/issues/297) 5 | -------------------------------------------------------------------------------- /components/02-components/buttons/03-sizes/README.md: -------------------------------------------------------------------------------- 1 | ## Selecting styles 2 | - Use `button--sm` for small-sized controls that need to fit in small spaces, like [pagination components](/components/detail/pagination) under data tables and lists. 3 | - Use `button--lg` for large-sized main, high-hierarchy page controls, like the [final opinion document button](https://www.fec.gov/data/legal/advisory-opinions/2017-13/) above a table of AO documents. 4 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/02-multi-select/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - When a user needs to select multiple options from a hidden list 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#dropdown) 5 | > Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use. 6 | -------------------------------------------------------------------------------- /components/02-components/slabs/README.md: -------------------------------------------------------------------------------- 1 | Slabs are full screen-width containers with a solid background color. Any type of content can be placed within a slab—there is no set structure for what’s inside. 2 | 3 | ## When to use 4 | - As a visual device to create a strong visual break or separation between different types of page content 5 | - Toward the bottom of the page, with a `.neutral` background to create a separate space for related articles, resources, or legal disclaimers 6 | -------------------------------------------------------------------------------- /components/02-components/callout/callout.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Callout", 3 | "default": "Base", 4 | "context": { 5 | "modifier": "callout" 6 | }, 7 | "variants": [ 8 | { 9 | "name": "Primary", 10 | "context": { 11 | "modifier": "callout--primary" 12 | } 13 | }, 14 | { 15 | "name": "Secondary", 16 | "context": { 17 | "modifier": "callout--secondary" 18 | } 19 | } 20 | ], 21 | "collated": true 22 | } 23 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/01-type-ahead-only/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - When the search field only accepts type-ahead matching to choose an option from a pre-defined set of data 3 | 4 | ### GitHub issues 5 | - [#231: Consolidate typeahead](https://github.com/18F/fec-style/pull/231) 6 | - [#1594: Test typeahead filter in usability testing](https://github.com/fecgov/openFEC/issues/1594) 7 | - [#349: Improved typeahead interaction](https://github.com/18F/fec-style/pull/349) 8 | -------------------------------------------------------------------------------- /static/templates/icon-classes.scss: -------------------------------------------------------------------------------- 1 | // ONLY edit static/templates/icon-classes.scss 2 | // and run `npm run build-sass` 3 | 4 | .i { 5 | background-position: center center; 6 | background-repeat: no-repeat; 7 | background-size: 4rem; 8 | width: u(5rem); 9 | height: u(5rem); 10 | display: block; 11 | } 12 | 13 | // Classes for all icons 14 | <% _.each(icons, function(svg) { %> 15 | .i-<%= svg.name %> { 16 | @include u-icon-bg($<%= svg.name %>, $primary); 17 | } 18 | <% }); %> 19 | -------------------------------------------------------------------------------- /static/templates/icons-component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |

Icons

8 |
9 | <% _.each(icons, function(svg) { %> 10 |
11 | 12 | .i-<%= svg.name %> 13 |
14 | <% }); %> 15 |
16 |
17 | -------------------------------------------------------------------------------- /components/02-components/footer/README.md: -------------------------------------------------------------------------------- 1 | The footer should be positioned at the bottom of all FEC.gov pages and connected apps. It hosts a secondary, alternative set of information and resources about the site and agency. 2 | 3 | ### GitHub issues 4 | - [#484: Figure out all the required things we need to link to, and where they should/need to appear on the site](https://github.com/fecgov/fec-cms/issues/484) 5 | - [#498: Visual design of footer navigation](https://github.com/18F/fec-style/issues/498) 6 | -------------------------------------------------------------------------------- /components/02-components/tables/06-data-table/README.md: -------------------------------------------------------------------------------- 1 | Data tables provide customizable views of tabular data. A unique feature of data tables is that columns can be sorted by one category at a time. The most common sorting model is set by default. Data tables can also include an expandable panel for more granular information. 2 | 3 | Data tables are used for filterable [campaign finance data](https://www.fec.gov/data/candidates/president/), and for [legal resource case data](https://www.fec.gov/data/legal/advisory-opinions/2017-10/). 4 | -------------------------------------------------------------------------------- /components/02-components/examples/example-form/example-form.html: -------------------------------------------------------------------------------- 1 |
2 |

Example forms

3 |
4 |
5 | 6 | Small image of FEC form 1 7 | 8 |
PDF
9 | Statement of Organization: FEC form 1 10 |
11 |
12 |
13 | -------------------------------------------------------------------------------- /components/02-components/header/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - The header should be positioned at the top of all FEC.gov pages and connected apps. 3 | 4 | ## When to consider something else 5 | - A prominent display scenario on the website home page. The home page uses a custom version of the standard header that displays a larger and uncropped version of the FEC seal. 6 | 7 | ### GitHub issues 8 | - [#313: To maximize useful page real estate, consider designing a mini-header for interior pages](https://github.com/18F/fec-style/issues/313) 9 | -------------------------------------------------------------------------------- /components/02-components/filters/06-range/02-range-limited/README.md: -------------------------------------------------------------------------------- 1 | Allows users to set a custom period within a pre-defined limit. Often used for narrowing a span of time within a two-year period. When used for dates, a calendar picker toggles below to help refine the time period. 2 | 3 | ### GitHub issues 4 | - [#1375: Update and unify date filter patterns](https://github.com/18F/openFEC-web-app/issues/1375) 5 | - [#1872: Design specific tag UI for date ranges and financial ranges](https://github.com/fecgov/openFEC/issues/1872#issuecomment-241447101) 6 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/02-type-ahead-and-free-text/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## When to use 3 | Use this type of filter when the search field must accept both: 4 | - type-ahead matching to choose an option from pre-defined set of data; AND 5 | - free text keywords 6 | 7 | ### GitHub issues 8 | - [#231: Consolidate typeahead](https://github.com/18F/fec-style/pull/231) 9 | - [#1594: Test typeahead filter in usability testing](https://github.com/fecgov/openFEC/issues/1594) 10 | - [#349: Improved typeahead interaction](https://github.com/18F/fec-style/pull/349) 11 | -------------------------------------------------------------------------------- /components/02-components/buttons/01-basic/basic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Buttons", 3 | "default": "Neutral", 4 | "context": { 5 | "modifier": "neutral", 6 | "button": "" 7 | }, 8 | "variants": [ 9 | { 10 | "name": "Primary", 11 | "context": { 12 | "modifier": "primary", 13 | "button": "-primary" 14 | } 15 | }, 16 | { 17 | "name": "Secondary", 18 | "context": { 19 | "modifier": "secondary", 20 | "button": "-secondary" 21 | } 22 | } 23 | ], 24 | "collated": true 25 | } 26 | -------------------------------------------------------------------------------- /components/02-components/tables/05-balance-sheet-table/README.md: -------------------------------------------------------------------------------- 1 | Balance sheet tables are hierarchical tables used on candidate and committee [profile pages](https://www.fec.gov/data/committee/C00431445/?cycle=2012). They are specifically designed using a financial table format familiar to users to give a visual sense of nested or hierarchical rows of financial total information. Integer data in the right-hand column is right-aligned for faster information scanning. 2 | 3 | ### GitHub issues 4 | - [#1783: Redesign financial summary component](https://github.com/18f/openfec-web-app/issues/1783) 5 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/03-multi-select-with-suggestions/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - When analytics or research can show that certain options are applied much more often than others, it can be helpful to surface those most common options outside of the hidden list. 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#dropdown) 5 | > Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use. 6 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/02-standalone/README.md: -------------------------------------------------------------------------------- 1 | Standalone checkboxes allow users to select one setting from a visible list. 2 | 3 | ## When to use 4 | - When a user needs to choose “yes” or “no” on only one option. For example, to toggle a setting on or off. 5 | 6 | ## When to consider something else 7 | - If a user can only select one option from a list (use radio buttons instead). 8 | 9 | ### Resources 10 | Learn more about accessibility and best practices for checkboxes from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#checkboxes). 11 | -------------------------------------------------------------------------------- /components/02-components/tables/02-dense-table/README.md: -------------------------------------------------------------------------------- 1 | Dense tables use more compact cell spacing and smaller text sizes. 2 | 3 | The `.simple-table--display` modifier class adds alternating background colors and more padding between the cell content and the top/bottom cell borders. 4 | 5 | ## When to use 6 | - For tables of [contribution limit data](https://www.fec.gov/help-candidates-and-committees/candidate-taking-receipts/contribution-limits-candidates/) 7 | - When the table of information is very long and inappropriate to break up by pagination 8 | - For long reference tables where sorting and filtering is unavailable 9 | -------------------------------------------------------------------------------- /components/02-components/callout/callout.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Committee name 5 |

6 | Principal campaign committee 7 | 2008 - 2012 8 |
9 |
10 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /components/02-components/figures/README.md: -------------------------------------------------------------------------------- 1 | Figures are styles for combinations of labels and numbers. Labels can be either inline or above the numbers. Zero-padding with decimals is handled by JavaScript. 2 | 3 | ## When to use 4 | - When users are comparing a short list of figures (five or fewer) 5 | - When the layout needs a more stylized display that highlights an interesting set of data 6 | 7 | ## When to consider something else 8 | - If there are more than five figures to compare, display the information in a table 9 | 10 | ### GitHub issues 11 | - [#322 Visual design of data landing page](https://github.com/18F/fec-style/issues/322) 12 | -------------------------------------------------------------------------------- /components/02-components/filters/02-radio-buttons/radio-buttons.html: -------------------------------------------------------------------------------- 1 |
2 | Citations 3 | 4 | 5 | 6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/02-inpage-navigation/README.md: -------------------------------------------------------------------------------- 1 | A vertical navigation on the left side that helps users scan the contents of a page and jump between different sections. On desktop, the navigation sticks to remain in view as the user navigates. 2 | 3 | ## When to use 4 | - Users need to navigate up and down longer sections of content on a single page 5 | - Users need a way to scan the contents of a long page 6 | 7 | ## When to consider something else 8 | - If a page is very long or has multiple levels of hierarchy, consider breaking the content into multiple pages and using a side navigation component to navigate between the pages 9 | -------------------------------------------------------------------------------- /components/02-components/documents/README.md: -------------------------------------------------------------------------------- 1 | Document preview items are used to add visual interest and substance to a PDF-heavy list layout. The thumbnail is a preview of the PDF cover image. Document previews should also be used for lists of forms, or in other places where the document is an essential subject. 2 | 3 | ## When to use 4 | - Use when there are 1-6 items in a short section or layout that needs visual interest
_Ex: [Statutes page]( https://www.fec.gov/data/legal/statutes/)_ 5 | 6 | ## When to consider something else 7 | - If there are more than six items in the list, or if there is significant metadata useful for telling items apart, consider a feed 8 | -------------------------------------------------------------------------------- /components/02-components/slabs/slabs.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Slabs", 3 | "default": "Primary", 4 | "context": { 5 | "modifier": "slab--primary" 6 | }, 7 | "variants": [ 8 | { 9 | "name": "Secondary", 10 | "context": { 11 | "modifier": "slab--secondary" 12 | } 13 | }, 14 | { 15 | "name": "Dark", 16 | "context": { 17 | "modifier": "slab--dark" 18 | } 19 | }, 20 | { 21 | "name": "Neutral", 22 | "context": { 23 | "modifier": "slab--neutral" 24 | } 25 | } 26 | ], 27 | "collated": true 28 | } 29 | -------------------------------------------------------------------------------- /components/02-components/resource-bar/01-sidebar/sidebar.html: -------------------------------------------------------------------------------- 1 |
2 | 15 |
16 | -------------------------------------------------------------------------------- /components/02-components/resource-bar/02-endbar/README.md: -------------------------------------------------------------------------------- 1 | A horizontal container at the bottom of a page. Most commonly used as legal citations bar to collect and surface the legal bases for content on a given page. 2 | 3 | ## When to use 4 | - Users need to reference the original source for content or guidance 5 | - There are multiple legal references on a page 6 | 7 | ## Guidance 8 | - Include titles whenever possible— titles provide context clues for readers 9 | - Formatting: 10 | - Regulations follow this format: 11 CFR 111.11 11 | - Statutes follow this format: 52 U.S.C. §30104 12 | - Federal Register notices follow this format: 78 _Fed. Reg._ 40625 (July 8, 2013) 13 | -------------------------------------------------------------------------------- /components/02-components/heroes/heroes.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Heroes", 3 | "default": "Campaign finance data section", 4 | "context": { 5 | "modifier": "hero--data" 6 | }, 7 | "variants": [ 8 | { 9 | "name": "Legal resources section", 10 | "context": { 11 | "modifier": "hero--legal" 12 | } 13 | }, 14 | { 15 | "name": "Registration and reporting section", 16 | "context": { 17 | "modifier": "hero--registration" 18 | } 19 | }, 20 | { 21 | "name": "Press section", 22 | "context": { 23 | "modifier": "hero--press" 24 | } 25 | } 26 | ], 27 | "collated": true 28 | } 29 | -------------------------------------------------------------------------------- /components/02-components/examples/example-image/README.md: -------------------------------------------------------------------------------- 1 | The example image component displays a short, specific visual example, often part of a form. Example images give users helpful samples that illustrate complex instructions. 2 | 3 | Example components are stylistically similar to the [blockquote](/docs/typography) typography style, since both indicate a small pause in the main content for an illustrative sample or quotation. 4 | 5 | ## When to use 6 | - Users need a short, specific sample to help them understand a concept 7 | 8 | ### GitHub issues 9 | - [#727: Design layout/placement plans for example resources on C&C Services lowest level article page templates](https://github.com/fecgov/fec-cms/issues/727) 10 | -------------------------------------------------------------------------------- /components/02-components/tables/03-custom-table/README.md: -------------------------------------------------------------------------------- 1 | Custom tables are used in [statistical press releases](https://www.fec.gov/updates/statistical-summary-six-month-campaign-activity-2017-2018-election-cycle/) to present financial information. This component was designed specifically to work within the constraints the existing Wagtail table block at the time. The styling right-aligns content in cells that aren't headers, which is only appropriate for integer data. 2 | 3 | ## When to use 4 | - When you need both a header row and a header column 5 | - When the table holds columns of integer data 6 | 7 | ### Github issues 8 | - [#550: Design template for statistical press release](https://github.com/18F/fec-cms/issues/550) 9 | -------------------------------------------------------------------------------- /static/js/modules/listeners.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var $ = require('jquery'); 4 | var _ = require('underscore'); 5 | 6 | function Listeners() { 7 | this.listeners = []; 8 | } 9 | 10 | Listeners.prototype.on = function(elm) { 11 | var $elm = $(elm); 12 | var args = _.toArray(arguments).slice(1); 13 | this.listeners = this._listeners || []; 14 | this.listeners.push({$elm: $elm, args: args}); 15 | $elm.on.apply($elm, args); 16 | }; 17 | 18 | Listeners.prototype.clear = function() { 19 | this.listeners.forEach(function(listener) { 20 | var $elm = listener.$elm; 21 | var args = listener.args; 22 | $elm.off.apply($elm, args); 23 | }); 24 | }; 25 | 26 | module.exports = {Listeners: Listeners}; 27 | -------------------------------------------------------------------------------- /components/02-components/messages/06-message-no-results/message-no-results.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

No results

4 |

Sorry, we didn't find any financial data for Committee Name in the 2007–2012 election cycle.

5 |
6 |

Is this information incorrect? Please let us know.

7 |
    8 |
    • 9 |
    • 10 |
11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /components/02-components/option-components/README.md: -------------------------------------------------------------------------------- 1 | Option components are typically assembled from at least a ruled heading and a following short paragraph. Often, they are used with a button or some other primary action, and a sidebar. Use more than one option component in a row to give an introduction that helps users disambiguate between topics with much more detailed information on a following page. 2 | 3 | ## When to use 4 | - Users need a preview of their options for information before starting or committing to a deep dive into detailed subject matter 5 | 6 | ## When to consider something else 7 | - When users only need a brief amount of detail before making their choice, or when the options are a prioritized set of the whole array available, consider a card 8 | -------------------------------------------------------------------------------- /components/02-components/committee-status/committee-status.html: -------------------------------------------------------------------------------- 1 |
2 |

DCCC

3 |
4 | 5 | Active 6 | 7 | 8 | Party - Qualified 9 | 10 | ID: C00000935 11 |
12 |
13 | 14 | 15 |

Example for typeahead dropdown:

16 | Is active typeahead image 17 | 18 | -------------------------------------------------------------------------------- /components/02-components/cards/03-major-cards/README.md: -------------------------------------------------------------------------------- 1 | Major cards are a flexible content container. They include a title, contextual copy, and an can include metadata, like an item count. There’s no set restriction on how many major cards should be used in a layout, but more items may require more advanced filtering functionality, since visual scanning becomes more difficult when more items are present.
2 | _Ex: [Reports about the FEC](https://www.fec.gov/about/reports-about-fec/)_ 3 | 4 | ### Resources 5 | - Learn more about best practices for cards from the [Nielsen Norman Group](https://www.nngroup.com/articles/cards-component/). 6 | 7 | ### GitHub issues 8 | - [#677: Design strategy and content of About | Reports about the FEC section](https://github.com/fecgov/fec-cms/issues/677) 9 | -------------------------------------------------------------------------------- /components/02-components/examples/example-image/example-image.html: -------------------------------------------------------------------------------- 1 |
2 |

Example

3 |
4 |
5 | Example image of completed FEC form 3 6 |
7 |

The committee reports the contribution from an individual, in this case from Nellie Custis, on Schedule A, supporting Line 11(a)(i). It includes the name, mailing address, employer, and occupation of the individual. It also includes the date of receipt, amount of receipt, election designation, and aggregate election cycle-to-date total for the contributor.

8 |
9 |
10 |
11 |
12 | -------------------------------------------------------------------------------- /components/02-components/heroes/README.md: -------------------------------------------------------------------------------- 1 | Hero slabs are built of a main text area and a sliver of an image. The background color should be either `.primary` or `.secondary` to keep an association between color and site navigation. The image should be more expressive and abstract in style than representational, but should evoke the subject matter of the section. Images may often need to be constructed to fit the context through editing, collaging, or blurring in order to meet these criteria. 2 | 3 | Existing color associations: 4 | - Campaign finance data: `.primary` 5 | - Help for candidates and committees: `.secondary` 6 | - Legal resources: `.primary` 7 | - About: `.secondary` 8 | - Press: `.secondary` 9 | 10 | ### GitHub issues 11 | - [#330: Reduce height of hero](https://github.com/18F/fec-style/issues/330) 12 | -------------------------------------------------------------------------------- /components/02-components/pagination/01-data-pagination/README.md: -------------------------------------------------------------------------------- 1 | Collections of data are split into multiple pages because the size of the data would take too long to render all at once and because very long collections are more than a user can scan or comprehend. 2 | 3 | Data pagination controls allow users to determine how many items are compared on one page, and to navigate forward and backward one page at a time in the results list. 4 | 5 | ## When to use 6 | - On data and legal tables when the exact number of items or pages returned would be so large that loading the count would make the page less performant 7 | 8 | ## When to consider something else 9 | - When the number of items is easily counted without impacting performance, such as in a feed of posts, use [feed pagination](/components/detail/feed-pagination) 10 | -------------------------------------------------------------------------------- /components/02-components/contact-items/contact-items.html: -------------------------------------------------------------------------------- 1 |
2 | 20 |
21 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/02-inpage-navigation/inpage-navigation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /components/02-components/buttons/01-basic/basic.html: -------------------------------------------------------------------------------- 1 |
2 |
Standard:
3 | 4 | 5 |
6 |
7 |
Call to action:
8 | 9 | 10 |
11 |
12 |
Alternate:
13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /components/02-components/pagination/02-feed-pagination/feed-pagination.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 1 7 | 2 8 | 3 9 | 4 10 | 5 11 | … 12 | 24 13 | 14 | 15 |
Showing 16 | 1-10 of 240 entries 17 |
18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/02-error-validation/README.md: -------------------------------------------------------------------------------- 1 | Validation messages are displayed **after** a user has interacted with a particular field. Error validations help users learn that their choices were not applied, either because their entries were incompatible with what the field accepts, or because of a site error. 2 | 3 | ## When to use 4 | - When a user's intended action has not been applied 5 | - When a user's entry to a field or selection has not been accepted by the system 6 | 7 | ## When to consider something else 8 | - Validation styles should not be used to describe the limitations or behavior of the filter. If a filter needs more context, consider using a persistent message outside of the field, or a tooltip. 9 | 10 | ### GitHub issues 11 | - [#416: Create a new pattern for form validation-style alerts](https://github.com/18F/fec-style/issues/416) 12 | -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/02-vertical/vertical.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Report type 4 | 8 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /components/02-components/filter-tags/README.md: -------------------------------------------------------------------------------- 1 | Filter tags help users track and confirm which filters have been applied when they are sorting through a list or table of results. Since tags are generated by applying filters, they also create another mechanism by which users can remove applied filters. 2 | 3 | Tags aren’t removable when they apply strict limits to the data being viewed, such as 4 | - one two-year period of time per search 5 | - a persistent toggle, like processed/raw data 6 | 7 | ### GitHub issues 8 | - [#1330: Interaction construction of and/or signifier in tag area of data tables](https://github.com/18F/openFEC-web-app/issues/1330) 9 | - [#1329: Visual design of co-located tag and filter system](https://github.com/18F/openFEC-web-app/issues/1329) 10 | - [#1872: Design specific tag UI for date ranges and financial ranges](https://github.com/fecgov/openFEC/issues/1872#issuecomment-241447101) 11 | -------------------------------------------------------------------------------- /bin/cf_deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -o errexit 4 | set -o pipefail 5 | set -x 6 | 7 | cloud_gov=${CF_API:-https://api.fr.cloud.gov} 8 | 9 | app=${1} 10 | org=${2} 11 | space=${3} 12 | manifest=${4:-manifest.yml} 13 | 14 | if [[ -z ${org} || -z ${space} || -z ${app} ]]; then 15 | echo "Usage: $0 [manifest.yml]" >&2 16 | exit 1 17 | fi 18 | 19 | ( 20 | set +x # Disable debugging 21 | 22 | # Log in if necessary 23 | if [[ -n ${FEC_CF_USERNAME_DEV} && -n ${FEC_CF_PASSWORD_DEV} ]]; then 24 | cf api ${cloud_gov} 25 | cf auth "${FEC_CF_USERNAME_DEV}" "${FEC_CF_PASSWORD_DEV}" 26 | fi 27 | ) 28 | 29 | # Target space 30 | cf target -o ${org} -s ${space} 31 | 32 | # If the app exists, use rolling deployment 33 | if cf app ${app}; then 34 | command="push --strategy rolling" 35 | else 36 | command="push" 37 | fi 38 | 39 | # Deploy web-app 40 | cf ${command} ${app} -f ${manifest} 41 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Welcome 2 | We're glad you're thinking about contributing to an FEC open source project! If you're unsure about anything, ask us — or submit the issue or pull request anyway. The worst that can happen is that we’ll politely ask you to change something. 3 | 4 | We love all friendly contributions, and we welcome your ideas about how to make the FEC's online presence more user friendly, accessible and elegant. 5 | 6 | To ensure a welcoming environment for our projects, our staff follows the FEC Code of Conduct [pending]; contributors should do the same. Please also check out the [FEC Open Source Policy](https://github.com/fecgov/FEC/blob/master/OPEN-SOURCE-POLICY.md). 7 | 8 | If you’d prefer, you can also reach us by [email](mailto:opensource@fec.gov). 9 | 10 | For our full contributing guidelines, please see our [Default Contributor License Agreement](https://github.com/fecgov/FEC/blob/master/CONTRIBUTING.md). 11 | -------------------------------------------------------------------------------- /components/02-components/messages/02-message-info/message-info.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Due to the large number of transactions, records begin in 2011. 4 |
5 |
6 | 7 |
8 |
9 | Due to the large number of transactions, records begin in 2011. 10 |
11 |
12 | 13 |
14 |
15 | Due to the large number of transactions, records begin in 2011. 16 |
17 |
18 | 19 |
20 |
21 | Due to the large number of transactions, records begin in 2011. 22 |
23 |
24 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/01-type-ahead-only/type-ahead-only.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | 9 |
10 |
11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/01-success-validation/README.md: -------------------------------------------------------------------------------- 1 | Validation messages are displayed **after** a user has interacted with a particular field. Success validations help users feel confident that their changes to filters or fields have been applied. 2 | 3 | ## When to use 4 | - When a user's intended action has affirmatively been applied (even if that action is _removing_ a filter, validations confirm that the filter was successfully removed) 5 | - When a user's entry to a field has been accepted by the system, such as meeting password requirements 6 | 7 | ## When to consider something else 8 | - Validation styles should not be used to describe the limitations or behavior of the filter. If a filter needs more context, consider using a persistent message outside of the field, or a tooltip. 9 | 10 | ### GitHub issues 11 | - [#416: Create a new pattern for form validation-style alerts](https://github.com/18F/fec-style/issues/416) 12 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/01-multiple/multiple.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Office Sought 5 |
    6 |
  • 7 | 8 | 9 |
    • 10 |
  • 11 | 12 | 13 |
    • 14 |
  • 15 | 16 | 17 |
    • 18 |
19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /components/02-components/resource-bar/01-sidebar/README.md: -------------------------------------------------------------------------------- 1 | Resource bars help users identify the most important or most commonly-sought FEC content of the same page type that’s related to the topic of the page they’re on. Sidebars are user for short lists, and appear on the right-hand side of the main content. 2 | 3 | ## When to use 4 | - When there is a preceding or subsequent page of the same type about the same topic 5 | 6 | ## When to consider something else 7 | - When the list of resources is longer than the page’s main content. Either a standalone page for this topic isn’t needed, or the links should be written into the main page content 8 | - When the page is a different type of page or publication about a related topic, list them underneath the sidebar container
9 | _Ex: Record articles related to content on [a guide page](https://www.fec.gov/help-candidates-and-committees/filing-reports/quarterly-reports/) appear as a list under the sidebar_ 10 | -------------------------------------------------------------------------------- /components/02-components/examples/example-form/README.md: -------------------------------------------------------------------------------- 1 | The example form component creates a visual target for users to recognize when a sample of a properly completed, multiple-page form is available. The thumbnail and document title should link to the full-size form. 2 | 3 | Example components are stylistically similar to the [blockquote](/docs/typography) typography style, since both indicate a small pause in the main content for an illustrative sample or quotation. 4 | 5 | ## When to use 6 | - Users need sample content that spans multiple pages or an entire completed form 7 | 8 | ## When to consider something else 9 | - If users need only a specific example for a small section of a form, use an [example image](/components/detail/example-image) with a short excerpt from the form 10 | 11 | ### GitHub issues 12 | - [#727: Design layout/placement plans for example resources on C&C Services lowest level article page templates](https://github.com/fecgov/fec-cms/issues/727) 13 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/02-type-ahead-and-free-text/type-ahead-and-free-text.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | 9 |
10 |
11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /components/02-components/documents/documents.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | Title 52, Voting and Elections, GPO 6 | 7 | 8 | Title 52, Voting and Elections, GPO
(1.6MB PDF) 9 | 10 |
11 |
12 | 13 | Title 26, Internal Revenue Code, GPO 14 | 15 | 16 | Title 26, Internal Revenue Code, GPO
(1.6MB PDF) 17 | 18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /components/02-components/examples/example-paragraph/example-paragraph.html: -------------------------------------------------------------------------------- 1 |
2 |

Example

3 |
4 |

5 | If a candidate makes a noncampaign speech at a civic association luncheon and, on the way out, chats with a few attendees about his campaign in response to their questions, the conversation does not convert the appearance into a campaign-related event. On the other hand, if a candidate flew into a city for a trip that involved both personal vacation days and days spent campaigning, an incremental approach to paying for the trip would be required, to avoid the campaign paying the lodging, subsistence and sightseeing expenses on the vacation days — an expense that would be considered an impermissible personal use of campaign funds. Because of the non-incidental nature of the campaign days, the airfare would be considered a campaign-related expense. 6 |

7 |
8 |
9 | -------------------------------------------------------------------------------- /components/02-components/pagination/02-feed-pagination/README.md: -------------------------------------------------------------------------------- 1 | Feeds or lists of items are split into multiple pages because very long collections are more than a user can scan or comprehend. 2 | 3 | Feed pagination controls allow users to know how many pages of items exist. They allow users to navigate forward and backward one page at a time, and to always be able to select the first and last page from the list. 4 | 5 | ## When to use 6 | - In combination with feeds, lists, or [chart table](/components/detail/chart-table) components, when the number of items is countable without making the page less performant 7 | 8 | ## When to consider something else 9 | - When the number of items is not easily counted without impacting performance, such as in a data table or legal resource table, use [data pagination](/components/detail/data-pagination) 10 | 11 | ## Status 12 | This component is not currently in use on the site, but the styles have been coded and it is ready to try out in usability testing. 13 | -------------------------------------------------------------------------------- /components/02-components/reaction-box/README.md: -------------------------------------------------------------------------------- 1 | A reaction box prompts users to give feedback about a specific new feature in the context of the production site. 2 | 3 | ## When to use 4 | - When a feature is experimental, and hypotheses about its usefulness need to be tested in production 5 | - If a feature has undergone usability testing, but requires additional validation with a wider general audience 6 | 7 | ## Guidance 8 | - Reaction boxes are not replacements for usability testing, but can measure general feedback from a wider audience 9 | 10 | ## Status 11 | This component is not currently in use on the site. Previously, we used reaction boxes to collect feedback on the new interactive charts and graph components in the data section. We've kept it in the pattern library because there could be a similar use case for a new feature in the future. 12 | 13 | ### GitHub issues 14 | - [#357: Design in-context feedback mechanism for interactive data modules](https://github.com/18F/fec-style/issues/357) 15 | -------------------------------------------------------------------------------- /components/02-components/feed/01-single-category/README.md: -------------------------------------------------------------------------------- 1 | Feeds display single posts chronologically, with the most recent posts appearing first. Feeds that show posts from one content category should be visually simple, and eliminate metadata fields that aren’t needed to tell one type of content from another. 2 | 3 | ## When to use 4 | - To display a short-medium length list of posts from one content or publication category 5 | 6 | ## When to consider something else 7 | - If the list of items is long (more than 7-10) consider using pagination within the feed or another type of interaction altogether 8 | - If the date of publication is irrelevant to the content or to users' needs, a long feed organized by date may be frustrating. Consider methods that order items by how frequently they are used. 9 | 10 | ### Examples 11 | - [Recent advisory opinions issued feed](https://www.fec.gov/data/legal/advisory-opinions/) 12 | - [Commission directives and policies](https://www.fec.gov/about/leadership-and-structure/) 13 | -------------------------------------------------------------------------------- /components/02-components/tooltips/README.md: -------------------------------------------------------------------------------- 1 | Tooltips contain contextual annotations or helper text on demand when a user hovers or focuses on an element, usually in informational icon. 2 | 3 | ## When to use 4 | - When a setting or control is highly specific to the FEC’s unique subject matter or context
5 | _Ex: The “[Restrict contributions](https://www.fec.gov/data/receipts)” filter_ 6 | 7 | ## When to consider something else 8 | - If users needs to refer back to the content frequently, or the content is critical to understanding functionality or context, consider making the annotation part of the constant interface 9 | 10 | ## Guidance 11 | - Keep the content short and direct 12 | - Tooltip content should not contain instructions for how to use an interface. If you find yourself writing copy that explains how to use the interface, evaluate whether you have actually solved the original design problem in a user-centered way. Conduct usability testing to better understand the problems with the interface’s design. 13 | -------------------------------------------------------------------------------- /components/02-components/cards/01-horizontal-cards/README.md: -------------------------------------------------------------------------------- 1 | Cards act as an entry point to finding more detailed information. They are intended to act as a high visual hierarchy link, and should appear and act clickable. 2 | 3 | ## When to use 4 | - To display collections of content that are of similar, (but not the same) type 5 | 6 | ## When to consider something else 7 | - Use a list if the design presents homogeneous content that is less than a few lines. This allows for faster scanning. 8 | - Use a [callout component](/components/detail/callout) if the design presents multiple links, and only one card 9 | 10 | ## Guidance 11 | - A card should be a singular link or provide a limited set of actions 12 | - Keep the content short and direct 13 | - Avoid inline links, except if the card uses the `card--wide` style, which allows for complex text structure. In this case, the card title should be the main entry point link. If necessary, there could be secondary, more specific inline links in the the copy below the card title. 14 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/01-single-select/single-select.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /components/02-components/tables/01-simple-table/README.md: -------------------------------------------------------------------------------- 1 | Simple tables are the standard table styling component. They create a bold row header and basic text entries. 2 | 3 | The `.simple-table--display` modifier class adds vertical rules, alternating background colors, and more padding between the cell content and the top/bottom cell borders. Simple tables with display modifiers are visually similar to `.datatables` and are most commonly used for legal resources search results lists, which present legal case results in a format that’s visually consistent with filtered data results. 4 | 5 | ## When to use 6 | - When a collection of information requires vertical alignment through columns for quick scanning and discovery of information 7 | 8 | ## When to consider something else 9 | - If you need a row header and a column header, or if you need to present financial data, consider the [custom table component](/components/detail/custom-table) 10 | 11 | ### GitHub issues 12 | - [#111: Adding simple table styles for cms pages](https://github.com/18f/fec-style/issues/111) 13 | -------------------------------------------------------------------------------- /components/02-components/pagination/01-data-pagination/data-pagination.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 | -------------------------------------------------------------------------------- /components/02-components/contact-items/README.md: -------------------------------------------------------------------------------- 1 | Contact items provide a consistent visual and structural format for content information. The icon should represent the method of contact or delivery. 2 | 3 | - By physical mail: `contact-item--mail` 4 | - By email: `contact-item--email` 5 | - By phone: `contact-item--phone` 6 | - By hand-delivery: `contact-item--hand` 7 | - By fax: `contact-item--fax` 8 | 9 | ## When to use 10 | - Use contact items when the design presents a list of possible contact methods
_Ex: [Submit a question to RAD page](https://www.fec.gov/help-candidates-and-committees/question-rad/)_ 11 | - Use when there is a single contact item that needs higher visibility as an available resource
_Ex: [Contact us page](https://www.fec.gov/contact-us/); [Advisory opinion process page](https://www.fec.gov/legal-resources/advisory-opinions-process/)_ 12 | 13 | ## When to consider something else 14 | - When there is only one recommended or possible method of contact, it may be more appropriate to display the contact information inline with the text or instructions. 15 | -------------------------------------------------------------------------------- /components/02-components/reaction-box/reaction-box.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | What do you think of this chart? 5 |
    6 |
  • 7 | 8 | 9 |
    • 10 |
  • 11 | 12 | 13 |
    • 14 |
  • 15 | 16 | 17 |
    • 18 |
  • 19 | 20 | 21 |
    • 22 |
23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /components/02-components/breadcrumbs/README.md: -------------------------------------------------------------------------------- 1 | The breadcrumbs component is used for navigation and to reinforce users' awareness of their location within the site structure. The breadcrumb path text is set by where the page lives in the site's information architecture, not by the user's click-path. 2 | 3 | ## Selecting styles 4 | The background container color for the breadcrumbs bar should match the color assigned to the information architecture of that section of the website. You can find this color by matching it to the color of the hero slab on the section's main landing page. 5 | 6 | ## When to use 7 | - On any page deeper in the site architecture than the main section landing pages 8 | 9 | ## When to consider something else 10 | - If the page is a landing page for one of the top-level menu items, breadcrumbs aren't needed and can be omitted. These pages include: 11 | - `/data` 12 | - `/help-for-candidates-and-committees` 13 | - `/legal-resources` 14 | - `/about` 15 | - `/press` 16 | 17 | ### GitHub issues 18 | - [#1595: Style breadcrumbs](https://github.com/fecgov/openFEC/issues/1595) 19 | -------------------------------------------------------------------------------- /components/02-components/filters/06-range/01-range/range.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Receipt amount 4 |
5 |
6 | 7 | 8 |
9 |
-
10 |
11 | 12 | 13 |
14 | 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /components/02-components/examples/example-paragraph/README.md: -------------------------------------------------------------------------------- 1 | The example paragraph component displays a text-based sample scenario. Example paragraphs give users relatable samples that illustrate complex concepts. They can accommodate complex styling, like lists and headers. 2 | 3 | Example components are stylistically similar to the [blockquote](/docs/typography) typography style, since both indicate a small pause in the main content for an illustrative sample or quotation. 4 | 5 | ## When to use 6 | - Users need a short, specific scenario to help them understand a concept 7 | 8 | ## When to consider something else 9 | - If a longer, more detailed scenario is required, consider creating a full example scenario page using the [Reporting example](/docs/page-layouts/reporting-example-page) page template in Wagtail 10 | 11 | ### GitHub issues 12 | - [#727: Design layout/placement plans for example resources on C&C Services lowest level article page templates](https://github.com/fecgov/fec-cms/issues/727) 13 | - [#1160: Create reporting example and scenario modules](https://github.com/fecgov/fec-cms/issues/1160) 14 | -------------------------------------------------------------------------------- /documentation/01-index.md: -------------------------------------------------------------------------------- 1 | The FEC Pattern Library is a collection of styles and design patterns that capture the design language and practices that make FEC.gov. 2 | This pattern library should: 3 | - Promote consistency across digital interfaces 4 | - Document best practices 5 | - Outline when, where, why, and how to use these patterns 6 | - Provide a testing area to prototype and build new patterns, or predictably edit existing patterns 7 | 8 | It should enable developers to quickly replicate components, and designers to focus more on improving the user experience than choosing the styling. 9 | 10 | ### Documentation 11 | The Typography, Colors, Grid, and Icons sections contain the foundational style guidance for the design language used across patterns. 12 | 13 | ### Components 14 | Components are small basic building blocks that are used to build larger features or layouts. 15 | 16 | ## Feedback 17 | Report a bug or access the code on GitHub. 18 | -------------------------------------------------------------------------------- /components/02-components/icon-headings/README.md: -------------------------------------------------------------------------------- 1 | Icon headings allow text to be indented by an image, which aligns the text with the top edge of the image. The image and text will be visually grouped, and the text will never wrap around or under the icon when responding to different screen sizes. 2 | 3 | ## When to use 4 | - When icons can be helpful way to recall a specific type of content, or a particular topic
5 | _Ex: Headlines on raising (or spending) [breakdown pages](https://www.fec.gov/data/raising/)_ 6 | - When you need to call more visual attention to a headline 7 | - When you need to group text with a specific image
8 | _Ex: Commissioner biography [thumbnails](https://www.fec.gov/about/leadership-and-structure/commissioners/)_ 9 | - When you need to create a soft visual break in the reading experience of a page 10 | 11 | ## When to consider something else 12 | - If the layout is already busy or cluttered, use a plain text headline instead 13 | - If you need to create a stronger visual break in the reading experience of a page, you may want to consider using a full-width slab container and a plain text headline 14 | -------------------------------------------------------------------------------- /static/js/init.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery'); 2 | var accordion = require('aria-accordion'); 3 | var A11yDialog = require('a11y-dialog'); 4 | var datefilter = require('./modules/date-filter'); 5 | var dropdown = require('./modules/dropdowns'); 6 | 7 | function KeywordModal() { 8 | this.elm = document.querySelector('.js-keyword-modal'); 9 | this.$elm = $(this.elm); 10 | this.dialog = new A11yDialog(this.elm); 11 | } 12 | 13 | $('.js-accordion').each(function(){ 14 | var contentPrefix = $(this).data('content-prefix') || 'accordion'; 15 | var openFirst = $(this).data('open-first') || false; 16 | var opts = { 17 | contentPrefix: contentPrefix, 18 | openFirst: openFirst 19 | }; 20 | new accordion.Accordion({}, opts); 21 | }); 22 | 23 | $('.js-dropdown').each(function() { 24 | new dropdown.Dropdown(this); 25 | }); 26 | 27 | $('.js-button-icon-dropdown').each(function() { 28 | new dropdown.Dropdown(this, {checkboxes: false}); 29 | }); 30 | 31 | if ($('.js-keyword-modal').length > 0) { 32 | new KeywordModal(); 33 | } 34 | 35 | if ($('.js-date-range').length > 0) { 36 | new datefilter.DateFilter(); 37 | } 38 | -------------------------------------------------------------------------------- /components/02-components/accordions/accordions.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
    5 |
  • 6 | 9 |
    10 |

    11 | Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. 12 |

    13 |
    14 |
    • 15 |
  • 16 | 19 |
    20 |

    21 | A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed. 22 |

    23 |
    24 |
    • 25 |
26 |
27 |
28 |
29 | -------------------------------------------------------------------------------- /components/02-components/breadcrumbs/breadcrumbs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 32 |
-------------------------------------------------------------------------------- /components/02-components/accordions/README.md: -------------------------------------------------------------------------------- 1 | Accordions are collapsible panels that provide users with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed. 2 | 3 | ## When to use 4 | - Users only need a few specific pieces of content within a page. 5 | - Information needs to be displayed in a small space. 6 | 7 | ## When to consider something else 8 | - If visitors need to see most or all of the information on a page. Use well-formatted text instead. 9 | - If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on. 10 | 11 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/accordions/) 12 | > - Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate. 13 | > - Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.) 14 | 15 | ### GitHub issues 16 | - [#315: Improve usability and visual design of accordion elements](https://github.com/18f/fec-style/issues/315) 17 | -------------------------------------------------------------------------------- /components/02-components/filters/03-dropdowns/01-single-select/README.md: -------------------------------------------------------------------------------- 1 | A dropdown allows users to select options from a hidden list 2 | 3 | Single select dropdowns allow users to select one option. 4 | 5 | ## When to use 6 | - When a user needs to choose from about seven to 15 possible options and you have limited space to display the options. For longer lists, ideally users would be able to use keyboard typing to start to match a result (this capability is currently not in place in FEC’s site but would be especially helpful for dropdowns of state lists). 7 | 8 | ## When to consider something else 9 | - If the list of options is very short. Use radio buttons or checkboxes instead. 10 | - If the list of options is very long. Let users type the same information into a text input that suggests possible options instead (search with typeahead matching). 11 | 12 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#dropdown) 13 | > Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use. 14 | 15 | ### GitHub issues 16 | - [#297: Implement new button styles](https://github.com/18F/fec-style/issues/297) 17 | -------------------------------------------------------------------------------- /components/02-components/cards/03-major-cards/major-cards.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |
7 |

Strategy, budget and performance

8 |
9 |

This archive provides documents about the agency’s overarching strategy, activities and funding.

10 | 38 results 11 | 12 | 13 | 14 |
15 |

Freedom of Information Act (FOIA) reports

16 |
17 |

Annual FOIA reports include information and statistics about the requests for records that the FEC receives from the public.

18 | 34 results 19 | 20 | 21 | 22 |
23 |

Privacy information

24 |
25 |

The FEC takes privacy seriously. Access privacy notices and read privacy policy.

26 | 4 results 27 | 28 | 29 |
30 | 31 |
32 | -------------------------------------------------------------------------------- /components/02-components/feed/02-multiple-category/README.md: -------------------------------------------------------------------------------- 1 | Feeds display single posts chronologically, with the most recent posts appearing first. Feeds that show posts from multiple content categories can display more metadata elements, such as category tags or sub-category labels, which help people identify the differences. 2 | 3 | ## When to use 4 | - When users are browsing a list of items from more than one content or publication category, and the most recent content is more likely to be of interest than older items 5 | - Help users navigate between types of content by providing basic category or keyword filtering 6 | 7 | ## When to consider something else 8 | - If the date of publication is irrelevant to the content or to users' needs, a long feed organized by date may be frustrating. Consider methods that order items by how frequently they are used. 9 | 10 | ### Examples 11 | - [Latest updates feed](https://www.fec.gov/updates/) 12 | - Reports about the FEC: [Strategy, budget and performance category](https://www.fec.gov/about/reports-about-fec/strategy-budget-and-performance/) 13 | 14 | ### GitHub issues 15 | - [#443: Create UX design for "missives" index page](https://github.com/fecgov/fec-cms/issues/443) 16 | - [#454: Visual design of Latest Updates index page](https://github.com/fecgov/fec-cms/issues/454) 17 | -------------------------------------------------------------------------------- /components/02-components/messages/06-message-no-results/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - Use in search results and filtered results lists when the system performed as expected, and the user took the correct, complete set of actions but there was no match. Use targeted buttons so help direct the user to possible next steps. 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 5 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 6 | > - Be polite in error messages — don’t place blame on the user. 7 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 8 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 9 | > - Allow a user to dismiss a notification wherever appropriate. 10 | > - Don’t include notifications that aren’t related to the user’s current goal. 11 | -------------------------------------------------------------------------------- /components/02-components/feed/01-single-category/single-category.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 10 | 11 | 16 | 17 | 22 | 23 |
24 | 25 |
26 | -------------------------------------------------------------------------------- /components/02-components/filters/05-cycle-select/cycle-select.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 9 |
10 |
11 | Time period: 12 |
13 | 19 | 25 | 31 | 37 |
38 |
39 |
40 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/02-standalone/standalone.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | Restrict contributions 6 |
7 | 8 | 11 |
12 | 13 |
    14 |
  • 15 | 16 | 19 |
    • 20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /components/02-components/committee-status/README.md: -------------------------------------------------------------------------------- 1 | Committee status indicators provide users with a quick way to determine whether a committee is active or terminated. These indicators appear on committee profile pages and reflect the committee’s status for each two-year period. They also appear in the global search and provide one quick way for users to distinguish between two similarly named committees. 2 | 3 | ### When to use 4 | - Users need to determine a committee’s active or terminated status. 5 | - Space is limited. 6 | 7 | ### When to consider something else 8 | - If the user needs in depth information about the committee's creation or termination date, or other information about why the committee was terminated. 9 | 10 | 11 | ### GitHub issues 12 | - [#3325: Design solution for active vs terminated committee status](https://github.com/fecgov/fec-cms/issues/3325) 13 | - [#3752: Implement committee status on global committee search dropdown list](https://github.com/fecgov/fec-cms/issues/3752) 14 | - [#3642: Implement committee status on committee profile pages](https://github.com/fecgov/fec-cms/issues/3642) 15 | - [#3781: Add committee active/terminated indicator on profile page](https://github.com/fecgov/fec-cms/pull/3781) 16 | - [#3831: Add active/terminated indicator on dropdown list.](https://github.com/fecgov/fec-cms/pull/3831) 17 | 18 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/01-success-validation/success-validation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
    6 |
  • 7 | 8 |
    9 | Filter added 10 |
    11 | 270,000 fewer results
    12 | 13 |
    • 14 |
15 |
16 | 17 | 20 |
21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /components/02-components/filters/01-checkboxes/01-multiple/README.md: -------------------------------------------------------------------------------- 1 | Checkboxes allow users to select one or more options from a visible list. 2 | 3 | ## When to use 4 | - When a user can select any number of choices from a set list. 5 | - When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off. 6 | - When users need to see all the available options at a glance. 7 | 8 | ## When to consider something else 9 | - If there are too many options to display on a mobile screen. 10 | - If a user can only select one option from a list (use radio buttons instead). 11 | 12 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#checkboxes) 13 | > - Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option. 14 | > - List options vertically if possible; horizontal listings can make it difficult to tell which label pertains to which checkbox. 15 | > - Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.” 16 | > - Make sure selections are adequately spaced for touch screens. 17 | 18 | ### GitHub issues 19 | - [#314: Improve usability and visual design of check box and radio button elements](https://github.com/18f/fec-style/issues/314) 20 | -------------------------------------------------------------------------------- /public/nginx.conf: -------------------------------------------------------------------------------- 1 | # From https://github.com/cloudfoundry/staticfile-buildpack/blob/master/conf/nginx.conf 2 | # Adds X-Frame-Options for fractal 3 | 4 | worker_processes 1; 5 | daemon off; 6 | 7 | error_log ((APP_ROOT))/nginx/logs/error.log; 8 | events { worker_connections 1024; } 9 | 10 | http { 11 | charset utf-8; 12 | log_format cloudfoundry '$http_x_forwarded_for - $http_referer - [$time_local] "$request" $status $body_bytes_sent'; 13 | access_log ((APP_ROOT))/nginx/logs/access.log cloudfoundry; 14 | default_type application/octet-stream; 15 | include mime.types; 16 | sendfile on; 17 | 18 | gzip on; 19 | gzip_disable "msie6"; 20 | gzip_comp_level 6; 21 | gzip_min_length 1100; 22 | gzip_buffers 16 8k; 23 | gzip_proxied any; 24 | gunzip on; 25 | gzip_static always; 26 | gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/xml+rss; 27 | 28 | tcp_nopush on; 29 | keepalive_timeout 30; 30 | port_in_redirect off; # Ensure that redirects don't include the internal container PORT - <%= ENV["PORT"] %> 31 | server_tokens off; 32 | 33 | server { 34 | listen ((PORT)); 35 | server_name localhost; 36 | add_header X-Frame-Options SAMEORIGIN; 37 | 38 | location / { 39 | root ((APP_ROOT))/public; 40 | index index.html index.htm Default.htm; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /components/02-components/icon-headings/icon-headings.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Raising breakdown 5 |

6 |
7 |
8 | 9 |
10 |
11 | Icon representing interactive overviews 12 |
13 |

Interactive overviews

14 |

You don’t have to be an expert to learn more about campaign finance. These overviews are a visual introduction to how money is raised and spent in federal elections.

15 |
16 |
17 |
18 | 19 |
20 |
21 |
22 | Headshot of Cynthia L. Bauerly 23 |
24 |
Cynthia L. Bauerly
25 |
Democrat
26 |
June 2008 to February 2013
27 |
28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /components/02-components/messages/05-message-error/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - The user has taken an action that the system cannot accept. Always offer guidance to correcting their action. 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 5 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 6 | > - Be polite in error messages — don’t place blame on the user. 7 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 8 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 9 | > - Allow a user to dismiss a notification wherever appropriate. 10 | > - Don’t include notifications that aren’t related to the user’s current goal. 11 | 12 | ### GitHub issues 13 | - [#158: In order to have consistent and easy-to-implement alerts, define alert icon styles](https://github.com/18F/fec-style/issues/158) 14 | - [#266: Unify error / info / message styles](https://github.com/18f/fec-style/issues/266) 15 | -------------------------------------------------------------------------------- /components/02-components/messages/03-message-success/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - The user has taken an action that affirmatively completes. Always help them find what to do next, including confirming their previous action. 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 5 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 6 | > - Be polite in error messages — don’t place blame on the user. 7 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 8 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 9 | > - Allow a user to dismiss a notification wherever appropriate. 10 | > - Don’t include notifications that aren’t related to the user’s current goal. 11 | 12 | ### GitHub issues 13 | - [#158: In order to have consistent and easy-to-implement alerts, define alert icon styles](https://github.com/18F/fec-style/issues/158) 14 | - [#266: Unify error / info / message styles](https://github.com/18f/fec-style/issues/266) 15 | -------------------------------------------------------------------------------- /components/02-components/messages/02-message-info/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - The user needs this information, but does not need to take any action. This should be used sparingly, as it interrupts the viewing flow intentionally. 3 | 4 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 5 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 6 | > - Be polite in error messages — don’t place blame on the user. 7 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 8 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 9 | > - Allow a user to dismiss a notification wherever appropriate. 10 | > - Don’t include notifications that aren’t related to the user’s current goal. 11 | 12 | ### GitHub issues 13 | - [#158: In order to have consistent and easy-to-implement alerts, define alert icon styles](https://github.com/18F/fec-style/issues/158) 14 | - [#266: Unify error / info / message styles](https://github.com/18f/fec-style/issues/266) 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fec-pattern-library", 3 | "version": "0.1.0", 4 | "dependencies": { 5 | "ajv": "^6.12.6", 6 | "a11y-dialog": "2.3.1", 7 | "aria-accordion": "^0.1.1", 8 | "jquery": "^3.6.3", 9 | "jquery.inputmask": "3.3.4", 10 | "moment": "2.29.4", 11 | "perfect-scrollbar": "0.6.2" 12 | }, 13 | "devDependencies": { 14 | "@frctl/fractal": "1.4.1", 15 | "@frctl/nunjucks": "^1.0.x", 16 | "@frctl/mandelbrot": "1.5.0", 17 | "browserify": "^16.5.2", 18 | "del": "^3.0.0", 19 | "fec-cms": "git+https://github.com/fecgov/fec-cms.git#develop", 20 | "fs-extra": "^4.0.3", 21 | "gulp": "^4.0.2", 22 | "gulp-clean-css": "^3.10.0", 23 | "gulp-consolidate": "^0.2.0", 24 | "gulp-rename": "^1.4.0", 25 | "gulp-sass": "^5.1.0", 26 | "npm-run-all": "^4.1.5", 27 | "sass": "^1.26.10", 28 | "snyk": "^1.1105.0", 29 | "uglify-js": "^3.17.4", 30 | "underscore": "^1.13.6" 31 | }, 32 | "scripts": { 33 | "build": "npm-run-all --parallel build-sass build-js --serial build-library", 34 | "build-sass": "gulp build-sass", 35 | "build-js": "browserify static/js/init.js | uglifyjs > public/js/main.js", 36 | "build-icons-component": "gulp build-icons-component", 37 | "build-library": "fractal build", 38 | "start": "fractal start --sync", 39 | "test": "echo No tests to run; exit 0", 40 | "snyk-protect": "snyk protect", 41 | "prepare": "npm run snyk-protect" 42 | }, 43 | "snyk": true 44 | } 45 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/01-side-navigation/README.md: -------------------------------------------------------------------------------- 1 | A hierarchical vertical navigation on the left side of a page that helps users navigate between pages within a section of the website. Top-level links navigate to new pages, and initiate a new page load. Second-level links navigate to sections within that page. 2 | 3 | ## When to use 4 | - When users are deciding between grouped pages of content within one section of the website 5 | - To display a navigational hierarchy with one to two levels. If three levels are needed, the styles for the third level will need to be designed in the future. 6 | - To display the “sub-navigation” within a section of the website 7 | 8 | ## When to consider something else 9 | - If you are considering multiple pages, but the content within each page is very short, consider using one medium-longer length page and using an [inpage navigation component](/components/detail/inpage-navigation) instead 10 | 11 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/sidenav/) 12 | > - Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to. 13 | > - Keep the navigation links short. They can be shorter derivatives of page titles themselves. 14 | > - If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth. 15 | -------------------------------------------------------------------------------- /components/02-components/heroes/heroes.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {% if modifier == "hero--data" %} 5 |

Campaign finance data

6 |

See how candidates and committees raise and spend money in federal elections. This financial data helps voters make informed decisions.

7 | {% elif modifier == "hero--legal" %} 8 |

Legal resources

9 |

Explore relevant statutes, regulations, Commission actions and court cases. Making these resources public clarifies campaign finance legal requirements.

10 | {% elif modifier == "hero--registration" %} 11 |

Registration and reporting

12 |

Federal candidates and political committees must register with the FEC when they reach certain thresholds. Once registered, they file regular reports about their financial activity. Learn more about these groups and the requirements that apply to them.

13 | {% elif modifier == "hero--press" %} 14 |

Press

15 |

The Press Office educates reporters about Commission actions and campaign finance activity, law and regulations. The Office keeps the public up-to-date on Commission activities through press releases and a Weekly Digest.

16 | {% endif %} 17 |
18 |
19 | -------------------------------------------------------------------------------- /components/02-components/filters/02-radio-buttons/README.md: -------------------------------------------------------------------------------- 1 | Radio buttons allow users to select exactly one option from a visible list. 2 | 3 | ## When to use 4 | - When users need to select only one option out of a set of mutually exclusive choices. 5 | - When the number of available options can fit onto a mobile screen. 6 | 7 | ## When to consider something else 8 | - Consider checkboxes if users need to select more than one option or if there is only one item to select. 9 | - Consider a dropdown if you don’t have enough space to list out all available options. 10 | - Consider toggles buttons which are styled radio buttons used when the interaction indicates whether a setting is on or off for an entire view. 11 | - If users should be able to select zero of the options. 12 | 13 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/form-controls/#radio-buttons) 14 | > - Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option. 15 | > - Options that are listed vertically are easier to read than those that are listed horizontally. Horizontal listings can make it difficult to tell which label pertains to which radio button. 16 | > - Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. If you are unsure, leave nothing selected by default. 17 | 18 | ### GitHub issues 19 | - [#314: Improve usability and visual design of check box and radio button elements](https://github.com/18f/fec-style/issues/314) 20 | -------------------------------------------------------------------------------- /components/01-basics/_reports-landing-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Reports landing page template

3 |

Reports landing pages are Wagtail page templates. They display document feed pages as major card components in a grid layout with an introductory description.

4 |
5 | 6 |
7 |
8 | 9 |
10 |

Components

11 |
    12 |
  • Title
    • 13 |
  • Intro
    • 14 |
  • Document feeds
    Select a document feed page to display as a card. The number of documents in the collection will automatically be displayed. 15 |
      16 |
    • Page
      • 17 |
    • Description
      • 18 |
    19 |
    • 20 |
21 |
22 | 23 |
24 | Mockup of the reports landing page template components 25 |

When to use

26 |
    27 |
  • When users need to scan and compare similar collections of documents so that they can quickly get to the documents they're looking for.
    • 28 |
29 |

Example pages

30 | 33 | 34 |
35 | 36 |
37 |
38 | -------------------------------------------------------------------------------- /components/02-components/messages/04-message-alert/README.md: -------------------------------------------------------------------------------- 1 | ## When to use 2 | - The user has reached a dead end through their navigation—either they’ve entered a search which returns no results, or there is no data available in this entry. Offer users navigational assistance to get them back on the main trail. 3 | 4 | ## Guidance 5 | - Be careful not to treat this like an error. It’s the site that has functioned in an unexpected way, not an error on the user’s part. 6 | 7 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 8 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 9 | > - Be polite in error messages — don’t place blame on the user. 10 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 11 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 12 | > - Allow a user to dismiss a notification wherever appropriate. 13 | > - Don’t include notifications that aren’t related to the user’s current goal. 14 | 15 | ### GitHub issues 16 | - [#158: In order to have consistent and easy-to-implement alerts, define alert icon styles](https://github.com/18F/fec-style/issues/158) 17 | - [#266: Unify error / info / message styles](https://github.com/18f/fec-style/issues/266) 18 | -------------------------------------------------------------------------------- /components/02-components/filters/07-search/03-free-text-only/free-text-only.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | 9 |
10 |
11 |
12 | 13 |
14 | 15 | 18 |
19 |
20 |
21 | 22 |
23 | 24 | 27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /components/02-components/header/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | An official website of the United States Government 6 | US flag signifying that this is a United States Federal Government website 7 | 8 |
9 | FEC logo 10 | Federal Election Commission | United States of America 11 |
    12 |
  • Calendar
    • 13 |
    • 14 |
  • 15 | 31 |
    • 32 |
33 |
34 |
35 | -------------------------------------------------------------------------------- /components/02-components/messages/05-message-error/message-error.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Input required

4 |

Please fill out at least one field.

5 |
6 |
    7 |
    • 8 |
9 |
10 |
11 |
12 | 13 |
14 |
15 |

Input required

16 |

Please fill out at least one field.

17 |
18 |
    19 |
    • 20 |
21 |
22 |
23 |
24 | 25 |
26 |
27 |

Input required

28 |

Please fill out at least one field.

29 |
30 |
    31 |
    • 32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |

Input required

40 |

Please fill out at least one field.

41 |
42 |
    43 |
    • 44 |
45 |
46 |
47 |
48 | -------------------------------------------------------------------------------- /fractal.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | //Require the path module 4 | const path = require('path'); 5 | 6 | // Require the Fractal module 7 | const fractal = module.exports = require('@frctl/fractal').create(); 8 | 9 | //Give your project a title. 10 | 11 | fractal.set('project.title', 'FEC Pattern Library'); 12 | 13 | // Tell Fractal where to look for components. 14 | 15 | fractal.components.set('path', path.join(__dirname, 'components')); 16 | 17 | //Tell Fractal where to look for documentation pages. 18 | 19 | fractal.docs.set('path', path.join(__dirname, 'documentation')); 20 | 21 | //Tell the Fractal web preview plugin where to look for static assets. 22 | fractal.web.set('static.path', path.join(__dirname, 'public')); 23 | 24 | fractal.components.engine('@frctl/nunjucks'); // register the Nunjucks adapter for your components 25 | fractal.components.set('ext', '.html'); // look for files with a .njk file extension 26 | fractal.components.set('default.preview', '@preview'); 27 | fractal.web.set('builder.dest', __dirname + '/docs'); 28 | 29 | // Add custom "Not in use" status 30 | fractal.components.set('statuses', { 31 | ready: { 32 | label: "Ready", 33 | description: "Ready to implement.", 34 | color: "#29CC29" 35 | }, 36 | future: { 37 | label: "To be implemented", 38 | description: "To be implemented.", 39 | color: "#3e8a9a" 40 | }, 41 | unused: { 42 | label: "Not in use", 43 | description: "Not currently being used.", 44 | color: "#FF0000" 45 | } 46 | }); 47 | 48 | // Theme 49 | const mandelbrot = require('@frctl/mandelbrot'); 50 | const fecTheme = mandelbrot({ 51 | favicon: '/img/favicon/favicon.ico', 52 | skin: 'navy', 53 | nav: ['docs', 'components'], 54 | panels: ['notes', 'html', 'view', 'context', 'info'] 55 | }); 56 | 57 | fractal.web.theme(fecTheme); 58 | -------------------------------------------------------------------------------- /components/01-basics/_document-feed-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Document feed page template

3 |

Document feed pages are Wagtail page templates. They contain all the documents in a collection, and display them in a feed which can be filtered by category and publication year.

4 |
5 | 6 |
7 |
8 | 9 |
10 |

Components

11 |
    12 |
  • Title
    • 13 |
  • Intro
    • 14 |
  • Category
    Choose the subcategory from the "Reports" document collection in Wagtail that applies to this section
    • 15 |
16 |
17 | 18 |
19 | Mockup of the document feed page template components 20 |

When to use

21 |
    22 |
  • When users need to scan or browse a collection of documents in a single parent category.
    • 23 |
24 |

Example pages

25 | 30 | 31 |
32 | 33 |
34 |
35 | -------------------------------------------------------------------------------- /components/02-components/messages/01-message-sizes/README.md: -------------------------------------------------------------------------------- 1 | Messages keep users informed of important and sometimes time-sensitive changes. 2 | 3 | ## When to use 4 | 5 | #### Big 6 | - When a whole page is impacted by the change, and the message is the only page content. For example, the 404 or 500 error pages. 7 | 8 | #### Standard 9 | - When the message is long, complex, or needs to offer the user instructions for how to continue on after the message 10 | 11 | #### Small 12 | - When the message needs to appear in a small space within the layout and does not need a title or complex text structure 13 | 14 | #### Mini 15 | - When the message needs to appear in a very small space within the layout 16 | - When you need to use a message as an element within a layout that’s always present, instead of one that appears briefly
17 | _Ex: Time-sensitive events being promoted on the [home page](https://www.fec.gov/)_
18 | _Ex: Export warnings on [data tables](https://www.fec.gov/data/receipts)_ 19 | 20 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/alerts/) 21 | > - When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code. 22 | > - Be polite in error messages — don’t place blame on the user. 23 | > - Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message. 24 | > - But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored. 25 | > - Allow a user to dismiss a notification wherever appropriate. 26 | > - Don’t include notifications that aren’t related to the user’s current goal. 27 | 28 | ### GitHub issues 29 | - [#266: Unify error / info / message styles](https://github.com/18f/fec-style/issues/266) 30 | -------------------------------------------------------------------------------- /components/02-components/buttons/01-basic/README.md: -------------------------------------------------------------------------------- 1 | ## Selecting styles 2 | Buttons follow the **color pairing** rules used across the site. There are three defined styles for buttons: *standard*, *call to action*, and *alternate*. 3 | - Use `button--standard` for normal scenarios 4 | - Use `button--cta` when you need to drive attention specifically to an item or interaction 5 | - Use `button--alt` for less frequently used options or low-priority interactions so that they don't distract from the content 6 | 7 | ## When to use 8 | - Use buttons for the most important actions you want users to take on your site, such as “download,” “sign up,” or “log out.” 9 | 10 | ## When to consider something else 11 | - If you want to lead users between pages of a website. Use links instead. 12 | - Less popular or less important actions may be visually styled as links. 13 | 14 | ### Guidance from the [U.S. Web Design System](https://designsystem.digital.gov/components/buttons/) 15 | > - Generally, use primary buttons for actions that go to the next step and use secondary buttons for actions that happen on the current page. 16 | > - Style the button most users should click in a way that distinguishes from other buttons on the page. Try using the “large button” or the most visually distinct fill color. 17 | > - Make sure buttons should look clickable—use color variations to distinguish static, hover and active states. 18 | > - Avoid using too many buttons on a page. 19 | > - Use sentence case for button labels. 20 | > - Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “download,” “view” or “sign up”). 21 | > - Make the first word of the button’s label a verb. For example, instead of “Complaint Filing” label the button “File a complaint.” 22 | > - At times, consider adding an icon to signal specific actions (“download”, “open in a new window”, etc). 23 | 24 | ### GitHub issues 25 | - [#288: Revise base button design](https://github.com/18F/fec-style/issues/288) 26 | - [#297: Implement new button styles](https://github.com/18F/fec-style/issues/297) 27 | -------------------------------------------------------------------------------- /components/02-components/resource-bar/02-endbar/endbar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Legal citations

5 |
6 |
7 |
8 |
Statutes
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Regulations
16 | 21 |
22 |
23 |
This opinion cites these earlier opinions
24 |
25 | 26 |
Green Party of the United States

27 | 28 |
Green Party of Connecticut

29 | 30 |
Green Party of Virginia

31 | 32 |
Green-Rainbow Party

33 | 34 |
11 Libertarian State Committees

35 | 36 |
Ohio Green Party

37 |
38 |
39 |
40 |
This opinion is cited by these later opinions
41 |
Isn't cited by later opinions
42 |
43 |
44 |
45 |
46 |
47 |
48 | -------------------------------------------------------------------------------- /public/components/i-table--primary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | i-table--primary 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /components/02-components/messages/01-message-sizes/message-sizes.html: -------------------------------------------------------------------------------- 1 |
2 |
Big
3 |
4 |

Server error

5 |

Sorry, this page failed to load. This happened because of an internal error, and our web team has been notified. Please try again, and thanks for your patience.

6 |
7 |

If you'd like to contact our team, we're available by email or GitHub.

8 |

Return home

9 |

Or try searching an archive of the old FEC.gov design.

10 |
11 |
12 |
13 | 14 |
15 |
Standard with action area
16 |
17 |

Oops!

18 |

We had trouble processing your request. Please try reloading the page.

19 |
20 |

Still can't find what you're looking for?

21 | 26 |
27 |
28 | 29 |
Standard
30 |
31 |

Oops!

32 | We had trouble processing your request. Please try reloading the page. 33 |
34 | 35 |
36 | This entity has no financial data for the 2011-2012 election cycle. 37 |
38 | 39 |
Small
40 |
41 | Due to the large number of transactions, records begin in 2011. 42 |
43 | 44 |
Mini
45 |
46 | Use bulk data to export more than 500,000 records. 47 |
48 |
49 | -------------------------------------------------------------------------------- /components/02-components/cards/02-vertical-cards/vertical-cards.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 |
7 | 8 |
9 | Icon representing elections 10 |
11 |
12 |

Elections »

13 |

Find all candidates in the 2018 Wisconsin Senate election

14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 | Icon representing a profile page 24 |
25 |
26 |

Profiles »

27 |

Find candidates or committees in any election

28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 | Icon representing a data table 38 |
39 |
40 |

Advanced data »

41 |

Search, filter and download data

42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 | Icon of a stylized bar chart 52 |
53 |
54 |

Raising and spending »

55 |

Explore common raising and spending questions with real data

56 |
57 | 58 |
59 |
60 | 61 |
62 | -------------------------------------------------------------------------------- /components/02-components/tables/03-custom-table/custom-table.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Six-month financial activity of Congressional candidates

4 |

(dollar figures in millions)

5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
YearNumber of candidatesReceiptsDisbursementsDebts owedCash on hand
2017977$386.5$187.6$39.7$508.0
2015658$285.0$120.1$34.8$449.8
2013704$287.2$137.9$29.0$351.0
2011778$281.3$118.9$46.8$340.0
2009794$238.3$104.5 $29.8$360.2
2007713$230.1$94.8$38.2$313.8
68 |
69 |
*Includes activity from January 1 of the pre-election year through June 30 of the same year. Contribution limits are indexed for inflation every cycle. The totals in the 2017 row may differ slightly from the sum of the numbers in the two subsequent paragraphs as the numbers have been rounded. The number of candidates reflects the number of candidate committees that filed reports with financial activity in a given election cycle.
70 |
71 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Python CircleCI 2.0 configuration file 2 | # Check https://circleci.com/docs/2.0/language-python/ for more details 3 | version: 2.1 4 | jobs: 5 | build: 6 | docker: 7 | - image: cimg/node:22.1.0 8 | 9 | working_directory: ~/repo 10 | 11 | steps: 12 | - checkout 13 | 14 | - restore_cache: 15 | keys: 16 | - fec-pattern-library-dependencies-{{ checksum "package.json" }} 17 | # fallback to using the latest cache if no exact match is found 18 | - fec-pattern-library-dependencies- 19 | 20 | - run: 21 | name: Install Node.js Dependencies 22 | command: | 23 | npm upgrade 24 | npm install 25 | npm run build 26 | 27 | - save_cache: 28 | paths: 29 | - ./node_modules 30 | key: fec-pattern-library-dependencies-{{ checksum "package.json" }} 31 | 32 | deploy-job: 33 | docker: 34 | - image: cimg/node:18.17.1 35 | 36 | working_directory: ~/repo 37 | 38 | steps: 39 | - checkout 40 | 41 | - restore_cache: 42 | keys: 43 | - fec-pattern-library-dependencies-{{ checksum "package.json" }} 44 | # fallback to using the latest cache if no exact match is found 45 | - fec-pattern-library-dependencies- 46 | 47 | - run: 48 | name: Install Node.js Dependencies 49 | command: | 50 | npm upgrade 51 | npm install 52 | npm run build 53 | 54 | - save_cache: 55 | paths: 56 | - ./node_modules 57 | key: fec-pattern-library-dependencies-{{ checksum "package.json" }} 58 | 59 | - run: 60 | name: Install CF CLI 61 | command: | 62 | mkdir -p $HOME/bin 63 | export PATH=$HOME/bin:$PATH 64 | curl -L "https://cli.run.pivotal.io/stable?release=linux64-binary&version=8.9.0" | tar xzv -C $HOME/bin 65 | 66 | - run: 67 | name: Deploy Pattern Library 68 | command: | 69 | export PATH=$HOME/bin:$PATH 70 | ./bin/cf_deploy.sh fec-pattern-library fec-beta-fec dev 71 | 72 | workflows: 73 | build-deploy: 74 | jobs: 75 | - build 76 | - deploy-job: 77 | requires: 78 | - build 79 | filters: 80 | branches: 81 | only: master 82 | -------------------------------------------------------------------------------- /components/02-components/option-components/option-components.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Search rulemakings

6 |

Use SERs to search completed and ongoing Commission rulemakings. Search for proposed rules, final rules, public comments and hearing testimony. Additionally, submit comments on proposed regulations and other rulemaking documents.

7 | Search and comment 8 |
9 | 12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 |

Explanations and Justifications (E&Js)

21 |

The Commission writes an E&J whenever it submits to Congress a new regulation or amends an old one. This archive compiles all E&Js written to accompany FEC regulations, from 1975 to present.

22 | Browse E&Js 23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 |

Public hearings

33 |

The Commission periodically holds public hearings at its headquarters in Washington, DC. These hearings offer interested persons an opportunity to testify concerning proposed regulations and other matters that come before the Commission. 

34 |

Upcoming hearings and those held within the last several years are listed in reverse chronological order with links to relevant documents.

35 | Public hearings archive 36 |
37 | 43 |
44 |
45 |
46 | -------------------------------------------------------------------------------- /components/01-basics/_reporting-example-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Reporting example page template

3 |

Reporting example pages are Wagtail page templates. They are used specifically for “How to report” content that supports specific guide topics, or for Example scenario pages (which have not been put into use yet, but share the design intentions in the template). 4 |

5 |
6 | 7 |
8 |
9 | 10 |
11 |

Components

12 |
    13 |
  • Title
    • 14 |
  • Pre-title
    “How to report,” “Example scenario”
    • 15 |
  • Feature image
    Used only for example scenario pages. If included, it will be cropped to a small circle and appear to the left of the page title.
    • 16 |
  • Body
    The body module can include: 17 |
      18 |
    • Paragraph
      • 19 |
    • Example image
      • 20 |
    • Reporting example cards
      • 21 |
    22 |
    • 23 |
  • Related media
    • 24 |
25 |
26 | 27 |
28 | Mockup of the reporting example page template components 29 |

When to use

30 |
    31 |
  • Pages about "How to report"
    • 32 |
  • Example scenario pages for a fictional in-depth case study
    • 33 |
34 |

Example pages

35 | 40 |
41 | 42 |
43 |
44 | -------------------------------------------------------------------------------- /components/02-components/secondary-navigation/01-side-navigation/side-navigation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 42 |
43 |
44 | -------------------------------------------------------------------------------- /components/02-components/messages/03-message-success/message-success.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Thanks for helping us improve

4 |

This information has been reported on GitHub, where it's publicly visible.

5 |
6 |
    7 |
    • 8 |
    • 9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |

Thanks for helping us improve

17 |

This information has been reported on GitHub, where it's publicly visible.

18 |
19 |
    20 |
    • 21 |
    • 22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |

Thanks for helping us improve

30 |

This information has been reported on GitHub, where it's publicly visible.

31 |
32 |
    33 |
    • 34 |
    • 35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |

Thanks for helping us improve

43 |

This information has been reported on GitHub, where it's publicly visible.

44 |
45 |
    46 |
    • 47 |
    • 48 |
49 |
50 |
51 |
52 | -------------------------------------------------------------------------------- /components/02-components/messages/04-message-alert/message-alert.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Oops: We messed up

4 |

We had trouble processing your request. Please try reloading the page.

5 |
6 |

Still not working?

7 |
    8 |
    • 9 |
    • 10 |
    • 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |

Oops!

19 |

We had trouble processing your request. Please try reloading the page.

20 |
21 |

Still not working?

22 |
    23 |
    • 24 |
    • 25 |
    • 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |

Oops!

34 |

We had trouble processing your request. Please try reloading the page.

35 |
36 |

Still not working?

37 |
    38 |
    • 39 |
    • 40 |
    • 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |

Oops!

49 |

We had trouble processing your request. Please try reloading the page.

50 |
51 |

Still not working?

52 |
    53 |
    • 54 |
    • 55 |
    • 56 |
57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /components/01-basics/_collection-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Collection page template

3 |

Collection pages are Wagtail page templates. They contain an introduction, a sidebar with links to related or sibling content categories, and sections that list steps or procedures in the logical or chronological order that they apply. Each step links to its own page of instructions or information.

4 |
5 | 6 |
7 |
8 | 9 |
10 |

Components

11 |
    12 |
  • Title
    • 13 |
  • Body
    A paragraph is the standard option, but the body module can include: 14 |
      15 |
    • Paragraph
      • 16 |
    • HTML
      • 17 |
    • Image
      • 18 |
    • Table
      • 19 |
    • Custom table
      • 20 |
    21 |
    • 22 |
  • Sidebar, which can contain: 23 |
      24 |
    • Related pages
      Sibling pages from the same guide
      • 25 |
    26 |
    • 27 |
  • Sections, which can contain: 28 |
      29 |
    • Title
      The inpage side navigation is automatically generated from the section title elements
      • 30 |
    • Introduction paragraph
      • 31 |
    • Bulleted list
      • 32 |
    33 |
    • 34 |
  • Reporting examples
    A collection of all reporting examples embedded in the pages above
    • 35 |
36 |
37 | 38 |
39 | Mockup of the collection page template components 40 |

When to use

41 |
    42 |
  • For each of the primary content categories of a Guide in the Help for Candidates and Committees section
    • 43 |
44 |

Example pages

45 | 50 | 51 |
52 | 53 |
54 |
55 | -------------------------------------------------------------------------------- /components/01-basics/_meeting-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Meeting page template

3 |

Meeting pages are Wagtail page templates. They are used for open meeting pages, public hearing pages, and executive session pages. These pages are designed to be published ahead of time to set the calendar of meetings, and to be filled with content as it becomes available.

4 |
5 | 6 |
7 |
8 | 9 |
10 |

Components

11 |
    12 |
  • Title
    • 13 |
  • Agenda
    • 14 |
  • Meeting details 15 |
      16 |
    • Date
      • 17 |
    • Time
      • 18 |
    • Meeting type
      This module automatically sets a tag at the top of the page, and sets the standard introduction text when the author selects the page template
      • 19 |
    20 |
    • 21 |
  • Sunshine notice document uploads
    • 22 |
  • Meeting minutes 23 |
      24 |
    • Links
      • 25 |
    • Approved minutes date
      • 26 |
    27 |
    • 28 |
  • Meeting media / Recordings 29 |
      30 |
    • Video URL
      • 31 |
    • Audio URL
      • 32 |
    • Meeting transcript
      • 33 |
    • Live video and live captions
      When this field is populated, the module will appear at the top of the page. Use when the meeting is happening.
      • 34 |
    35 |
    • 36 |
  • Imported meeting content
    Scraped HTML of old meeting pages
    • 37 |
38 |
39 | 40 |
41 | Mockup of the meeting page template components 42 |

When to use

43 |
    44 |
  • Open meeting pages
    • 45 |
  • Public hearing pages
    • 46 |
  • Executive session pages
    • 47 |
48 |

Example pages

49 | 54 |
55 | 56 |
57 |
58 | -------------------------------------------------------------------------------- /public/components/i-elections--primary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | i-elections--primary 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var _ = require('underscore'); 2 | var fs = require('fs-extra'); 3 | 4 | var gulp = require('gulp'); 5 | var del = require('del'); 6 | var consolidate = require('gulp-consolidate'); 7 | var sass = require('gulp-sass')(require('sass')); 8 | var cleanCSS = require('gulp-clean-css'); 9 | var rename = require('gulp-rename'); 10 | 11 | // task to remove images and fonts to clean directories 12 | gulp.task('clean-assets', function () { 13 | return del([ 14 | './public/img/*', 15 | './public/fonts/*' 16 | ]); 17 | }); 18 | 19 | // get the latest images and fonts 20 | gulp.task('copy-images', function() { 21 | return gulp.src(['./node_modules/fec-cms/fec/fec/static/img/**/*']) 22 | .pipe(gulp.dest('./public/img')); 23 | }); 24 | 25 | gulp.task('copy-fonts', function() { 26 | return gulp.src(['./node_modules/fec-cms/fec/fec/static/fonts/*']) 27 | .pipe(gulp.dest('./public/fonts')); 28 | }); 29 | 30 | // build stylesheet of classes for all icons 31 | gulp.task('build-icon-classes', function() { 32 | // get the list of icons from fec-cms 33 | function getIconNames() { 34 | return _(fs.readdirSync('./node_modules/fec-cms/fec/fec/static/icons/output/')) 35 | .chain() 36 | .filter(function (filename) { 37 | return filename.slice(-4) === '.svg'; 38 | }).map(function (filename) { 39 | return { 40 | name: filename.split('.')[0], 41 | }; 42 | }).value(); 43 | } 44 | 45 | // generate css classes for icons from getIconNames list from icon-template.scss template 46 | return gulp.src('./static/templates/icon-classes.scss') 47 | .pipe(consolidate('underscore', { 48 | icons: getIconNames() 49 | })) 50 | .pipe(rename({basename: '_icon-classes'})) 51 | .pipe(gulp.dest('./static/scss')); 52 | }); 53 | 54 | // build custom icons stylesheet, refresh images and fonts, and then build our complete stylesheet 55 | gulp.task('build-sass', gulp.series(['build-icon-classes', 'clean-assets', 'copy-images', 'copy-fonts'], function() { 56 | return gulp.src('./static/scss/styles.scss') 57 | .pipe(sass().on('error', sass.logError)) 58 | .pipe(cleanCSS()) 59 | .pipe(rename('styles.css')) 60 | .pipe(gulp.dest('./public/css')); 61 | })); 62 | 63 | // generate HTML template for icons documentation component 64 | gulp.task('build-icons-component', function() { 65 | function getIconNames() { 66 | return _(fs.readdirSync('./node_modules/fec-cms/fec/fec/static/icons/output/')) 67 | .chain() 68 | .filter(function (filename) { 69 | return filename.slice(-4) === '.svg'; 70 | }).map(function (filename) { 71 | return { 72 | name: filename.split('.')[0], 73 | }; 74 | }).value(); 75 | } 76 | 77 | return gulp.src('./static/templates/icons-component.html') 78 | .pipe(consolidate('underscore', { 79 | icons: getIconNames() 80 | })) 81 | .pipe(rename({basename: '_icons'})) 82 | .pipe(gulp.dest('./components/01-basics/')); 83 | }); 84 | -------------------------------------------------------------------------------- /components/01-basics/_commissioner-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Commissioner page template

3 |

Commissioner pages are Wagtail page templates. They contain information about Commissioner's terms of service, biographical information, and documents or cases relevant to the Commissioner’s service. 4 |

5 |
6 | 7 |
8 |
9 | 10 |
11 |

Components

12 |
    13 |
  • 14 | Title 15 |
    Commissioner name 16 |
    • 17 |
  • 18 | First name 19 |
    • 20 |
  • 21 | Middle initial 22 |
    • 23 |
  • 24 | Last name 25 |
    • 26 |
  • 27 | Picture 28 |
    • 29 |
  • 30 | Date sworn in 31 |
    • 32 |
  • 33 | Term expiration 34 |
    • 35 |
  • 36 | Reappointed dates 37 |
    • 38 |
  • 39 | Party affiliation 40 |
    • 41 |
  • 42 | Commissioner title 43 |
    Chair or Vice Chair 44 |
    • 45 |
  • 46 | Commissioner bio 47 |
      48 |
    • 49 | Paragraph 50 |
      • 51 |
    52 |
    • 53 |
  • 54 | Commissioner contact 55 |
      56 |
    • 57 | Email 58 |
      • 59 |
    • 60 | Phone 61 |
      • 62 |
    • 63 | Twitter 64 |
      • 65 |
    66 |
    • 67 |
68 |
69 | 70 |
71 | Mockup of the commissioner page template components 72 |

When to use

73 |
    74 |
  • For every FEC commissioner’s bio page. The consistent presentation and structure of information helps users quickly scan and compare current and former commissioners. 75 |
    • 76 |
77 |

Example pages

78 | 83 |
84 | 85 |
86 |
87 | -------------------------------------------------------------------------------- /components/02-components/filters/04-toggle-button/01-horizontal/horizontal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Data type 4 |
5 | 9 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | Time period 21 |
22 | 29 | 35 | 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 | -------------------------------------------------------------------------------- /public/components/i-profiles--primary.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | i-profiles--primary 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /components/02-components/footer/footer.html: -------------------------------------------------------------------------------- 1 | 78 | 79 | 109 | -------------------------------------------------------------------------------- /components/01-basics/_custom-page.html: -------------------------------------------------------------------------------- 1 |
2 |

Custom page template

3 |

Custom pages are Wagtail page templates. They are the most basic-level article page about a single, narrow topic. It has the most flexibility in embedded modules to accommodate the many scenarios it is used for.

4 |
5 | 6 |
7 |
8 | 9 |
10 |

Components

11 |
    12 |
  • Title
    • 13 |
  • Body
    A paragraph is the standard option, but the body module can include: 14 |
      15 |
    • Paragraph
      • 16 |
    • HTML
      • 17 |
    • Image
      • 18 |
    • Table
      • 19 |
    • Example paragraph
      • 20 |
    • Example forms
      • 21 |
    • Reporting example cards
      • 22 |
    23 |
    • 24 |
  • Sidebar, which can contain: 25 |
      26 |
    • Heading
      The title of the sidebar
      • 27 |
    • Paragraph
      • 28 |
    • HTML
      • 29 |
    • Record articles
      Appears below the sidebar
      • 30 |
    • Contact link
      Appears below the sidebar
      • 31 |
    32 |
    • 33 |
  • Continue learning
    • 34 |
  • Citations (legal citations)
    • 35 |
36 |
37 | 38 |
39 | Mockup of the custom page template components 40 |

When to use

41 |
    42 |
  • Guide pages
    • 43 |
  • Data file description and metadata pages
    • 44 |
  • Pages about a single, narrow topic
    • 45 |
46 |

Example pages

47 | 54 | 55 |
56 | 57 |
58 |
59 | -------------------------------------------------------------------------------- /components/01-basics/_update-pages.html: -------------------------------------------------------------------------------- 1 |
2 |

Update page templates

3 |

Each of the four types of update pages is a Wagtail page template. They are built for a specific type of article, or publication. They are visually very similar, with small differences in their components customized to the type of publications needs.

4 |
    5 |
  • Press release page template
    • 6 |
  • Record page template
    • 7 |
  • Tips for treasurers page template
    • 8 |
  • Digest page template
    • 9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |

Components

17 |

Shared across all four templates

18 |
    19 |
  • Page type tag
    This module is applied automatically when you select the page template
    • 20 |
  • Title
    • 21 |
  • Date
    • 22 |
  • Category
    • 23 |
  • Body
    A paragraph is the standard option, but the body module can include: 24 |
      25 |
    • Paragraph
      • 26 |
    • HTML
      • 27 |
    • Image
      • 28 |
    • Table
      • 29 |
    • Custom table
      • 30 |
    31 |
    • 32 |
  • Authors
    • 33 |
  • Read next
    This module auto-fills with the last article of the same type published before the one being edited, unless the author changes it
    • 34 |
35 |

Unique to Record page templates

36 |
    37 |
  • Monthly issue
    • 38 |
  • Tags
    • 39 |
  • Related section
    • 40 |
41 |
42 | 43 |
44 | Mockup of the update page template components 45 |

When to use

46 |

Each publication should use its corresponding specific page template.

47 |

Example pages

48 | 54 |
55 | 56 |
57 |
58 | -------------------------------------------------------------------------------- /components/02-components/tables/01-simple-table/simple-table.html: -------------------------------------------------------------------------------- 1 |
Standard simple table
2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
Report typeDates coveredDue
April Quarterly
(Form 3, 3Z, 3L)		January 1 through March 31April 15
July Quarterly
(Form 3, 3Z, 3L)		April 1 through June 30July 15
October Quarterly
(Form 3, 3Z, 3L)		July 1 through September 30October 15
Year-End
(Form 3, 3Z, 3L)		October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election yearJanuary 31 of following year
34 |
35 | 36 |
Standard simple table with display
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
Report typeDates coveredDue
April Quarterly
(Form 3, 3Z, 3L)		January 1 through March 31April 15
July Quarterly
(Form 3, 3Z, 3L)		April 1 through June 30July 15
October Quarterly
(Form 3, 3Z, 3L)		July 1 through September 30October 15
Year-End
(Form 3, 3Z, 3L)		October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election yearJanuary 31 of following year
69 |
70 | -------------------------------------------------------------------------------- /components/02-components/tables/02-dense-table/dense-table.html: -------------------------------------------------------------------------------- 1 |
Standard dense table
2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
Report typeDates coveredDue
April Quarterly
(Form 3, 3Z, 3L)		January 1 through March 31April 15
July Quarterly
(Form 3, 3Z, 3L)		April 1 through June 30July 15
October Quarterly
(Form 3, 3Z, 3L)		July 1 through September 30October 15
Year-End
(Form 3, 3Z, 3L)		October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election yearJanuary 31 of following year
34 |
35 | 36 |
Dense table with display
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
Report typeDates coveredDue
April Quarterly
(Form 3, 3Z, 3L)		January 1 through March 31April 15
July Quarterly
(Form 3, 3Z, 3L)		April 1 through June 30July 15
October Quarterly
(Form 3, 3Z, 3L)		July 1 through September 30October 15
Year-End
(Form 3, 3Z, 3L)		October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election yearJanuary 31 of following year
69 |
70 | -------------------------------------------------------------------------------- /components/02-components/feed/02-multiple-category/multiple-category.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 25 | 26 | 46 | 47 | 60 | 61 | 80 |
81 | 82 |
83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **package.json** 2 | 3 | [![Known Vulnerabilities](https://snyk.io/test/github/fecgov/fec-pattern-library/badge.svg)](https://snyk.io/test/github/fecgov/fec-pattern-library?targetFile=package.json) 4 | 5 | # FEC.gov Pattern Library 6 | 7 | This is the collection of styles and design patterns that make up fec.gov. It is built on [Fractal](http://fractal.build/guide). 8 | 9 | It is also viewable online at: 10 | 11 | ## Installation 12 | 13 | Make sure you are on the correct Node.js version (Currently version 22.1.0): 14 | 15 | ```zsh 16 | nvm use 22.1.0 17 | ``` 18 | 19 | Install dependencies: 20 | 21 | ```zsh 22 | npm install 23 | ``` 24 | 25 | Build the project 26 | 27 | ```zsh 28 | npm run build 29 | ``` 30 | 31 | Start the server 32 | 33 | ```zsh 34 | npm run start 35 | ``` 36 | 37 | ### Additional commands 38 | 39 | Build SCSS only: 40 | 41 | ```zsh 42 | npm run build-sass 43 | ``` 44 | 45 | Build JavaScript only: 46 | 47 | ```zsh 48 | npm run build-js 49 | ``` 50 | 51 | ### Debugging 52 | 53 | Since the `fec-cms` repository is a dependency to this pattern library, there may be discrepancies between style components that exist in `fec-cms` and what this repository is attempting to import. 54 | 55 | If this happens, you may see the following error message in your terminal: 56 | > Error: File to import not found or unreadable: ./node_modules/fec-cms/fec/fec/static/scss/components/[some-component]. 57 | > 58 | > Parent style sheet: […]/fec-pattern-library/static/scss/styles.scss 59 | 60 | If this happens, double-check that things you are trying to import in the pattern library actually exist in `fec-cms`. 61 | Look in https://github.com/fecgov/fec-cms/tree/develop/fec/fec/static/scss/components for the component specified by the error message. 62 | If you don’t find the component there, you can safely remove it from `[…]/fec-pattern-library/static/scss/styles.scss` on your branch, then save and execute `npm run build` again. The error message should no longer appear. 63 | 64 | ## Front end asset management for components 65 | 66 | Component specific SCSS and JavaScript files are contained in the `public/` folder, and compiled files and assets are be served from the `public/` folder. 67 | 68 | ### fec-cms git dependency 69 | 70 | This repo depends on the `fec-cms` git repo as a local npm package to compile and serve front end assets for components to render correctly. Any updates on `fec-cms` since the initial npm install will require `npm update` to get the latest assets into the `node_modules/fec-cms` folder. 71 | 72 | ### SCSS 73 | 74 | The Gulp script (`.gulpfile.js`) compiles custom stylesheet of all icons classes (`_icon-classes.scss`) as well as all components as specified in `static/scss/styles.scss`. Any additional layout or component stylesheets created in `fec-cms` must be added to `styles.scss`. 75 | 76 | ### JavaScript 77 | 78 | Interactive components that rely on JS will need to have their functions initialized in `static/js/init.js`. 79 | 80 | ### Build icons component for documentation 81 | 82 | Update the Icons documentation page by running: 83 | 84 | ```zsh 85 | npm run build-icons-component 86 | ``` 87 | 88 | This command gets a list of icons and generates HTML markup for the custom documentation component. It uses `static/templates/icons-component.html` as a template to fill in the current list of icons from `fec-cms` into `components/01-basics/_icons.html`. 89 | 90 | ### "Hack" to get documentation pages to display custom styles 91 | 92 | Documentation pages (like `documentation/02-typography.md`) include hardcoded HTML to render hidden components so they can render custom FEC styles. Those components are defined in `components/01-basics/*`. 93 | -------------------------------------------------------------------------------- /static/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // this compiles all components for pattern library 2 | @import './node_modules/fec-cms/fec/fec/static/scss/global'; 3 | 4 | @import './node_modules/fec-cms/fec/fec/static/scss/components/agendas'; 5 | @import './node_modules/fec-cms/fec/fec/static/scss/components/breakdowns'; 6 | @import './node_modules/fec-cms/fec/fec/static/scss/components/calendar'; 7 | @import './node_modules/fec-cms/fec/fec/static/scss/components/callouts'; 8 | @import './node_modules/fec-cms/fec/fec/static/scss/components/candidate-page'; 9 | @import './node_modules/fec-cms/fec/fec/static/scss/components/charts'; 10 | @import './node_modules/fec-cms/fec/fec/static/scss/components/contact-form'; 11 | @import './node_modules/fec-cms/fec/fec/static/scss/components/contact-items'; 12 | @import './node_modules/fec-cms/fec/fec/static/scss/components/cycle-select'; 13 | @import './node_modules/fec-cms/fec/fec/static/scss/components/data-container'; 14 | @import './node_modules/fec-cms/fec/fec/static/scss/components/datatable-panel'; 15 | @import './node_modules/fec-cms/fec/fec/static/scss/components/datatables'; 16 | @import './node_modules/fec-cms/fec/fec/static/scss/components/date-grid'; 17 | @import './node_modules/fec-cms/fec/fec/static/scss/components/documents'; 18 | @import './node_modules/fec-cms/fec/fec/static/scss/components/downloads'; 19 | @import './node_modules/fec-cms/fec/fec/static/scss/components/dropdowns'; 20 | @import './node_modules/fec-cms/fec/fec/static/scss/components/entity-header'; 21 | @import './node_modules/fec-cms/fec/fec/static/scss/components/examples'; 22 | @import './node_modules/fec-cms/fec/fec/static/scss/components/figures'; 23 | @import './node_modules/fec-cms/fec/fec/static/scss/components/filters'; 24 | @import './node_modules/fec-cms/fec/fec/static/scss/components/form-styles'; 25 | @import './node_modules/fec-cms/fec/fec/static/scss/components/glossary'; 26 | @import './node_modules/fec-cms/fec/fec/static/scss/components/headings'; 27 | @import './node_modules/fec-cms/fec/fec/static/scss/components/hero'; 28 | @import './node_modules/fec-cms/fec/fec/static/scss/components/icon-headings'; 29 | @import './node_modules/fec-cms/fec/fec/static/scss/components/legal-search'; 30 | @import './node_modules/fec-cms/fec/fec/static/scss/components/list-styles'; 31 | @import './node_modules/fec-cms/fec/fec/static/scss/components/maps'; 32 | @import './node_modules/fec-cms/fec/fec/static/scss/components/messages'; 33 | @import './node_modules/fec-cms/fec/fec/static/scss/components/modals'; 34 | @import './node_modules/fec-cms/fec/fec/static/scss/components/options'; 35 | @import './node_modules/fec-cms/fec/fec/static/scss/components/overlay'; 36 | @import './node_modules/fec-cms/fec/fec/static/scss/components/overviews'; 37 | @import './node_modules/fec-cms/fec/fec/static/scss/components/pagination'; 38 | @import './node_modules/fec-cms/fec/fec/static/scss/components/posts'; 39 | @import './node_modules/fec-cms/fec/fec/static/scss/components/reaction-boxes'; 40 | @import './node_modules/fec-cms/fec/fec/static/scss/components/richtext'; 41 | @import './node_modules/fec-cms/fec/fec/static/scss/components/search-bar'; 42 | @import './node_modules/fec-cms/fec/fec/static/scss/components/search-controls'; 43 | @import './node_modules/fec-cms/fec/fec/static/scss/components/search-results'; 44 | @import './node_modules/fec-cms/fec/fec/static/scss/components/side-nav'; 45 | @import './node_modules/fec-cms/fec/fec/static/scss/components/sidebar'; 46 | @import './node_modules/fec-cms/fec/fec/static/scss/components/table-styles'; 47 | @import './node_modules/fec-cms/fec/fec/static/scss/components/tags'; 48 | @import './node_modules/fec-cms/fec/fec/static/scss/components/toggles'; 49 | @import './node_modules/fec-cms/fec/fec/static/scss/components/tooltips'; 50 | @import './node_modules/fec-cms/fec/fec/static/scss/components/type-styles'; 51 | 52 | @import './node_modules/fec-cms/fec/fec/static/scss/components/results-info'; 53 | 54 | @import 'icon-classes'; 55 | -------------------------------------------------------------------------------- /components/02-components/filter-validation/02-error-validation/error-validation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | Server error 5 |
6 |
7 | 8 |
    9 |
  • 10 | 11 |
    12 | We had trouble processing your request 13 |
    14 | Please try again. If you still have trouble,
    15 | 16 |
    • 17 |
18 |
19 | 20 | 23 |
24 |
25 |
26 |
27 | 28 | 29 |
30 | Invalid entry 31 |
32 |
33 |
34 | 35 |
36 | 37 | 40 |
41 | 48 |
49 |
50 |
51 |
52 | 53 | 54 |
55 |
-
56 |
57 | 58 | 59 |
60 | 63 |
64 |
You entered a date that's outside the two-year time period. Please enter a receipt date from 2017-2018
65 |
66 |
67 |
68 |
69 | --------------------------------------------------------------------------------