"CTA" component - Main PR

[didoo]

📌 Summary

This is a follow-up of the discussion around the introduction of a "CTA (Call To Action)" element in the design system, where we came to the decision to introduce this specific (and controversial) component as

"a link that looks exactly as a primary button"

(if it's a button that looks like a button... it's a Hds::Button)

Notice: we have not created a specific CRD (Components Requirement Document) for this component, because is mirroring existing components and would have been a bit of wasted time (we know almost everything about how this CTA component should look and work).

Why it's called "Link(To)::Cta"

Because technically is a link (and we don't want to call it Button::Cta, this would lead to even more misunderstanding.
Plus, has to follow the same approach of the Link(To)::Standalone component, to be able to differentiate internal vs. external links (this is because of how the internals of Ember work).

That said, there is a chance that the name in Figma may be slightly different (apart from the "CTA" part). Is something we have initially discussed with @heatherlarsen but we never came to a conclusion. But on the code side this is something that we strongly want to keep as is in this PR (unless we find strong reasons for having a different naming).

Differences with the Button (primary) component

Despite being very similar to the Button component, there are some important differences to take into account:

• the color argument is pre-selected as primary (it needs to stand out as "call to action")
• it doesn't have a isIconOnly option (this would go against being a "call to action")
• it doesn't have a type option (it's not a button element)
• it doesn't have the isDisabled option (links can't be disabled)
• it needs to responds to the space key when selected (being a <a> elements that resembles a button, it needs to to mimic the behaviour of a real <button> element)

🛠️ Detailed description

In this PR I have:

• added the Link::Cta and LinkTo::Cta components as add-ons
  • in doing so I have
    • re-used parts of the Link/LinkTo::Standalone and Button implementation in JS
    • completely re-used the CSS styling for the Button (primary) using directly the hds-button classes within the Link/LinkTo::CTA component
    • added a space key event listener to the component
• added the documentation page for the two new components
  • in doing so I have:
    • refactored the routing for the Link/LinkTo::Standalone components documentation, for consistency
    • added specific documentation for both the Link::CTA and LinkTo::CTA components in separate pages
      • overview
      • component API
      • usage
      • design guidelines (waiting for docs to be added to Figma)
      • showcase
    • reworked/updated the documentation pages for Link/LinkTo::Standalone and Button components to be more in sync with the Link/LinkTo::Cta ones (now they're all very similar and consistent in content and structure)
• added Percy tests for the new components
• added big alert banners as comments) on top of the files that re-use the styling of the Button component to make sure users will notice we’re using code from the “Button” component (I've used this website to generate the ASCII art)
• added integration tests for the compoents
  • in doing so I have also updated the tests for the Link/LinkTo::Standalone for consistency

Notice:

• unlike other components, this has been developed in a single branch, with a single PR (reason being that the component is very similar to other ones, so there was less iteration on it). If you think is a problem, I can break it down in smaller PRs.
• _same for the changes to the Link::Standalone and the Button documentation pages: if you prefer I can move them to another PR (the reason I didn't is that now they are all very similar, with similar content and structure, so it's easier to compare in the same preview/deploy) _

Alternative solutions

We considered the option to share the Button styling using re-usable Sass mixins (and did a spike in code too).
The button.scss file would have looked something like this:

but we concluded that it would have been too much abstraction, and the cons would have out-weighted the pros.

📸 Screenshots

🔗 External links

• [DS-031] A Call To Action (CTA) Component (RFC)

---

👀 How to review

👉 Review by files changed

Reviewer's checklist:

• +1 Percy
• Confirm that PR has a changelog update via Changesets

💬 Please consider using conventional comments when reviewing this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: 1f543c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hashicorp/design-system-components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

hds-flight-website – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-flight-website/Ht2Tp1inJPA3uhR1L2zQqcEe4KkV
✅ Preview: https://hds-flight-website-git-cta-component-link-linkto-hashicorp.vercel.app

hds-components – ./

🔍 Inspect: https://vercel.com/hashicorp/hds-components/EMJfFwZayRy6YC15YpL18YpxxFcW
✅ Preview: https://hds-components-git-cta-component-link-linkto-hashicorp.vercel.app

[didoo]

@didoo Docs look good. Only think I noticed is that this has the same padding issues as the regular button. Will the updates from #126 land here as well or will the padding have to be adjusted here manually?

Yes, it will automatically be fixed with #126 (is re-using the CSS classes from Button)

[heatherlarsen]

lgtm!

[didoo]

As discussed with @jesdavpet, we'll wait for @evankerrigan to come back from time off and review this PR too.

[evankerrigan]

@didoo & @jesdavpet: 👋 Just catching up from being off and I wanted to double-check if there was specific feedback that you were seeking from me? Not sure if I’m well-suited to offer any useful commentary on this PR’s code changes, but after reading the summary of the changes, it does sound like the proposed changes will offer us a way out of the challenges outlined here 🙌

[didoo]

@jesdavpet can you chime on this? (see @evankerrigan question above)
thanks

[didoo]

For context: the ember-keyboard addon generates a lot of deprecation warnings in the console, but I am not sure how to fix this; I have added a comment in the open issue on their repo, let's see if they reply adopted-ember-addons/ember-keyboard#194 (comment)

(not sure what would be a viable alternative, any ideas @MelSumner @hashicorp/design-systems ?)

[amyrlam]

I don't think those deprecations are a showstopper, they're somewhat "normal" in Ember as addons needs to make updates as Ember updates. I actually can't find one of the most common ones, use-destroyables on https://deprecations.emberjs.com/v3.x/ or https://deprecations.emberjs.com/v4.x/ (the search seems broken so just did a command - F on those pages). Not sure if I'm missing something? I wanted to read about it to see at which version it's not just deprecated (a warning), but no longer works (error).

Reporting it was good, I think it's just repeated cause so many instances of the component on the website.

[jesdavpet]

Catching up on the discussion on this PR, looks like @evankerrigan has approved of these changes from Cloud design's perspective.

I haven't reviewed the implementation details for this HDS component, only the documented Ember component API, which looks good to me @didoo. 👍 Nice work!