Feature/2162 & 2177 app header - privacy portal components + app header to trigger fly out menu

[vanessatran-ddi]

Before (the change)

If we want to have the look for those below 5 components:

• Accordion
• Button
• Callout
• Container
• Table
• SideMenuGroup
  Like this figma design: https://www.figma.com/design/NRFUYjCwVoI9qMbFEG6s7J/Component-tokens?node-id=0-1&node-type=canvas&m=dev

It is impossible to override CSS right now, and if we override --goa-text-default-color for example, we will affect other components.
This pull request is to add more specific design token variable names for those above 5 components, at the same time assigning values for those adding tokens, so it won't affect our components, but at the same time, allow other teams (specifically Privacy Portal Team) to override variable design token CSS (For example: https://github.com/vanessatran-ddi/latest-react-demo/blob/privacy-portal-components/src/override.css)

After (the change)

They can change the CSS variable token values on their app, example: https://vanessatran-ddi.github.io/latest-react-demo/

Make sure that you've checked the boxes below before you submit the PR

• I have read and followed the setup steps
• I have created necessary unit tests
• I have tested the functionality in both React and Angular.

Steps needed to test

The below is how we can test: @lizhuomeng71 :

Step 1: Build the project: npm run build:all

Step 2: Check The 6 above components to see if their looks are different with existing components. We don't want to have anything different.
(You can check with ui-component-docs by npm link)

Accordion:

New attribute:

• iconPosition
  

Button: (remain same)

Callout: (style remains the same but has a new attribute iconTheme)

Container (remains the same)

Side Menu Group (remains the same with a new attribute icon)

(notice: for padding issue it has a PR GovAlta/design-tokens#54 to fix)

AppHeader (styles remain the same)

If onMenuClick function is passed, then when it is on Tablet/Mobile, clicking the burger menu won't show up the AppHeaderMenu, but trigger the function handleMenuClick

[lizhuomeng71]

https://jam.dev/c/e1428fa0-38ed-463c-b228-92416f4ecb66

I noticed something for the button font size is different with this PR, please see above jaber

[tzuge]

🎉 This PR is included in version 1.17.0-alpha.117 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 5.0.0-alpha.11 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 1.28.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 5.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tzuge]

🎉 This PR is included in version 3.0.0-alpha.9 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