Skip to content

Commit

Permalink
Feat(web): Introduce UNSTABLE_Footer component #DS-1367
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlouhak
dlouhak committed Jul 9, 2024
1 parent e7eed31 commit e1ef4c0
Show file tree
Hide file tree
Showing 6 changed files with 1,298 additions and 0 deletions.
267 changes: 267 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_Footer/README.md
View file
Original file line number Diff line number Diff line change
@@ -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
<footer class="UNSTABLE_Footer">
<!-- Footer columns – links relatable e.g. to the web hierarchy -->
<!-- Footer content – links to social sites, product logo, etc. -->
<!-- Footer copyright – links to the GDPR, cookies, etc. -->
</footer>
```

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
<footer class="UNSTABLE_Footer">
<div class="Container">
<div class="Stack Stack--hasSpacing Stack--hasIntermediateDividers" style="--stack-spacing: var(--spirit-space-900)">
<div class="Grid Grid--cols-2 Grid--tablet--cols-4" style="gap: var(--spirit-space-800)">

<nav aria-labelledby="footer-part-one">
<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">
<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">
<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">
<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 class="UNSTABLE_Footer__copyright">
<a href="www.example.com" class="link-secondary">
Legal notice
</a>

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

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

<a href="www.example.com" class="link-secondary">
Manage cookies
</a>
</div>
</div>
</div>
</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.

```html
<footer class="UNSTABLE_Footer">
<div class="Container">
<div class="Stack Stack--hasSpacing Stack--hasIntermediateDividers" style="--stack-spacing: var(--spirit-space-900)">
<div class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-900)">
<div class="Grid Grid--cols-1 Grid--tablet--cols-3 Grid--desktop--cols-6" style="gap: var(--spirit-space-800)">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-one">
<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">
…
</nav>
…
</div>

<div class="Grid Grid--cols-1 Grid--tablet--cols-3" style="gap: var(--spirit-space-800)">
<nav aria-labelledby="footer-with-a-lot-of-blocks-part-seven">
…
</nav>

<nav aria-labelledby="footer-with-a-lot-of-blocks-part-eight">
…
</nav>
</div>
</div>

</div>
</div>
</footer>
```

## 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
<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
Original file line number Diff line number Diff line change
@@ -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;
}
}
8 changes: 8 additions & 0 deletions packages/web/src/scss/components/UNSTABLE_Footer/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit e1ef4c0

Please sign in to comment.