Skip to content

Resolve #3479492 "Case study ctas"

Closes #3479492

Description

  • Completely overhaul button template and styling.
  • Separate cta button-styled links from buttons, and put them in their own component.
  • Update form styling for buttons, and fix a couple small form style bugs.
  • Update components with new button/link components: Case Study/Slideshow, Card list: comparison and feature both, CTA-Section, Hero section, Header section (I only updated the variable values, the to-do item to make that button dynamic needs its own ticket.)
  • Fix the Case Study and CTA section components so their CTA link titles and urls are no longer hard-coded.
  • Update Storybook:
    • Add a story for the link component
    • Redo the buttons story with new styles.
    • Add a primary button class to the forms story submit.
    • add autodocs to link, button and form stories so they have preview doc pages.
  • Fixes some issues with icon style rules.

Testing steps:

  • checkout drupalorg to https://gitlab.com/drupal-infrastructure/sites/drupalorg/-/merge_requests/59 and import the config changes.

  • spin up the site.

    • If you want to use the latest incarnation of the mother node:
    • cd web/modules/contrib/drupalorg
    • git checkout 3477134-mothernode-update
  • Create each of the components that have changes in this MR (mentioned above). Try to break stuff. Make sure that the buttons are rendering correctly in accordance with the new button styles.

    • Verify that the cta field style options work correctly and that there are no options listed that shouldn't be. (We want primary, secondary, link, and default. We don't offer danger styles for ctas.)
  • Visit the user log in and contribution related pages and verify that the button styles are good to go

  • Look over Storybook and verify that everything is rendering correctly: especially links, buttons, forms, and the above-mentioned page components' ctas.

  • Examine the css for accidental redundancy, particularly in buttons.css

Open Questions/Comments:

  • The button and link components are nearly identical. They could easily be combined back into one with something like an element property to determine whether to render a button or link. I can do that for sure, if others agree, but I wanted to just get this into review.
Edited by jayme johnson

Merge request reports

Loading