From e1ef4c01993c6357ca6dfeeb08256a04ad172d5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kater=CC=8Cina=20Dlouha=CC=81?= Date: Mon, 1 Jul 2024 12:47:27 +0200 Subject: [PATCH] Feat(web): Introduce UNSTABLE_Footer component #DS-1367 --- .../scss/components/UNSTABLE_Footer/README.md | 267 +++++ .../UNSTABLE_Footer/_UNSTABLE_Footer.scss | 23 + .../components/UNSTABLE_Footer/_theme.scss | 8 + .../components/UNSTABLE_Footer/index.html | 998 ++++++++++++++++++ .../components/UNSTABLE_Footer/index.scss | 1 + packages/web/src/scss/components/index.scss | 1 + 6 files changed, 1298 insertions(+) create mode 100644 packages/web/src/scss/components/UNSTABLE_Footer/README.md create mode 100644 packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss create mode 100644 packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss create mode 100644 packages/web/src/scss/components/UNSTABLE_Footer/index.html create mode 100644 packages/web/src/scss/components/UNSTABLE_Footer/index.scss diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/README.md b/packages/web/src/scss/components/UNSTABLE_Footer/README.md new file mode 100644 index 0000000000..ba33f21eec --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Footer/README.md @@ -0,0 +1,267 @@ +# UNSTABLE Footer + +> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. +> Please use it with caution. + +The Footer is a highly variable and customizable component. It comes in several +design variants and provides a handful of building blocks you can use to achieve +your specific design goals. + +## Composition + +This is how all supported building blocks of the Footer build up the complete +composition: + +```html + +``` + +All of these blocks are optional, so it's possible to achieve desirable composition. + +⚠ The `Footer Content` is currently under development, so it's not part of this component yet. + +## Basic Usage + +The basic usage of this component could be: + +```html + +``` + +### Columns variation + +In case you need specific number of columns for each row, you can use separated `Grid` components. +The number of columns can be set for each breakpoint separately. + +```html + +``` + +## Color Variants + +Currently, Footer comes in two color variants: **cover** (for light +backgrounds) and **inverted** (for dark backgrounds). Add `Footer--inverted` +modifier class to apply inverted background color to Footer. + +⚠️ Keep in mind that it is necessary to set all the text and link content to the suitable color variant also. + +```html + +``` diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss new file mode 100644 index 0000000000..97fd968c33 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss @@ -0,0 +1,23 @@ +@use 'sass:map'; +@use '../../tools/breakpoint'; +@use 'theme'; + +.UNSTABLE_Footer { + padding-block: theme.$padding-block; + background-color: theme.$background-color; +} + +.UNSTABLE_Footer--inverted { + background-color: theme.$background-color-inverted; +} + +.UNSTABLE_Footer__copyright { + display: flex; + flex-direction: column; + gap: theme.$gap; + justify-content: center; + + @include breakpoint.up(map.get(theme.$breakpoints, tablet)) { + flex-direction: row; + } +} diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss new file mode 100644 index 0000000000..0f8c450cf5 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss @@ -0,0 +1,8 @@ +@use 'sass:map'; +@use '@tokens' as tokens; + +$breakpoints: tokens.$breakpoints; +$background-color: tokens.$background-cover; +$background-color-inverted: tokens.$background-inverted; +$gap: tokens.$space-700; +$padding-block: tokens.$space-1100 tokens.$space-1000; diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/index.html b/packages/web/src/scss/components/UNSTABLE_Footer/index.html new file mode 100644 index 0000000000..54440a4de8 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Footer/index.html @@ -0,0 +1,998 @@ +{{#> web/layout/plain }} + +
+

Basic Usage

+ + + +
+ +
+

Extended Usage with Section Title as a Link and Nested List

+ + + +
+ +
+

Usage without Copyright Block

+ + + +
+ +
+

Usage with a lot of Blocks and Custom Grid

+ + + +
+ +
+

Inverted Color Variant

+ + + +
+ +{{/web/layout/plain }} diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/index.scss b/packages/web/src/scss/components/UNSTABLE_Footer/index.scss new file mode 100644 index 0000000000..a75550c5f7 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Footer/index.scss @@ -0,0 +1 @@ +@forward 'UNSTABLE_Footer'; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 90ecd379ba..b8f3c5582c 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -28,6 +28,7 @@ @forward 'UNSTABLE_Avatar'; @forward 'UNSTABLE_Divider'; @forward 'UNSTABLE_EmptyState'; +@forward 'UNSTABLE_Footer'; @forward 'UNSTABLE_PartnerLogo'; @forward 'UNSTABLE_ProductLogo'; @forward 'UNSTABLE_Section';