├── .circleci └── config.yml ├── .env-example ├── .gitignore ├── .rubocop.yml ├── .ruby-version ├── Brewfile ├── CHANGELOG.md ├── Gemfile ├── Gemfile.lock ├── LICENSE.txt ├── MIGRATING.md ├── README.md ├── Rakefile ├── app.json ├── app ├── assets │ ├── config │ │ └── manifest.js │ ├── fonts │ │ ├── MaterialIcons-Regular.eot │ │ ├── MaterialIcons-Regular.svg │ │ ├── MaterialIcons-Regular.ttf │ │ └── MaterialIcons-Regular.woff │ ├── images │ │ ├── GCF104-lennie-jane-family.jpg │ │ ├── GCF104-lennie-jane-family_mobile.jpg │ │ ├── GCF29-dylan-groceries.jpg │ │ ├── GCF29-dylan-groceries.png │ │ ├── GCF29-dylan-groceries@0,5x.jpg │ │ ├── GCF43-dylanGCF.jpg │ │ ├── GCF46-pbaxter.jpg │ │ ├── GCF48-Camille.jpg │ │ ├── GCF77-francesca.jpg │ │ ├── GCF77-jaqueline.png │ │ ├── GCF77-jaqueline@2x.png │ │ ├── calfresh_logo.png │ │ ├── cfa-logo-color.png │ │ ├── cfa-logo.svg │ │ ├── cfa_logo.png │ │ ├── cfa_logo@2x.png │ │ ├── cfa_logo_color.png │ │ ├── cfa_logo_color@2x.png │ │ ├── cfa_logo_dark.png │ │ ├── cfa_logo_dark@2x.png │ │ ├── cover.jpg │ │ ├── emoji_pairs │ │ │ ├── emoji_dependent_care.png │ │ │ ├── emoji_elderly_disabled.png │ │ │ ├── emoji_jobs.png │ │ │ ├── emoji_older_man_and_woman.png │ │ │ ├── emoji_self_employed.png │ │ │ ├── emoji_ssi_fast_ssp.png │ │ │ ├── emoji_ssi_ssp.png │ │ │ └── emoji_students.png │ │ ├── emojis │ │ │ ├── 1f30e.png │ │ │ ├── 1f31f.png │ │ │ ├── 1f35a.png │ │ │ ├── 1f373.png │ │ │ ├── 1f392.png │ │ │ ├── 1f393.png │ │ │ ├── 1f3e0.png │ │ │ ├── 1f447.png │ │ │ ├── 1f44c.png │ │ │ ├── 1f44d.png │ │ │ ├── 1f464.png │ │ │ ├── 1f468-1f393.png │ │ │ ├── 1f469-1f33e.png │ │ │ ├── 1f469-1f393.png │ │ │ ├── 1f475.png │ │ │ ├── 1f476.png │ │ │ ├── 1f477.png │ │ │ ├── 1f48a.png │ │ │ ├── 1f4b0.png │ │ │ ├── 1f4b2.png │ │ │ ├── 1f4b3.png │ │ │ ├── 1f4b5.png │ │ │ ├── 1f4bb.png │ │ │ ├── 1f4bc.png │ │ │ ├── 1f4c4.png │ │ │ ├── 1f4cb.png │ │ │ ├── 1f4dd.png │ │ │ ├── 1f4de.png │ │ │ ├── 1f4eb.png │ │ │ ├── 1f4ec.png │ │ │ ├── 1f4f2.png │ │ │ ├── 1f512.png │ │ │ ├── 1f575-1f3fe-2640.png │ │ │ ├── 1f5fa.png │ │ │ ├── 1f600.png │ │ │ ├── 1f60a.png │ │ │ ├── 1f610.png │ │ │ ├── 1f641.png │ │ │ ├── 1f691.png │ │ │ ├── 1f697.png │ │ │ ├── 1f6b0.png │ │ │ ├── 1f6e1.png │ │ │ ├── 1f914.png │ │ │ ├── 1f951.png │ │ │ ├── 1f955.png │ │ │ ├── 1f957.png │ │ │ ├── 1f958.png │ │ │ ├── 260e.png │ │ │ ├── 267f.png │ │ │ ├── 26a0.png │ │ │ ├── 2705.png │ │ │ ├── 270a.png │ │ │ ├── 270f.png │ │ │ ├── 2712.png │ │ │ ├── checkmark.png │ │ │ ├── crossmark.png │ │ │ ├── fast_disability.png │ │ │ ├── older-man.png │ │ │ ├── older-woman.png │ │ │ └── pen.png │ │ ├── error-icon.svg │ │ ├── favicon.ico │ │ ├── gcf_logomark_black.png │ │ ├── gcf_logomark_black@2x.png │ │ ├── gcf_logomark_white.png │ │ ├── gcf_logomark_white@2x.png │ │ ├── icon_accordion_close.svg │ │ ├── icon_accordion_open.svg │ │ ├── icon_checkmark_white.png │ │ ├── icon_checkmark_white@2x.png │ │ ├── icon_sort_down.svg │ │ ├── icon_sort_neutral.svg │ │ ├── icon_sort_up.svg │ │ ├── icon_star_black.png │ │ ├── icon_star_black@2x.png │ │ ├── pat.jpg │ │ ├── pat@2x.jpg │ │ ├── pat_mobile.jpg │ │ └── pat_mobile@2x.jpg │ ├── javascripts │ │ ├── cfa_styleguide_main.js │ │ ├── honeycrisp.js │ │ ├── sidebar.js │ │ └── version_comment.js │ └── stylesheets │ │ ├── cfa_styleguide_main.scss │ │ └── honeycrisp │ │ ├── _honeycrisp-compact.scss │ │ ├── _ie-hacks.scss │ │ ├── atoms │ │ ├── _base.scss │ │ ├── _buttons.scss │ │ ├── _emoji-specs.scss │ │ ├── _emoji.scss │ │ ├── _form-elements.scss │ │ ├── _form-widths.scss │ │ ├── _grid.scss │ │ ├── _icons.scss │ │ ├── _illustrations.scss │ │ ├── _images.scss │ │ ├── _labels.scss │ │ ├── _links.scss │ │ ├── _notices.scss │ │ ├── _screen-readers.scss │ │ ├── _slabs.scss │ │ ├── _spacing.scss │ │ ├── _typography.scss │ │ ├── _utilities.scss │ │ └── _variables.scss │ │ ├── molecules │ │ ├── _accordion.scss │ │ ├── _complex-list.scss │ │ ├── _data-table.scss │ │ ├── _flashes.scss │ │ ├── _form-molecules.scss │ │ ├── _incrementer.scss │ │ ├── _media-box.scss │ │ ├── _progress-dots.scss │ │ ├── _progress-indicator.scss │ │ ├── _progress-step-bar.scss │ │ ├── _reveal.scss │ │ ├── _scroller.scss │ │ ├── _searchbar.scss │ │ ├── _show-more.scss │ │ ├── _steps.scss │ │ ├── _summary-table.scss │ │ ├── _tabs.scss │ │ ├── _toolbar.scss │ │ ├── _tooltip.scss │ │ └── _vertical-steps.scss │ │ ├── organisms │ │ ├── _admin-application-card.scss │ │ ├── _assister-message.scss │ │ ├── _demo-banner.scss │ │ ├── _document-preview.scss │ │ ├── _form-card.scss │ │ ├── _global-error-message.scss │ │ ├── _legal.scss │ │ ├── _main-footer.scss │ │ ├── _main-header.scss │ │ ├── _pagination.scss │ │ ├── _sidebar.scss │ │ └── _statistic-card.scss │ │ └── templates │ │ ├── _about.scss │ │ ├── _dashboard.scss │ │ ├── _error.scss │ │ ├── _homepage.scss │ │ ├── _numbers.scss │ │ ├── _question.scss │ │ ├── _static-page.scss │ │ └── _styleguide.scss ├── controllers │ └── cfa │ │ └── styleguide │ │ ├── examples_controller.rb │ │ └── pages_controller.rb ├── helpers │ └── cfa │ │ └── styleguide │ │ ├── cfa_form_builder.rb │ │ ├── cfa_v2_form_builder.rb │ │ └── pages_helper.rb ├── models │ └── cfa │ │ └── styleguide │ │ └── form_example.rb └── views │ ├── cfa │ └── styleguide │ │ ├── examples │ │ └── show.html.erb │ │ └── pages │ │ ├── _section.html.erb │ │ ├── emojis.html.erb │ │ ├── form_builder_v1.html.erb │ │ ├── form_builder_v2.html.erb │ │ ├── honeycrisp_compact.html.erb │ │ └── index.html.erb │ ├── components │ ├── atoms │ │ ├── _examples.html.erb │ │ └── _label.html.erb │ └── molecules │ │ ├── _example_group.html.erb │ │ ├── _progress_indicator.html.erb │ │ ├── _progress_step_bar.html.erb │ │ ├── _reveal.html.erb │ │ └── _show_more.html.erb │ ├── examples │ ├── atoms │ │ ├── _buttons.html.erb │ │ ├── _card.html.erb │ │ ├── _colors.html.erb │ │ ├── _emojis.html.erb │ │ ├── _form_elements.html.erb │ │ ├── _grid.html.erb │ │ ├── _icons.html.erb │ │ ├── _labels.html.erb │ │ ├── _links.html.erb │ │ ├── _notices.html.erb │ │ ├── _slab_layout.html.erb │ │ ├── _spacing.html.erb │ │ └── _typography.html.erb │ ├── form_builder │ │ ├── v1 │ │ │ ├── _cfa_checkbox_set.html.erb │ │ │ ├── _cfa_checkbox_set_with_none.html.erb │ │ │ ├── _cfa_date_select.html.erb │ │ │ ├── _cfa_input_field.html.erb │ │ │ ├── _cfa_radio_set.html.erb │ │ │ ├── _cfa_radio_set_with_follow_up.html.erb │ │ │ ├── _cfa_range_field.html.erb │ │ │ ├── _cfa_select.html.erb │ │ │ ├── _cfa_single_tap_button.html.erb │ │ │ └── _cfa_textarea.html.erb │ │ └── v2 │ │ │ ├── _cfa_button.html.erb │ │ │ ├── _cfa_check_box.html.erb │ │ │ ├── _cfa_collection_check_boxes.html.erb │ │ │ ├── _cfa_collection_radio_buttons.html.erb │ │ │ ├── _cfa_fieldset.html.erb │ │ │ ├── _cfa_radio_button.html.erb │ │ │ ├── _cfa_select.html.erb │ │ │ └── _cfa_text_field.html.erb │ ├── honeycrisp_compact │ │ ├── _buttons.html.erb │ │ ├── _data_table.html.erb │ │ ├── _form_elements.html.erb │ │ └── _typography.erb │ ├── molecules │ │ ├── _accordion.html.erb │ │ ├── _block_input_group.html.erb │ │ ├── _data_table.html.erb │ │ ├── _flash_messages.html.erb │ │ ├── _follow_up_question.html.erb │ │ ├── _form_group.html.erb │ │ ├── _form_group_error_state.html.erb │ │ ├── _incrementer.html.erb │ │ ├── _inline_input_group.html.erb │ │ ├── _media_box.html.erb │ │ ├── _progress_indicator.html.erb │ │ ├── _progress_step_bar.html.erb │ │ ├── _reveal.html.erb │ │ ├── _searchbar.html.erb │ │ ├── _show_more.html.erb │ │ ├── _summary_table.html.erb │ │ ├── _tab_bar.html.erb │ │ ├── _text_input_group.html.erb │ │ ├── _toolbar.html.erb │ │ └── _two_up_input_group.html.erb │ └── organisms │ │ ├── _admin_application_card.html.erb │ │ ├── _form_card_1.html.erb │ │ ├── _form_card_2.html.erb │ │ ├── _form_card_3.html.erb │ │ ├── _form_card_4.html.erb │ │ ├── _pagination.html.erb │ │ ├── _statistics_card.html.erb │ │ ├── _steps.html.erb │ │ └── _vertical_steps.html.erb │ └── layouts │ └── main.html.erb ├── bin ├── console ├── rails └── setup ├── cfa-styleguide.gemspec ├── config ├── locales │ ├── en.yml │ └── es.yml └── routes.rb ├── lib ├── cfa │ ├── styleguide.rb │ └── styleguide │ │ ├── engine.rb │ │ └── version.rb ├── sprockets_extension │ └── uglifier_source_maps_compressor.rb └── tasks │ └── distribution.rb ├── package.json ├── spec ├── helpers │ ├── cfa_form_builder_spec.rb │ └── cfa_v2_form_builder_spec.rb ├── spec_helper.rb ├── support │ ├── examples_helper.rb │ ├── locale.rb │ ├── match_html.rb │ ├── percy_snapshot.rb │ ├── pre_documentation_formatter.rb │ └── system_tests.rb ├── system │ ├── accessibility_spec.rb │ ├── distribution_spec.rb │ ├── examples_spec.rb │ ├── follow_up_question_spec.rb │ ├── formatted_input_spec.rb │ ├── hello_world_spec.rb │ ├── pages_spec.rb │ └── reveal_spec.rb └── test_app │ ├── Rakefile │ ├── app │ ├── assets │ │ ├── config │ │ │ └── manifest.js │ │ ├── javascripts │ │ │ └── application.js │ │ └── stylesheets │ │ │ └── application.scss │ └── controllers │ │ └── application_controller.rb │ ├── config.ru │ └── config │ ├── application.rb │ ├── boot.rb │ ├── environment.rb │ ├── environments │ ├── development.rb │ └── test.rb │ ├── initializers │ ├── cookies_serializer.rb │ └── session_store.rb │ ├── locales │ ├── en.yml │ └── es.yml │ ├── routes.rb │ └── secrets.yml ├── vendor └── assets │ ├── javascripts │ └── prism.js │ └── stylesheets │ ├── _normalize.scss │ ├── neat │ ├── _neat-helpers.scss │ ├── _neat.scss │ ├── functions │ │ ├── _new-breakpoint.scss │ │ └── _private.scss │ ├── grid │ │ ├── _box-sizing.scss │ │ ├── _direction-context.scss │ │ ├── _display-context.scss │ │ ├── _fill-parent.scss │ │ ├── _media.scss │ │ ├── _omega.scss │ │ ├── _outer-container.scss │ │ ├── _pad.scss │ │ ├── _private.scss │ │ ├── _row.scss │ │ ├── _shift.scss │ │ ├── _span-columns.scss │ │ ├── _to-deprecate.scss │ │ └── _visual-grid.scss │ ├── mixins │ │ └── _clearfix.scss │ └── settings │ │ ├── _disable-warnings.scss │ │ ├── _grid.scss │ │ └── _visual-grid.scss │ └── prism.css └── yarn.lock /.env-example: -------------------------------------------------------------------------------- 1 | # Github Personal Access Token for updating Changelog on release 2 | CHANGELOG_GITHUB_TOKEN= 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.bundle/ 2 | /.yardoc 3 | /_yardoc/ 4 | /coverage/ 5 | /doc/ 6 | /pkg/ 7 | /spec/reports/ 8 | /tmp/ 9 | /.idea 10 | /spec/test_app/tmp/ 11 | /spec/test_app/log/ 12 | /node_modules 13 | yarn-debug.log* 14 | .yarn-integrity 15 | .git-authors 16 | .DS_Store 17 | .vscode 18 | Brewfile.lock.json 19 | /dist 20 | .sass-cache 21 | /tmp 22 | .env 23 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 3.2.2 2 | -------------------------------------------------------------------------------- /Brewfile: -------------------------------------------------------------------------------- 1 | cask "chromedriver" 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | ruby "3.2.2" 3 | 4 | git_source(:github) { |repo_name| "https://github.com/#{repo_name}" } 5 | 6 | # Specify your gem's dependencies in cfa-styleguide.gemspec 7 | gemspec 8 | 9 | gem "rack", ">= 2.0.8" 10 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Whitney Schaefer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "honeycrisp-gem", 3 | "scripts": {}, 4 | "env": { 5 | "BUNDLE_WITHOUT": { 6 | "required": true 7 | }, 8 | "LANG": { 9 | "required": true 10 | }, 11 | "RACK_ENV": { 12 | "required": true 13 | }, 14 | "RAILS_ENV": { 15 | "required": true 16 | }, 17 | "RAILS_LOG_TO_STDOUT": { 18 | "required": true 19 | }, 20 | "RAILS_SERVE_STATIC_FILES": { 21 | "required": true 22 | }, 23 | "SECRET_KEY_BASE": { 24 | "required": true 25 | } 26 | }, 27 | "formation": { 28 | "web": { 29 | "quantity": 1 30 | } 31 | }, 32 | "addons": [], 33 | "buildpacks": [ 34 | { 35 | "url": "heroku/ruby" 36 | } 37 | ], 38 | "stack": "heroku-22" 39 | } 40 | -------------------------------------------------------------------------------- /app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | //= link_tree ../fonts 3 | //= link_directory ../javascripts .js 4 | //= link_directory ../stylesheets .css 5 | -------------------------------------------------------------------------------- /app/assets/fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /app/assets/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /app/assets/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /app/assets/images/GCF104-lennie-jane-family.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF104-lennie-jane-family.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF104-lennie-jane-family_mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF104-lennie-jane-family_mobile.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF29-dylan-groceries.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF29-dylan-groceries.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF29-dylan-groceries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF29-dylan-groceries.png -------------------------------------------------------------------------------- /app/assets/images/GCF29-dylan-groceries@0,5x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF29-dylan-groceries@0,5x.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF43-dylanGCF.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF43-dylanGCF.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF46-pbaxter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF46-pbaxter.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF48-Camille.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF48-Camille.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF77-francesca.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF77-francesca.jpg -------------------------------------------------------------------------------- /app/assets/images/GCF77-jaqueline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF77-jaqueline.png -------------------------------------------------------------------------------- /app/assets/images/GCF77-jaqueline@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/GCF77-jaqueline@2x.png -------------------------------------------------------------------------------- /app/assets/images/calfresh_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/calfresh_logo.png -------------------------------------------------------------------------------- /app/assets/images/cfa-logo-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa-logo-color.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo@2x.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo_color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo_color.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo_color@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo_color@2x.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo_dark.png -------------------------------------------------------------------------------- /app/assets/images/cfa_logo_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cfa_logo_dark@2x.png -------------------------------------------------------------------------------- /app/assets/images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/cover.jpg -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_dependent_care.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_dependent_care.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_elderly_disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_elderly_disabled.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_jobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_jobs.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_older_man_and_woman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_older_man_and_woman.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_self_employed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_self_employed.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_ssi_fast_ssp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_ssi_fast_ssp.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_ssi_ssp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_ssi_ssp.png -------------------------------------------------------------------------------- /app/assets/images/emoji_pairs/emoji_students.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emoji_pairs/emoji_students.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f30e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f30e.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f31f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f31f.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f35a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f35a.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f373.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f373.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f392.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f392.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f393.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f393.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f3e0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f3e0.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f447.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f447.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f44c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f44c.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f44d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f44d.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f464.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f464.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f468-1f393.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f468-1f393.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f469-1f33e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f469-1f33e.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f469-1f393.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f469-1f393.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f475.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f475.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f476.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f476.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f477.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f477.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f48a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f48a.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4b0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4b0.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4b2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4b2.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4b3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4b3.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4b5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4b5.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4bb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4bb.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4bc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4bc.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4c4.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4cb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4cb.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4dd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4dd.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4de.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4eb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4eb.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4ec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4ec.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f4f2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f4f2.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f512.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f575-1f3fe-2640.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f575-1f3fe-2640.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f5fa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f5fa.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f600.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f600.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f60a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f60a.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f610.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f610.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f641.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f641.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f691.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f691.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f697.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f697.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f6b0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f6b0.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f6e1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f6e1.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f914.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f914.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f951.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f951.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f955.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f955.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f957.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f957.png -------------------------------------------------------------------------------- /app/assets/images/emojis/1f958.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/1f958.png -------------------------------------------------------------------------------- /app/assets/images/emojis/260e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/260e.png -------------------------------------------------------------------------------- /app/assets/images/emojis/267f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/267f.png -------------------------------------------------------------------------------- /app/assets/images/emojis/26a0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/26a0.png -------------------------------------------------------------------------------- /app/assets/images/emojis/2705.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/2705.png -------------------------------------------------------------------------------- /app/assets/images/emojis/270a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/270a.png -------------------------------------------------------------------------------- /app/assets/images/emojis/270f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/270f.png -------------------------------------------------------------------------------- /app/assets/images/emojis/2712.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/2712.png -------------------------------------------------------------------------------- /app/assets/images/emojis/checkmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/checkmark.png -------------------------------------------------------------------------------- /app/assets/images/emojis/crossmark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/crossmark.png -------------------------------------------------------------------------------- /app/assets/images/emojis/fast_disability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/fast_disability.png -------------------------------------------------------------------------------- /app/assets/images/emojis/older-man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/older-man.png -------------------------------------------------------------------------------- /app/assets/images/emojis/older-woman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/older-woman.png -------------------------------------------------------------------------------- /app/assets/images/emojis/pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/emojis/pen.png -------------------------------------------------------------------------------- /app/assets/images/error-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 15 | 16 | -------------------------------------------------------------------------------- /app/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/favicon.ico -------------------------------------------------------------------------------- /app/assets/images/gcf_logomark_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/gcf_logomark_black.png -------------------------------------------------------------------------------- /app/assets/images/gcf_logomark_black@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/gcf_logomark_black@2x.png -------------------------------------------------------------------------------- /app/assets/images/gcf_logomark_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/gcf_logomark_white.png -------------------------------------------------------------------------------- /app/assets/images/gcf_logomark_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/gcf_logomark_white@2x.png -------------------------------------------------------------------------------- /app/assets/images/icon_accordion_close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | + 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/assets/images/icon_accordion_open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | + 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/assets/images/icon_checkmark_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/icon_checkmark_white.png -------------------------------------------------------------------------------- /app/assets/images/icon_checkmark_white@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/icon_checkmark_white@2x.png -------------------------------------------------------------------------------- /app/assets/images/icon_sort_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/assets/images/icon_sort_neutral.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/assets/images/icon_sort_up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/assets/images/icon_star_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/icon_star_black.png -------------------------------------------------------------------------------- /app/assets/images/icon_star_black@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/icon_star_black@2x.png -------------------------------------------------------------------------------- /app/assets/images/pat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/pat.jpg -------------------------------------------------------------------------------- /app/assets/images/pat@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/pat@2x.jpg -------------------------------------------------------------------------------- /app/assets/images/pat_mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/pat_mobile.jpg -------------------------------------------------------------------------------- /app/assets/images/pat_mobile@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/honeycrisp-gem/0e15fc7d74a330866049d58516c6f2449958fb1b/app/assets/images/pat_mobile@2x.jpg -------------------------------------------------------------------------------- /app/assets/javascripts/cfa_styleguide_main.js: -------------------------------------------------------------------------------- 1 | // This is a manifest file that'll be compiled into application.js, which will include all the files 2 | // listed below. 3 | // 4 | // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 5 | // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 6 | // 7 | // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8 | // compiled file. 9 | // 10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11 | // about supported directives. 12 | // 13 | //= require version_comment 14 | //= require jquery3 15 | //= require jquery_ujs 16 | //= require sidebar 17 | //= require honeycrisp -------------------------------------------------------------------------------- /app/assets/javascripts/sidebar.js: -------------------------------------------------------------------------------- 1 | //= require jquery3 2 | $(document).ready(function() { 3 | $('.sidebar-nav').on('click', 'a', function () 4 | { 5 | if( $('.sidebar__collapse-toggle').is(':visible') ) { 6 | collapseSidebar(); 7 | } 8 | }); 9 | 10 | setSelectedState(); 11 | 12 | $(window).on('hashchange', function() { 13 | setSelectedState(); 14 | }); 15 | }); 16 | 17 | function toggleNav() { 18 | if($(".sidebar").is(":hidden")) 19 | { 20 | openSidebar(); 21 | } 22 | else 23 | { 24 | collapseSidebar(); 25 | } 26 | } 27 | 28 | function collapseSidebar() { 29 | $('.sidebar__collapse-toggle').text('Menu'); 30 | $(".sidebar").removeClass("open"); 31 | } 32 | 33 | function openSidebar() { 34 | $('.sidebar__collapse-toggle').text('Close'); 35 | $(".sidebar").addClass("open"); 36 | } 37 | 38 | function setSelectedState() { 39 | $('.sidebar__sub-items li').removeClass("active"); 40 | setActiveNavigationItem(window.location.pathname) 41 | setActiveNavigationItem(window.location.pathname + window.location.hash) 42 | } 43 | 44 | function setActiveNavigationItem(hrefValue) { 45 | $('.sidebar__sub-items a[href="' + hrefValue + '"]').parent().addClass('active'); 46 | } 47 | -------------------------------------------------------------------------------- /app/assets/javascripts/version_comment.js: -------------------------------------------------------------------------------- 1 | /*! Honeycrisp version placeholder */ 2 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/_ie-hacks.scss: -------------------------------------------------------------------------------- 1 | .lt-ie10 { 2 | .select { 3 | &:before { 4 | display: none; 5 | } 6 | } 7 | .select__element { 8 | padding-right: .7em; 9 | } 10 | } 11 | 12 | .select { 13 | -ms-overflow-style: none; 14 | } 15 | 16 | select::-ms-expand { 17 | display: none; 18 | } 19 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | 6 | html { 7 | position: relative; 8 | background-color: $color-background; 9 | font-size: $em-base; 10 | -webkit-font-smoothing: antialiased; 11 | min-height: 100%; 12 | } 13 | 14 | body { 15 | font-size: $font-size-25; 16 | font-family: $font-system; 17 | line-height: $s25; 18 | } 19 | 20 | .page-wrapper { 21 | overflow: hidden; 22 | padding-left: $s15; 23 | padding-right: $s15; 24 | @include media($tablet-up) { 25 | padding-left: $s35; 26 | padding-right: $s35; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_emoji-specs.scss: -------------------------------------------------------------------------------- 1 | .emoji { 2 | display: inline-block; 3 | text-indent: -9999px; 4 | height: $s10; 5 | width: $s10; 6 | content: ''; 7 | background-size: 100% auto; 8 | position: relative; 9 | background-repeat: no-repeat; 10 | } 11 | 12 | .emoji-container { 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | 17 | .emoji--inline { 18 | top: .2em; 19 | } 20 | 21 | .emoji-size-155 { 22 | width: $s155; 23 | height: $s155; 24 | } 25 | 26 | .emoji-size-95 { 27 | width: $s95; 28 | height: $s95; 29 | } 30 | 31 | .emoji-size-60 { 32 | width: $s60; 33 | height: $s60; 34 | } 35 | 36 | .emoji-size-35 { 37 | width: $s35; 38 | height: $s35; 39 | } 40 | 41 | .emoji-size-25 { 42 | width: $s25; 43 | height: $s25; 44 | } 45 | 46 | 47 | // Deprecated emoji classes 48 | 49 | .emoji--huge { 50 | @extend .emoji-size-155; 51 | } 52 | 53 | .emoji--bigger { 54 | @extend .emoji-size-95; 55 | } 56 | 57 | .emoji--big { 58 | @extend .emoji-size-60; 59 | } 60 | 61 | .emoji--med { 62 | @extend .emoji-size-35; 63 | } 64 | 65 | .emoji--small { 66 | @extend .emoji-size-25; 67 | } 68 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_form-widths.scss: -------------------------------------------------------------------------------- 1 | .form-width--short { 2 | max-width: $width-form-short; 3 | } 4 | 5 | .form-width--med { 6 | max-width: $width-form-med; 7 | } 8 | 9 | .form-width--long { 10 | max-width: $width-form-long; 11 | } 12 | 13 | .form-width--casenumber { 14 | max-width: $width-form-casenumber; 15 | } 16 | 17 | .form-width--name { 18 | max-width: $width-form-name; 19 | } 20 | 21 | .form-width--phone { 22 | max-width: $width-form-phone; 23 | } 24 | 25 | .form-width--ssn { 26 | max-width: $width-form-ssn; 27 | } 28 | 29 | .form-width--zip { 30 | max-width: $width-form-zip; 31 | } 32 | 33 | .form-width--searchbar { 34 | max-width: $width-form-searchbar; 35 | } 36 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | @include outer-container($site-max-width); 3 | 4 | @include media($tablet-up) { 5 | // Defines width of element 6 | .width-one-whole { 7 | @include span-columns(12); 8 | } 9 | .width-one-half { 10 | @include span-columns(6); 11 | } 12 | .width-one-third { 13 | @include span-columns(4); 14 | } 15 | .width-two-thirds { 16 | @include span-columns(8); 17 | } 18 | .width-one-fourth { 19 | @include span-columns(3); 20 | } 21 | .width-three-fourths { 22 | @include span-columns(9); 23 | } 24 | .width-one-sixth { 25 | @include span-columns(2); 26 | } 27 | .width-five-sixths { 28 | @include span-columns(10); 29 | } 30 | .width-one-twelfth { 31 | @include span-columns(1); 32 | } 33 | .width-five-twelfths { 34 | @include span-columns(5); 35 | } 36 | .width-seven-twelfths { 37 | @include span-columns(7); 38 | } 39 | .width-eleven-twelfths { 40 | @include span-columns(11); 41 | } 42 | 43 | // Shift Classes (adds white space to the left of grid item) 44 | .shift-one-half { 45 | @include shift(6); 46 | } 47 | .shift-one-third { 48 | @include shift(4); 49 | } 50 | .shift-two-thirds { 51 | @include shift(8); 52 | } 53 | .shift-one-fourth { 54 | @include shift(3); 55 | } 56 | .shift-three-fourths { 57 | @include shift(9); 58 | } 59 | .shift-one-sixth { 60 | @include shift(2); 61 | } 62 | .shift-five-sixths { 63 | @include shift(10); 64 | } 65 | .shift-one-twelfth { 66 | @include shift(1); 67 | } 68 | .shift-five-twelfths { 69 | @include shift(5); 70 | } 71 | .shift-seven-twelfths { 72 | @include shift(7); 73 | } 74 | .shift-eleven-twelfths { 75 | @include shift(11); 76 | } 77 | 78 | // Specificies end of a row. 79 | // Required if grid-box contains multiple rows. 80 | // Required if browser does not support :last-child 81 | .end-row { 82 | @include omega(); 83 | } 84 | 85 | // Fixes grid alignment when grid__items have varying heights. 86 | .end-row + .grid__item { 87 | clear: left; 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_icons.scss: -------------------------------------------------------------------------------- 1 | [class^="icon-"], [class*=" icon-"] { 2 | line-height: $s25; 3 | position: relative; 4 | } 5 | 6 | // Microadjustments for icons 7 | .icon-arrow_forward { 8 | top: .15em; 9 | } 10 | 11 | .icon-keyboard_arrow_left { 12 | top: .15em; 13 | } 14 | 15 | .icon-keyboard_arrow_right { 16 | top: .15em; 17 | } 18 | 19 | .icon-arrow_back { 20 | top: .15em; 21 | } 22 | 23 | .icon-insert_comment { 24 | top: .1em; 25 | } 26 | 27 | .icon-file_upload { 28 | top: .15em; 29 | } 30 | 31 | .icon-person { 32 | top: .1em; 33 | } 34 | 35 | .icon-people { 36 | top: .15em; 37 | } 38 | 39 | .icon-replay { 40 | top: .1em; 41 | } 42 | 43 | .icon-add { 44 | top: .1em; 45 | } 46 | 47 | .icon-control_point { 48 | top: .1em; 49 | } 50 | 51 | .icon-info { 52 | top: .1em; 53 | } 54 | 55 | @font-face { 56 | font-family: 'Material Icons'; 57 | font-style: normal; 58 | font-weight: normal; 59 | src: font-url('MaterialIcons-Regular.eot'); /* For IE6-8 */ 60 | src: font-url('MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), 61 | font-url('MaterialIcons-Regular.ttf') format('truetype'), 62 | font-url('MaterialIcons-Regular.woff') format('woff'), 63 | font-url('MaterialIcons-Regular.svg') format('svg'); 64 | } 65 | 66 | [class^="icon-"], [class*=" icon-"] { 67 | font-family: $font-icon; 68 | speak: none; 69 | font-style: normal; 70 | font-weight: normal; 71 | font-variant: normal; 72 | text-transform: none; 73 | vertical-align: -.1em; 74 | line-height: 1; 75 | 76 | /* Better Font Rendering =========== */ 77 | -webkit-font-smoothing: antialiased; 78 | -moz-osx-font-smoothing: grayscale; 79 | } 80 | 81 | .icon { 82 | @include icons($icons); 83 | } 84 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_illustrations.scss: -------------------------------------------------------------------------------- 1 | .illustration { 2 | @include outline-with-offset; 3 | 4 | text-indent: -9999px; 5 | background-repeat: no-repeat; 6 | background-size: 100% auto; 7 | background-position: center center; 8 | margin-left: auto; 9 | margin-right: auto; 10 | margin-bottom: 1em; 11 | display: block; 12 | } 13 | 14 | .illustration--cfa-logo { 15 | @include retina-bg(cfa_logo, 100px 41px); 16 | margin-left: 0; 17 | width: 100px; 18 | height: 41px; 19 | } 20 | 21 | .illustration--cfa-logo__dark { 22 | @include retina-bg(cfa_logo_dark, 100% auto); 23 | margin-left: 0; 24 | width: 100px; 25 | height: 41px; 26 | } 27 | 28 | .illustration--cfa-logo-color { 29 | @include retina-bg(cfa_logo_color, 100% auto); 30 | width: 100%; 31 | height: 200px; 32 | opacity: .5; 33 | } 34 | 35 | .illustration--cfa-logo-color-2 { 36 | @include retina-bg(cfa_logo_color, auto 100%); 37 | background-size: auto 100%; 38 | width: 100%; 39 | height: 80px; 40 | } 41 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_images.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | height: auto; 4 | width: auto; 5 | } 6 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_labels.scss: -------------------------------------------------------------------------------- 1 | .label { 2 | display: inline-block; 3 | font-size: $font-size-15; 4 | background-color: $color-grey-dark; 5 | color: $color-white; 6 | font-weight: 500; 7 | border-radius: $border-radius; 8 | text-transform: uppercase; 9 | padding: $s15/2 $s10; 10 | line-height: $s15; 11 | position: relative; 12 | top: -.1em; 13 | margin-left: $s5; 14 | } 15 | 16 | .label--magenta { 17 | background-color: $color-magenta; 18 | } 19 | 20 | .label--teal { 21 | background-color: $color-teal; 22 | } 23 | 24 | .label--green { 25 | background-color: $color-green; 26 | } 27 | 28 | .label--red { 29 | background-color: $color-red; 30 | } 31 | 32 | .label--yellow { 33 | background-color: $color-yellow; 34 | color: $color-grey-darkest; 35 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_links.scss: -------------------------------------------------------------------------------- 1 | #skip-to-content { 2 | position: absolute; 3 | left: -999px; 4 | top: 0.7rem; 5 | z-index: 99; 6 | } 7 | 8 | #skip-to-content:focus { 9 | left: 8px; 10 | } 11 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_notices.scss: -------------------------------------------------------------------------------- 1 | .notice { 2 | background-color: $color-grey-light; 3 | padding: $s15; 4 | margin-bottom: $s25; 5 | border: 2px solid $color-grey; 6 | *:last-child { 7 | margin-bottom: 0; 8 | } 9 | } 10 | 11 | .notice--success { 12 | padding: $s15; 13 | margin-bottom: $s25; 14 | background-color: $color-green-light; 15 | border: 2px solid $color-green; 16 | *:last-child { 17 | margin-bottom: 0; 18 | } 19 | } 20 | 21 | .notice--warning { 22 | padding: $s15; 23 | margin-bottom: $s25; 24 | background-color: $color-yellow-light; 25 | border: 2px solid $color-yellow; 26 | *:last-child { 27 | margin-bottom: 0; 28 | } 29 | } 30 | 31 | .notice--error { 32 | padding: $s15; 33 | margin-bottom: $s25; 34 | background-color: $color-red-light; 35 | border: 2px solid $color-red; 36 | *:last-child { 37 | margin-bottom: 0; 38 | } 39 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_screen-readers.scss: -------------------------------------------------------------------------------- 1 | // Only display content to screen readers 2 | // 3 | // See: https://a11yproject.com/posts/how-to-hide-content/ 4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 5 | 6 | .sr-only { 7 | position: absolute; 8 | width: 1px; 9 | height: 1px; 10 | padding: 0; 11 | overflow: hidden; 12 | clip: rect(0, 0, 0, 0); 13 | white-space: nowrap; 14 | border: 0; 15 | } 16 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_slabs.scss: -------------------------------------------------------------------------------- 1 | .slab { 2 | @include full-bleed(); 3 | position: relative; 4 | padding: { 5 | top: $s60; 6 | bottom: $s60; 7 | } 8 | 9 | &:last-child { 10 | border-bottom: 0; 11 | } 12 | } 13 | 14 | .slab--white { 15 | background-color: $color-white; 16 | } 17 | 18 | .slab--teal { 19 | background-color: $color-teal-light; 20 | } 21 | 22 | .slab--yellow { 23 | background-color: $color-yellow-light; 24 | } 25 | 26 | .slab--green { 27 | background-color: $color-green-light; 28 | } 29 | 30 | .slab--red { 31 | background-color: $color-red-light; 32 | } 33 | 34 | .slab--magenta { 35 | background-color: $color-magenta-light; 36 | } 37 | 38 | 39 | .slab--gradient { 40 | background-color: rgba($color-teal, .05); 41 | background: linear-gradient(to right, rgba($color-magenta, .015) 0%, rgba($color-teal, .04) 65%); 42 | } 43 | 44 | .slab--padded { 45 | padding: { 46 | top: $s95; 47 | bottom: $s95; 48 | } 49 | } 50 | 51 | .slab--half-padded { 52 | padding: { 53 | top: $s25; 54 | bottom: $s25; 55 | } 56 | } 57 | 58 | .slab--not-padded { 59 | padding: { 60 | top: 0; 61 | bottom: 0; 62 | } 63 | } 64 | 65 | .slab--bleed { 66 | overflow: hidden; 67 | } 68 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/atoms/_spacing.scss: -------------------------------------------------------------------------------- 1 | .spacing-below-0 { 2 | margin-bottom: 0 !important; 3 | } 4 | 5 | .spacing-below-5 { 6 | margin-bottom: $s5 !important; 7 | } 8 | 9 | .spacing-below-10 { 10 | margin-bottom: $s10 !important; 11 | } 12 | 13 | .spacing-below-15 { 14 | margin-bottom: $s15 !important; 15 | } 16 | 17 | .spacing-below-25 { 18 | margin-bottom: $s25 !important; 19 | } 20 | 21 | .spacing-below-35 { 22 | margin-bottom: $s35 !important; 23 | } 24 | 25 | .spacing-below-60 { 26 | margin-bottom: $s60 !important; 27 | } 28 | 29 | .spacing-below-95 { 30 | margin-bottom: $s95 !important; 31 | } 32 | 33 | .spacing-below-155 { 34 | margin-bottom: $s155 !important; 35 | } 36 | 37 | .spacing-below-250 { 38 | margin-bottom: $s250 !important; 39 | } 40 | 41 | .spacing-above-0 { 42 | margin-top: 0 !important; 43 | } 44 | 45 | .spacing-above-5 { 46 | margin-top: $s5 !important; 47 | } 48 | 49 | .spacing-above-10 { 50 | margin-top: $s10 !important; 51 | } 52 | 53 | .spacing-above-15 { 54 | margin-top: $s15 !important; 55 | } 56 | 57 | .spacing-above-25 { 58 | margin-top: $s25 !important; 59 | } 60 | 61 | .spacing-above-35 { 62 | margin-top: $s35 !important; 63 | } 64 | 65 | .spacing-above-60 { 66 | margin-top: $s60 !important; 67 | } 68 | 69 | .spacing-above-95 { 70 | margin-top: $s95 !important; 71 | } 72 | 73 | .spacing-above-155 { 74 | margin-top: $s155 !important; 75 | } 76 | 77 | .spacing-above-250 { 78 | margin-top: $s250 !important; 79 | } 80 | 81 | 82 | 83 | // Deprecated Padding and Nudging Classes 84 | 85 | .with-no-padding { 86 | margin-bottom: 0 !important; 87 | } 88 | 89 | .with-padding-small { 90 | margin-bottom: $s10 !important; 91 | } 92 | 93 | .with-padding-med { 94 | margin-bottom: $s35 !important; 95 | } 96 | 97 | .with-padding-large { 98 | margin-bottom: $s60 !important; 99 | } 100 | 101 | .with-padding-huge { 102 | margin-bottom: $s155 !important; 103 | } 104 | 105 | .with-neg-padding-large { 106 | @include media($tablet-up) { 107 | margin-bottom: -$s155 !important; 108 | } 109 | } 110 | 111 | .nudge--tiny { 112 | margin-top: .2rem !important; 113 | } 114 | 115 | .nudge--small { 116 | margin-top: $s5 !important; 117 | } 118 | 119 | .nudge--med { 120 | margin-top: $s10 !important; 121 | } 122 | 123 | .nudge--large { 124 | margin-top: $s60 !important; 125 | } 126 | 127 | .nudge--huge { 128 | margin-top: $s155 !important; 129 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion { 2 | background-color: $color-grey-light; 3 | border: 2px solid $color-grey; 4 | border-radius: $border-radius-large; 5 | margin-bottom: $s15; 6 | } 7 | 8 | .accordion__button { 9 | @include outline-with-offset; 10 | border-radius: $s10 $s10 0 0; 11 | background: transparent; 12 | border: none; 13 | box-shadow: none; 14 | cursor: pointer; 15 | color: inherit; 16 | 17 | position: relative; 18 | display: block; 19 | width: 100%; 20 | text-align: left; 21 | font-weight: bold; 22 | text-decoration: none; 23 | padding: $s15 $s35 $s15 $s15; 24 | &:after { 25 | content: ''; 26 | display: block; 27 | position: absolute; 28 | right: $s15; 29 | top: 50%; 30 | margin-top: -$s15/2; 31 | width: $s15; 32 | height: $s15; 33 | background-image: image-url('icon_accordion_close.svg'); 34 | background-repeat: no-repeat; 35 | background-position: center center; 36 | } 37 | 38 | .accordion--is-closed & { 39 | border-radius: $s10; 40 | &:after { 41 | background-image: image-url('icon_accordion_open.svg'); 42 | } 43 | } 44 | } 45 | 46 | .accordion__content { 47 | margin-top: $s35; 48 | display: block; 49 | padding: 0 $s15 $s15 $s15; 50 | 51 | .accordion--is-closed & { 52 | display: none; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_complex-list.scss: -------------------------------------------------------------------------------- 1 | .list--complex { 2 | margin-bottom: 1em; 3 | } 4 | 5 | .list--complex > li { 6 | border-bottom: 1px solid $color-grey-light; 7 | padding-bottom: .5em; 8 | margin-bottom: 1.5em; 9 | } 10 | 11 | .list--complex .toolbar__item { 12 | color: $color-grey-dark; 13 | font-size: $font-size-25-small; 14 | margin-right: 0; 15 | &:not(:last-of-type) { 16 | &:after { 17 | display: inline-block; 18 | content: "/"; 19 | padding-left: .5em; 20 | margin-right: .5em; 21 | } 22 | } 23 | 24 | } 25 | 26 | .list--complex h3 { 27 | margin-bottom: 0; 28 | } 29 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_flashes.scss: -------------------------------------------------------------------------------- 1 | @keyframes slide-in { 2 | 0% { 3 | top: -3em; 4 | } 5 | 30% { 6 | top: -3em; 7 | } 8 | 100% { 9 | top: 0; 10 | } 11 | } 12 | 13 | .flash-container { 14 | transition: opacity $animation-med; 15 | animation: slide-in ease-out .5s; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | z-index: 10; 21 | text-align: center; 22 | pointer-events: none; 23 | &:target { 24 | opacity: 0; 25 | } 26 | } 27 | 28 | .flash { 29 | pointer-events: auto; 30 | display: inline-block; 31 | text-align: left; 32 | position: relative; 33 | margin-bottom: 1em; 34 | padding: .7em 1em; 35 | font-size: $font-size-25-small; 36 | background-color: $color-white; 37 | border: 2px solid $color-green; 38 | border-top: 0; 39 | border-radius: $border-radius-large; 40 | border-top-left-radius: 0; 41 | border-top-right-radius: 0; 42 | box-shadow: $box-shadow; 43 | } 44 | 45 | .flash--error { 46 | color: $color-red; 47 | border-color: $color-red; 48 | .flash__message:before { 49 | content: map_get($icons, warning); 50 | } 51 | .flash__dismiss { 52 | border-color: $color-red; 53 | &:hover { 54 | color: $color-red; 55 | background-color: $color-red-light; 56 | } 57 | } 58 | } 59 | 60 | .flash__message { 61 | margin-right: 3em; 62 | margin-bottom: 0; 63 | font-weight: 500; 64 | &:before { 65 | display: inline-block; 66 | font-family: $font-icon; 67 | margin-right: .5em; 68 | vertical-align: -.1em; 69 | } 70 | } 71 | 72 | .flash__dismiss { 73 | display: block; 74 | position: absolute; 75 | right: 0; 76 | top: 0; 77 | bottom: 0; 78 | width: 2.9em; 79 | line-height: 3.6em; 80 | color: $color-grey-darkest; 81 | text-align: center; 82 | text-decoration: none; 83 | border-left: 0px solid $color-green; 84 | border-bottom-right-radius: $border-radius-large; 85 | &:hover { 86 | background-color: $color-green-light; 87 | } 88 | &:visited { 89 | color: $color-grey-darkest; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_incrementer.scss: -------------------------------------------------------------------------------- 1 | .incrementer { 2 | display: table; 3 | border-collapse: separate; 4 | border-spacing: 1em; 5 | margin-bottom: .5em; 6 | 7 | .text-input { 8 | appearance: none; 9 | display: table-cell; 10 | text-align: center; 11 | margin-bottom: 0; 12 | border: 2px solid $color-grey-darkest; 13 | padding: { 14 | left: 1em; 15 | right: 1em; 16 | } 17 | &::-webkit-inner-spin-button { 18 | display: none; 19 | } 20 | } 21 | 22 | input[type=number] { 23 | -moz-appearance: textfield; // Remove stepper arrows in Firefox 24 | } 25 | } 26 | 27 | .incrementer__subtract, .incrementer__add { 28 | @extend .button; 29 | display: table-cell; 30 | line-height: 5.6rem; // hack around table cell sizing to make this 60px 31 | text-align: center; 32 | padding: 0; 33 | font-weight: bold; 34 | width: 3em; 35 | } 36 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_progress-dots.scss: -------------------------------------------------------------------------------- 1 | .progress-dots { 2 | display: block; 3 | text-align: center; 4 | } 5 | 6 | .progress-dots__dot { 7 | display: inline-block; 8 | background-color: $color-grey; 9 | border-radius: 50%; 10 | width: .5em; 11 | height: .5em; 12 | margin-right: .5em; 13 | &:last-child { 14 | margin-right: 0; 15 | } 16 | &.is-completed { 17 | background-color: $color-teal; 18 | } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_progress-indicator.scss: -------------------------------------------------------------------------------- 1 | .progress-indicator { 2 | width: 10em; 3 | margin: 1em auto; 4 | text-align: center; 5 | position: relative; 6 | z-index:0; 7 | &:before { 8 | content: ''; 9 | display: block; 10 | position: absolute; 11 | top: 0; 12 | height: 6px; 13 | left: 0; 14 | right: 0; 15 | border-radius: 3px; 16 | background-color: $color-grey-light; 17 | z-index: -1; 18 | border: 1px solid $color-grey; 19 | } 20 | } 21 | 22 | .form-card + .progress-indicator { 23 | margin-top: 2em; 24 | margin-bottom: -.5em; 25 | } 26 | 27 | .progress-indicator__bar { 28 | height: 6px; 29 | min-width: 6px; 30 | border-radius: 3px; 31 | background-color: $color-teal; 32 | } 33 | 34 | .progress-indicator__percentage { 35 | margin-top: .5em; 36 | font-size: $font-size-25-small; 37 | } 38 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_progress-step-bar.scss: -------------------------------------------------------------------------------- 1 | .progress-step-bar { 2 | margin: 0 auto; 3 | margin-top: 0; 4 | margin-bottom: $s60; 5 | max-width: 400px; 6 | } 7 | 8 | .progress-step-bar__bar { 9 | position: relative; 10 | text-align: justify; 11 | height: $s35; 12 | 13 | &:before { 14 | content: ''; 15 | display: block; 16 | height: 3px; 17 | position: absolute; 18 | left: $s15; 19 | right: $s15; 20 | top: 50%; 21 | margin-top: -1px; 22 | background-color: $color-grey-darkest; 23 | } 24 | &:after { 25 | content: ''; 26 | width: 100%; /* Ensures there are at least 2 lines of text, so justification works */ 27 | display: inline-block; 28 | } 29 | } 30 | 31 | .progress-step-bar__step { 32 | position: relative; 33 | display: inline-block; 34 | width: $s35; 35 | height: $s35; 36 | background-color: $color-white; 37 | border: 2px solid $color-grey-darkest; 38 | border-radius: 50%; 39 | z-index: 2; 40 | } 41 | 42 | .progress-step-bar__step--completed { 43 | background-color: $color-green; 44 | box-shadow: 0 1px 2px 0 rgba($color-grey-darkest, 0.4); 45 | @include retina-bg(icon_checkmark_white, 20px auto); 46 | background-position: center center; 47 | background-repeat: no-repeat; 48 | } 49 | 50 | .progress-step-bar__step--current { 51 | background-color: $color-yellow; 52 | box-shadow: 0 1px 2px 0 rgba($color-grey-darkest, 0.4); 53 | @include retina-bg(icon_star_black, 20px auto); 54 | background-position: center center; 55 | background-repeat: no-repeat; 56 | } 57 | 58 | .progress-step-bar__label { 59 | margin-top: $s10; 60 | text-align: center; 61 | margin-top: $s25; 62 | } 63 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_reveal.scss: -------------------------------------------------------------------------------- 1 | .reveal__button { 2 | @include outline-with-offset; 3 | cursor: pointer; 4 | display: inline-block; 5 | text-align: start; 6 | text-decoration: none; 7 | color: $color-teal-dark; 8 | border: 2px solid $color-teal-dark; 9 | background-color: $color-teal-light; 10 | border-radius: 10px; 11 | padding: .2em .5em .3em .7em; 12 | font-size: $font-size-25-small; 13 | 14 | &:after { 15 | position: relative; 16 | top: .1em; 17 | font-family: $font-icon; 18 | vertical-align: -.1em; 19 | content: '\a0'+map_get($icons, keyboard_arrow_down); 20 | } 21 | } 22 | 23 | .reveal__content { 24 | margin-top: $s15; 25 | background-color: $color-background; 26 | border: 2px solid $color-grey; 27 | border-radius: $border-radius-large; 28 | padding: $s15; 29 | font-size: $font-size-25-small; 30 | *:last-child { 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | .reveal { 36 | margin-bottom: 1em; 37 | &.is-hiding-content { 38 | .reveal__button { 39 | &:after { 40 | content: '\a0'+map_get($icons, keyboard_arrow_right); 41 | } 42 | } 43 | .reveal__content { 44 | display: none; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_scroller.scss: -------------------------------------------------------------------------------- 1 | @keyframes scroller { 2 | 0% { 3 | opacity: 0; 4 | } 5 | 6 | 100% { 7 | opacity: 1; 8 | } 9 | 10 | } 11 | 12 | .scroller { 13 | animation: scroller 2s 1; 14 | position: absolute; 15 | left: 50%; 16 | bottom: 1em; 17 | margin-left: -1em; 18 | display: block; 19 | width: 2em; 20 | height: 2em; 21 | color: $color-grey-darkest; 22 | text-decoration: none; 23 | &:before { 24 | font-family: $font-icon; 25 | font-size: $font-size-35; 26 | display: block; 27 | content: map_get($icons, keyboard_arrow_down); 28 | text-align: center; 29 | line-height: 1.5em; 30 | } 31 | } 32 | 33 | .scroller--light { 34 | color: $color-white; 35 | &:hover { 36 | color: $color-magenta; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_searchbar.scss: -------------------------------------------------------------------------------- 1 | .searchbar { 2 | @include outline-within-with-offset; 3 | display: table; 4 | width: 100%; 5 | border-collapse: separate; 6 | } 7 | 8 | .searchbar__input { 9 | display: table-cell; 10 | width: 100%; 11 | border: 2px solid $color-grey-darkest; 12 | box-shadow: inset 0px 2px 0px rgba(#000, .15); 13 | background-color: $color-grey-light; 14 | font-weight: $font-weight-bold; 15 | padding: 0 $s25; 16 | height: $s60; 17 | margin: 0; 18 | &:focus { 19 | outline: none; 20 | } 21 | &::placeholder { 22 | color: $color-grey-dark; 23 | } 24 | } 25 | 26 | .searchbar__button { 27 | transition: all $animation-fast; 28 | user-select: none; 29 | button { 30 | display: none; 31 | } 32 | 33 | @extend .button; 34 | padding: { 35 | top: ($s35/2) - 0.2rem; 36 | bottom: ($s35/2) - 0.2rem; 37 | } 38 | display: table-cell; 39 | border-radius: 0; 40 | vertical-align: middle; 41 | appearance: none; 42 | width: 1%; 43 | border: 2px solid $color-grey-darkest; 44 | border-left: none; 45 | background-color: $color-white; 46 | color: $color-grey-darkest; 47 | text-align: center; 48 | margin: 0; 49 | box-shadow: none; 50 | 51 | &:hover { 52 | background-color: $color-grey-light; 53 | } 54 | 55 | &:active { 56 | background-color: $color-grey-light; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_show-more.scss: -------------------------------------------------------------------------------- 1 | .show-more { 2 | text-align: left; 3 | margin-bottom: 3em; 4 | position: relative; 5 | 6 | &:after { 7 | content: ''; 8 | display: block; 9 | position: absolute; 10 | bottom: 0em; 11 | left: 0; 12 | right: 0; 13 | background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 75%); 14 | height: 7em; 15 | border-bottom: 2px solid $color-grey-darkest; 16 | } 17 | 18 | &.is-open { 19 | border-bottom: 0; 20 | 21 | &:after { 22 | display: none; 23 | } 24 | .show-more__content { 25 | max-height: none; 26 | } 27 | .show-more__button { 28 | display: none; 29 | } 30 | } 31 | } 32 | 33 | .show-more--long { 34 | .show-more__content { 35 | max-height: 30rem; 36 | } 37 | } 38 | 39 | .show-more__button { 40 | @include outline-with-offset; 41 | font-size: $font-size-25-small; 42 | display: inline-block; 43 | padding: .2em .4em; 44 | border-radius: 30px; 45 | border: 2px solid $color-grey-darkest; 46 | text-decoration: none; 47 | position: absolute; 48 | bottom: -1.3em; 49 | left: 50%; 50 | z-index: 2; 51 | width: 8em; 52 | margin-left: -4em; 53 | text-align: center; 54 | background-color: $color-white; 55 | &:hover { 56 | background-color: $color-background; 57 | } 58 | } 59 | 60 | .show-more__content { 61 | max-height: 15rem; 62 | overflow: hidden; 63 | } 64 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_steps.scss: -------------------------------------------------------------------------------- 1 | .steps { 2 | position: relative; 3 | 4 | @include media($tablet-up) { 5 | &:before { 6 | content: ''; 7 | display: block; 8 | position: absolute; 9 | top: 25px; 10 | height: 3px; 11 | width: 80%; 12 | margin-left: 10%; 13 | background-color: $color-grey; 14 | z-index: 0; 15 | } 16 | } 17 | 18 | .emoji, .illustration { 19 | position: relative; 20 | background-color: $color-white; 21 | margin-bottom: 1em; 22 | &:before { 23 | content: ''; 24 | z-index: 0; 25 | display: block; 26 | position: absolute; 27 | border: 20px solid $color-white; 28 | top: -20px; 29 | right: -20px; 30 | bottom: -20px; 31 | left: -20px; 32 | } 33 | } 34 | 35 | .grid__item { 36 | margin-bottom: $s25; 37 | @include media($tablet-up) { 38 | margin-bottom: 0; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_summary-table.scss: -------------------------------------------------------------------------------- 1 | .summary-table { 2 | text-align: center; 3 | .grid__item { 4 | margin-bottom: 1em; 5 | } 6 | } 7 | 8 | .summary-table--left { 9 | text-align: left; 10 | } 11 | 12 | .summary-table__label { 13 | @extend .text--help; 14 | margin-bottom: 0; 15 | } 16 | 17 | .summary-table__value { 18 | @extend .text--pullquote; 19 | } 20 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_tabs.scss: -------------------------------------------------------------------------------- 1 | .tab-bar { 2 | @include clearfix(); 3 | @include full-bleed(); 4 | 5 | border-bottom: 2px solid $color-grey-darkest; 6 | font-size: $font-size-25-small; 7 | margin-top: 1em; 8 | } 9 | 10 | .tab-bar__tab { 11 | background-color: $unselected-tab-background; 12 | border: 2px solid $color-grey-darkest; 13 | color: $color-grey-darkest; 14 | display: block; 15 | float: left; 16 | margin-bottom: -2px; 17 | margin-right: 0.5em; 18 | min-width: 8em; 19 | padding: 0.5em 1.5em; 20 | position: relative; 21 | text-align: center; 22 | text-decoration: none; 23 | 24 | &:hover { 25 | background-color: $color-teal-light; 26 | } 27 | 28 | &.is-selected { 29 | background-color: $selected-tab-background; 30 | color: $color-grey-darkest; 31 | font-weight: 600; 32 | z-index: 2; 33 | 34 | &:before { 35 | background-color: $selected-tab-background; 36 | content: ''; 37 | position: absolute; 38 | display: block; 39 | left: 0; 40 | right: 0; 41 | bottom: -2px; 42 | height: 2px; 43 | } 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_toolbar.scss: -------------------------------------------------------------------------------- 1 | $toolbar-item-wrap-spacing: .2em !default; 2 | 3 | .toolbar { 4 | align-items: baseline; 5 | display: flex; 6 | justify-content: space-between; 7 | margin: -$toolbar-item-wrap-spacing auto 0; 8 | max-width: $site-max-width; 9 | } 10 | 11 | .toolbar--wrap-when-small { 12 | flex-wrap: wrap; 13 | } 14 | 15 | .toolbar--hide-text-when-small { 16 | .toolbar__logo-text { 17 | display: inline-block; 18 | text-indent: -10000px; 19 | 20 | @include media($small-mobile-up) { 21 | text-indent: initial; 22 | } 23 | } 24 | } 25 | 26 | .toolbar__item { 27 | display: inline-block; 28 | margin-left: 1em; 29 | 30 | &:first-child { 31 | margin-left: 0; 32 | } 33 | } 34 | 35 | .toolbar__left { 36 | flex-shrink: 0; 37 | margin-top: $toolbar-item-wrap-spacing; 38 | margin-right: 1em; 39 | } 40 | 41 | .toolbar__right { 42 | flex-shrink: 0; 43 | margin-top: $toolbar-item-wrap-spacing; 44 | } 45 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltipped { 2 | font-weight: bold; 3 | white-space: nowrap; 4 | cursor: pointer; 5 | 6 | @include media($tablet-up) { 7 | position: relative; 8 | } 9 | 10 | &:after { 11 | content: '?'; 12 | position: relative; 13 | top: -.2em; 14 | display: inline-block; 15 | margin-left: .2em; 16 | margin-right: .2em; 17 | width: 1.4em; 18 | height: 1.4em; 19 | line-height: 1.2em; 20 | font-size: .6em; 21 | text-align: center; 22 | color: $color-teal; 23 | border: 1px solid $color-grey-darkest; 24 | border-radius: 50%; 25 | } 26 | &:hover { 27 | .tooltipped__tip { 28 | display: block; 29 | } 30 | } 31 | } 32 | 33 | .tooltipped__tip { 34 | display: none; 35 | position: fixed; 36 | bottom: .5em; 37 | z-index: 10; 38 | left: .5em; 39 | right: .5em; 40 | color: $color-white; 41 | width: auto; 42 | padding: .7em .5em; 43 | background-color: $color-grey-darkest; 44 | white-space: normal; 45 | font-size: $font-size-25-small; 46 | line-height: $s25; 47 | font-weight: 500; 48 | text-align: center; 49 | border-radius: $border-radius; 50 | 51 | @include media($tablet-up) { 52 | position: absolute; 53 | bottom: 0; 54 | left: 50%; 55 | margin-left: -$tooltip-width/2; 56 | width: $tooltip-width; 57 | margin-bottom: 2em; 58 | &:before { 59 | @include triangle(bottom, $color: $color-grey-darkest, $size: 10px); 60 | position: absolute; 61 | left: 50%; 62 | margin-left: -15px; 63 | bottom: -10px; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/molecules/_vertical-steps.scss: -------------------------------------------------------------------------------- 1 | .vertical-steps { 2 | position :relative; 3 | 4 | &:before { 5 | content: ''; 6 | display: block; 7 | position: absolute; 8 | top: 0; 9 | bottom: 0; 10 | width: 3px; 11 | left: 50%; 12 | background-color: $color-grey; 13 | } 14 | } 15 | 16 | .vertical-steps__step { 17 | position: relative; 18 | padding: $s10; 19 | background-color: $color-white; 20 | 21 | h3 { 22 | margin: 0; 23 | } 24 | } 25 | 26 | .vertical-steps__step:not(:last-child) { 27 | margin-bottom: $s60; 28 | } 29 | 30 | .vertical-steps__title { 31 | font-size: $font-size-25; 32 | font-weight: $font-weight-bold; 33 | line-height: $s25; 34 | margin-bottom: $s10; 35 | } 36 | 37 | .vertical-steps__emoji { 38 | @extend .emoji; 39 | @extend .emoji-size-60; 40 | @extend .spacing-above-25; 41 | @extend .spacing-below-25; 42 | } 43 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_admin-application-card.scss: -------------------------------------------------------------------------------- 1 | .admin-application-card { 2 | @extend .card; 3 | 4 | padding: $s10; 5 | padding-left: $s10 * 2; 6 | position: relative; 7 | 8 | hr { 9 | margin-top: $s10; 10 | margin-bottom: $s10; 11 | } 12 | 13 | .status { 14 | white-space: nowrap; 15 | 16 | &.successful { 17 | color: $color-green; 18 | } 19 | 20 | &.failure { 21 | color: $color-red; 22 | } 23 | 24 | &.not-applicable { 25 | opacity: .3; 26 | } 27 | } 28 | 29 | .drive_action { 30 | float: right; 31 | } 32 | 33 | &:before { 34 | content: ' '; 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | bottom: 0; 39 | width: 8px; 40 | } 41 | 42 | &.drive-in-progress { 43 | &:before { 44 | background-color: $color-teal; 45 | } 46 | } 47 | 48 | &.drive-warning { 49 | background-color: #FFF7E3; 50 | &:before { 51 | background-color: #FEDC7F; 52 | } 53 | } 54 | 55 | &.drive-error { 56 | background-color: rgba(255, 194, 195, 0.1); 57 | &:before { 58 | background-color: #E36769; 59 | } 60 | 61 | &.probably-failed-manual-drive { 62 | &:before { 63 | background-color: $color-magenta; 64 | } 65 | } 66 | } 67 | } 68 | 69 | .admin-application-card__top { 70 | display: flex; 71 | flex-direction: row; 72 | } 73 | 74 | .admin-application-card__additional-information { 75 | padding-top: $s10; 76 | } 77 | 78 | .admin-application-card__header { 79 | padding-bottom: $s10; 80 | } 81 | 82 | .admin-application-card__title { 83 | font-size: $font-size-25-small; 84 | font-weight: 600; 85 | } 86 | 87 | .admin-application-card__data-group { 88 | display: flex; 89 | flex-direction: row; 90 | } 91 | 92 | .admin-application-card__data { 93 | min-width: 300px; 94 | } 95 | 96 | .admin-application-card__left { 97 | flex: 1 1 0; 98 | } 99 | 100 | .admin-application-card__right { 101 | text-align: right; 102 | flex: 1 1 0; 103 | } 104 | 105 | .admin-application-card__error { 106 | color: $color-red; 107 | } 108 | 109 | .admin-application-card__error:not(:last-child) { 110 | display: none; 111 | } 112 | 113 | .admin-application-card--showing-all-errors { 114 | .admin-application-card__error { 115 | display: block; 116 | } 117 | 118 | .admin-application-card-show-all-errors { 119 | display: none; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_assister-message.scss: -------------------------------------------------------------------------------- 1 | .assister-message { 2 | @include full-bleed(); 3 | position: relative; 4 | z-index: 2; 5 | background-color: $color-teal; 6 | padding: .5em; 7 | text-align: center; 8 | font-size: $font-size-25-small; 9 | color: $color-white; 10 | } 11 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_demo-banner.scss: -------------------------------------------------------------------------------- 1 | .demo-banner { 2 | @include full-bleed(); 3 | position: relative; 4 | z-index: 2; 5 | background-color: $color-red; 6 | padding: .5em; 7 | text-align: center; 8 | font-size: $font-size-25-small; 9 | color: $color-white; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_document-preview.scss: -------------------------------------------------------------------------------- 1 | .doc-preview-container { 2 | padding-bottom: 1em; 3 | } 4 | 5 | .doc-preview { 6 | @include clearfix(); 7 | position: relative; 8 | margin-bottom: 1em; 9 | border-bottom: 1px solid $color-grey; 10 | } 11 | 12 | .doc-preview__info { 13 | display: block; 14 | margin-right: 150px; 15 | min-height: 75px; 16 | } 17 | 18 | .doc-preview__thumb { 19 | position: absolute; 20 | top: 0; 21 | right: 0; 22 | width: 75px; 23 | height: 75px; 24 | border: 1px solid $color-grey; 25 | border-radius: $border-radius; 26 | } 27 | 28 | .document-upload { 29 | .form { 30 | &__documentuploader { 31 | border-width: 1px; 32 | border-color: $color-grey; 33 | border-style: solid; 34 | margin-bottom: 0.5em; 35 | padding: 1em; 36 | text-align: center; 37 | width: 100%; 38 | line-height: normal; 39 | 40 | &:hover { 41 | background-color: $color-grey-light; 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_form-card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: $box-shadow; 3 | border-radius: $border-radius-large; 4 | padding: $s25 $s25; 5 | background-color: $color-white; 6 | margin-bottom: $s15; 7 | > *:last-child { 8 | margin-bottom: 0; 9 | } 10 | } 11 | 12 | .form-card { 13 | @extend .card; 14 | padding: $s60 $s25; 15 | margin-left: -$s5; 16 | margin-right: -$s5; 17 | @include media($tablet-up) { 18 | margin-left: 0; 19 | margin-right: 0; 20 | padding: $s60 $s35; 21 | } 22 | 23 | p { 24 | max-width: 30em; 25 | } 26 | } 27 | 28 | .form-card__header { 29 | margin-bottom: $s60; 30 | } 31 | 32 | .form-card__header--with-icon { 33 | position: relative; 34 | @include media($tablet-up) { 35 | padding-right: 6em; 36 | } 37 | } 38 | 39 | .form-card__icon { 40 | float: right; 41 | margin-left: .5em; 42 | 43 | @include media($tablet-up) { 44 | position: absolute; 45 | right: $s35; 46 | margin-left: 0; 47 | float: none; 48 | } 49 | 50 | } 51 | 52 | .form-card__title { 53 | font-size: $font-size-35; 54 | margin-top: 0; 55 | margin-bottom: 0; 56 | + .text--help, + .text--small { 57 | margin-top: $s25; 58 | margin-bottom: 0; 59 | } 60 | } 61 | 62 | 63 | .form-card__footer { 64 | @include full-bleed(); 65 | margin-top: $s60; 66 | 67 | *:last-child { 68 | margin-bottom: 0; 69 | } 70 | } 71 | 72 | .form-card--transition { 73 | text-align: center; 74 | p { 75 | margin: { 76 | left: auto; 77 | right: auto; 78 | } 79 | } 80 | 81 | // center buttons in centered cards 82 | .button:first-of-type { 83 | margin-left: $s25/2; 84 | } 85 | 86 | .text-input-group-container { 87 | display: inline-block; 88 | } 89 | 90 | .text-input { 91 | margin: 0 auto; 92 | } 93 | 94 | .form-card__content { 95 | .list--bulleted, .media-box { 96 | max-width: 25em; 97 | text-align: left; 98 | margin: 0 auto; 99 | } 100 | } 101 | } 102 | 103 | .feedback-survey { 104 | .question-with-follow-up { 105 | margin-bottom: 1em; 106 | } 107 | } 108 | 109 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_global-error-message.scss: -------------------------------------------------------------------------------- 1 | .global-error-message { 2 | @include full-bleed(); 3 | position: relative; 4 | z-index: 2; 5 | background-color: $color-red; 6 | padding: .5em; 7 | text-align: center; 8 | font-size: $font-size-25-small; 9 | color: $color-white; 10 | } 11 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_legal.scss: -------------------------------------------------------------------------------- 1 | .legal { 2 | margin-top: -1em; 3 | margin-bottom: 2em; 4 | max-width: 30em; 5 | margin-left: auto; 6 | margin-right: auto; 7 | } 8 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_main-footer.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin-bottom: $footer-height*1.5; 3 | @include media($tablet-up) { 4 | margin-bottom: $footer-height; 5 | } 6 | 7 | } 8 | 9 | .main-footer { 10 | position: absolute; 11 | bottom: 0; 12 | left: 0; 13 | right: 0; 14 | height: $footer-height*1.5; 15 | background-color: $color-grey; 16 | padding: 2em $s15; 17 | font-weight: 600; 18 | 19 | @include media($tablet-up) { 20 | padding: 2em $s35; 21 | height: $footer-height; 22 | } 23 | } 24 | 25 | .main-footer--with-sidebar { 26 | @media screen and (max-width: $tablet-up + $sidebar-width - 1) { 27 | left: 0; 28 | } 29 | 30 | @media screen and (min-width: $tablet-up + $sidebar-width) { 31 | left: $sidebar-width; 32 | } 33 | } 34 | 35 | .main-footer__legal { 36 | font-size: $font-size-25-small; 37 | color: $color-grey-darkest; 38 | p { 39 | @include clearfix(); 40 | margin-bottom: 0em; 41 | } 42 | } 43 | 44 | .main-footer__cfa-logo { 45 | margin-top: 2em; 46 | 47 | @include media($tablet-up) { 48 | margin-top: 1em; 49 | float: right; 50 | } 51 | } 52 | 53 | .main-footer .select:before { 54 | color: $color-grey-dark; 55 | } 56 | 57 | .main-footer .select__element { 58 | border-radius: 0; 59 | } 60 | 61 | .main-footer .select__element:focus { 62 | border-color: $color-grey-dark 63 | } 64 | 65 | .main-footer__compact { 66 | @extend .main-footer; 67 | padding: 1.5rem 2rem; 68 | font-size: $font-size-25-small; 69 | font-weight: $font-weight-normal; 70 | height: unset; 71 | 72 | @include media($tablet-up) { 73 | padding: 1.5rem $s35; 74 | } 75 | } -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_main-header.scss: -------------------------------------------------------------------------------- 1 | .main-header { 2 | @include full-bleed(); 3 | height: $s60; 4 | line-height: $s60; 5 | } 6 | 7 | .main-header__title { 8 | font-size: $font-size-25-small; 9 | line-height: $s25; 10 | margin-bottom: 0; 11 | font-weight: 500; 12 | color: $color-grey-darkest; 13 | 14 | .main-header__cbo-title { 15 | display: inline-block; 16 | @include media($tablet-up) { 17 | max-width: 10em; 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | } 22 | 23 | @include media($site-max-up) { 24 | max-width: none; 25 | } 26 | } 27 | 28 | .main-header__logo { 29 | position: relative; 30 | text-decoration: none; 31 | display: inline-block; 32 | color: $color-grey-darkest; 33 | padding-left: $s35; 34 | 35 | &:before { 36 | @include retina-bg(gcf_logomark_black, 100% auto); 37 | background-repeat: no-repeat; 38 | content: ''; 39 | display: inline-block; 40 | position: absolute; 41 | top: -.15em; 42 | left: 0; 43 | width: $s25; 44 | height: $s25; 45 | } 46 | } 47 | } 48 | 49 | .assister-toolbar { 50 | clear: both; 51 | display: block; 52 | padding-top: .5em; 53 | 54 | @include media($tablet-up) { 55 | float: right; 56 | clear: none; 57 | float: right; 58 | padding-top: 0; 59 | .toolbar__item { 60 | margin-right: 0; 61 | margin-left: 1em; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | @include clearfix; 3 | padding: 2em 0; 4 | 5 | .text--help { 6 | margin-top: .3em; 7 | } 8 | 9 | .button { 10 | min-width: 2.5em; 11 | text-align: center; 12 | margin-right: $s10; 13 | } 14 | 15 | .pagination__selected { 16 | @extend .button--primary; 17 | @include outline; 18 | } 19 | 20 | .pagination__ellipsis { 21 | display: inline-block; 22 | width: 2em; 23 | text-align: center; 24 | } 25 | 26 | @include media($tablet-up) { 27 | 28 | .pagination__info { 29 | float: left; 30 | } 31 | 32 | .pagination__buttons { 33 | float: right; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/organisms/_statistic-card.scss: -------------------------------------------------------------------------------- 1 | .statistic-card { 2 | @extend .card; 3 | } 4 | 5 | .statistic-card__label { 6 | @extend .text--help; 7 | margin-bottom: .5em; 8 | } 9 | 10 | .statistic-card__number { 11 | @extend .h1; 12 | margin-top: 0; 13 | } 14 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_about.scss: -------------------------------------------------------------------------------- 1 | .template--about { 2 | .main-header { 3 | background-color: $color-white; 4 | border-bottom: 0; 5 | } 6 | 7 | .slab--header { 8 | background-color: $color-white; 9 | padding: { 10 | top: 3em; 11 | bottom: 3em; 12 | } 13 | 14 | @include media($tablet-up) { 15 | padding: { 16 | top: 4em; 17 | bottom: 4em; 18 | } 19 | } 20 | 21 | .button--primary { 22 | margin: { 23 | left: auto; 24 | right: auto; 25 | } 26 | } 27 | } 28 | 29 | h2 { 30 | text-align: center; 31 | font-size: $font-size-60; 32 | } 33 | 34 | .partner-logo { 35 | display: block; 36 | float: left; 37 | width: 30%; 38 | margin: 5% 10%; 39 | 40 | @include media($tablet-up) { 41 | width: 15%; 42 | margin: 5%; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_dashboard.scss: -------------------------------------------------------------------------------- 1 | .template--dashboard { 2 | font-size: $font-size-25-small; 3 | 4 | .page-wrapper, .main-footer { 5 | overflow: auto; 6 | min-width: $site-max-width; 7 | } 8 | 9 | .dashboard-main--empty { 10 | margin-top: 10em; 11 | text-align: center; 12 | } 13 | 14 | .grid, .toolbar { 15 | max-width: none; 16 | } 17 | 18 | .main-header { 19 | border-bottom: 0; 20 | } 21 | 22 | .dashboard-toolbar { 23 | padding: 3em 0; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_error.scss: -------------------------------------------------------------------------------- 1 | .template--error { 2 | margin-top: 2em; 3 | margin-bottom: 2em; 4 | @include media($tablet-up) { 5 | margin-top: 4em; 6 | margin-bottom: 4em; 7 | } 8 | 9 | } 10 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_numbers.scss: -------------------------------------------------------------------------------- 1 | .template--numbers { 2 | .big-number { 3 | font-size: 10rem; 4 | line-height: 10rem; 5 | } 6 | .medium-number { 7 | font-size: 8rem; 8 | line-height: 10rem; 9 | } 10 | .small-number { 11 | font-size: 6rem; 12 | line-height: 10rem; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_question.scss: -------------------------------------------------------------------------------- 1 | .template--question { 2 | .slab { 3 | padding-top: 0; 4 | padding-bottom: $s25; 5 | @include media($tablet-up) { 6 | padding-top: $s25; 7 | padding-bottom: $s35; 8 | } 9 | } 10 | 11 | .form-card { 12 | max-width: 55rem; 13 | margin-bottom: 0; 14 | 15 | @include media($tablet-up) { 16 | margin: { 17 | left: auto; 18 | right: auto; 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /app/assets/stylesheets/honeycrisp/templates/_static-page.scss: -------------------------------------------------------------------------------- 1 | .template--static-page { 2 | .slab--header { 3 | background-color: $color-white; 4 | padding: { 5 | top: 6em; 6 | bottom: 6em; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /app/controllers/cfa/styleguide/examples_controller.rb: -------------------------------------------------------------------------------- 1 | module Cfa 2 | module Styleguide 3 | class ExamplesController < ApplicationController 4 | layout false 5 | 6 | def show 7 | @form = Cfa::Styleguide::FormExample.new 8 | @form.valid? 9 | 10 | @partial_path = "examples/#{params[:example_path]}" 11 | end 12 | end 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /app/controllers/cfa/styleguide/pages_controller.rb: -------------------------------------------------------------------------------- 1 | module Cfa 2 | module Styleguide 3 | class PagesController < ApplicationController 4 | layout "main" 5 | 6 | def form_builder_v1 7 | @form = Cfa::Styleguide::FormExample.new 8 | @form.valid? 9 | end 10 | 11 | def form_builder_v2 12 | @form = Cfa::Styleguide::FormExample.new 13 | @form.valid? 14 | end 15 | 16 | def emojis 17 | classes = Dir.chdir(File.expand_path("../../../assets/stylesheets/honeycrisp/atoms", File.dirname(__FILE__))) do 18 | File.read("_emoji.scss").scan(/\.(\S*) {.*/) 19 | end 20 | @emojis = [] 21 | @emoji_pairs = [] 22 | 23 | classes.each do |css_class| 24 | if css_class[0].include?("emoji-pair") 25 | @emoji_pairs.push(css_class[0]) 26 | else 27 | @emojis.push(css_class[0]) 28 | end 29 | end 30 | end 31 | end 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /app/helpers/cfa/styleguide/pages_helper.rb: -------------------------------------------------------------------------------- 1 | module Cfa 2 | module Styleguide 3 | module PagesHelper 4 | def render_example(partial_path) 5 | partial = lookup_context.find_template(partial_path, [], true) 6 | 7 | content_tag :div, class: "pattern__example" do 8 | partial.render(self, {}) 9 | end 10 | end 11 | 12 | def code_example_html(partial_path) 13 | partial = lookup_context.find_template(partial_path, [], true) 14 | 15 | partial.render(self, {}) 16 | end 17 | 18 | def code_example_erb(partial_path) 19 | partial = lookup_context.find_template(partial_path, [], true) 20 | 21 | filepath = partial.identifier 22 | File.read(filepath) 23 | end 24 | 25 | def status_icon(icon, successful: false, failure: false, not_applicable: false) 26 | classes = ["status"] 27 | classes << "successful" if successful 28 | classes << "failure" if failure 29 | classes << "not-applicable" if not_applicable 30 | classes << ("icon-#{icon}") 31 | 32 | <<-HTML.html_safe 33 | 34 | HTML 35 | end 36 | end 37 | end 38 | end 39 | -------------------------------------------------------------------------------- /app/models/cfa/styleguide/form_example.rb: -------------------------------------------------------------------------------- 1 | require "active_model" 2 | 3 | module Cfa 4 | module Styleguide 5 | class FormExample 6 | include ActiveModel::Model 7 | include ActiveModel::AttributeAssignment 8 | include ActiveModel::Validations::Callbacks 9 | 10 | attr_accessor :id, 11 | :name, 12 | :example_method_name, 13 | :example_method_with_validation, 14 | :example_method_name_month, 15 | :example_method_name_day, 16 | :example_method_name_year, 17 | :example_method_with_validation_month, 18 | :example_method_with_validation_day, 19 | :example_method_with_validation_year, 20 | :none 21 | 22 | validates_presence_of :example_method_with_validation # For tests 23 | 24 | def method_missing(method_name, *args, **kwargs, &block) 25 | if method_name.to_s.starts_with?("example_method_with_validation") && errors[method_name].empty? 26 | errors.add(method_name, "This is an example error message.") 27 | end 28 | return super unless method_name.to_s.starts_with?("example_method") 29 | 30 | nil 31 | end 32 | 33 | def respond_to_missing?(method_name, *_args) 34 | method_name.to_s.starts_with?("example_method") 35 | end 36 | end 37 | end 38 | end 39 | -------------------------------------------------------------------------------- /app/views/cfa/styleguide/examples/show.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | <%= stylesheet_link_tag 'application', media: 'all' %> 7 | <%= javascript_include_tag 'application' %> 8 | 9 | 10 | <%= render @partial_path %> 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/views/cfa/styleguide/pages/_section.html.erb: -------------------------------------------------------------------------------- 1 | <% title = local_assigns.fetch(:title) %> 2 | <% example = local_assigns.fetch(:example) %> 3 | <% explanation = local_assigns.fetch(:explanation, nil) %> 4 | <% section_anchor = example.parameterize %> 5 | 6 |
7 |
8 |
9 |
10 |

