Dough

A reusable UI component library from the Money Advice Service, free for use on any Rails based project. More info and a fuller introduction available on our blog.

Prerequisites

• Git
• Bower
• NodeJS
• Gulp

Usage

Add the following to your Gemfile and bundle:

Rails 4: gem 'dough-ruby'

Rails 5: gem 'dough-ruby', require: 'dough'

Installation

Clone the repository:

$ git clone https://github.com/moneyadviceservice/dough.git

Make sure all dependencies are available:

$ npm install -g bower
$ bower install
$ npm install

How to use a local copy of Dough

Dough is a bower module embedded inside a ruby gem.

Use these instructions when you're working on Dough and want to see the effects within another project. For example, if you're working on Pension Calculator, you want to use a local copy of Dough.

For the purpose of this example, PROJECT refers to Pension Calculator, or whatever you're working on.

Make sure you have the latest bundle in PROJECT

cd PROJECT
bundle install

Link dough-ruby to your local copy, in PROJECT's Gemfile

DO NOT COMMIT THIS!!!

# Add this to the top of the file if it doesn't exist already
gem 'dough-ruby', path: '~/Sites/dough' # or whatever your local Dough is

Set up bower link in Dough

cd ~/Sites/dough # or whatever your local Dough is
bower link

Connect the link above to PROJECT

cd PROJECT
bower link dough

Troubleshooting

If you don't see your local CSS after following the steps

rm -r tmp/cache

Running Javascript tests

Make sure you ran npm install.

$ ./node_modules/karma/bin/karma start spec/js/karma.conf.js --single-run

Javascript style checking

Make sure you ran npm install.

./node_modules/jshint/bin/jshint ./assets/js --config .jshintrc

./node_modules/jscs/bin/jscs js

To prevent commiting JavaScript files that violate JSHint and JSCS rules:

cat > .git/hooks/pre-commit <<EOF
!/bin/sh
./script/git-pre-commit-jshint.sh
EOF
chmod +x .git/hooks/pre-commit

JavaScript documentation

Dough's JS documentation follows the jsDoc syntax and is generated using Gulp.

To generate documentation

gulp jsdoc

To generate and deploy documentation to the gh-pages branch.

gulp build

The jsDoc theme used is jaguar-jsdoc.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Keep your feature branch focused and short lived
4. Commit your changes (git commit -am 'Add some feature')
5. Push to the branch (git push origin my-new-feature)
6. Create new Pull Request

Releases

31/7/14 - v1.0.0 - breaking change - VisibilityToggler component renamed to Collapsable