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): Switch Footer component to v3 design tokens #1653

Merged
merged 3 commits into from
Sep 19, 2024
Merged

Feat(web): Switch Footer component to v3 design tokens #1653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acc11a2
Feat(web): Switch Footer component to v3 design tokens
crishpeen Sep 19, 2024
a026d94
Feat(web): Switch Slider component to v3 design tokens #DS-1449
crishpeen Sep 17, 2024
2176111
Test(e2e): Enable visual testing of rest of the components
crishpeen Sep 17, 2024
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
26 changes: 13 additions & 13 deletions packages/web/src/scss/components/Footer/README.md
View file
Open in desktop
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
Open in desktop
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
5 changes: 3 additions & 2 deletions packages/web/src/scss/components/UNSTABLE_Slider/_UNSTABLE_Slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ $_field-name: 'UNSTABLE_Slider';
--slider-track-background: #{theme.$track-background-hover};
--slider-track-lower-background: #{theme.$track-lower-background-hover};
--slider-thumb-border-color: #{theme.$thumb-border-color-hover};
--slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-hover)};
--slider-thumb-background-color: #{theme.$thumb-background-color-hover};
--slider-thumb-box-shadow: #{theme.$thumb-box-shadow-hover};
}
}
Expand All @@ -55,7 +55,7 @@ $_field-name: 'UNSTABLE_Slider';
--slider-track-background: #{theme.$track-background-active};
--slider-track-lower-background: #{theme.$track-lower-background-active};
--slider-thumb-border-color: #{theme.$thumb-border-color-active};
--slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-active)};
--slider-thumb-background-color: #{theme.$thumb-background-color-active};
--slider-thumb-box-shadow: #{theme.$thumb-box-shadow-active};
}

Expand Down Expand Up @@ -146,6 +146,7 @@ $_field-name: 'UNSTABLE_Slider';
--slider-track-lower-background: #{theme.$track-lower-background-disabled};
--slider-thumb-border-width: #{theme.$thumb-border-width-disabled};
--slider-thumb-border-color: #{theme.$thumb-border-color-disabled};
--slider-thumb-background-color: #{theme.$thumb-background-color-disabled};
--slider-thumb-background-image: #{svg.escape(theme.$thumb-background-image-disabled)};
--slider-thumb-box-shadow: #{theme.$thumb-box-shadow-disabled};

Expand Down
Loading
Loading