scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(SW-187): update footer UI

Browse Source
This commit is contained in:
Matilda Landström
2024-11-07 17:25:01 +01:00
parent 0a65a0d6a4
commit 908136b10b
7 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer/Details/details.module.css
View File

@@ -60,11 +60,13 @@
border-top: 1px solid var(--Base-Text-Medium-contrast);
padding-top: var(--Spacing-x2);
flex-direction: row;
align-items: center;
}
.navigationContainer {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
gap: var(--Spacing-x4);
align-items: center;
}
}

9
components/Footer/Details/index.tsx
View File

@@ -56,7 +56,7 @@ export default async function FooterDetails() {
</div>
<div className={styles.bottomContainer}>
<div className={styles.copyrightContainer}>
<Footnote textTransform="uppercase">
<Footnote type="label" textTransform="uppercase">
© {currentYear}{" "}
{intl.formatMessage({ id: "Copyright all rights reserved" })}
</Footnote>
@@ -66,7 +66,12 @@ export default async function FooterDetails() {
{footer?.tertiaryLinks.map(
(link) =>
link.url && (
<Footnote asChild textTransform="uppercase" key={link.title}>
<Footnote
asChild
type="label"
textTransform="uppercase"
key={link.title}
>
<Link
className={styles.link}
color="peach50"

2
components/Footer/Navigation/MainNav/index.tsx
View File

@@ -12,7 +12,7 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
<ul className={styles.mainNavigationList}>
{mainLinks.map((link) => (
<li key={link.title} className={styles.mainNavigationItem}>
<Subtitle type="two" asChild>
<Subtitle color="baseTextMediumContrast" type="two" asChild>
<Link
color="burgundy"
href={link.url}

17
components/Footer/Navigation/SecondaryNav/index.tsx
View File

@@ -1,6 +1,7 @@
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getLang } from "@/i18n/serverContext"
import styles from "./secondarynav.module.css"
@@ -18,9 +19,13 @@ export default function FooterSecondaryNav({
<div className={styles.secondaryNavigation}>
{appDownloads && (
<nav className={styles.secondaryNavigationGroup}>
<Body color="baseTextMediumContrast" textTransform="uppercase">
<Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{appDownloads.title}
</Body>
</Caption>
<ul className={styles.secondaryNavigationList}>
{appDownloads.links.map(
(link) =>
@@ -50,9 +55,13 @@ export default function FooterSecondaryNav({
)}
{secondaryLinks.map((link) => (
<nav className={styles.secondaryNavigationGroup} key={link.title}>
<Body color="baseTextMediumContrast" textTransform="uppercase">
<Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{link.title}
</Body>
</Caption>
<ul className={styles.secondaryNavigationList}>
{link?.links?.map((link) => (
<li key={link.title} className={styles.secondaryNavigationItem}>

5
components/LanguageSwitcher/index.tsx
View File

@@ -7,6 +7,7 @@ import { languages } from "@/constants/languages"
import useDropdownStore from "@/stores/main-menu"
import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import useLang from "@/hooks/useLang"
@@ -88,7 +89,9 @@ export default function LanguageSwitcher({
onClick={handleClick}
>
<GlobeIcon width={20} height={20} color={color} />
<span>{languages[currentLanguage]}</span>
<Caption type="regular" color={color}>
{languages[currentLanguage]}
</Caption>
<ChevronDownIcon
className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
width={20}

4
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -59,6 +59,10 @@
color: var(--Scandic-Brand-Pale-Peach);
}
.baseTextMediumContrast {
color: var(--Base-Text-High-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}

1
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -9,6 +9,7 @@ const config = {
burgundy: styles.burgundy,
disabled: styles.disabled,
pale: styles.pale,
baseTextMediumContrast: styles.baseTextMediumContrast,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,