Support action buttons in UXDS

[maxatdetroit]

Part of #100

This PR

1. Creates a icon container for using icons within cards
2. Creates a higher-order element <clickable/> that causes child elements to behave as a clickable element
3. Adds funtionality to the card element to become a clickable component

Alternatives

Instead of introducing Clickable, we could have:

1. Extended or re-used the cod-button component. The main reason to avoid this approach is that some elements should not be considered buttons for accessibility (e.g. a screenreader should treat action buttons as links).
2. Built another standalone component. The main reason to avoid this approach is that we miss out on composability of components (one of the main pros of a UXDS). E.g. we can re-use <cod-clickable/> and <cod-card/> when building arpa buttons.

Testing

1. Build a couple stories that render clickable cards (styled as action buttons).
2. View them in storybook.

Note: The action buttons are not equally sized in the test but can be by placing them in a card grid (like we do on the city homepage).

3. Observe cards in storybook to make sure there are no visual regressions.

4. Run test suite

$ yarn test-storybook
...

Test Suites: 31 passed, 31 total
Tests:       157 passed, 157 total
Snapshots:   0 total
Time:        9.096 s
Ran all test suites.

[jedgar1mx]

This might cause some ADA flags since there is no valid text or description for the link.

[maxatdetroit]

Good catch @jedgar1mx , let me look at how we can better support ADA while still keeping the higher order component.

[maxatdetroit]

@jedgar1mx this approach satisfies ARIA roles and other accessibility API metadata quite well. See details below and please let me know if I missed something related to a11y, and I'll go back to correct it.

Details

role, name, action, state, and value are all appropriately set for the action button example presented in the test plan. Here's a snapshot of the accessibility tree using Firefox Accessibility Inspector:

{
    "name": "Do Something Like click on this card.",
    "role": "link",
    "actions": [
        "Jump"
    ],
    "value": "https://example.com/",
    "nodeCssSelector": ".btn",
    "nodeType": 1,
    "description": "",
    "keyboardShortcut": "",
    "childCount": 1,
    "indexInParent": 0,
    "states": [
        "focusable",
        "linked",
        "traversed",
        "opaque",
        "enabled",
        "sensitive"
    ]
}

Note: The icons used in the action button are missing titles, but that should be address in a separate PR (a fix put up to set alt for <cod-icon> SVGs).

[maxatdetroit]

@jedgar1mx merge conflicts are resolved here and ready for review.

[jedgar1mx]

Is CardIconContainer a necessary component? It seems that we could just add the Icon on the CardHeader or CardBody as just part of the mark up.

[maxatdetroit]

Probably not necessary to have a separate component for CardIconContainer. It was originally intended to encapsulate the styles, but after a few iterations, the styles went down to one line (the top margin above the icon) so let me go ahead and inline the icon as markup in the header/body.