Release 1.0.0 · CMSgov/design-system

This is the first official release of the CMS Design System. Future releases will conform to the Semantic Versioning as outlined here.

🚀 Added

Added a flex-wrap utility class
Added a $ds-include-base-html-rulesets: true Sass variable which, when set to false, will disable the base HTML selectors. (Only a {...} right now — see below)
Added SkipNav CSS and React component

Added styling to base <a> elements (More info here: #106)
Renamed ds-c-vertical-nav__link to ds-c-vertical-nav__label to more accurately represent its functionality — it can be used on more than just <a> tags. (#116)
Changed both the default font and image paths so that their directories are now expected to live in the same directory as the CSS's directory. This is actually what the U.S. WDS does, so it's a reversion of customizations we made early on. The expected file structure is now:
```
├── Assets directory/
    ├── css/          # The CSS directory can be named whatever you want.
    ├── images/
    └── fonts/
```
To restore the previous behavior, you could define the following variables before the line where you @import the design system's Sass file:
```
$font-path: 'fonts';
$image-path: 'images';

@import '@cmsgov/design-system-core';
```
Moved the fonts and images directories to the root of packages/core, moving them out of the dist and src directories.

ds-u[-*]-justify-content*, ds-u[-*]-align-items*, and ds-u[-*]-flex-wrap* now use !importants when setting properties.
ds-display and ds-title will now drop down to the font-size of ds-h1 on small screens. This is similar to what USWDS does and saves the trouble of doing this yourself during implementation, which you'd likely need to do.
When a Vertical Nav item includes a sub-navigation menu, the user can now toggle the sub-nav by clicking anywhere on the label. Before, they had to click the arrow icon, which was pretty annoying. Below is a visual comparison of the functionality:

Before After

Fixed unexpected flexbox grid column behavior caused by the default min-width value of flexbox items being set to auto. This could result in a grid column overflowing the viewport on the x-axis, rather than resizing to fit within the viewport as you'd expect. For more context, check out this article.