Experiment-driven Update: Quicklinks in header

[john-rock]

What are you changing in this pull request and why?

This pull request adds support for dynamic CTAs in the Guides hero component, extending functionality introduced during this experiment experiment.

The updated component allows either CTAs that are added to include a link or (in the case of the experiment) an on click event. For this version the on click applies a filter to the guides in the same manner as the experiment.

Key Changes:

• CTA title can now be set in the Hero.
• CTAs can now be added to the Hero and support two actions:
  • Linking: Direct users to a URL.
  • On-Click Events: Trigger JavaScript functions, such as applying a filter to the guides list (as done in the experiment).
• The filtering behavior has been aligned with the experimental version to ensure consistency in user interaction.

Preview Link

https://docs-getdbt-com-git-experiment-apply-quicklink-hero-dbt-labs.vercel.app/guides

How to Use the Updated Guides Hero Component

To use the new CTA functionality, follow these steps:

1. Locate the heroCTAs Array:

   • In the quickstartGuideList/index.js file, you will find a heroCTAs array.
   • This array consists of objects, each containing two properties:
     • title: This will be the displayed text of the CTA.
     • value: This corresponds to the URL query parameter that will be appended when the CTA is clicked, applying the filter.

2. Ensure Proper value Mapping:

   • The value property must match an existing tag in the Topic dropdown for the filter to work correctly.
   • When a CTA is clicked, the value is passed as a query parameter, filtering the guides in the same way as manually selecting the topic from the filter dropdown.

Example using onClick:

const heroCTAs = [
  {
    title: 'Quickstart Guides',
    value: 'Quickstart' // Must match a tag in the Topic dropdown
  },
  {
    title: 'Use Jinja to improve your SQL code',
    value: 'Jinja' // Must match a tag in the Topic dropdown
  }
];

Example using href:

const heroCTAs = [
    {
      title: 'Sign up for dbt Cloud',
      href: 'https://www.getdbt.com/signup',
      newTab: true
    }
];

Why this change?

This update enhances the flexibility of the Guides hero component, allowing for more interactive CTAs that either navigate users to external pages or trigger in-page filtering, improving the overall UX based on lessons learned from the experiment.

Before merging

• Confirm if we are launching with the buttons set in this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs-getdbt-com	✅ Ready (Inspect)	Visit Preview	Oct 18, 2024 5:20pm

[john-rock]

Hi @runleonarun 👋

Quick question for you – this PR implements the values we used in the previous experiment that added the ability to filter via buttons in the Guides page hero. Since we’re not currently running that experiment, would you prefer I:

1. Merge this PR without any CTAs in the hero, or
2. Merge it with the current CTAs that are already set in the hero?

Let me know which you prefer!

[JKarlavige]

Really digging this feature! Just have one note on how URLs should be handled when trying to link to from the CTAs

[JKarlavige]

lgtm!! 🚢

[mirnawong1]

sugg sentence case

Suggested change

	title: 'Quickstart Guides',
	title: 'Quickstart guides',

[mirnawong1]

lgtm!