index.html.erb

<% content_for(:template_name) { "styleguide" } %>

<% content_for :subnavigation do %>
  <li class="spacing-below-0">
    <span class="section-header heading-25-small spacing-below-10">Atoms</span>
    <ul class="sidebar__sub-items spacing-below-10">
      <li class="spacing-below-25"><%= link_to "Links", styleguide_main_path(anchor: "atoms-links") %></li>
      <li class="spacing-below-25"><%= link_to "Buttons", styleguide_main_path(anchor: "atoms-buttons") %></li>
      <li class="spacing-below-25"><%= link_to "Card", styleguide_main_path(anchor: "atoms-card") %></li>
      <li class="spacing-below-25"><%= link_to "Colors", styleguide_main_path(anchor: "atoms-colors") %></li>
      <li class="spacing-below-25"><%= link_to "Form Elements", styleguide_main_path(anchor: "atoms-form_elements") %></li>
      <li class="spacing-below-25"><%= link_to "Grid Layout", styleguide_main_path(anchor: "atoms-grid") %></li>
      <li class="spacing-below-25"><%= link_to "Icons", styleguide_main_path(anchor: "atoms-icons") %></li>
      <li class="spacing-below-25"><%= link_to "Labels", styleguide_main_path(anchor: "atoms-labels") %></li>
      <li class="spacing-below-25"><%= link_to "Notice", styleguide_main_path(anchor: "atoms-notices") %></li>
      <li class="spacing-below-25"><%= link_to "Slab Layout", styleguide_main_path(anchor: "atoms-slab_layout") %></li>
      <li class="spacing-below-25"><%= link_to "Spacing", styleguide_main_path(anchor: "atoms-spacing") %></li>
      <li class="spacing-below-25"><%= link_to "Typography", styleguide_main_path(anchor: "atoms-typography") %></li>
    </ul>
  </li>
  <li class="spacing-below-0">
    <span class="section-header heading-25-small spacing-below-10">Molecules</span>
    <ul class="sidebar__sub-items spacing-below-10">
      <li class="spacing-below-25"><%= link_to "Accordion", styleguide_main_path(anchor: "molecules-accordion") %></li>
      <li class="spacing-below-25"><%= link_to "Block Input Group", styleguide_main_path(anchor: "molecules-block_input_group") %></li>
      <li class="spacing-below-25"><%= link_to "Data Table", styleguide_main_path(anchor: "molecules-data_table") %></li>
      <li class="spacing-below-25"><%= link_to "Flash Messages", styleguide_main_path(anchor: "molecules-flash_messages") %></li>
      <li class="spacing-below-25"><%= link_to "Follow Up Question", styleguide_main_path(anchor: "molecules-follow_up_question") %></li>
      <li class="spacing-below-25"><%= link_to "Form Group", styleguide_main_path(anchor: "molecules-form_group") %></li>
      <li class="spacing-below-25"><%= link_to "Form Group Error State", styleguide_main_path(anchor: "molecules-form_group_error_state") %></li>
      <li class="spacing-below-25"><%= link_to "Incrementer", styleguide_main_path(anchor: "molecules-incrementer") %></li>
      <li class="spacing-below-25"><%= link_to "Inline Input Group", styleguide_main_path(anchor: "molecules-inline_input_group") %></li>
      <li class="spacing-below-25"><%= link_to "Media Box", styleguide_main_path(anchor: "molecules-media_box") %></li>
      <li class="spacing-below-25"><%= link_to "Progress Indicator", styleguide_main_path(anchor: "molecules-progress_indicator") %></li>
      <li class="spacing-below-25"><%= link_to "Progress Step Bar", styleguide_main_path(anchor: "molecules-progress_step_bar") %></li>
      <li class="spacing-below-25"><%= link_to "Reveal", styleguide_main_path(anchor: "molecules-reveal") %></li>
      <li class="spacing-below-25"><%= link_to "Searchbar", styleguide_main_path(anchor: "molecules-searchbar") %></li>
      <li class="spacing-below-25"><%= link_to "Show More", styleguide_main_path(anchor: "molecules-show_more") %></li>
      <li class="spacing-below-25"><%= link_to "Summary Table", styleguide_main_path(anchor: "molecules-summary_table") %></li>
      <li class="spacing-below-25"><%= link_to "Tab Bar", styleguide_main_path(anchor: "molecules-tab_bar") %></li>
      <li class="spacing-below-25"><%= link_to "Text Input Group", styleguide_main_path(anchor: "molecules-text_input_group") %></li>
      <li class="spacing-below-25"><%= link_to "Toolbar", styleguide_main_path(anchor: "molecules-toolbar") %></li>
      <li class="spacing-below-25"><%= link_to "Two-up Input Group", styleguide_main_path(anchor: "molecules-two_up_input_group") %></li>
    </ul>
  </li>
  <li class="spacing-below-0">
    <span class="section-header heading-25-small spacing-below-10">Organisms</span>
    <ul class="sidebar__sub-items spacing-below-10">
      <li class="spacing-below-25"><%= link_to "Admin Application Card", styleguide_main_path(anchor: "organisms-admin_application_card") %></li>
      <li class="spacing-below-25"><%= link_to "Form Card 1", styleguide_main_path(anchor: "organisms-form_card_1") %></li>
      <li class="spacing-below-25"><%= link_to "Form Card 2", styleguide_main_path(anchor: "organisms-form_card_2") %></li>
      <li class="spacing-below-25"><%= link_to "Form Card 3", styleguide_main_path(anchor: "organisms-form_card_3") %></li>
      <li class="spacing-below-25"><%= link_to "Form Card 4", styleguide_main_path(anchor: "organisms-form_card_4") %></li>
      <li class="spacing-below-25"><%= link_to "Pagination", styleguide_main_path(anchor: "organisms-pagination") %></li>
      <li class="spacing-below-25"><%= link_to "Statistics Card", styleguide_main_path(anchor: "organisms-statistics_card") %></li>
      <li class="spacing-below-25"><%= link_to "Steps", styleguide_main_path(anchor: "organisms-steps") %></li>
      <li class="spacing-below-25"><%= link_to "Vertical Steps", styleguide_main_path(anchor: "organisms-vertical_steps") %></li>
    </ul>
  </li>
