ServiceButton Component Creation

[sreidthomas]

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.
• use the slotchange event to strip away any HTML tags the user may have placed in the slot and just take the text content.

---

BUTTON WITHOUT HOVER:

BUTTON WITH HOVER:

ADD TESTS FOR COMPONENT

• Test for title and subtitle:
  Verify that the title text is rendered correctly
  Verify that the subtitle text is rendered correctly
• Test for hover:
  Verify that the button changes color on hover
  Check that the overlay effect appears on hover
• [ ]Test for hover with SVG:
  Verify that the SVG appears on hover
  Check that the SVG is positioned correctly (bottom right)

TEST RESULTS:

[maxatdetroit]

This is definitely on the right track. We're going to have to think about how to handle accessibility requirements (e.g. aria attributes) inside the component, so feel free to think about that yourself as you're revising this PR. I'll also review for accessibility when I come back on the next PR review.

[sreidthomas]

I kept having issues with the other 2 tests I had. Do you have any test ideas? I was trying mock click, which kept clicking the button and sending it to the dummy link whenever I opened Storybook. And the other was check for something other than span it kept changing the layout of the component: @maxatdetroit

[maxatdetroit]

This is pretty close to done but needs a few tweaks.