Add ui-component for Action Block component

[akegan]

DAHLIA Jira ticket
DAHLIA Jira ticket

Goal

As a user I want to see high value actions treated with emphasis

Properties

Property	Description	Variants	Required
Heading	component heading	h2 (default), possibly add prop to change tag	Yes
Heading Size	heading text size	1.25 rem (default) or 2rem	No
Action	button	single (default) or multiple actions , possibly add ability to add button styles to designate hierarchy	No
Icon	png or svg icon, should have alt tag or title for accessibility	Boolean	No
Layout	alignment	block, stacks and centers elements (default), has additional vertical padding, inline, layout out elements horizontally	No
Background	background color	none (default), primary-lighter, or primary darker (see if we can use tailwind dark mode for this)	No

Mockups
Action Block
Action Block, Inline variant

Context

Use Case 1
At the end of our directory pages, we use this component to direct people to sign up for our mailing list.

Mobile:
Desktop:

Is this a component that bloom would be interested in? Any preferences around implementation?

Use Case 2
On our rental and sale directories, we have a banner right after active listings to help direct users to other opportunities for affordable listings. We use a variation with one button for rentals, and one with two buttons for sales.

Single button desktop:

Single button mobile:

Two button desktop:

Two button mobile:

Our acceptance criteria:

• Component is created and matches styling from angular
• Component has an option of 1 or 2 buttons, with text size that varies based on that fact
• The components are responsive and work for mobile screens.

Is this a component that your team would be interested in? Any thoughts or preferences on how to implement it?

[slowbot]

@akegan

We are interested in implementing this component.

• Icon should be customizable
• Should support one or more buttons
• Should have a light and dark (inverted) version

@seanmalbert I can generate some mockups for this

[slowbot]

@akegan Moved story details here @software-project

[akegan]

@slowbot, 2 questions:

1. In our component, we have the text slightly bigger for the single button case to give it a bit of a nicer scale, is that something that you'd be up for?
2. With these cases, you have the same text on the buttons, but ideally we want the 2 buttons to have the same width even if the text in the buttons is different, can you add some details about the width of the buttons and how they should behave? Edit: I just checked DAHLIA and actually the buttons are not the same width!
   

[slowbot]

@akegan We can handle that with a variant. "Heading size"

[akegan]

Closing because this was implemented a while ago. Follow-up to fix a bug is in #2171

[emilyjablonski]

Component implemented