Skip to content

Commit

Permalink
Feat(web): Switch Footer component to v3 design tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@crishpeen
crishpeen committed Sep 19, 2024
1 parent 7138575 commit 5900b5c
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 48 deletions.
26 changes: 13 additions & 13 deletions packages/web/src/scss/components/Footer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ The Footer supports several ready-to-use building blocks:
This is how all supported building blocks of the Footer build up the complete composition:

```html
<footer class="bg-cover pt-1100 pb-1000">
<footer class="bg-secondary pt-1400 pb-1200">
<div class="Container">
<!-- Grid with navigation links -->
<!-- Grid with product logo, social media links and language switch -->
Expand Down Expand Up @@ -45,8 +45,8 @@ the `<h3>` element matches the value of the `aria-labelledby` attribute of the `

```html
<nav aria-labelledby="footer-navigation-section">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -69,7 +69,7 @@ This section is optional and consists of a [Grid][grid] layout with up to three
```html
<div
class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
>
<div class="text-desktop-left">
<!-- Product logo -->
Expand Down Expand Up @@ -119,7 +119,7 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
<nav aria-label="Secondary links">
<ul
class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
>
<!-- Repeat the `<li>` block for each secondary link. -->
<li>
Expand All @@ -134,17 +134,17 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
## Full Example

```html
<footer class="bg-cover pt-1100 pb-1000">
<footer class="bg-secondary pt-1400 pb-1200">
<div class="Container">
<!-- Grid with navigation links -->
<div
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
>
<!-- Repeat the `<nav>` block as many times as needed. -->
<nav aria-labelledby="footer-navigation-section">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section">Section headline</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -159,12 +159,12 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Grid with product logo, social media links and language switch -->
<div
class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
>
<!-- Product logo -->
<div class="text-desktop-left">
Expand Down Expand Up @@ -221,13 +221,13 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Flex with secondary links -->
<nav aria-label="Secondary links">
<ul
class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
>
<li>
<a href="https://www.example.com" class="link-secondary">Legal notice</a>
Expand Down
70 changes: 35 additions & 35 deletions packages/web/src/scss/components/Footer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@
<h2 class="docs-Heading">Basic Usage</h2>
<div class="docs-Stack">

<footer class="bg-cover pt-1100 pb-1000">
<footer class="bg-secondary pt-1400 pb-1200">
<div class="Container">

<!-- Grid with navigation links -->
<div
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
>

<!-- Navigation links 1 -->
<nav aria-labelledby="footer-navigation-section-1">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-1">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-1">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -33,10 +33,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section

<!-- Navigation links 2 -->
<nav aria-labelledby="footer-navigation-section-2">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-2">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-2">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -54,10 +54,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section

<!-- Navigation links 3 -->
<nav aria-labelledby="footer-navigation-section-3">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-3">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-3">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -81,10 +81,10 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section

<!-- Navigation links 4 -->
<nav aria-labelledby="footer-navigation-section-4">
<h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section-4">
<h3 class="typography-body-medium-bold mb-700" id="footer-navigation-section-4">
Section headline
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -100,12 +100,12 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Grid with product logo, social media links and language switch -->
<div
class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
style="--grid-spacing-x: var(--spirit-space-900); --grid-spacing-y: var(--spirit-space-900)"
style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
>

<!-- Product logo -->
Expand Down Expand Up @@ -171,39 +171,39 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
<!-- Flex with social media links -->
<ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
<li>
<a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
<a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
<span class="accessibility-hidden">Facebook</span>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
</svg>
</a>
</li>
<li>
<a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
<a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
<span class="accessibility-hidden">X</span>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#logo-x" />
</svg>
</a>
</li>
<li>
<a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
<a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
<span class="accessibility-hidden">YouTube</span>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" />
</svg>
</a>
</li>
<li>
<a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
<a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
<span class="accessibility-hidden">Google</span>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#logo-google" />
</svg>
</a>
</li>
<li>
<a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
<a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
<span class="accessibility-hidden">LinkedIn</span>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#logo-linkedin" />
Expand Down Expand Up @@ -233,13 +233,13 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Flex with secondary links -->
<nav aria-label="Secondary links">
<ul
class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
>
<li>
<a href="https://www.example.com" class="link-secondary">Legal notice</a>
Expand All @@ -266,26 +266,26 @@ <h3 class="typography-body-large-text-bold mb-600" id="footer-navigation-section
<h2 class="docs-Heading">Nested Link Blocks, Logo Only</h2>
<div class="docs-Stack">

<footer class="bg-cover pt-1100 pb-1000">
<footer class="bg-secondary pt-1400 pb-1200">
<div class="Container">

<!-- Grid with navigation links -->
<div
class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-4"
style="--grid-spacing-x: var(--spirit-space-800); --grid-spacing-y: var(--spirit-space-800)"
style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
>

<!-- Navigation links 1 -->
<nav aria-labelledby="footer-nested-links-navigation-section-1">
<h3 class="typography-body-large-text-bold mb-600">
<h3 class="typography-body-medium-bold mb-700">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-1"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -300,15 +300,15 @@ <h3 class="typography-body-large-text-bold mb-600">

<!-- Navigation links 2 -->
<nav aria-labelledby="footer-nested-links-navigation-section-2">
<h3 class="typography-body-large-text-bold mb-600">
<h3 class="typography-body-medium-bold mb-700">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-2"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -326,15 +326,15 @@ <h3 class="typography-body-large-text-bold mb-600">

<!-- Navigation links 3 -->
<nav aria-labelledby="footer-nested-links-navigation-section-3">
<h3 class="typography-body-large-text-bold mb-600">
<h3 class="typography-body-medium-bold mb-700">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-3"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -358,16 +358,16 @@ <h3 class="typography-body-large-text-bold mb-600">

<!-- Navigation links 4 and 5 -->
<div>
<nav aria-labelledby="footer-nested-links-navigation-section-4" class="mb-800">
<h3 class="typography-body-large-text-bold mb-600">
<nav aria-labelledby="footer-nested-links-navigation-section-4" class="mb-1000">
<h3 class="typography-body-medium-bold mb-700">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-4"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -380,15 +380,15 @@ <h3 class="typography-body-large-text-bold mb-600">
</ul>
</nav>
<nav aria-labelledby="footer-nested-links-navigation-section-5">
<h3 class="typography-body-large-text-bold mb-600">
<h3 class="typography-body-medium-bold mb-700">
<a
href="https://www.example.com"
id="footer-nested-links-navigation-section-5"
>
Section headline
</a>
</h3>
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-500)">
<ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
<li>
<a href="https://www.example.com">Link</a>
</li>
Expand All @@ -401,7 +401,7 @@ <h3 class="typography-body-large-text-bold mb-600">
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Product logo -->
<div class="text-center">
Expand Down Expand Up @@ -464,13 +464,13 @@ <h3 class="typography-body-large-text-bold mb-600">
</div>

<!-- Divider -->
<hr class="Divider my-900" />
<hr class="Divider my-1200" />

<!-- Flex with secondary links -->
<nav aria-label="Secondary links">
<ul
class="Flex Flex--column Flex--tablet--row Flex--noWrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
style="--flex-spacing: var(--spirit-space-500); --flex-spacing-tablet: var(--spirit-space-700)"
style="--flex-spacing: var(--spirit-space-600); --flex-spacing-tablet: var(--spirit-space-900)"
>
<li>
<a href="https://www.example.com" class="link-secondary">Legal notice</a>
Expand Down
Binary file modified tests/e2e/demo-components-compare.spec.ts-snapshots/footer-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5900b5c

Please sign in to comment.