11 | <%= title %> 12 | # 13 | ◉ 14 |

15 |
16 | 17 |
18 |
19 | <% html_example = code_example_html("examples/#{example}").to_str.strip %> 20 | <% erb_example = code_example_erb("examples/#{example}").strip %> 21 | 22 | <%= render_example("examples/#{example}") %> 23 | 24 | <% if explanation.present? %> 25 |

<%= explanation.html_safe %>

26 | <% end %> 27 | 28 |
29 |
30 | HTML 31 | <% if erb_example != html_example %> 32 | ERB 33 | <% end %> 34 |
35 | 36 |
37 | 
<%= html_example %>
38 |
39 | <% if erb_example != html_example %> 40 |
41 | 
<%= erb_example %>
42 |
43 | <% end %> 44 |
45 |
46 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /app/views/cfa/styleguide/pages/emojis.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for(:template_name) { "styleguide" } %> 2 | 3 |
4 |
5 |
6 |

Emoji Index

7 |

Emoji icons supplied by <%= link_to "EmojiOne", "https://www.emojione.com/emoji/v3" %>.

8 |

License: EmojiOne 3.1

9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 |

Emoji Sizes

17 |
18 |
19 |
20 | <%= render_example 'examples/atoms/emojis' %> 21 | 22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |

Emojis

