1.0.0-alpha.5

Documentation 👉

🚀 Added

• New React components
  • <Alert>
  • <Button>
  • <Choice>
  • <FormLabel>
  • <Select>
• Example React project, showing how to incorporate the design system into a build process (Using Webpack and Gulp).

Important: Since these components extend React.PureComponent, your project needs to have a React version of 15.3 or higher.

🚨 Breaking changes

• Renamed ds-c-dropdown to ds-c-select, since this is applied to a <select> element, and now also the <Select> React component. There were no visual changes.
• The default button component style is now with an outline. You no longer need to apply the ds-c-button--outline modifier class to achieve this style. A new ds-c-button--transparent modifier class has been added, which changes the button style to look more like an anchor element (no outline or background).

  • 

• The label component (ds-c-label) will no longer have a margin-top value when it's the first-child of a fieldset. The fieldset component (ds-c-fieldset) will now control the top margin, which resolves an issue with WebKit ignoring the margin-top property when applied to a legend element. This is being considered a breaking change since the margin is now applied to a different element and may introduce an unintended visual change if you had previously overwritten the label's margin or were relying on the previously broken behavior.

💅 Changes

• Removed negative letter-spacing from base typography

  • 

🛠 Fixed

• Fixed checkbox/radio button's vertical alignment
• Center text on anchor buttons

1.0.0-alpha.4

🚀 Added

• Responsive utility prefixes! View the new "Responsive design" page of the documentation to learn more.

  • 

• US Web Design Standard - Vertical navigation component:

  • 

• A .ds-h6 base typography class:

  • 

• A .ds-u-font-size--h4 utility class

  • 

• The design system's version # is now included in a CSS comment at the top of the transpiled CSS file.

🚨Breaking changes

• Renamed ds-title to ds-display and renamed ds-title--alt to ds-title to be more consistent with the font-size utility class names. Sorry 😬

💅 Changes

• Update styling of radio/checkbox fields. Before/After:

  • 

• Adjusted the type scale. Before/After:

  • 

🛠 Fixed

• Added border-collapse to the Table component so the borders were 1px as intended.

  • 

📝 Documentation

• Added a "Getting started" and "Core concepts" page
• Added "Further reading" sections
• Rendering as static HTML pages

1.0.0-alpha.3

1.0.0-alpha.3 Documentation 👉

🛠 Fixed

• Fixed the @font-face URLs in the transpiled CSS.

📝 Documentation

• Added an examples directory to the repo with basic examples of the design system in use.

1.0.0-alpha.2

1.0.0-alpha.2 Documentation 👉

🚀 Added

• CSS components and typography styles from the US Web Design Standards. Specifically:
  • input, textarea = ds-c-field
  • select = ds-c-field ds-c-field--dropdown
  • radio, checkbox = ds-c-choice
  • button, ds-c-button
  • Alert/Notification = ds-c-alert
  • Typography
• ds-base--inverse base class which applies an "inverse" background and text color
• ds-u-border--0 utility class for removing an element's default border
• Yeoman generator (yarn run generate) for creating a component's initial files

Note: If you plan to use the Sass files, you'll want to be sure to copy the src/images directory and ensure the $image-path Sass variable points to wherever your project's images directory is.

🚨Breaking changes

• The accessible-outline mixin (_mixins.outline) has been removed
• The px function (functions.px) has been removed

📝 Documentation

• Details and usage instructions are now collapsed by default so the code snippets don't get pushed so far down the page. This is a temporary solution until the docs get some lovin'.
• Now link to a component's USWDS companion page

1.0.0-alpha.1

🚀 Added

• Utility classes! A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element. We can begin using utility classes to prototype possible components. Once we've identified what these components are, we can then roll them into the design system using more succinct names. This is just a first pass and I'm very open to feedback, especially on the naming convention. I'm currently favoring clarity over succinctness. This means the design system may be verbose, but it should deliver clarity and resilience in exchange. The styling of these utility classes will likely also evolve as we continue pushing on the design front.
• A new base CSS layer. You can apply the ds-base class to the <body> or parent element to apply a base layer of styling (color, font-family, font-size, line-height). Let me know if you have feedback or more ideas on how we can apply base HTML styles while still allowing the design system to be effectively implemented into existing codebases.

🚨Breaking changes

• The namespace changed from hc- to ds- to align closer with CMS.gov as a whole, rather than being tied to just HealthCare.gov. No promises that this will be the last time this changes 😬
• The package is now published to the cmsgov NPM account rather than Nava's. If you previously installed the package, you'll want to update the package name since it's now @cmsgov/design-system-core.

📝 Documentation

• Still lots of work to be done, but there's now a bit more organization applied to the documentation.
• Code snippets can now be hidden using the @hide-markup KSS flag
• A new @status KSS flag allows us to mark components as Prototype/Alpha/Beta/etc
• Published online so anyone can now read it without generating it locally. Temporarily hosted on S3 until we get GitHub pages working.
• KSS markup comments can now use EJS to generate more complex examples.

0.0.2

Fixed: Now including the compiled CSS and excluding development files.

0.0.1

A proof of concept for the design system. This code isn't ready for usage, so don't even think about it.