Footer: Create new component

brookewp commented 2 months ago

Description

Closes: https://github.com/Automattic/vip-design-system/issues/373

We need the <Footer/> from the dashboard login page for another app. Instead of recreating it, we can make a reusable component to use in both places. It's based on new designs:

Mobile

Desktop

I thought it might be best to keep it as minimal as possible, so it's easy to use and keep consistent. We could always expose more props in the future, but it's not as easy taking them away 😅

I also considered having an option for LinkExternal vs Link but then that opens it up to having the button variants (unless we don't allow it) which would require more style changes. And since LinkExternal props can be added, the arrow and screenreader text can be customized.

Checklist

[x] This PR has good automated test coverage
[x] The storybook for the component has been updated

Steps to Test

Pull down PR
npm run dev
Open Storybook
Navigate to 'Footer' component
Ensure links work as expected, component is responsive and accessible

netlify[bot] commented 2 months ago

Deploy Preview for vip-design-system-components ready!

Name	Link
Latest commit	1f5dcce25a38dc6c49179a0c5d81dec8494681b7
Latest deploy log	https://app.netlify.com/sites/vip-design-system-components/deploys/66be24f99710dc00084e86d1
Deploy Preview	https://deploy-preview-409--vip-design-system-components.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

brookewp commented 1 month ago

@djalmaaraujo Sorry this sat for so long! Finally I've went through your requested changes. I also added an option to show/hide link underlines since we have designs with and without: https://github.com/Automattic/vip-design-system/pull/409/commits/8235d24bebf6db5e9752a1eb322da3275f25dd37

Automattic / vip-design-system