Skip to content

Commit

Permalink
fixup! Feat(web): Introduce UNSTABLE_Footer component #DS-1367
Browse files Browse the repository at this point in the history
  • Loading branch information
dlouhak committed Jul 16, 2024
1 parent 5db01a5 commit 210823a
Show file tree
Hide file tree
Showing 4 changed files with 821 additions and 829 deletions.
312 changes: 152 additions & 160 deletions packages/web/src/scss/components/UNSTABLE_Footer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -33,172 +34,163 @@ The basic usage of this component could be:
```html
<footer class="UNSTABLE_Footer">
<div class="Container">
<div class="Stack Stack--hasIntermediateDividers">
<div class="mb-700 mb-tablet-400">
<div class="Grid Grid--cols-2 Grid--tablet--cols-4">
<nav aria-labelledby="footer-part-one" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-one">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-two" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-two">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-three" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-three">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-four" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-four">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>
</ul>
</nav>
</div>
</div>

<ul class="UNSTABLE_Footer__copyright pt-900">
<li>
<a href="www.example.com" class="link-secondary"> Legal notice </a>
</li>

<li>
<a href="www.example.com" class="link-secondary"> Terms of service </a>
</li>

<li>
<a href="www.example.com" class="link-secondary"> Privacy policy </a>
</li>

<li>
<a href="www.example.com" class="link-secondary"> Manage cookies </a>
</li>
</ul>
<div class="Grid Grid--cols-2 Grid--tablet--cols-4 mb-700 mb-tablet-400">
<nav aria-labelledby="footer-part-one" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-one">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-two" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-two">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-three" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-three">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-part-four" class="mb-600 mb-tablet-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-part-four">Section headline</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>
</ul>
</nav>
</div>

<hr class="UNSTABLE_Divider mb-700 mb-tablet-400" />

<ul class="UNSTABLE_Footer__copyright">
<li>
<a href="www.example.com" class="link-secondary">Legal notice</a>
</li>

<li>
<a href="www.example.com" class="link-secondary">Terms of service</a>
</li>

<li>
<a href="www.example.com" class="link-secondary">Privacy policy</a>
</li>

<li>
<a href="www.example.com" class="link-secondary">Manage cookies</a>
</li>
</ul>
</div>
</footer>
```

### 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
<footer class="UNSTABLE_Footer">
<div class="Container">
<div class="Stack Stack--hasIntermediateDividers">
<div class="mb-700 mb-tablet-400">
<div class="mb-tablet-600 mb-desktop-400">
<div class="Grid Grid--cols-1 Grid--tablet--cols-3 Grid--desktop--cols-6">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-one" class="mb-600 mb-tablet-400 mb-desktop-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-with-a-lot-of-blocks-part-one">
Section headline
</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>

<li>
<a href="www.example.com"> Link </a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-with-a-lot-of-blocks-part-two" class="mb-600 mb-tablet-400 mb-desktop-800">
</nav>
</div>
</div>
<div class="Grid Grid--cols-1 Grid--tablet--cols-3">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-seven" class="mb-600 mb-tablet-800">…</nav>

<nav aria-labelledby="footer-with-a-lot-of-blocks-part-eight" class="mb-600 mb-tablet-800">…</nav>
</div>
</div>
<div class="Grid Grid--cols-1 Grid--tablet--cols-3 Grid--desktop--cols-6 mb-tablet-600 mb-desktop-400">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-one" class="mb-600 mb-tablet-400 mb-desktop-800">
<h3 class="typography-body-large-text-bold mb-600" id="footer-with-a-lot-of-blocks-part-one">
Section headline
</h3>

<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>

<li>
<a href="www.example.com">Link</a>
</li>
</ul>
</nav>

<nav aria-labelledby="footer-with-a-lot-of-blocks-part-two" class="mb-600 mb-tablet-400 mb-desktop-800">…</nav>
</div>

<div class="Grid Grid--cols-1 Grid--tablet--cols-3">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-seven" class="mb-600 mb-tablet-800">…</nav>

<nav aria-labelledby="footer-with-a-lot-of-blocks-part-eight" class="mb-600 mb-tablet-800">…</nav>
</div>
</div>
</footer>
Expand All @@ -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.

Expand All @@ -222,7 +214,7 @@ modifier class to apply inverted background color to Footer.

<ul class="Stack Stack--hasSpacing mb-600" style="--stack-spacing: var(--spirit-space-500)">
<li>
<a href="www.example.com" class="link-inverted"> Link </a>
<a href="www.example.com" class="link-inverted">Link</a>
</li>
</ul>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use 'sass:map';
@use '../../tools/breakpoint';
@use 'theme';

Expand All @@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
Loading

0 comments on commit 210823a

Please sign in to comment.