Create new action buttons for redesign

[maxatdetroit]

Describe the solution you'd like

As part of a redesign of detroitmi.gov, we'll be creating new action buttons.

This issue is to build a new component in the design system for the new action button.

The button should accept the following attributes:

1. icon the name of the icon to be used on the button
2. primary-text the text to be used in the primary style (i.e. the bold text)
3. secondary-text the text to be used in the secondary style (i.e. the thin text)

The button should look like this:

Oftentimes, the buttons will be laid out in a grid so we have to make sure that layout looks good and the buttons are consistently sized and primary text is aligned.

Additional context

@bankovic and I still need to discuss how these are styled on hover. Also, this will supersede (at least partially) #100 .

[maxatdetroit]

@sreidthomas the button built in this PR is very similar to how we're going to want to implement this button: #158

The only difference is that we do not need to use a slot in the template for the primary and secondary text. Instead, we can use an attribute to pass those text fields.

[maxatdetroit]

cc @jedgar1mx - I recommended here that we use attr instead of slots for the body text of the buttons. There are a few benefits to this:

• Since these buttons are going to be smaller, rich markup inside may not be a good idea
• We're going to have to migrate the data from current action buttons when we update the styles to do things like migrate the font-awesome icons to the design system. So backwards compatibility with the current rich markup "body" field isn't absolutely necessary; we can migrate the body field to a simple text field.

EDIT: As discussed in standup, we'll move toward named slots for easier customization and styling in the future instead of using attributes for content or using nested custom elements. So we'll use two names slots for the 'title' and 'body' of the button.

[maxatdetroit]

@sreidthomas for creating the circle beneath the icon, we're going to want to edit the icon component. In that component, we should add a boolean attribute named something like highlight which will add the circle if the attribute is present.

To implement the circle, we could take two possible approaches:

1. Using positioning and z-index:

• The idea here is to add the ellipse image as an element in the HTML, then use relative position and z-index to position the ellipse beneath the icon.

2. Using background-image:

• The idea here is to leave the icon element HTML as is, then use CSS to create a background image containing the ellipse. We'd also have to use background position to make sure it gets positioned correctly beneath the icon.

Here's an SVG of the circle you can use:

[sreidthomas]

Adding circle beneath the icon

1. Edit the icon component located in COD-Design-System/src/components/atoms/icon/Icon.js

• Add a boolean attribute named 'highlight' (This adds the circle if it is present)

2. Implement the circle

Approach 1: Use positioning and z-index

• Add the ellipse image as an element in the HTML
• Use relative position & z-index to position the ellipse beneath the icon

Approach 2: Using background-image

• Leave icon HTML element as is then use CSS to create a background-image property containing the ellipse
• Add a container around the icon(because the image is way larger than the icon) -> may need another inner container like a div so it get displayed as a block element
• Use background position to make sure it gets positioned correctly beneath the icon

[sreidthomas]

I am going to read over the documents you linked for Approach 1 but so far Approach 2 seems like it fits my skillset for now @maxatdetroit

[bankovic]

2. For background-image approach: the image is way larger than the icon, so it will need its own container around the icon.

As far as button :hover effect, how about we have a (invisible) white border that turns light green. I'm using white border to avoid jumping button effect. However, light green bottom-border approach I meant to use on small screens only. It would be cool to animate the border to slowly encircle the button (I'll look for the example).

[sreidthomas]

Understanding Boolean Attributes

• The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. Because of this values like "true" and "false" are not allowed

• If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace. When an attribute's value is compared, it's done in a way that ignores the case of the letters. For example, "Checked", "checked", and "CHECKED" would all be considered the same when comparing for a boolean attribute.

• What is Canonical?: refers to the standard or official name of the attribute. For example, the canonical name for the checked attribute is "checked".

[sreidthomas]

2. For background-image approach: the image is way larger than the icon, so it will need its own container around the icon.

As far as button :hover effect, how about we have a (invisible) white border that turns light green. I'm using white border to avoid jumping button effect. However, light green bottom-border approach I meant to use on small screens only. It would be cool to animate the border to slowly encircle the button (I'll look for the example).

The Icon already has a container doesn't it @maxatdetroit:

const iconContainer = document.createElement('span');
iconContainer.innerHTML = this.getIcon(icon, size);
this.shadowRoot.appendChild(iconContainer);

[maxatdetroit]

Yes, we can try reusing the span container. It may not behave exactly like you want it though so you may need another inner container like a div so it get displayed as a block element.

[maxatdetroit]

This was completed in #167