Create action button component

[maxatdetroit]

Context

See context in #100.

This PR

• Create a new component for action button
• Create story for action button with various args
• Remove story for cod-clickable component since it is for internal use only

Testing

Test new story with various args:

Check chromatic for no regression of other components

[jedgar1mx]

Also, it would be good to take into account how they interact as a group since that's usually how they are implemented.

[jedgar1mx]

It might be better to setup the component using slots rather than attributes. It will probably make the implementation easier. The body field on drupal will export mark up.

[maxatdetroit]

@jedgar1mx , I intentionally used an attribute here because that will force users of the button to not try and shove too much inside the button. These buttons aren't really designed to have rich, formatted content inside. The 'body' is meant to be a simple sentence or few words.

With that in mind, let me know if you still think slots is a better approach here.

[jedgar1mx]

Using slot for the body field is probably a better approach to accommodate the old content.

[maxatdetroit]

@jedgar1mx I fixed the multi-button layout issue.

I also went ahead and scrapped the idea of the Clickable component. I think a sound approach for deciding whether to nested components is the following:

• When to build from vanilla HTML, CSS, bootstrap:
  • When building a standalone, reusable component. E.g. a button.
• When to compose components:
  • When building a reusable interface where the nested component styles are independent. E.g. a button group or customizable form with some validation logic.
  • Out of necessity when UXDS users must slot in rich markup. E.g. card body is nested within a card. Note: Even here I think there is a case to remove internal components like card body or table body and have the user use named slots instead of a custom nested component.

The reason for this shift in mindset: it's overly cumbersome and also fragile to have components control one another's styles. Components that are reused often will quickly devolve into unmaintainable style sheets. Also, composing components that control each other's styles seems like an anti-pattern with shadow DOM style encapsulation.

[maxatdetroit]

Moved this back to draft while I:

• Make the body slottable
• Fix alignment of content when in grid layout

[maxatdetroit]

@jedgar1mx full markup is now supported in the body (added a story for demo), also fixed the alignment in grid layouts.

Ready to review.