<% end %>

<div class="slab slab--hero">
  <div class="grid">
    <div class="grid__item width-two-thirds">
      <h1>Honeycrisp Design System</h1>
      <p>
        Honeycrisp is the official design system for products at Code for America.
        Use Honeycrisp for public facing products that require a welcoming and simple interface.
        For internal tools and products for workers, use
        <%= link_to "Honeycrisp Compact", styleguide_honeycrisp_compact_path %>.
      </p>
      <p>Have a suggestion? <a href="https://github.com/codeforamerica/honeycrisp-gem/issues">Submit it as an issue</a> on <a href="https://github.com/codeforamerica/honeycrisp-gem">the Github repo!</a> Questions? Contact us at <a href="mailto:styleguide@codeforamerica.org">styleguide@codeforamerica.org</a>.</p>
    </div>
  </div>
</div>
<section class="slab slab--styleguide" id="atoms">
  <div class="grid">
    <div class="grid__item width-one-fourth">
      <h2>Atoms</h2>
    </div>
    <div class="grid__item width-three-fourths">
      <p class="text--help">Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.</p>
      <p class="text--help">Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.</p>
      <p class="text--help">Like atoms in nature they're fairly abstract and often not terribly useful on their own. However, they're good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.</p>
    </div>
  </div>
</section>

<%= render 'section', title: 'Slab Layout', example: 'atoms/slab_layout' %>
<%= render 'section', title: 'Grid Layout', example: 'atoms/grid' %>
<%= render 'section', title: 'Card', example: 'atoms/card', explanation: "Cards are used to highlight and focus content. In core app pages (e.g. pages of a form), the primary content should be inside a card. Secondary pages (e.g. the homepage, an FAQ page) don't need cards. Multiple cards can be used on one page, but consider if the content can be broken into multiple pages." %>
<%= render 'section', title: 'Notice', example: 'atoms/notices', explanation: "Notices are a way to highlight important information by separating it from the main copy. Warning notices are good for temporary scenarios (e.g. 'Counties are receiving more applications than usual. Interview scheduling may be delayed.') Warning notices can be used outside the card for extra emphasis. Both types of notices are only effective if they're used sparingly." %>
<%= render 'section', title: 'Colors', example: 'atoms/colors' %>
<%= render 'section', title: 'Icons', example: 'atoms/icons', explanation: "Icons help users find and understand actions, like “upload” or “search”. In general, they should be used as a secondary visual indicator, in conjunction with text or color. Use common patterns, but don't assume they will be familiar. <br/><br/> Note: These are <a target='blank' href='https://material.io/resources/icons'>Google Material icons.</a> The full material icon font is included; however, only a subset of the icons have a convenience class defined as shown in the example. For icons without a convenience class, you can reference them directly using a ligature or <a target='blank' href='https://github.com/google/material-design-icons/blob/f5f56570741833bdd36463f1f1b6b7d4edd3f9c1/font/MaterialIconsOutlined-Regular.codepoints'>character codepoint.</a> " %>
<%= render 'section', title: 'Typography', example: 'atoms/typography', explanation: "Basic HTML headings include type styles. However, each type style also has dedicated class name. You can always use the dedicated class name to override any default styling (e.g., you can style an #{html_escape("<h1>")} as a heading level 2 with '.heading-35'.)" %>
<%= render 'section', title: 'Spacing', example: 'atoms/spacing' %>
<%= render 'section', title: 'Labels', example: 'atoms/labels' %>
<%= render 'section', title: 'Buttons', example: 'atoms/buttons', explanation: "The teal primary is your default button. White buttons are for secondary actions.<br><br>Danger buttons tell users to pause and make sure they’re certain of the action they’re about to take. It can be a way to signal that an action is discouraged (e.g. submitting a minimal application in GCF) , or irreversible (e.g. deleting a client in ClientComm).<br><br>Disabled buttons are placeholders for actions that can’t be taken at the moment. Use these rather than hiding the button if you want to show that the action exits, or if your layout requires it.  Disabled buttons have a corresponding cursor state.<br><br>When using the button styled like a link, don’t use the \"button\" class.<br><br>For linked images, make sure to include the 'illustration' class to ensure the proper focus offset." %>
<%= render 'section', title: 'Skip link', example: 'atoms/links', explanation: "Adding the id of `skip-to-content` will hide the link until it has focus. This should be the first focusable item on your page. For more information <a target='blank' href='https://a11y-101.com/development/skip-link'>visit a11y 101</a>." %>
<%= render 'section', title: 'Form Elements', example: 'atoms/form_elements', explanation: "General atomic form elements have no knowledge about their size and default to full width. Form molecules and organisms or modifier classes should be used to define form element sizes and layout." %>

