Create .gov banner component

[maxatdetroit]

.gov Banner Component

The goal of this task is to create a new .gov banner component in the stable build of the design system.

Mockups

The full mockups can be viewed in Figma: https://www.figma.com/design/1eNREu4goozzabiuUhXvpS/detroitmi.gov-redesign?node-id=35-2393&t=FgpYMyZiFD6ry3yt-1

Mobile

Desktop

Functionality

When someone clicks the down chevron, the banner should expand and show the following content:

Requirements

• The width of the component (and component contents) should scale with the parent container
  • Note: The text container on the right side of the banner should allow the text to break onto a newline if the component width is decreased enough.
• Follow the best practices for attributes and slots described in Update component API to adhere to HTML standard microsyntaxes #201 , Simplify attribute naming conventions #202 , and Migrate to named slots with basic markup where possible #205

[sreidthomas]

@maxatdetroit

How am I supposed to add the stylesheets?

[maxatdetroit]

@sreidthomas , you can use the template literal approach in your screenshot or you can use the DOM manipulation approach like the existing experimental components:

import styles from '!!raw-loader!./AccordionBody.css';
import varStyles from '!!raw-loader!../../../../shared/variables.css';
import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrap.css';

const template = document.createElement('template');

template.innerHTML = `
<div></div>
`;

export default class AccordionBody extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
    // Create a shadow root
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
    ...

    // Add styles
    const bootStyles = document.createElement('style');
    bootStyles.textContent = bootstrapStyles;
    const variableStyles = document.createElement('style');
    variableStyles.textContent = varStyles;
    const itemStyles = document.createElement('style');
    itemStyles.textContent = styles;
    shadow.appendChild(bootStyles);
    shadow.appendChild(variableStyles);
    shadow.appendChild(itemStyles);
  }

It's up to you. The outcome is the same and the performance difference is likely negligible. Whatever you decide, just be consistent with future components and I'll follow your lead. I like your template literal approach because it saves some lines of code and is more read-able in my opinion.

You can read #171 for an idea of what we'll want to do further down the road that may have a big impact on performance.