Resolve #3479492 "Case study ctas"
Closes #3479492
Description
- Completely overhaul button template and styling.
- gui-buttons have been replaced with primary button styling in accordance with the new designs
- 'unstyled' is now 'link'
- 'outline' has been replaced by 'secondary'
- 'default' is now light blue with navy text.
- all new colors and behaviors can be found here: https://www.figma.com/design/tKYim76bnDZAyWubUi3sVv/New-Drupal-Brand---Drupal.org-Design?node-id=6987-4487&node-type=frame&t=wxBjzCEOLNA3l6is-0
- 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