<section class="slab slab--styleguide" id="molecules">
  <div class="grid">
    <div class="grid__item width-one-fourth">
      <h2>Molecules</h2>
    </div>
    <div class="grid__item width-three-fourths">
      <p class="text--help">Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.</p>
      <p class="text--help">For example, a form label, input or button aren't too useful by themselves, but combine them together as a form and now they can actually do something together.</p>
      <p class="text--help">Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.</p>
    </div>
  </div>
</section>

<%= render 'section', title: 'Media Box', example: 'molecules/media_box' %>
<%= render 'section', title: 'Toolbar', example: 'molecules/toolbar' %>
<%= render 'section', title: 'Tab bar', example: 'molecules/tab_bar' %>
<%= render 'section', title: 'Flash messages', example: 'molecules/flash_messages' %>
<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator', explanation: 'The progress indicator shows the user how much of a flow they have completed. It helps set time expectations, as well as giving a sense of progress. Use this if you have a flow of more than a few pages, or when users won’t be able to guess how long a flow is. <br><br>The indicator may be used alone, or in conjunction with the <a href="#molecules-progress_step_bar">step bar</a>. The indicator is the more granular of the two, ticking forward on an individual page basis.' %>
<%= render 'section', title: 'Progress step bar', example: 'molecules/progress_step_bar', explanation: 'The step bar shows users which steps they have completed, and what’s coming up. It serves a similar purpose to the <a href="#molecules-progress_indicator">progress indicator</a>, but it deals with sections rather than individual pages. Use this if your flow has defined steps or sections. It helps users mentally prepare for the section they’re about to start.' %>
<%= render 'section', title: 'Reveal', example: 'molecules/reveal' %>
<%= render 'section', title: 'Accordion', example: 'molecules/accordion' %>
<%= render 'section', title: 'Show More', example: 'molecules/show_more' %>
<%= render 'section', title: 'Summary Table', example: 'molecules/summary_table' %>
<%= render 'section', title: 'Data Table', example: 'molecules/data_table' %>
<%= render 'section', title: 'Searchbar', example: 'molecules/searchbar' %>
<%= render 'section', title: 'Text Input Group', example: 'molecules/text_input_group' %>
<%= render 'section', title: 'Incrementer', example: 'molecules/incrementer' %>
<%= render 'section', title: 'Block Input Group', example: 'molecules/block_input_group' %>
<%= render 'section', title: 'Inline Input Group', example: 'molecules/inline_input_group' %>
<%= render 'section', title: 'Two-up Input Group', example: 'molecules/two_up_input_group' %>
<%= render 'section', title: 'Form Group', example: 'molecules/form_group' %>
<%= render 'section', title: 'Form Group Error State', example: 'molecules/form_group_error_state' %>
<%= render 'section', title: 'Follow Up Question', example: 'molecules/follow_up_question', explanation: "How it works: the proceeding question requires an additional class 'form-group--with-follow-up'. Any answer that triggers a follow up should contain an additional attribute 'data-follow-up' with the value being the id of the follow-up question (starting with #). Note: Only one follow-up question can be supplied for a checkbox set and it will look best if the last checkbox is the one that triggers it." %>

<section class="slab slab--styleguide" id="organisms">
  <div class="grid">
    <div class="grid__item width-one-fourth">
      <h2>Organisms</h2>
    </div>
    <div class="grid__item width-three-fourths">
      <p class="text--help">Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.</p>
      <p class="text--help">Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.</p>
      <p class="text--help">Building up from molecules to organisms encourages creating standalone, portable, reusable components.</p>
    </div>
  </div>
</section>
<%= render 'section', title: 'Pagination', example: 'organisms/pagination' %>
<%= render 'section', title: 'Steps', example: 'organisms/steps' %>
<%= render 'section', title: 'Vertical Steps', example: 'organisms/vertical_steps' %>
<%= render 'section', title: 'Statistics Card', example: 'organisms/statistics_card' %>
<%= render 'section', title: 'Admin Application Card', example: 'organisms/admin_application_card' %>
<%= render 'section', title: 'Form Card 1', example: 'organisms/form_card_1' %>
<%= render 'section', title: 'Form Card 2', example: 'organisms/form_card_2' %>
<%= render 'section', title: 'Form Card 3', example: 'organisms/form_card_3' %>
<%= render 'section', title: 'Form Card 4', example: 'organisms/form_card_4' %>