Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat(web): Introduce UNSTABLE_Footer component #DS-1367 #1540

Closed
wants to merge 1 commit into from
Closed

Feat(web): Introduce UNSTABLE_Footer component #DS-1367 #1540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 202 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_Footer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
# 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
<footer class="UNSTABLE_Footer">
<!-- Footer columns – links relatable to the web hierarchy, etc. -->
<!-- Footer content – links to social sites, product logo, etc. -->
<!-- Footer copyright – links to the GDPR, cookies, etc. -->
</footer>
```

👉 Please, keep in mind that:

- to achieve the desired design, you can use the provided building blocks in any order you need,
- in case you need dividers between section, use the `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

The basic usage of this component could be:

```html
<footer class="UNSTABLE_Footer">
<div class="Container">
<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="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>
```

### Footer Columns Variation

In case you need a specific number of columns for each row in the Footer Columns section with links,
dlouhak marked this conversation as resolved.
Show resolved Hide resolved
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="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>
```

## Color Variants

If you need to place the Footer on a dark background, add `Footer--inverted` modifier class to the root element.

⚠️ Keep in mind that it is necessary to set all the text and link content to the suitable color variant also.

```html
<footer class="UNSTABLE_Footer UNSTABLE_Footer--inverted">
…
<nav aria-labelledby="footer-inverse-part-one">
<h3 class="typography-body-large-text-bold text-primary-inverted mb-600" id="footer-inverse-part-one">
Section headline
</h3>

<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>
</li>
…
</ul>
</nav>
</footer>
```
23 changes: 23 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_Footer/_UNSTABLE_Footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@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;
list-style: none;

@include breakpoint.up(theme.$breakpoint) {
flex-direction: row;
}
}
8 changes: 8 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss
View file
Open in desktop
dlouhak marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@use 'sass:map';
@use '@tokens' as tokens;

$breakpoint: map.get(tokens.$breakpoints, tablet);
dlouhak marked this conversation as resolved.
Show resolved Hide resolved
$background-color: tokens.$background-cover;
$background-color-inverted: tokens.$background-inverted;
$gap: tokens.$space-700;
$padding-block: tokens.$space-1100 tokens.$space-1000;
Loading
Loading