Update component API to adhere to HTML standard microsyntaxes

[maxatdetroit]

Is your feature request related to a problem? Please describe.

We have some components that handle attribute values in non-standard ways.

For example, our <cod-button> component has data-disable which expects boolean value of true or false but should really conform to the HTML standard of boolean attributes.

Describe the solution you'd like

Generally speaking, we should update our component APIs to adhere to all HTML standard microsyntaxes. Specifically, the following microstandards are relevant to our components:

• boolean attributes
• colors
  • Note: We can also allow colors to be specified using the bootstrap color theme name (e.g. success, danger, primary, secondary, etc.)
• space separated tokens
• comma separated tokens

Also, unless the attribute is a boolean attribute, the component should treat attribute="undefined" or attribute="" the same as omitting the attribute entirely. In Storybook stories, we should prefer omitting the attribute entirely if the storybook control is not set.

This issue is to go through all components and update each attribute that resembles these microsyntaxes to adhere to the standard.

Work breakdown

It'll help us avoid merge conflicts if we break down the work this way per component. Components are distributed in this spreadsheet: https://is.gd/ETzUCF.