SHS-6045: Implement vertical buttons with long text

[mariannuar]

Summary

Update the space between 4 columns and the padding for vertical buttons cards with long text

Need Review By (Date)

02/26

Urgency

medium'

Steps to Test

1. Go to the following pages in Colorful:

• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-cards
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-cards
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-cards/vertical-cards-raised-cards
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-cards/vertical-cards-raised-cards-uniform
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-cards/vertical-cards-well-width
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-linked-cards
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-linked-cards/vertical-linked-cards-uniform
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-linked-cards/vertical-linked-cards-well-width
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-button-cards-0/vertical-button-cards-well
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-postcards/vertical-button-cards-0/vertical-button-cards-0

2. Confirm there's a space of 32px only between the columns of 4 and there's also an internal padding of 18px in vertical linked cards, and vertical cards and vertical button cards with raised cards.
3. Now go to the following pages

• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collections-cards-well
• https://hs-colorful-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections/collection-text-areas

4. And confirm the only change there is the space between columns of 4
5. Go to the equivalent pages in Traditional:

• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-cards
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-cards/vertical-cards-raised-cards
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-cards/vertical-cards-raised-cards-uniform
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-cards/vertical-cards-well-width
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-linked-cards
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-linked-cards/vertical-linked-cards-uniform
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-linked-cards/vertical-linked-cards-well
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-button-cards
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-button-cards/vertical-button-cards-uniform
• https://hs-traditional-9bmpyp722t5tefxppkl53mfo4jb4hfwl.tugboatqa.com/components/collections-0/collections-postcards/vertical-button-cards/vertical-button-cards-well

6. Confirm nothing there has changed
7. Finally, edit a collection
8. Then for the "Items Per Row" field, confirm you can see the help text: For best results, only use "4 Per Row" with short content or if there's no sidebar.

Review Tasks

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Are PHP functions and variables in snake_case and not camelCase?
• Does Drupal code follow Drupal Coding Standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided?

Code security

• Is all user input properly sanitized when rendered?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1209500604648205

[cienvaras]

@mariannuar Looks pretty good! I just found an issue in the Vertical button cards when an image is present:

Problem only happens in the 4 column collection, so probably related to the spacing changes.

[mariannuar]

@cienvaras Ready for review again!

[cienvaras]

@mariannuar LGTM!

@ahughes3 Ready for you. Still waiting for tugboat to be fixed, I'll let you know as soon as it's ready.

[ahughes3]

approved!