Create service button component

[maxatdetroit]

Service Button Component

The goal of this task is to create a new service button 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

Note: Default state on the left, hover state on the right.

Mobile

Desktop

Requirements

• Minimum width of the component should be 340px.
• Transition between hover states should be a 200ms ease-in-out transition.
• The spirit SVG in the hovered state is here:
• The title and subtitle of the button should be slotted elements, however they need to be tightly controlled. We don't want the user of the service button to dictate the parent element of the title and subtitle. To accomplish this, we should use the slotchange event to strip away any HTML tags the user may have placed in the slot and just take the text content. E.g.: https://gist.github.com/maxatdetroit/f8fd9a0f78c732a043812d4ce9189601
• 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

[maxatdetroit]

@SBBlee here's a good first issue for creating a component in the design system.

Check out what @sreidthomas is doing in #279 (PR: #280) and #277 (PR: #282) to get an idea for what code is required to create a component, the best practices I recommend in the comments, and see what is applicable for this component you're working on here.

[maxatdetroit]

Actually @SBBlee , would you start with #285 first?

[maxatdetroit]

@SBBlee I assigned this to @sreidthomas because it doesn't have any dependencies. #286 and #287 depend on your current issue (#285) and they're ready for you to pick up once you finish the current issue.