Secondary Button

  • Prominent steps, but lower priority than primary
  • For example: Back button, Alternative steps

Helper tag

<%= button_secondary 'Button label' %>

Tooltips

 Rules

  • Should only be used outside of a form (typically within a table) - if not, please use FieldHelpText.
  • Should be activated click
  • Should have a close button
  • Can be used to explain jargon, for example "APR"
  • Can only have one open at a time. One opening closes the other.
  • If more than word limit (TBD) then should link off to an article (in new tab or same window TBC)

Helper tag

<%= tabular_tooltip 'This is the content that will be shown in the tooltip', options: {
    content: 'This is the average amount you would expect to pay for petrol or diesel over the course of a year.'
} %>

Social Sharing Icons

Definition

This module exists to allow the display of minimally-styled SVG Social Sharing icons at all points throught a site.

Currently it includes Facebook, Twitter and Email icons within the functionality to share the specified page via those means. The module could be extended to include other icons as necessary.

There are a number of values which can be passed through as described in the rules below.

Doesn't include non-SVG fallbacks, which need to be added as CSS background-image in the icon--facebook, icon--twitter, icon--email element.

Rules

  • title: appears above the icons as a section heading
  • text: this is used for the message to be shared on Twitter and the subject line in emails
  • url: this is the URL that will be shared which may be the current location but may not be
  • label_facebook: this is accessibility text specific to Facebook and is not visible on the page
  • label_twitter: this is accessibility text specific to Twitter and is not visible on the page
  • label_email: this is accessibility text specific to Email and is not visible on the page

 Examples

Helper tag

<%= social_sharing_icons title: 'Share this article', text: 'Text to appear in message', url: 'http://www.madewithdough.org.uk/', label_facebook: 'Share this article on Facebook', label_twitter: 'Share this article on Twitter', label_email: 'Share this article by Email' %>

Forms

This part of the documentation needs improving. Currently most Dough components are view only and do not need a model to provide data. To demonstrate a form in its entirety, extra work is required.

Examples

Please ignore comment blocks below, code for reference only

Helper tag

<%= "Please ignore comment blocks below, code for reference only" %>
<%#
<%= form_for @object, html: { class: 'form' },
    builder: Dough::Forms::Builders::Validation do |f| %>
  <%#
  <%= f.validation_summary %>
  <%#
  <%= f.form_row(:email) do %>
    <%#
    <%= f.errors_for :email %>
    <%#
    <%= f.label :email, "Your Email" %>
    <%#
    <%= f.text_field :email %>
    <%#
  <% end %>
  <%#
  <%= button_primary "Submit" %>
<%#
<% end %>

Editorial Callout

Rules

  • Should only be used as related, supporting text in editorial content (i.e. top tips, factoids, quotes)
  • Should not be used as instructions to using tool
  • Should not be used for legal disclaimers
  • Should not be used for results
  • Should be used for non-essential content. If you didn't read a top tip, it won't affect how you use the tool.

Examples

An example can be seen on this article on borrowing money on the Money Advice Service website.

This is a great quote from an article pulled out

Helper tag

<%= callout_editorial '<p>This is a great quote from an article pulled out</p>' %>

Inline Button

  • Sits alongside a text input. Button height matches text input height.

Helper tag

<%= button_inline 'Button label' %>

Previous Next Buttons

Grouped buttons with standardised

Helper tag

<%= button_prev_next 'selector-id', options: { previous: 'Previous', next: 'Next' } %>

Tabs

last edited 10 Sep 2014

Definition

A module tab is a User Interface (UI) design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content’s corresponding tab control

Source: Smashing Magazine

Rules

  • Tabs should not wrap, but when they do they will turn into a mobile friendly dropdown
  • Tabs should not be be used to indicate progress, but can help users understand the breadth of content on the page
  • Tabs should not contain the end or final result, these should be outside of any tabs. For example a form's inputs can be contained within tabs with the summary or results shown outside of these as a separate component
  • One tab should not rely on another tab to make sense

 Examples

Although no sites are using the Dough helper yet, they are using the static HTML version. You can see an example in the Money Advice Service's styleguide.

Tab one

Tab one

Tab two

Tab two

Helper tag

<%=
  tab_selector :section_name do |tab|
    tab.section do |container|
      container.active
      container.heading 'Tab one'
      container.content do
        'Tab one'
      end
    end

    tab.section do |container|
      container.heading 'Tab two'
      container.content do
        'Tab two'
      end
    end
  end
%>

Tertiary Button

  • Simple text link
  • Used for everything else

Helper tag

<%= button_tertiary 'Button label' %>

Primary Button

  • Primary / next action button
  • Can have more than one, providing they are all next actions
  • For example if there is a 'Save' page that asks the user to Login or Register, they should both be yellow as they are the same prominence

Examples

Helper tag

<%= button_primary 'Button label' %>

Instructional Callout

 Rules

  • Should be used where the content needs to be read in order to use the tool
  • Should be used for disclaimer text (i.e. "This tool only provides an estimate etc.")

Examples

This tool can be used to see how much you earn. Simply adjust the figures to increase your salary.

Helper tag

<%= callout_instructional '<p>This tool can be used to see how much you earn. Simply adjust the figures to increase your salary.</p>' %>

Progress Indicator

 Rules

  • Just update H1 saying " of " e.g "Step 1 of 3 - Enter your age"

Examples

Although not using the Dough Ruby helper, this is demonstrated on the Money Advice Service's Pension Calculator.

Step 1 of 3 : Adjust your figures

Helper tag

<%= progress_indicator options: { label: 'Step', description: 'Adjust your figures', current: 1, total: 3 } %>

 Show/Hide

Wrapper for a show/hide trigger

Rules

Aim for non-essential content to be hidden, but essential content can be "alluded" to with the trigger text

Should be used for a paragraph or two of text, (i.e. not just a few words, and not a whole page worth of content)

Can show/hide multiple at once

The trigger link should be in context to the content (rather than just 'Click here', it could have the first part of the text)

Content

Some HTML content

Helper tag

<%= show_hide_trigger 'selector-id', options: { heading: 'Content' } %>

<%= show_hide_content 'selector-id', options: { content: '<p>Some HTML content</p>' } %>