32 |
33 |
34 |
35 | <% @emojis.each do |css_class| %> 36 |
37 |
">
38 |

<%= css_class %>

39 |
40 | <% end %> 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |

Emoji Pairs

50 |
51 |
52 |
53 | <% @emoji_pairs.each do |css_class| %> 54 |
55 |
">
56 |

<%= css_class %>

57 |
58 | <% end %> 59 |
60 |
61 |
62 |
-------------------------------------------------------------------------------- /app/views/cfa/styleguide/pages/form_builder_v2.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for(:template_name) { "styleguide" } %> 2 | 3 |
4 |
5 |
6 |

CfaV2FormBuilder

7 |

CfAV2FormBuilder is a helper that generates accessible form fields for the styleguide.

8 |
9 |
10 |
11 | 12 | <%= render 'section', title: 'Text Field', example: 'form_builder/v2/cfa_text_field' %> 13 | <%= render 'section', title: 'Button', example: 'form_builder/v2/cfa_button' %> 14 | <%= render 'section', title: 'Select', example: 'form_builder/v2/cfa_select' %> 15 | <%= render 'section', title: 'Fieldset', example: 'form_builder/v2/cfa_fieldset' %> 16 | <%= render 'section', title: 'Radio Button', example: 'form_builder/v2/cfa_radio_button' %> 17 | <%= render 'section', title: 'Collection Radio Buttons', example: 'form_builder/v2/cfa_collection_radio_buttons' %> 18 | <%= render 'section', title: 'Check Box', example: 'form_builder/v2/cfa_check_box' %> 19 | <%= render 'section', title: 'Collection Check Boxes', example: 'form_builder/v2/cfa_collection_check_boxes' %> 20 | -------------------------------------------------------------------------------- /app/views/cfa/styleguide/pages/honeycrisp_compact.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for(:template_name) { "styleguide" } %> 2 | 3 | <% content_for :subnavigation do %> 4 | 5 |
  • 6 | Atoms 7 | 11 | Molecules 12 | 15 |
    • 16 | <% end %> 17 | 18 |
    19 |
    20 |
    21 |

    Honeycrisp Compact

    22 |

    23 | Honeycrisp Compact is a variation of Honeycrisp. 24 | While standard Honeycrisp is geared towards public facing products, Compact can be used to build internal tools 25 | and products for workers. 26 | Use Compact for things that people will use as part of their job. 27 | Compact's components aim to be as accessible and usable as standard Honeycrisp, but with a more businesslike 28 | visual design that allows for greater information density and more complex workflows. 29 | These products might be used routinely, and by people who need workspaces that are optimized for efficiency. 30 |

    31 |
    32 |
    33 |
    34 | 35 | <%= render 'section', title: 'Typography', example: 'honeycrisp_compact/typography' %> 36 | <%= render 'section', title: 'Buttons', example: 'honeycrisp_compact/buttons' %> 37 | <%= render 'section', title: 'Form Elements', example: 'honeycrisp_compact/form_elements' %> 38 | <%= render 'section', title: 'Data Table', example: 'honeycrisp_compact/data_table' %> 39 | -------------------------------------------------------------------------------- /app/views/components/atoms/_examples.html.erb: -------------------------------------------------------------------------------- 1 |

    2 | <% local_assigns.fetch(:examples).each do |example| %> 3 | <%= example %> 4 | <% end %> 5 |

    6 | -------------------------------------------------------------------------------- /app/views/components/atoms/_label.html.erb: -------------------------------------------------------------------------------- 1 | <% text = local_assigns[:text] %> 2 | <% variant = local_assigns[:variant] %> 3 | 4 | "><%= text.presence || yield %> -------------------------------------------------------------------------------- /app/views/components/molecules/_example_group.html.erb: -------------------------------------------------------------------------------- 1 | <% introduction = local_assigns.fetch(:introduction, "For example:") %> 2 | <% examples = local_assigns.fetch(:examples) %> 3 | 4 |
    <%= introduction %>
    5 |
    6 | <%= render 'components/atoms/examples', examples: examples %> 7 |
    -------------------------------------------------------------------------------- /app/views/components/molecules/_progress_indicator.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    <%= percent %>% complete
    4 |
    5 | -------------------------------------------------------------------------------- /app/views/components/molecules/_progress_step_bar.html.erb: -------------------------------------------------------------------------------- 1 | <% step_description = local_assigns[:step_description] %> 2 | 3 | <% label_id = "progress-step-bar--#{current_step}-#{step_count}-label".downcase %> 4 | 5 |
    6 |
    7 | <% (1..step_count).each do |step_number| %> 8 | <% if step_number < current_step %> 9 |
    10 | <% elsif step_number == current_step %> 11 |
    12 | <% else %> 13 |
    14 | <% end %> 15 | <% end %> 16 |
    17 | 18 |
    19 | <%= "#{step_description}" %> 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /app/views/components/molecules/_reveal.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | <%= yield %> 5 |
    6 |
    -------------------------------------------------------------------------------- /app/views/components/molecules/_show_more.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | <%= yield %> 5 |
    6 |
    -------------------------------------------------------------------------------- /app/views/examples/atoms/_buttons.html.erb: -------------------------------------------------------------------------------- 1 |
    Small
    2 |
    3 | 4 | 5 |
    6 |
    7 | 8 | 9 |
    10 |
    11 | 12 | 13 |
    14 | 15 |
    Standard
    16 |
    17 | 18 | 19 |
    20 |
    21 | 22 | 23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | 30 | 31 |
    32 | 33 |
    Buttons as links
    34 |
    35 | 36 |
    37 | 38 |
    Links as buttons
    39 |
    40 | <%= link_to 'Link as button', '#', class: 'button' %> 41 | <%= link_to 'Link as primary button', '#', class: 'button button--primary' %> 42 |
    43 |
    44 | <%= link_to '#', class: 'button' do %> 45 | Button with icon 46 | <% end %> 47 | <%= link_to '#', class: 'button button--danger' do %>Danger Button<% end %> 48 |
    49 |
    Linked Images (Link with Background Image)
    50 |
    51 | 52 |
    53 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_card.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |

    This is an example card. It's used to highlight and focus content. This may or may not be used for forms.

    3 |
    4 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_colors.html.erb: -------------------------------------------------------------------------------- 1 |

    Brand Colors

    2 |
    3 |

    #008060

    4 |

    teal

    5 |
    6 |
    7 |

    #EBFFFA

    8 |

    teal-light

    9 |
    10 |
    11 |

    #034E46

    12 |

    teal-dark

    13 |
    14 |
    15 |

    #A6005E

    16 |

    magenta

    17 |
    18 |
    19 |

    #FFEAF6

    20 |

    magenta-light

    21 |
    22 |
    23 |

    #66013A

    24 |

    magenta-dark

    25 |
    26 | 27 |

    Greys

    28 |
    29 |

    #F7F5F4

    30 |

    grey-light

    31 |
    32 |
    33 |

    #CFC5BF

    34 |

    grey

    35 |
    36 |
    37 |

    #5F5854

    38 |

    grey-dark

    39 |
    40 |
    41 |

    #121111

    42 |

    grey-darkest

    43 |
    44 | 45 |

    System Colors

    46 |
    47 |

    #EBFFEF

    48 |

    green-light

    49 |
    50 |
    51 |

    #00891B

    52 |

    green

    53 |
    54 |
    55 |

    #FCE3D9

    56 |

    red-light

    57 |
    58 |
    59 |

    #D13F00

    60 |

    red

    61 |
    62 |
    63 |

    #FFF2D1

    64 |

    yellow-light

    65 |
    66 |
    67 |

    #FFAE00

    68 |

    yellow

    69 |
    70 |
    71 |

    #C2850C

    72 |

    gold

    73 |
    74 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_emojis.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    -------------------------------------------------------------------------------- /app/views/examples/atoms/_grid.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    This is an example grid. Every element on the page should be within a grid element.

    4 |
    5 |
    6 |

    The grid allows you to size things from 1/12 to 1/1. Shift classes allow you to create empty spaces to the left of the grid item.

    7 |
    8 |
    9 |

    Grid items default to full width on mobile. More complex grid behaviors or nested grids should be created using the neat mixins.

    10 |
    11 |
    12 | 13 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_labels.html.erb: -------------------------------------------------------------------------------- 1 |

    2 | <%= render 'components/atoms/label', text: 'Beta' %> 3 | <%= render 'components/atoms/label', text: 'Featured', variant: 'magenta' %> 4 | <%= render 'components/atoms/label', text: 'New', variant: 'teal' %> 5 | <%= render 'components/atoms/label', text: 'Green', variant: 'green' %> 6 | <%= render 'components/atoms/label', text: 'In Progress', variant: 'yellow' %> 7 | <%= render 'components/atoms/label', text: 'Error', variant: 'red' %> 8 |

    9 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_links.html.erb: -------------------------------------------------------------------------------- 1 |
    Click here and then pres TAB
    2 |
    3 | 4 |
    5 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_notices.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |

    This is an example notice. It's a great way to provide additional information on a certain issue.

    3 |
    4 | 5 |
    6 |

    This is an example warning notice. It's a great way to highlight confirmations or successful actions.

    7 |
    8 | 9 |
    10 |

    This is an example warning notice. It's a great way to highlight potential issues.

    11 |
    12 | 13 |
    14 |

    This is an example warning notice. It's a great way to highlight errors or dangerous issues.

    15 |
    -------------------------------------------------------------------------------- /app/views/examples/atoms/_slab_layout.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    Slab Layout

    5 |
    6 |
    7 |

    This is an example slab, it's used to section out content, especially on marketing pages. Inside of slabs, use the grid component to lay things out. Almost everything on this page is laid out using slabs and grids.

    8 |
    9 |
    10 |
    11 | 12 |
    13 |
    14 |
    15 |

    Slab Layout

    16 |
    17 |
    18 |

    This is a magenta slab

    19 |
    20 |
    21 |
    22 | -------------------------------------------------------------------------------- /app/views/examples/atoms/_typography.html.erb: -------------------------------------------------------------------------------- 1 |

    Heading Level 1

    2 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.

    3 |

    Heading Level 2

    4 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, provident minima saepe recusandae consectetur. Cupiditate ex ut quasi, doloribus, velit quo, fugiat alias odit, saepe praesentium ipsam necessitatibus deleniti cum.

    5 |

    Heading Level 3

    6 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia harum fugit saepe, laudantium sit iure nihil alias voluptatibus neque sed perferendis ad quod maiores, fugiat tenetur. Adipisci modi cum at.

    7 |

    Heading Level 4

    8 |

    This is what link text looks like. This is what link text looks like. This is what link text looks like.

    9 |

    This is what subtle link text looks like

    10 |

    This is what small text looks like. Used for legalize, small links, etc.

    11 |

    This is what help text looks like. It's used to provide supporting information.

    12 |

    This is what error text looks like.

    13 | 18 | 23 | 28 |
      29 |
    1. Numbered list item 1
      2. 30 |
    2. Numbered list item 2
      3. 31 |
    3. Numbered list item 3
      4. 32 |
    33 | 34 | 39 | 40 | 45 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_checkbox_set.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_checkbox_set( 3 | :example_method_name, 4 | [ 5 | { method: :example_method_name, label: "Example choice 1" }, 6 | { method: :example_method_name_2, label: "Example choice 2" } 7 | ], 8 | label_text: "Checkbox set" 9 | ) %> 10 | 11 | <%= f.cfa_checkbox_set( 12 | :example_method_with_validation, 13 | [ 14 | { method: :example_method_name_validation, label: "Example choice 1" }, 15 | { method: :example_method_name_validation_2, label: "Example choice 2" } 16 | ], 17 | label_text: "Checkbox set with error" 18 | ) %> 19 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_checkbox_set_with_none.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_checkbox_set_with_none( 3 | :example_method_name_1, 4 | [ 5 | { method: :example_method_name_a, label: "Example choice 1" }, 6 | { method: :example_method_name_b, label: "Example choice 2" } 7 | ]) %> 8 | <% end %> 9 | 10 | <%= fields_for(:form_1, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 11 | <%= f.cfa_checkbox_set_with_none( 12 | :example_method_name_2, 13 | [ 14 | { method: :example_method_name_c, label: "Example choice 1" }, 15 | { method: :example_method_name_d, label: "Example choice 2" } 16 | ], 17 | none_text: "Neither") %> 18 | <% end %> 19 | 20 | <%= fields_for(:form_2, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 21 | <%= f.cfa_checkbox_set_with_none( 22 | :example_method_with_validation, 23 | [ 24 | { method: :example_method_name_e, label: "Example choice 1" }, 25 | { method: :example_method_name_f, label: "Example choice 2" } 26 | ]) %> 27 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_date_select.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_date_select( 3 | :example_method_name, 4 | 'Example date select', 5 | options: { 6 | start_year: Time.now.year, 7 | end_year: Time.now.year - 3, 8 | } 9 | ) %> 10 | 11 | <%= f.cfa_date_select( 12 | :example_method_with_validation, 13 | 'Example date select with error', 14 | options: { 15 | start_year: Time.now.year, 16 | end_year: Time.now.year - 3, 17 | } 18 | ) %> 19 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_input_field.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_input_field(:example_method_name, 'Example input') %> 3 | <%= f.cfa_input_field(:example_method_name_prefix_postfix, 'Example input (with prefix and postfix)', prefix: '$', postfix: '/hr', classes: ['form-width--phone']) %> 4 | 5 | <%= f.cfa_input_field(:example_method_with_validation, 'Example input with error') %> 6 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_radio_set.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_radio_set( 3 | :example_method_name, 4 | label_text: "Example radio set (regular)", 5 | help_text: "Choose 1", 6 | collection: [ 7 | { value: :option1, label: "Option 1" }, 8 | { value: :option2, label: "Option 2" }, 9 | ] 10 | ) 11 | %> 12 | 13 | <%= f.cfa_radio_set( 14 | :example_method_with_validation, 15 | label_text: "Example radio set with error", 16 | collection: [ 17 | { value: :option1, label: "Option 1" }, 18 | { value: :option2, label: "Option 2" }, 19 | ] 20 | ) 21 | %> 22 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_radio_set_with_follow_up.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_radio_set_with_follow_up( 3 | :example_method_name, 4 | label_text: "Example radio set with follow up", 5 | collection: [ 6 | { value: :yes, label: "Yes" }, 7 | { value: :no, label: "No" }, 8 | ], 9 | first_follow_up: ->{ f.cfa_input_field :example_method_name, "Example input 1" }, 10 | second_follow_up: ->{ f.cfa_input_field :example_method_name_two, "Example input 2" } 11 | ) 12 | %> 13 | <%= f.cfa_radio_set_with_follow_up( 14 | :example_method_with_validation, 15 | label_text: "Example radio set with follow up - with error", 16 | collection: [ 17 | { value: :yes, label: "Yes" }, 18 | { value: :no, label: "No" }, 19 | ], 20 | first_follow_up: ->{ f.cfa_input_field :example_method_name_with_errors, "Example input 1" }, 21 | second_follow_up: ->{ f.cfa_input_field :example_method_name_with_errors_two, "Example input 2" } 22 | ) 23 | %> 24 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_range_field.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_range_field(:example_method_name_a, :example_method_name_b, 'Example range') %> 3 | <%= f.cfa_range_field(:example_method_name_c, :example_method_name_d, 'Example range (with help text)', help_text: 'Estimate if you are not sure.') %> 4 | 5 | <%= f.cfa_range_field(:example_method_with_validation, :example_method_name_f, 'Example range with error') %> 6 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_select.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_select( 3 | :example_method_name, 4 | "Example select - without label", 5 | [ 6 | ["Blue", :blue], 7 | ["Green", :green], 8 | ], 9 | hide_label: true, 10 | help_text: "Choose your favorite", 11 | ) %> 12 | <%= f.cfa_select( 13 | :example_method_name_with_label, 14 | "Example select - with label", 15 | [ 16 | ["Blue", :blue], 17 | ["Green", :green], 18 | ], 19 | help_text: "Choose your favorite", 20 | ) %> 21 | <%= f.cfa_select( 22 | :example_method_with_validation, 23 | "Example select - with error", 24 | [ 25 | ["Blue", :blue], 26 | ["Green", :green], 27 | ], 28 | help_text: "Choose your favorite", 29 | ) %> 30 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_single_tap_button.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_single_tap_button( 3 | :example_method_name, 4 | "Yes", 5 | true 6 | ) %> 7 | <%= f.cfa_single_tap_button( 8 | :example_method_name, 9 | "No", 10 | false 11 | ) %> 12 | <%= f.cfa_single_tap_button( 13 | :example_method_name, 14 | "Maybe", 15 | :shrug 16 | ) %> 17 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v1/_cfa_textarea.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %> 2 | <%= f.cfa_textarea :example_method_name, 'Example textarea', options: {rows: '2'} %> 3 | 4 | <%= f.cfa_textarea :example_method_with_validation, 'Example textarea with error', options: {rows: '2'} %> 5 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_button.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_button('Continue') %> 3 | <%= f.cfa_button('Continue', wrapper_options: { class: 'my-wrapper' }) %> 4 | <%= f.cfa_button('Continue', class: 'button button--secondary') %> 5 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_check_box.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_fieldset(:example_method_check_box_summary, "Checkboxes") do %> 3 | <%= f.cfa_check_box(:example_method_check_box_a, 'Option 1') %> 4 | <%= f.cfa_check_box(:example_method_check_box_c, 'Option 2 - with wrapper options', wrapper_options: { class: 'wrapper-class' }) %> 5 | <%= f.cfa_check_box(:example_method_check_box_d, 'Option 3 - with label options', label_options: { class: 'label-class' }) %> 6 | <%= f.cfa_check_box(:example_method_check_box_e, 'Option 4 - with checked value', :yes, required: true) %> 7 | <%= f.cfa_check_box(:example_method_check_box_f, 'Option 5 - with checked/unchecked value', :yes, :no, required: true) %> 8 | <% end %> 9 | 10 | 11 | <%= f.cfa_fieldset(:example_method_with_validation_check_box_a, "I accept these terms", label_options: { class: 'is-hidden' }, required: true) do %> 12 | <%= f.cfa_check_box(:example_method_with_validation_check_box_a, 'I accept these terms - with validation errors') %> 13 | <% end %> 14 | <% end %> 15 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_collection_check_boxes.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_fieldset(:example_method_collection_check_boxes_a, "Fieldset with collection check boxes") do %> 3 | <%= f.cfa_collection_check_boxes(:example_method_collection_check_boxes_a, 4 | [ 5 | Cfa::Styleguide::FormExample.new(id: 1, name: 'One'), 6 | Cfa::Styleguide::FormExample.new(id: 2, name: 'Two') 7 | ], 8 | :id, 9 | :name) %> 10 | <% end %> 11 | 12 | <%= f.cfa_fieldset(:example_method_with_validation_collection_check_boxes, "Fieldset with collection check boxes") do %> 13 | <%= f.cfa_collection_check_boxes(:example_method_with_validation_collection_check_boxes, 14 | [ 15 | Cfa::Styleguide::FormExample.new(id: 1, name: 'One'), 16 | Cfa::Styleguide::FormExample.new(id: 2, name: 'Two') 17 | ], 18 | :id, 19 | :name) %> 20 | <% end %> 21 | <% end %> 22 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_collection_radio_buttons.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_fieldset(:example_method_collection_radio_buttons_a, "Fieldset with collection radio boxes") do %> 3 | <%= f.cfa_collection_radio_buttons(:example_method_collection_radio_buttons_a, 4 | [ 5 | Cfa::Styleguide::FormExample.new(id: 1, name: 'One'), 6 | Cfa::Styleguide::FormExample.new(id: 2, name: 'Two') 7 | ], 8 | :id, 9 | :name) %> 10 | <% end %> 11 | 12 | <%= f.cfa_fieldset(:example_method_with_validation_collection_radio_buttons, "Fieldset with collection radio boxes - with validation", required: true) do %> 13 | <%= f.cfa_collection_radio_buttons(:example_method_with_validation_collection_radio_buttons, 14 | [ 15 | Cfa::Styleguide::FormExample.new(id: 1, name: 'One'), 16 | Cfa::Styleguide::FormExample.new(id: 2, name: 'Two') 17 | ], 18 | :id, 19 | :name) %> 20 | <% end %> 21 | <% end %> 22 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_fieldset.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_fieldset(:example_method_fieldset_a, "Fieldset - empty") %> 3 | 4 | <%= f.cfa_fieldset(:example_method_fieldset_b, 5 | "Fieldset with wrapper options", 6 | wrapper_options: { 7 | class: 'wrapper-class', 8 | data: {spec: 'wrapper'} 9 | }) do %> 10 | <%= f.cfa_radio_button(:example_method_fieldset_b, 'First option', :first_option) %> 11 | <%= f.cfa_radio_button(:example_method_fieldset_b, 'Second option', :second_option) %> 12 | <% end %> 13 | 14 | <%= f.cfa_fieldset(:example_method_fieldset_c, 15 | "Fieldset with fieldset html options", 16 | class: 'my-fieldset-class', 17 | data: {spec: 'honeycrisp'} 18 | ) do %> 19 | <%= f.cfa_radio_button(:example_method_fieldset_c, 'First option', :first_option) %> 20 | <%= f.cfa_radio_button(:example_method_fieldset_c, 'Second option', :second_option) %> 21 | <% end %> 22 | 23 | <%= f.cfa_fieldset(:example_method_fieldset_d, 24 | "Fieldset with label_options", 25 | label_options: { data: { spec: 'label-1' } }) do %> 26 | <%= f.cfa_radio_button(:example_method_fieldset_d, 'First option', :first_option) %> 27 | <%= f.cfa_radio_button(:example_method_fieldset_d, 'Second option', :second_option) %> 28 | <% end %> 29 | 30 | <%= f.cfa_fieldset(:example_method_with_validation_fieldset, 31 | "Fieldset - required", 32 | required: true) do %> 33 | <%= f.cfa_radio_button(:example_method_with_validation_fieldset, 'First option', :first_option) %> 34 | <%= f.cfa_radio_button(:example_method_with_validation_fieldset, 'Second option', :second_option) %> 35 | <% end %> 36 | <% end %> 37 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_radio_button.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_fieldset(:example_method_radio_a, "Radios with wrapper options") do %> 3 | <%= f.cfa_radio_button(:example_method_radio_a, 'First option', :first_option, wrapper_options: { class: 'wrapper-class' }) %> 4 | <%= f.cfa_radio_button(:example_method_radio_a, 'Second option', :second_option) %> 5 | <% end %> 6 | 7 | <%= f.cfa_fieldset(:example_method_radio_b, "Radios with label options") do %> 8 | <%= f.cfa_radio_button(:example_method_radio_b, 'First option', :first_option, label_options: { class: 'wrapper-class' }) %> 9 | <%= f.cfa_radio_button(:example_method_radio_b, 'Second option', :second_option) %> 10 | <% end %> 11 | 12 | <%= f.cfa_fieldset(:example_method_radio_with_validation_a, "Radios with input options") do %> 13 | <%= f.cfa_radio_button(:example_method_radio_with_validation_a, 'First option', :first_option, required: true, class: 'my-radio-class') %> 14 | <%= f.cfa_radio_button(:example_method_radio_with_validation_a, 'Second option', :second_option, required: true, class: 'my-radio-class') %> 15 | <% end %> 16 | <% end %> 17 | -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_select.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_select(:example_method_select_a, 3 | 'Example select', 4 | [ 5 | ['One', 1], 6 | ['Two', 2], 7 | ], # also: Model.all or ['one', 'two'] 8 | ) %> 9 | 10 | <%= f.cfa_select(:example_method_select_b, 11 | 'Example select - with html-impacting options', 12 | ['option a', 'option b'], 13 | autocomplete: "off", # html_options: autocomplete 14 | class: 'my-select-class', # html_options: class 15 | select_options: { include_blank: true }, 16 | label_options: { data: { spec: 'label-1' } }, 17 | wrapper_options: { class: 'my-wrapper-class' } 18 | ) %> 19 | 20 | <%= f.cfa_select(:example_method_with_validation_select, 21 | 'Example select - required and with blank option', 22 | ['option a', 'option b'], 23 | required: true, 24 | select_options: { include_blank: '(blank)' }) %> 25 | 26 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/form_builder/v2/_cfa_text_field.html.erb: -------------------------------------------------------------------------------- 1 | <%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> 2 | <%= f.cfa_text_field(:example_method_text_a, 'Example input') %> 3 | 4 | <%= f.cfa_text_field(:example_method_text_b, 5 | 'Example input with help text', 6 | help_text: "You could answer this any way you like.") %> 7 | 8 | <%= f.cfa_text_field(:example_method_text_c, 9 | 'Example input with label options', 10 | label_options: { 11 | class: 'label-class', 12 | data: {spec: 'label'} 13 | }) %> 14 | 15 | <%= f.cfa_text_field(:example_method_text_d, 16 | 'Example input with wrapper options', 17 | wrapper_options: { 18 | class: 'wrapper-class', 19 | data: {spec: 'wrapper'} 20 | }) %> 21 | 22 | <%= f.cfa_text_field(:example_method_text_e, 23 | 'Example input with input options', 24 | placeholder: 'Enter text here.', 25 | class: 'form-width--long') %> 26 | 27 | <%= f.cfa_text_field(:example_method_with_validation_text, 28 | 'Example input - required with error', 29 | required: true) %> 30 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/honeycrisp_compact/_buttons.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    Compact
    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 |
    -------------------------------------------------------------------------------- /app/views/examples/honeycrisp_compact/_data_table.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 | 5 | 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 |
    6 | 7 | Applicant 8 | 9 | Birth dateConfirmation #Notes
    Applicant 104/02/1988AKJHSD83KLink
    Applicant 204/02/1988AKJHSD83KLink
    Applicant 304/02/1988AKJHSD83KLink
    Applicant 404/02/1988AKJHSD83KLink
    Applicant 504/02/1988AKJHSD83KLink
    Applicant 604/02/1988AKJHSD83KLink
    54 |
    55 | -------------------------------------------------------------------------------- /app/views/examples/honeycrisp_compact/_form_elements.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 | 5 | 6 |
    7 | 8 |
    9 | 10 | 11 |
    12 | 13 |
    14 | 15 | 16 |
    17 | 18 |
    19 | 20 | 21 |
    22 | 23 |
    24 | 25 |

    This is what help text in a form group looks like.

    26 |
    27 | 33 |
    34 |
    35 |
    36 | -------------------------------------------------------------------------------- /app/views/examples/honeycrisp_compact/_typography.erb: -------------------------------------------------------------------------------- 1 |
    2 |

    Heading Level 1

    3 |

    The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.

    4 | 5 |

    Heading Level 2

    6 |

    The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.

    7 | 8 |

    Heading Level 3

    9 |

    The apple wasn't bred to grow, store or ship well. It was bred for taste: crisp, with balanced sweetness and acidity.

    10 | 11 |

    This is what body text looks like.

    12 | 13 |

    This is what error text looks like.

    14 | 15 |

    This is what help text looks like.

    16 | 17 |

    This is what link text looks like.

    18 | 19 |

    This is what subtle link text looks like

    20 |
    21 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_accordion.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |

    An accordion element allows the user to expand and hide content on a page. Multiple accordions are usually used in tandem. It is useful to break up long pages for easy scannability.

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

    These documents are usually required to get CalFresh:

    11 | 16 | 17 |

    Immigrants may also be asked to provide proof of status to get benefits:

    18 | 24 | 25 | 26 |

    These documents are optional but can increase your benefit amount:

    27 | 33 | 34 |

    What if I can’t get the proof?

    35 |

    Tell your case worker during your CalFresh applicant interview. CalFresh will generally accept a sworn statement as a last resort if you cannot get the documents needed.

    36 |
    37 |
    -------------------------------------------------------------------------------- /app/views/examples/molecules/_block_input_group.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 7 | 11 | 15 | 16 |
    17 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_data_table.html.erb: -------------------------------------------------------------------------------- 1 | 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 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
    ApplicantBirth dateConfirmation #
    Applicant 104/02/1988AKJHSD83K
    Applicant 204/02/1988AKJHSD83K
    Applicant 304/02/1988AKJHSD83K
    Applicant 404/02/1988AKJHSD83K
    Applicant 504/02/1988AKJHSD83K
    Applicant 604/02/1988AKJHSD83K
    42 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_flash_messages.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Your changes have been saved.

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

    You must be signed in to continue.

    10 | 11 |
    12 |
    13 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_form_group.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |

    Include family members and housemates you share food with.

    5 | 6 | 10 | 14 | 18 | 22 | 26 | 30 | 31 |
    32 |
    33 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_form_group_error_state.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 |

    Include family members and housemates you share food with.

    5 | 6 | 10 | 14 | 18 | 22 | 26 | 30 | 31 |

    Make sure you answer this question.

    32 |
    33 |
    34 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_incrementer.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | - 4 | + 5 |
    6 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_inline_input_group.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 7 | 11 | 15 | 19 | 23 | 27 | 28 |
    29 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_media_box.html.erb: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | calfresh logo 5 |
    6 |
    7 |

    A media box is used to juxtapose a piece of media (like an image) with a block of content. It is used when the media and content is treated holistically as one block and does not align to the grid.

    8 |
    9 |
    10 | 11 | 12 |
    13 |
    14 | calfresh logo 15 |
    16 |
    17 |

    There are modifier classes on the media element to size the media and to present it either on the left or right.

    18 |
    19 |
    20 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_progress_indicator.html.erb: -------------------------------------------------------------------------------- 1 | <%= render 'components/molecules/progress_indicator', percent: 50 %> -------------------------------------------------------------------------------- /app/views/examples/molecules/_progress_step_bar.html.erb: -------------------------------------------------------------------------------- 1 | 6 | <%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 2, step_count: 5 } %> 7 | 8 | 9 | 14 | <%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5, step_description: 'Step 3 of 5: Basic Info' } %> 15 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_reveal.html.erb: -------------------------------------------------------------------------------- 1 | <%= render('components/molecules/reveal', title: 'Learn more about student eligibility') do %> 2 |

    In order to qualify as a college student, you have to meet one of the following exemptions:

    3 | 11 | <% end %> 12 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_searchbar.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    5 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_show_more.html.erb: -------------------------------------------------------------------------------- 1 | <%= render('components/molecules/show_more') do %> 2 |

    Summary

    3 | 9 |

    Details

    10 | 15 | <% end %> -------------------------------------------------------------------------------- /app/views/examples/molecules/_summary_table.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    Household size

    5 |

    1

    6 |
    7 |
    8 |

    Last month's income

    9 |

    $1000

    10 |
    11 |
    12 |

    County

    13 |

    Marin

    14 |
    15 |
    16 |
    17 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_tab_bar.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | Clients 3 | Analytics 4 | Team 5 |
    6 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_text_input_group.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    $
    3 | 4 |
    .00
    5 |
    6 | 7 |
    8 | 9 |
    lbs
    10 |
    11 | 12 |
    13 |
    http://
    14 | 15 |
    16 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_toolbar.html.erb: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 4 |
    5 | 6 | 7 | Logo for Product 8 | 9 |
    10 |
    11 | Link One 12 | Link Two 13 | Link Three 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | 21 | 22 | Logo for Product 23 | 24 |
    25 |
    26 | Link 27 | Link 28 |
    29 |
    30 | -------------------------------------------------------------------------------- /app/views/examples/molecules/_two_up_input_group.html.erb: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 7 | 11 | 15 | 19 | 20 |
    21 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_admin_application_card.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    430 - Frida Fresh

    5 | 6 |
    7 |
    8 |
    frida@example.com
    9 |
    (555) 555-1212
    10 |
    San Francisco County
    11 |
    12 | 13 |
    14 |
    Source: google
    15 |
    Confirm #: 30001212
    16 |
    17 |
    18 |
    19 | 20 |
    21 |
    06/26/2017 12:22PM
    22 |
    23 |
    24 | 25 |
    26 | 27 |
    Doc upload failed (edit case note)
    28 |
    29 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_form_card_1.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Let’s start with some basic information.

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

    Make sure you answer this question.

    10 | 11 |
    12 |
    13 | 14 | 15 |
    16 |
    17 |
    18 | 19 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_form_card_2.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    Success
    4 |

    Great! It looks like your household will likely qualify for CalFresh.

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

    Household size

    11 |

    1

    12 |
    13 |
    14 |

    Last month's income

    15 |

    $1000

    16 |
    17 |
    18 |

    County

    19 |

    Marin

    20 |
    21 |
    22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_form_card_3.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    We suggest that you submit a copy of your ID to your county now.

    4 |
    5 |
    6 |

    You can do this later but submitting your ID now may help to speed up the application process. If you've been asked to submit any other documents, you can also do so at this point.

    7 |
    8 |
    9 | 10 | 11 |
    12 |
    13 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_form_card_4.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |

    Rachel Wood

    4 |

    Account information

    5 |
    6 |
    7 |
    8 |

    Your organization

    9 |

    SF Marin Food Bank

    10 |
    11 | 12 |
    13 |

    Your email

    14 |

    rachel@sfmarinfoodbank.org

    15 |
    16 | 17 |
    18 |

    Your password

    19 |

    **********

    20 |
    21 | 22 | Change password 23 |
    24 |
    25 | 26 |
    27 |
    28 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_pagination.html.erb: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_statistics_card.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    Students

    5 |

    8 🎓

    6 |
    7 |
    8 |
    9 |
    10 |

    Children

    11 |

    12 👶

    12 |
    13 |
    14 |
    15 |
    16 |

    Seniors

    17 |

    5 👵

    18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_steps.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    6 |

    Step 1

    7 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    8 |
    9 |
    10 |
    11 |

    Step 2

    12 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    13 |
    14 |
    15 |
    16 |

    Step 3

    17 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    18 |
    19 |
    20 |
    21 |
    22 | -------------------------------------------------------------------------------- /app/views/examples/organisms/_vertical_steps.html.erb: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |
    6 |

    Step 1 is the first of the steps

    7 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    8 |
    9 |
    10 |
    11 |

    Step 2 comes after Step 1

    12 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    13 |
    14 |
    15 |
    16 |

    The last step is Step 3

    17 |

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    18 |
    19 |
    20 |
    21 |
    22 | -------------------------------------------------------------------------------- /bin/console: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | 3 | require "bundler/setup" 4 | require "cfa/styleguide" 5 | 6 | # You can add fixtures and/or initialization code here to make experimenting 7 | # with your gem easier. You can also use a different console, if you like. 8 | 9 | # (If you use this, don't forget to add pry to your Gemfile!) 10 | # require "pry" 11 | # Pry.start 12 | 13 | require "irb" 14 | IRB.start(__FILE__) 15 | -------------------------------------------------------------------------------- /bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | # This command will automatically be run when you run "rails" with Rails gems 3 | # installed from the root of your application. 4 | 5 | ENGINE_ROOT = File.expand_path('..', __dir__) 6 | ENGINE_PATH = File.expand_path('../lib/cfa', __dir__) 7 | APP_PATH = File.expand_path('../spec/test_app/config/application', __dir__) 8 | 9 | # Set up gems listed in the Gemfile. 10 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__) 11 | require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE']) 12 | 13 | require 'rails/engine/commands' 14 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -euo pipefail 3 | IFS=$'\n\t' 4 | set -vx 5 | 6 | bundle install 7 | 8 | # Do any other automated setup that you need to do here 9 | -------------------------------------------------------------------------------- /config/locales/en.yml: -------------------------------------------------------------------------------- 1 | en: 2 | honeycrisp: 3 | day: "Day" 4 | month: "Month" 5 | optional: "Optional" 6 | range_lower: "Lower amount" 7 | range_upper: "Upper amount" 8 | to: "to" 9 | year: "Year" 10 | -------------------------------------------------------------------------------- /config/locales/es.yml: -------------------------------------------------------------------------------- 1 | es: 2 | honeycrisp: 3 | day: "Día" 4 | month: "Mes" 5 | optional: "Opcional" 6 | range_lower: "Menor cantidad" 7 | range_upper: "Mayor cantidad" 8 | to: "a" 9 | year: "Año" 10 | -------------------------------------------------------------------------------- /config/routes.rb: -------------------------------------------------------------------------------- 1 | Cfa::Styleguide::Engine.routes.draw do 2 | get "/styleguide" => "pages#index", as: :styleguide_main 3 | get "/styleguide/form-builder/v1" => "pages#form_builder_v1", as: :styleguide_form_builder_v1 4 | get "/styleguide/form-builder/v2" => "pages#form_builder_v2", as: :styleguide_form_builder_v2 5 | get "/styleguide/examples/*example_path" => "examples#show", as: :styleguide_example 6 | get "/styleguide/emojis" => "pages#emojis", as: :styleguide_emojis 7 | get "/styleguide/honeycrisp-compact" => "pages#honeycrisp_compact", as: :styleguide_honeycrisp_compact 8 | end 9 | -------------------------------------------------------------------------------- /lib/cfa/styleguide.rb: -------------------------------------------------------------------------------- 1 | Gem.loaded_specs["cfa-styleguide"].runtime_dependencies.each do |d| 2 | require d.name 3 | end 4 | require "cfa/styleguide/version" 5 | 6 | module Cfa 7 | module Styleguide 8 | class << self 9 | def load! 10 | register_rails_engine 11 | configure_sass 12 | end 13 | 14 | # Paths 15 | def gem_path 16 | @gem_path ||= File.expand_path "..", File.dirname(__FILE__) 17 | end 18 | 19 | def stylesheets_path 20 | File.join assets_path, "stylesheets" 21 | end 22 | 23 | def fonts_path 24 | File.join assets_path, "fonts" 25 | end 26 | 27 | def javascripts_path 28 | File.join assets_path, "javascripts" 29 | end 30 | 31 | def assets_path 32 | @assets_path ||= File.join gem_path, "assets" 33 | end 34 | 35 | private 36 | 37 | def configure_sass 38 | require "sass" 39 | 40 | ::Sass.load_paths << stylesheets_path 41 | 42 | # bootstrap requires minimum precision of 8, see https://github.com/twbs/bootstrap-sass/issues/409 43 | ::Sass::Script::Number.precision = [8, ::Sass::Script::Number.precision].max 44 | end 45 | 46 | def register_rails_engine 47 | require "cfa/styleguide/engine" 48 | end 49 | end 50 | end 51 | end 52 | 53 | Cfa::Styleguide.load! 54 | -------------------------------------------------------------------------------- /lib/cfa/styleguide/engine.rb: -------------------------------------------------------------------------------- 1 | module Cfa 2 | module Styleguide 3 | class Engine < ::Rails::Engine 4 | isolate_namespace Cfa::Styleguide 5 | 6 | initializer "cfa-styleguide.assets.precompile" do |app| 7 | app.config.assets.precompile += %w( 8 | cfa_styleguide_main.css 9 | cfa_styleguide_main.js 10 | prism.css 11 | prism.js 12 | ) 13 | end 14 | 15 | config.generators do |g| 16 | g.test_framework :rspec 17 | end 18 | end 19 | end 20 | end 21 | -------------------------------------------------------------------------------- /lib/cfa/styleguide/version.rb: -------------------------------------------------------------------------------- 1 | module Cfa 2 | module Styleguide 3 | VERSION = "0.16.0".freeze 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /lib/sprockets_extension/uglifier_source_maps_compressor.rb: -------------------------------------------------------------------------------- 1 | require "sprockets/digest_utils" 2 | require "sprockets/uglifier_compressor" 3 | require "json" 4 | require "fileutils" 5 | 6 | class UglifierSourceMapsCompressor < Sprockets::UglifierCompressor 7 | def initialize 8 | super 9 | @uglifier = Sprockets::Autoload::Uglifier.new 10 | end 11 | 12 | def call(input) 13 | data = input.fetch(:data) 14 | name = input.fetch(:name) 15 | 16 | compressed_data, sourcemap_json = @uglifier.compile_with_map(data) 17 | 18 | sourcemap = prepare_sourcemap(sourcemap_json, name, data) 19 | sourcemap_json = sourcemap.to_json 20 | 21 | sourcemap_filename = "honeycrisp.min.js.map" 22 | sourcemap_path = File.join(Dir.pwd, "dist", "js", sourcemap_filename) 23 | 24 | write_sourcemap(sourcemap_path, sourcemap_json) 25 | 26 | compressed_data.concat "\n//# sourceMappingURL=#{sourcemap_filename}\n" 27 | end 28 | 29 | private 30 | 31 | def prepare_sourcemap(sourcemap_json, name, data) 32 | sourcemap = JSON.parse(sourcemap_json) 33 | sourcemap["sources"] = ["#{name}.js"] 34 | sourcemap["sourceRoot"] = Dir.pwd 35 | sourcemap["sourcesContent"] = [data] 36 | sourcemap 37 | end 38 | 39 | def write_sourcemap(path, content) 40 | FileUtils.mkdir_p File.dirname(path) 41 | File.write(path, content) 42 | rescue IOError => e 43 | raise "Failed to write sourcemap: #{e.message}" 44 | end 45 | 46 | def digest(io) 47 | Sprockets::DigestUtils.pack_hexdigest Sprockets::DigestUtils.digest(io) 48 | end 49 | end 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "@percy/cli": "^1.26.3" 4 | }, 5 | "dependencies": { 6 | "jquery": "^3.5.1" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /spec/spec_helper.rb: -------------------------------------------------------------------------------- 1 | ENV["RAILS_ENV"] ||= "test" 2 | 3 | require File.expand_path("test_app/config/environment.rb", __dir__) 4 | require "rspec/rails" 5 | require "axe-rspec" 6 | 7 | Rails.backtrace_cleaner.remove_silencers! 8 | 9 | # Load support files 10 | Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each { |f| require f } 11 | 12 | RSpec.configure do |config| 13 | unless ENV["CI"] 14 | config.run_all_when_everything_filtered = true 15 | config.filter_run focus: true 16 | end 17 | 18 | config.mock_with :rspec 19 | config.use_transactional_fixtures = true 20 | config.infer_base_class_for_anonymous_controllers = false 21 | config.infer_spec_type_from_file_location! 22 | config.example_status_persistence_file_path = "tmp/rspec_examples.txt" 23 | config.order = "random" 24 | end 25 | -------------------------------------------------------------------------------- /spec/support/examples_helper.rb: -------------------------------------------------------------------------------- 1 | module ExamplesHelper 2 | def each_example 3 | example_files = Dir.glob File.expand_path("../../app/views/examples/**/*.html.erb", __dir__) 4 | 5 | example_files.each do |example_file| 6 | example_filepath = example_file.match(/app\/views\/examples\/(.*)\.html.erb/)[1] 7 | example_path = "#{File.dirname(example_filepath)}/#{File.basename(example_filepath).sub(/^_/, '')}" 8 | example_viewpath = "/cfa/styleguide/examples/#{example_path}" 9 | 10 | yield(example_path, example_viewpath, example_file) 11 | end 12 | end 13 | end 14 | 15 | RSpec.configure do |config| 16 | config.extend ExamplesHelper, type: :system 17 | end 18 | -------------------------------------------------------------------------------- /spec/support/locale.rb: -------------------------------------------------------------------------------- 1 | RSpec.configure do |config| 2 | config.around do |example| 3 | default_locale = I18n.locale 4 | example.run 5 | I18n.locale = default_locale 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /spec/support/match_html.rb: -------------------------------------------------------------------------------- 1 | RSpec::Matchers.define :match_html do |expected| 2 | def clean_html(string) 3 | string = string.squish.gsub(/>(\s)+<") 4 | Nokogiri::HTML.fragment(string).to_xhtml( 5 | indent: 2, save_options: Nokogiri::XML::Node::SaveOptions::AS_HTML, 6 | ) 7 | end 8 | 9 | match do |actual| 10 | @actual = clean_html(actual) 11 | @expected = clean_html(expected) 12 | values_match? @expected, @actual 13 | end 14 | 15 | failure_message do |_actual| 16 | diff = RSpec::Support::Differ.new.diff_as_string(@actual, @expected) 17 | "EXPECTED:\n#{@actual}\n\nTO EQUAL:\n#{@expected}\n\nDIFF:#{diff}" 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /spec/support/percy_snapshot.rb: -------------------------------------------------------------------------------- 1 | require "percy/capybara" 2 | 3 | module PercySnapshot 4 | def percy_snapshot(name) 5 | if ENV["PERCY_TOKEN"].present? 6 | page.percy_snapshot(name) 7 | end 8 | end 9 | end 10 | 11 | RSpec.configure do |config| 12 | config.include PercySnapshot, type: :system 13 | end 14 | -------------------------------------------------------------------------------- /spec/support/pre_documentation_formatter.rb: -------------------------------------------------------------------------------- 1 | RSpec::Support.require_rspec_core "formatters/base_text_formatter" 2 | RSpec::Support.require_rspec_core "formatters/console_codes" 3 | 4 | class PreDocumentationFormatter < RSpec::Core::Formatters::BaseTextFormatter 5 | RSpec::Core::Formatters.register self, :example_started, :example_group_started, :example_group_finished, 6 | :example_passed, :example_pending, :example_failed 7 | 8 | def initialize(output) 9 | super 10 | @group_level = 0 11 | end 12 | 13 | def example_group_started(notification) 14 | output.puts if @group_level == 0 15 | output.puts "#{current_indentation}#{notification.group.description.strip}" 16 | 17 | @group_level += 1 18 | end 19 | 20 | def example_group_finished(_notification) 21 | @group_level -= 1 if @group_level > 0 22 | end 23 | 24 | def example_passed(passed) 25 | output.puts passed_output(passed.example) 26 | end 27 | 28 | def example_pending(pending) 29 | output.puts pending_output(pending.example, 30 | pending.example.execution_result.pending_message) 31 | end 32 | 33 | def example_failed(failure) 34 | output.puts failure_output(failure.example) 35 | end 36 | 37 | def example_started(notification) 38 | output.puts "#{current_indentation}RUNNING: #{notification.example.description}" 39 | end 40 | 41 | private 42 | 43 | def passed_output(example) 44 | RSpec::Core::Formatters::ConsoleCodes.wrap("#{current_indentation}#{example.description.strip}", :success) 45 | end 46 | 47 | def pending_output(example, message) 48 | RSpec::Core::Formatters::ConsoleCodes.wrap("#{current_indentation}#{example.description.strip} " \ 49 | "(PENDING: #{message})", 50 | :pending) 51 | end 52 | 53 | def failure_output(example) 54 | RSpec::Core::Formatters::ConsoleCodes.wrap("#{current_indentation}#{example.description.strip} " \ 55 | "(FAILED - #{next_failure_index})", 56 | :failure) 57 | end 58 | 59 | def next_failure_index 60 | @next_failure_index ||= 0 61 | @next_failure_index += 1 62 | end 63 | 64 | def current_indentation 65 | " " * @group_level 66 | end 67 | end 68 | -------------------------------------------------------------------------------- /spec/support/system_tests.rb: -------------------------------------------------------------------------------- 1 | require "selenium-webdriver" 2 | 3 | Capybara.server = :webrick 4 | 5 | RSpec.configure do |config| 6 | config.before(:each, type: :system) do |example| 7 | if ENV["SHOW_BROWSER"] 8 | example.metadata[:js] = true 9 | driven_by :selenium, using: :chrome 10 | elsif example.metadata[:js] 11 | driven_by :selenium, using: :headless_chrome 12 | else 13 | driven_by :rack_test 14 | end 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /spec/system/accessibility_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | ## Checks that aren't applicable to non-whole-page examples 4 | GENERAL_ACCESSIBILITY_SKIPS = [ 5 | "bypass", 6 | "document-title", 7 | "html-has-lang", 8 | "landmark-one-main", 9 | "page-has-heading-one", 10 | "region", 11 | ].freeze 12 | 13 | ## Examples with accessibility issues that must be fixed in the fullness of time 14 | FAILING_ACCESSIBILITY_EXAMPLES = [ 15 | "molecules/incrementer", 16 | # New issues coming from axe-core-rspec upgrade 17 | "molecules/progress_step_bar", 18 | "molecules/show_more", 19 | "organisms/pagination", 20 | ].freeze 21 | 22 | RSpec.describe "Accessibility", js: true do 23 | each_example do |example, example_path| 24 | describe example do 25 | it "passes Axe matchers" do 26 | pending("temporarily ignoring accessibility checks: #{example}") if FAILING_ACCESSIBILITY_EXAMPLES.include?(example) 27 | 28 | visit example_path 29 | 30 | expect(page).to be_axe_clean.skipping(*GENERAL_ACCESSIBILITY_SKIPS).according_to :wcag2a 31 | end 32 | end 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /spec/system/examples_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "Examples" do 4 | it "can render out a specific example" do 5 | visit "/cfa/styleguide/examples/molecules/progress_step_bar" 6 | 7 | expect(page.status_code).to eq 200 8 | end 9 | 10 | each_example do |example, example_path| 11 | describe example do 12 | it "has a Percy snapshot", js: true do 13 | visit example_path 14 | percy_snapshot example 15 | end 16 | end 17 | end 18 | end 19 | -------------------------------------------------------------------------------- /spec/system/follow_up_question_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "Follow up questions" do 4 | before do 5 | visit "cfa/styleguide/examples/molecules/follow_up_question" 6 | end 7 | 8 | describe "checkbox set" do 9 | it "reveals the follow up question when the right checkbox is selected", js: true do 10 | expect(page).not_to have_content "Please specify" 11 | 12 | check "Other" 13 | 14 | expect(page).to have_content "Please specify" 15 | 16 | check "Blue" 17 | 18 | expect(page).to have_content "Please specify" 19 | 20 | uncheck "Other" 21 | 22 | expect(page).not_to have_content "Please specify" 23 | end 24 | end 25 | 26 | describe "radio set" do 27 | it "reveals the follow up question when the right radio button is selected", js: true do 28 | expect(page).not_to have_content "Do you know why?" 29 | 30 | choose "No" 31 | 32 | expect(page).to have_content "Do you know why?" 33 | 34 | choose "Yes" 35 | 36 | expect(page).not_to have_content "Do you know why?" 37 | end 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /spec/system/formatted_input_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "Autoformatted input fields" do 4 | before do 5 | visit "cfa/styleguide/examples/atoms/form_elements" 6 | end 7 | 8 | describe "SSN input fields" do 9 | it "can auto-format an SSN", js: true do 10 | fill_in "ssn", with: "111223333" 11 | 12 | expect(page).to have_field("ssn", with: "111-22-3333") 13 | end 14 | 15 | it "ignores non-numeric characters", js: true do 16 | fill_in "ssn", with: "1a2s3d4" 17 | 18 | expect(page).to have_field("ssn", with: "123-4") 19 | end 20 | 21 | it "can handle backspace", js: true do 22 | fill_in "ssn", with: "1112233" 23 | find("#ssn").send_keys :backspace, :backspace 24 | 25 | expect(page).to have_field("ssn", with: "111-22") 26 | 27 | find("#ssn").send_keys "4", "5", :left, :left, :left, :left, "6" 28 | 29 | expect(page).to have_field("ssn", with: "111-26-245") 30 | end 31 | end 32 | 33 | describe "Phone input fields" do 34 | it "can auto-format a phone number", js: true do 35 | fill_in "phone", with: "1112223333" 36 | 37 | expect(page).to have_field("phone", with: "(111) 222-3333") 38 | end 39 | 40 | it "ignores non-numeric characters", js: true do 41 | fill_in "phone", with: "1a2s3d4" 42 | 43 | expect(page).to have_field("phone", with: "(123) 4") 44 | end 45 | 46 | it "can handle backspace", js: true do 47 | fill_in "phone", with: "11122233" 48 | find("#phone").send_keys :backspace, :backspace 49 | 50 | expect(page).to have_field("phone", with: "(111) 222") 51 | 52 | find("#phone").send_keys "4", "5", :left, :left, :left, :left, "6" 53 | 54 | expect(page).to have_field("phone", with: "(111) 226-245") 55 | end 56 | end 57 | end 58 | -------------------------------------------------------------------------------- /spec/system/hello_world_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "Hello World" do 4 | it "can access standard cfa css" do 5 | visit "/assets/cfa_styleguide_main.css" 6 | 7 | expect(page.status_code).to eq 200 8 | end 9 | 10 | it "can access standard cfa js" do 11 | visit "/assets/cfa_styleguide_main.js" 12 | 13 | expect(page.status_code).to eq 200 14 | end 15 | end 16 | -------------------------------------------------------------------------------- /spec/system/pages_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | describe "Pages" do 4 | it "the test app root path redirects to /cfa/styleguide" do 5 | visit "/" 6 | 7 | expect(current_path).to eq "/cfa/styleguide" 8 | end 9 | 10 | it "can load styleguide" do 11 | visit "/cfa/styleguide" 12 | 13 | expect(page.status_code).to eq 200 14 | expect(page).to have_content("Honeycrisp Design System v#{Cfa::Styleguide::VERSION}") 15 | end 16 | 17 | it "can load the compact styleguide" do 18 | visit "/cfa/styleguide" 19 | within ".sidebar-nav" do 20 | click_on "Honeycrisp Compact" 21 | end 22 | 23 | expect(page.status_code).to eq 200 24 | expect(page).to have_content("Honeycrisp Compact is a variation of Honeycrisp.") 25 | end 26 | 27 | it "can load emoji index" do 28 | visit "/cfa/styleguide" 29 | click_on "Emojis" 30 | 31 | expect(page.status_code).to eq 200 32 | expect(page).to have_content("Emojis") 33 | end 34 | 35 | it "can use the CfaFormBuilder" do 36 | visit "/cfa/styleguide" 37 | click_link "Form Builder V1" 38 | 39 | expect(page).to have_content("Example input") 40 | expect(page).to have_content("Example textarea") 41 | expect(page).to have_content("Example range") 42 | expect(page).to have_content("Example date select") 43 | 44 | expect(page).to have_content("Example choice 1") 45 | expect(page).to have_content("Example choice 2") 46 | expect(page).to have_content("Example radio set (regular)") 47 | expect(page).to have_content("Example radio set with follow up") 48 | expect(page).to have_content("Example select") 49 | end 50 | 51 | it "can use the CfaFormV2Builder" do 52 | visit "/cfa/styleguide" 53 | click_link "Form Builder V2" 54 | 55 | expect(page).to have_content("CfAV2FormBuilder") 56 | expect(page).to have_content("Example input") 57 | expect(page).to have_content("Continue") 58 | expect(page).to have_content("Example select") 59 | expect(page).to have_content("Fieldset - empty") 60 | expect(page).to have_content("Radios") 61 | expect(page).to have_content("Fieldset with collection radio boxes") 62 | expect(page).to have_content("Checkboxes") 63 | expect(page).to have_content("Fieldset with collection check boxes") 64 | end 65 | end 66 | -------------------------------------------------------------------------------- /spec/system/reveal_spec.rb: -------------------------------------------------------------------------------- 1 | require "spec_helper" 2 | 3 | # TODO: refactor to smaller feature spec when we add Jest JavaScript unit tests 4 | describe "Reveal" do 5 | before do 6 | visit "cfa/styleguide/examples/molecules/reveal" 7 | end 8 | 9 | describe "default view" do 10 | it "on page load, trigger is visible and content is not", js: true do 11 | expect(page).to have_content "Learn more about student eligibility" 12 | expect(page).not_to have_content "In order to qualify as a college student, you have to meet one of the following exemptions:" 13 | end 14 | end 15 | 16 | describe "show reveal content" do 17 | it "reveals content when the reveal link is clicked", js: true do 18 | click_on "Learn more about student eligibility" 19 | 20 | expect(page).to have_content "In order to qualify as a college student, you have to meet one of the following exemptions:" 21 | expect(page).to have_content "Work an average at least 20 hours a week" 22 | end 23 | end 24 | 25 | describe "hide reveal content" do 26 | it "hides content when the reveal link is clicked with content already showing", js: true do 27 | click_on "Learn more about student eligibility" 28 | click_on "Learn more about student eligibility" 29 | 30 | expect(page).not_to have_content "In order to qualify as a college student, you have to meet one of the following exemptions:" 31 | end 32 | end 33 | end 34 | -------------------------------------------------------------------------------- /spec/test_app/Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative "config/application" 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /spec/test_app/app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_directory ../javascripts .js 2 | //= link_directory ../stylesheets .css 3 | //= link calfresh_logo.png 4 | -------------------------------------------------------------------------------- /spec/test_app/app/assets/javascripts/application.js: -------------------------------------------------------------------------------- 1 | //= require cfa_styleguide_main 2 | -------------------------------------------------------------------------------- /spec/test_app/app/assets/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | @import 'cfa_styleguide_main'; 2 | -------------------------------------------------------------------------------- /spec/test_app/app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | # Prevent CSRF attacks by raising an exception. 3 | # For APIs, you may want to use :null_session instead. 4 | protect_from_forgery with: :exception 5 | end 6 | -------------------------------------------------------------------------------- /spec/test_app/config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative "config/environment" 4 | 5 | run Rails.application 6 | -------------------------------------------------------------------------------- /spec/test_app/config/application.rb: -------------------------------------------------------------------------------- 1 | require_relative "boot" 2 | 3 | require "sprockets/railtie" 4 | require "action_controller/railtie" 5 | require "action_view/railtie" 6 | 7 | require "cfa/styleguide" 8 | 9 | module TestApp 10 | class Application < Rails::Application 11 | # Settings in config/environments/* take precedence over those specified here. 12 | # Application configuration should go into files in config/initializers 13 | # -- all .rb files in that directory are automatically loaded. 14 | config.to_prepare do 15 | warn "Loaded Rails #{Rails::VERSION::STRING}, Sprockets #{Sprockets::VERSION}", 16 | "Asset paths: #{Rails.application.config.assets.paths}" 17 | end 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /spec/test_app/config/boot.rb: -------------------------------------------------------------------------------- 1 | # Set up gems listed in the Gemfile. 2 | ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../../Gemfile", __dir__) 3 | 4 | require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"]) 5 | $LOAD_PATH.unshift File.expand_path("../../../lib", __dir__) 6 | -------------------------------------------------------------------------------- /spec/test_app/config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require_relative "application" 3 | 4 | # Initialize the Rails application. 5 | Rails.application.initialize! 6 | -------------------------------------------------------------------------------- /spec/test_app/config/environments/development.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | config.consider_all_requests_local = true 3 | config.eager_load = true 4 | end 5 | -------------------------------------------------------------------------------- /spec/test_app/config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | config.cache_classes = true 3 | config.eager_load = false 4 | config.public_file_server.enabled = true 5 | config.public_file_server.headers = { 6 | "Cache-Control" => "public, max-age=3600", 7 | } 8 | config.consider_all_requests_local = true 9 | config.action_controller.perform_caching = false 10 | config.action_dispatch.show_exceptions = false 11 | config.action_controller.allow_forgery_protection = false 12 | config.active_support.deprecation = :stderr 13 | config.i18n.default_locale = :en 14 | config.i18n.available_locales = %i[en es] 15 | end 16 | -------------------------------------------------------------------------------- /spec/test_app/config/initializers/cookies_serializer.rb: -------------------------------------------------------------------------------- 1 | # Specify a serializer for the signed and encrypted cookie jars. 2 | # Valid options are :json, :marshal, and :hybrid. 3 | Rails.application.config.action_dispatch.cookies_serializer = :json 4 | -------------------------------------------------------------------------------- /spec/test_app/config/initializers/session_store.rb: -------------------------------------------------------------------------------- 1 | Rails.application.config.session_store :cookie_store, key: "_test_app_session" 2 | -------------------------------------------------------------------------------- /spec/test_app/config/locales/en.yml: -------------------------------------------------------------------------------- 1 | # Files in the config/locales directory are used for internationalization 2 | # and are automatically loaded by Rails. If you want to use locales other 3 | # than English, add the necessary files in this directory. 4 | # 5 | # To use the locales, use `I18n.t`: 6 | # 7 | # I18n.t 'hello' 8 | # 9 | # In views, this is aliased to just `t`: 10 | # 11 | # <%= t('hello') %> 12 | # 13 | # To use a different locale, set it with `I18n.locale`: 14 | # 15 | # I18n.locale = :es 16 | # 17 | # This would use the information in config/locales/es.yml. 18 | # 19 | # To learn more, please read the Rails Internationalization guide 20 | # available at http://guides.rubyonrails.org/i18n.html. 21 | 22 | en: 23 | hello: "Hello world" 24 | -------------------------------------------------------------------------------- /spec/test_app/config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | mount Cfa::Styleguide::Engine => "/cfa" 3 | get "/", to: redirect("/cfa/styleguide") 4 | get "/favicon.ico", to: proc { [200, {}, [""]] } 5 | end 6 | -------------------------------------------------------------------------------- /spec/test_app/config/secrets.yml: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Your secret key is used for verifying the integrity of signed cookies. 4 | # If you change this key, all old signed cookies will become invalid! 5 | 6 | # Make sure the secret is at least 30 characters and all random, 7 | # no regular words or you'll be exposed to dictionary attacks. 8 | # You can use `rails secret` to generate a secure secret key. 9 | 10 | # Make sure the secrets in this file are kept private 11 | # if you're sharing your code publicly. 12 | 13 | development: 14 | secret_key_base: 80922d2051d2180da60ecf81566768681404ce13b86f49b500218d1173072c97be1f2605866976ea140d3a4b8506f8174125f22626b99791e0750be9396f5aef 15 | 16 | test: 17 | secret_key_base: 719cf9c2e93452f6bf6c2f0771b6e30e265c2412a514bb4b88a15876b135978f0d5db554fd8a477507fda33823186c30138f92a234eb8c6ed407b96787206362 18 | 19 | # Do not keep production secrets in the repository, 20 | # instead read values from the environment. 21 | production: 22 | secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> 23 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | @import "mixins/clearfix"; 3 | 4 | // Functions 5 | @import "functions/private"; 6 | @import "functions/new-breakpoint"; 7 | 8 | // Settings 9 | @import "settings/grid"; 10 | @import "settings/visual-grid"; 11 | @import "settings/disable-warnings"; 12 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Neat 1.8.0 2 | // http://neat.bourbon.io 3 | // Copyright 2012-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Helpers 7 | @import "neat-helpers"; 8 | 9 | // Grid 10 | @import "grid/private"; 11 | @import "grid/box-sizing"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | @import "grid/display-context"; 23 | @import "grid/direction-context"; 24 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values. Each `$feature` should have a corresponding `$value`. 7 | /// 8 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 9 | /// 10 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 11 | /// 12 | /// @param {Number (unitless)} $total-columns [$grid-columns] 13 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 14 | /// 15 | /// @example scss - Usage 16 | /// $mobile: new-breakpoint(max-width 480px 4); 17 | /// 18 | /// .element { 19 | /// @include media($mobile) { 20 | /// @include span-columns(4); 21 | /// } 22 | /// } 23 | /// 24 | /// @example css - CSS Output 25 | /// @media screen and (max-width: 480px) { 26 | /// .element { 27 | /// display: block; 28 | /// float: left; 29 | /// margin-right: 7.42297%; 30 | /// width: 100%; 31 | /// } 32 | /// .element:last-child { 33 | /// margin-right: 0; 34 | /// } 35 | /// } 36 | 37 | @function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { 38 | @if length($query) == 1 { 39 | $query: $default-feature nth($query, 1) $total-columns; 40 | } @else if is-even(length($query)) { 41 | $query: append($query, $total-columns); 42 | } 43 | 44 | @if is-not(belongs-to($query, $visual-grid-breakpoints)) { 45 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 46 | } 47 | 48 | @return $query; 49 | } 50 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @if $border-box-sizing == true { 4 | html { // http://bit.ly/1qk2tVR 5 | box-sizing: border-box; 6 | } 7 | 8 | * { 9 | &, 10 | &::after, 11 | &::before { 12 | box-sizing: inherit; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_direction-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the direction property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $direction [left-to-right] 6 | /// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. 7 | /// 8 | /// @example scss - Usage 9 | /// @include direction-context(right-to-left) { 10 | /// .right-to-left-block { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .right-to-left-block { 17 | /// float: right; 18 | /// ... 19 | /// } 20 | 21 | @mixin direction-context($direction: left-to-right) { 22 | $scope-direction: $layout-direction; 23 | 24 | @if to-lower-case($direction) == "left-to-right" { 25 | $layout-direction: LTR !global; 26 | } @else if to-lower-case($direction) == "right-to-left" { 27 | $layout-direction: RTL !global; 28 | } 29 | 30 | @content; 31 | 32 | $layout-direction: $scope-direction !global; 33 | } 34 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_display-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the display property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $display [block] 6 | /// Display value to be used within the block. Can be `table` or `block`. 7 | /// 8 | /// @example scss 9 | /// @include display-context(table) { 10 | /// .display-table { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css 16 | /// .display-table { 17 | /// display: table-cell; 18 | /// ... 19 | /// } 20 | 21 | @mixin display-context($display: block) { 22 | $scope-display: $container-display-table; 23 | $container-display-table: $display == table !global; 24 | 25 | @content; 26 | 27 | $container-display-table: $scope-display !global; 28 | } 29 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Forces the element to fill its parent container. 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include fill-parent; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// width: 100%; 13 | /// box-sizing: border-box; 14 | /// } 15 | 16 | @mixin fill-parent() { 17 | width: 100%; 18 | 19 | @if $border-box-sizing == false { 20 | box-sizing: border-box; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`. 4 | /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. 5 | /// 6 | /// @param {Number [unit]} $local-max-width [$max-width] 7 | /// Max width to be applied to the element. Can be a percentage or a measure. 8 | /// 9 | /// @example scss - Usage 10 | /// .element { 11 | /// @include outer-container(100%); 12 | /// } 13 | /// 14 | /// @example css - CSS Output 15 | /// .element { 16 | /// max-width: 100%; 17 | /// margin-left: auto; 18 | /// margin-right: auto; 19 | /// } 20 | /// 21 | /// .element::after { 22 | /// clear: both; 23 | /// content: ""; 24 | /// display: table; 25 | /// } 26 | 27 | @mixin outer-container($local-max-width: $max-width) { 28 | @include clearfix; 29 | max-width: $local-max-width; 30 | margin: { 31 | left: auto; 32 | right: auto; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Adds padding to the element. 4 | /// 5 | /// @param {List} $padding [flex-gutter()] 6 | /// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include pad(30px -20px 10px default); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding: 30px -20px 10px 2.35765%; 16 | /// } 17 | 18 | @mixin pad($padding: flex-gutter()) { 19 | $padding-list: null; 20 | @each $value in $padding { 21 | $value: if($value == 'default', flex-gutter(), $value); 22 | $padding-list: join($padding-list, $value); 23 | } 24 | padding: $padding-list; 25 | } 26 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: LTR !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | @return $container-is-display-table == true or $display == table; 35 | } 36 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. 4 | /// 5 | /// @param {String} $display [default] 6 | /// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. 7 | /// 8 | /// @param {String} $direction [$default-layout-direction] 9 | /// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include row(); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// *zoom: 1; 19 | /// display: block; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin row($display: default, $direction: $default-layout-direction) { 32 | @if $direction != $default-layout-direction { 33 | @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); 34 | } 35 | 36 | $layout-direction: $direction !global; 37 | 38 | @if $display != default { 39 | @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); 40 | } 41 | 42 | @if $display == table { 43 | display: table; 44 | @include fill-parent; 45 | table-layout: fixed; 46 | $container-display-table: true !global; 47 | } @else { 48 | @include clearfix; 49 | display: block; 50 | $container-display-table: false !global; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. 4 | /// 5 | /// @param {Number (unitless)} $n-columns [1] 6 | /// Number of columns by which the element shifts. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include shift(-3); 11 | /// } 12 | /// 13 | /// @example css - CSS output 14 | /// .element { 15 | /// margin-left: -25.58941%; 16 | /// } 17 | 18 | @mixin shift($n-columns: 1) { 19 | @include shift-in-context($n-columns); 20 | } 21 | 22 | /// Translates an element horizontally by a number of columns, in a specific nesting context. 23 | /// 24 | /// @param {List} $shift 25 | /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). 26 | /// 27 | /// The two values can be separated with any string such as `of`, `/`, etc. 28 | /// 29 | /// @example scss - Usage 30 | /// .element { 31 | /// @include shift(-3 of 6); 32 | /// } 33 | /// 34 | /// @example css - CSS output 35 | /// .element { 36 | /// margin-left: -52.41458%; 37 | /// } 38 | 39 | @mixin shift-in-context($shift: $columns of $container-columns) { 40 | $n-columns: nth($shift, 1); 41 | $parent-columns: container-shift($shift) !global; 42 | 43 | $direction: get-direction($layout-direction, $default-layout-direction); 44 | $opposite-direction: get-opposite-direction($direction); 45 | 46 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 47 | 48 | // Reset nesting context 49 | $parent-columns: $grid-columns !global; 50 | } 51 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin grid-column-gradient($values...) { 4 | background-image: -webkit-linear-gradient(left, $values); 5 | background-image: -moz-linear-gradient(left, $values); 6 | background-image: -ms-linear-gradient(left, $values); 7 | background-image: -o-linear-gradient(left, $values); 8 | background-image: unquote("linear-gradient(to left, #{$values})"); 9 | } 10 | 11 | @if $visual-grid == true or $visual-grid == yes { 12 | body:before { 13 | @include grid-column-gradient(gradient-stops($grid-columns)); 14 | content: ""; 15 | display: inline-block; 16 | height: 100%; 17 | left: 0; 18 | margin: 0 auto; 19 | max-width: $max-width; 20 | opacity: $visual-grid-opacity; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | width: 100%; 25 | 26 | @if $visual-grid-index == back { 27 | z-index: -1; 28 | } 29 | 30 | @else if $visual-grid-index == front { 31 | z-index: 9999; 32 | } 33 | 34 | @each $breakpoint in $visual-grid-breakpoints { 35 | @if $breakpoint { 36 | @include media($breakpoint) { 37 | @include grid-column-gradient(gradient-stops($grid-columns)); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link http://goo.gl/yP5hiZ 6 | /// 7 | /// @example scss 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// @example css 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: block; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: block; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/settings/_disable-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $disable-warnings: false !default; 8 | 9 | @mixin -neat-warn($message) { 10 | @if $disable-warnings == false { 11 | @warn "#{$message}"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. Set with a `!global` flag. 4 | /// 5 | /// @type Number (Unit) 6 | 7 | $column: 4.2358em !default; 8 | 9 | /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. Set with the `!global` flag. 10 | /// 11 | /// @type Number (Unit) 12 | 13 | $gutter: 1.618em !default; 14 | 15 | /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. 16 | /// 17 | /// @type Number (Unitless) 18 | 19 | $grid-columns: 12 !default; 20 | 21 | /// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag. 22 | /// 23 | /// @type Number (Unit) 24 | /// 25 | $max-width: 1200px !default; 26 | 27 | /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. 28 | /// 29 | /// @type Bool 30 | /// 31 | /// @example css - CSS Output 32 | /// html { 33 | /// box-sizing: border-box; } 34 | /// 35 | /// *, *::after, *::before { 36 | /// box-sizing: inherit; 37 | /// } 38 | 39 | $border-box-sizing: true !default; 40 | 41 | /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. 42 | /// 43 | /// @type String 44 | 45 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 46 | 47 | ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. 48 | /// 49 | ///@type String 50 | 51 | $default-layout-direction: LTR !default; 52 | -------------------------------------------------------------------------------- /vendor/assets/stylesheets/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $visual-grid: false !default; 8 | 9 | /// Sets the visual grid color. Set with `!global` flag. 10 | /// 11 | /// @type Color 12 | 13 | $visual-grid-color: #eee !default; 14 | 15 | /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. 16 | /// 17 | /// @type String 18 | 19 | $visual-grid-index: back !default; 20 | 21 | /// Sets the opacity property of the visual grid. Set with `!global` flag. 22 | /// 23 | /// @type Number (unitless) 24 | 25 | $visual-grid-opacity: 0.4 !default; 26 | 27 | $visual-grid-breakpoints: () !default; 28 | --------------------------------------------------------------------------------