Better support for no JS in design system

[maxatdetroit]

Describe the bug

When complex web components are used from the design system, and Javascript is disabled, those web components continue to partially render to the screen. For example, consider the following usage of <cod-card>.

<cod-card data-id="1234" data-width="18em" data-extra-classes="test-bg-primary">
  <div class="card no-wc" style="width: 18em;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      This is some test text to place into the card. We'll include a <a href="https://example.com/">hyperlink</a> to test rich editor formatting.
      <a href="..." class="btn btn-primary">Visit DDOT</a>
    </div>
  </div>
  <img src="{{ media_url }}" class="card-img-top w-100" alt="{{ media_alt }}">
  <cod-card-body>
      This is some test text to place into the card. We'll include a <a href="https://example.com/">hyperlink</a> to test rich editor formatting.
      <cod-button data-primary="true" data-disable="false" data-label="Visit DDOT"
        data-background-color="secondary" data-img="" data-img-alt="" data-icon="checkmark"
        data-icon-order="" data-icon-size="small" data-shape="fluid" data-aria-label=""
        data-link="...">
      </cod-button>
  </cod-card-body>
</cod-card>

Notice how the second instance of the card does not include the button, effectively making it non-functional.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple HTML file with the example card component used and the design system included as a dependency
2. Disable Javascript (e.g. go to about:config in Firefox and search for javascript.enabled and set to false).
3. Load the simple HTML file in the browser
4. See referenced issue above

Expected behavior

Only the HTML elements with no-wc class should be rendered on the page.

Proposed Solution

Use <noscript> and display: none; to hide all web components when Javascript is disabled.

More specifically:

1. Add the class wc to all web components.
2. Update all web components to create two named <slot>s wc and no-wc that will house the web component and non-web component alternative respectively. Note: This is needed so that step 3 does not hide the non-web component elements as well.
3. Set <noscript> with <style> .wc {display: none;} </style> in the design system head. E.g. this stack overflow answer. Thus, when javascript is disabled all web components will be hidden from display (also for screen readers).

Alternatives Considered

Frankly, I haven't come up with any alternatives that work well for the example above.

[maxatdetroit]

@jedgar1mx this is the proposal for supporting disabled JS in the design system. Let me know what you think.