SHS-5872: Implementation light accordion bg and tables

[mariannuar]

READY FOR REVIEW

Summary

New implementation to light accordion in Colorful and fix table

Need Review By (Date)

10/09

Urgency

medium

Steps to Test

1. Go to https://hs-colorful-0nw8b62tacchew4wasu5nelijddayriq.tugboatqa.com/accordions/accordions-light
2. When open, verify the Light Accordion now has a border around the content and also the background it's white. Check the design
3. Please, verify the rest of Accordions with a table and confirm that the table it's not wider than the container anymore. Test this in Traditional too.

PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

---

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

[cienvaras]

@mariannuar Colors look good, there's just a change needed on the table overflow fix. Let me know if you have any questions.

[cienvaras]

The overflow-x: auto on the table wrapper is intentional, I'm pretty sure it's there to make the table readable in all resolutions. I'll check with Tori if that's something they want to keep, but for now let's remove this change to keep the overflow auto.

Also, width: auto on the table could make small tables to shrink.

There's a bug that needs to be fixed though. Right now some tables have a scrollbar even when it's not needed, because they have a 100% width but the box-sizing is set to content-box. This makes the border not being included in the 100% and causing the table to always overflows by 2px.

To fix it, let change the box-sizing for the table element:

.hb-table-pattern {
  // ...
  box-sizing: border-box;
}

Let's fix this globally in docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.table-pattern.scss.

[mariannuar]

@cienvaras Got it. Thanks for the feedback! Just a heads up that I added that box-sizing to the hb-table-wrap class instead of hb-table-pattern because, there are scenarios that the table can be in a wysiwyg (see example in the first Accordion with a course table. There are two kind of tables there. This is ready for review again!

[cienvaras]

@mariannuar Looks great, thanks!

@ahughes3 Ready for your review.