Add animated icons examples to the Design Manual documentation

jimmynotjim commented 7 years ago

We currently don't document the animated icons despite them being a part of Capital Framework for some time.

Animating minicons has been available in Capital Framework for some time but never documented. This change adds that missing documentation.

Additions

Added animated icons documentation based on @caheberer GDoc.
Added examples of animated icons.

Testing

run npm update to make sure you have the latest from Capital Framework
run grunt build, if you get an error run grunt build -f. There's a bug in the linting file.
run npm start and navigate to http://localhost:4000/brand-guidelines/minicons.html#animation

Review

@caheberer
@Scotchester
@sebworks

Preview this PR without the whitespace changes

Screenshots

screen shot 2017-04-27 at 5 26 00 pm

Checklist

[ ] Changes are limited to a single goal (no scope creep)
[ ] Code can be automatically merged (no conflicts)
[ ] Code follows the standards laid out in the front end playbook
[ ] Passes all existing automated tests
[ ] New functions include new tests
[ ] New functions are documented (with a description, list of inputs, and expected output)
[ ] Placeholder code is flagged
[ ] Visually tested in supported browsers and devices
[ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

Scotchester commented 7 years ago

I would suggest that on the Minicons page, you don't have to follow the format of the section above it. Make the description a ⅔ column and the example a ⅓ column without the superfluous empty elements.

jimmynotjim commented 7 years ago

@Scotchester the problem with that is it throws off the grid

screen shot 2017-04-28 at 12 44 56 pm

Scotchester commented 7 years ago

There isn't really a grid, though. None of the example visuals have a consistent grid.

jimmynotjim commented 7 years ago

I guess that's true. @caheberer what's your preference?

caheberer commented 7 years ago

With the exception of the first intro paragraph, we only use 1/3 content blocks, so I'd prefer the earlier iteration.

jimmynotjim commented 7 years ago

Okedoke, @Scotchester want to change your review? I fixed the heading.

cfpb / design-manual