From 210823aed6402ab93ff8e4ea1f023d332417afc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kate=C5=99ina=20Dlouh=C3=A1?= Date: Tue, 16 Jul 2024 15:02:16 +0200 Subject: [PATCH] fixup! Feat(web): Introduce UNSTABLE_Footer component #DS-1367 --- .../scss/components/UNSTABLE_Footer/README.md | 312 ++-- .../UNSTABLE_Footer/_UNSTABLE_Footer.scss | 3 +- .../components/UNSTABLE_Footer/_theme.scss | 2 +- .../components/UNSTABLE_Footer/index.html | 1333 +++++++++-------- 4 files changed, 821 insertions(+), 829 deletions(-) diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/README.md b/packages/web/src/scss/components/UNSTABLE_Footer/README.md index 5c97cee6fd..db66c19f21 100644 --- a/packages/web/src/scss/components/UNSTABLE_Footer/README.md +++ b/packages/web/src/scss/components/UNSTABLE_Footer/README.md @@ -23,8 +23,9 @@ composition: 👉 Please, keep in mind that: - to achieve the desired design, you can use the provided building blocks in any order you need, -- the `Footer Content` is currently under development, so it's not part of this component yet, -- to achieve the offset between columns and the rest of the Footer, please use spacing utility classes like `mb-*` or `pt-*`. +- in case you need dividers between section, use the `UNSTABLE_Divider` component, +- to achieve the offset between columns and the rest of the Footer, please use spacing utility classes like `mb-*` or `pt-*`, +- the `Footer Content` is currently under development, so it's not part of this component yet. ## Basic Usage @@ -33,172 +34,163 @@ The basic usage of this component could be: ```html ``` -### Columns variation +### Footer 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. +In case you need a specific number of columns for each row in the Footer Columns section with links, +you can use separated `Grid` components. The number of columns can be set for each breakpoint separately. ```html @@ -208,7 +200,7 @@ The number of columns can be set for each breakpoint separately. 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. +modifier class to apply an inverted background color to the Footer. ⚠️ Keep in mind that it is necessary to set all the text and link content to the suitable color variant also. @@ -222,7 +214,7 @@ modifier class to apply inverted background color to Footer. diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss index e1d4bd45ae..b8398541f2 100644 --- a/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss +++ b/packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use '../../tools/breakpoint'; @use 'theme'; @@ -18,7 +17,7 @@ justify-content: center; list-style: none; - @include breakpoint.up(map.get(theme.$breakpoints, tablet)) { + @include breakpoint.up(theme.$breakpoint) { 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 index 0f8c450cf5..68b6dfceca 100644 --- a/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss +++ b/packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use '@tokens' as tokens; -$breakpoints: tokens.$breakpoints; +$breakpoint: map.get(tokens.$breakpoints, tablet); $background-color: tokens.$background-cover; $background-color-inverted: tokens.$background-inverted; $gap: tokens.$space-700; diff --git a/packages/web/src/scss/components/UNSTABLE_Footer/index.html b/packages/web/src/scss/components/UNSTABLE_Footer/index.html index fa3970764f..c1fa78e5f6 100644 --- a/packages/web/src/scss/components/UNSTABLE_Footer/index.html +++ b/packages/web/src/scss/components/UNSTABLE_Footer/index.html @@ -2,217 +2,303 @@

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

- - + + + +
+ +
+

Inverted Color Variant

+
+ + +
{{/web/layout/plain }}