From b04f824c0fb682aad207ef0a57b386f2ddbbb89f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kate=C5=99ina=20Dlouh=C3=A1?= Date: Mon, 1 Jul 2024 12:47:27 +0200 Subject: [PATCH] Feat(web): Introduce `Footer` composition #DS-1419 --- .../web/src/scss/components/Footer/README.md | 256 +++++++++ .../web/src/scss/components/Footer/index.html | 496 ++++++++++++++++++ .../footer-chromium-linux.png | Bin 0 -> 54985 bytes .../web-chromium-linux.png | Bin 95394 -> 95082 bytes 4 files changed, 752 insertions(+) create mode 100644 packages/web/src/scss/components/Footer/README.md create mode 100644 packages/web/src/scss/components/Footer/index.html create mode 100644 tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md new file mode 100644 index 0000000000..ff6c7fb500 --- /dev/null +++ b/packages/web/src/scss/components/Footer/README.md @@ -0,0 +1,256 @@ +# Footer + +The Footer is a highly variable composition. It comes in several ready-to-use design variants, but can be customized to +achieve your specific design goals. + +## Composition + +The Footer supports several ready-to-use building blocks: + +- [Navigation Links](#navigation-links) +- [Product Logo](#product-logo) +- [Social Media Links](#social-media-links) +- [Language Switch](#language-switch) +- [Secondary Links](#secondary-links) + +This is how all supported building blocks of the Footer build up the complete composition: + +```html + +``` + +👉 Good to know: + +- To achieve the desired design, you can use the provided building blocks in any order you need. +- All building blocks are optional, so you can use only the ones you need. +- You are not limited just to the provided building blocks. You can add your own content or building blocks (such as a + newsletter subscription form) as needed. +- Use [Grid][grid] and [Flex][flex] components to create the desired layout. +- Use [Stack][stack] or [Divider][divider] components to organize individual sections. +- Use spacing utility classes like `mb-*` or `pt-*` to achieve desired spacings between components. + +## Navigation Links + +Navigation links are structured in sections with a headline and a [Stack][stack] of links. + +👉 Please note how the `