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); border-top: 1px solid var(--Base-Text-Medium-contrast);
padding-top: var(--Spacing-x2); padding-top: var(--Spacing-x2);
flex-direction: row; flex-direction: row;
align-items: center;
} }
.navigationContainer { .navigationContainer {
border-bottom: 0; border-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
gap: var(--Spacing-x4); 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>
<div className={styles.bottomContainer}> <div className={styles.bottomContainer}>
<div className={styles.copyrightContainer}> <div className={styles.copyrightContainer}>
<Footnote textTransform="uppercase"> <Footnote type="label" textTransform="uppercase">
© {currentYear}{" "} © {currentYear}{" "}
{intl.formatMessage({ id: "Copyright all rights reserved" })} {intl.formatMessage({ id: "Copyright all rights reserved" })}
</Footnote> </Footnote>
@@ -66,7 +66,12 @@ export default async function FooterDetails() {
{footer?.tertiaryLinks.map( {footer?.tertiaryLinks.map(
(link) => (link) =>
link.url && ( link.url && (
<Footnote asChild textTransform="uppercase" key={link.title}> <Footnote
asChild
type="label"
textTransform="uppercase"
key={link.title}
>
<Link <Link
className={styles.link} className={styles.link}
color="peach50" 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}> <ul className={styles.mainNavigationList}>
{mainLinks.map((link) => ( {mainLinks.map((link) => (
<li key={link.title} className={styles.mainNavigationItem}> <li key={link.title} className={styles.mainNavigationItem}>
<Subtitle type="two" asChild> <Subtitle color="baseTextMediumContrast" type="two" asChild>
<Link <Link
color="burgundy" color="burgundy"
href={link.url} href={link.url}

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

@@ -1,6 +1,7 @@
import Image from "@/components/Image" import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import styles from "./secondarynav.module.css" import styles from "./secondarynav.module.css"
@@ -18,9 +19,13 @@ export default function FooterSecondaryNav({
<div className={styles.secondaryNavigation}> <div className={styles.secondaryNavigation}>
{appDownloads && ( {appDownloads && (
<nav className={styles.secondaryNavigationGroup}> <nav className={styles.secondaryNavigationGroup}>
<Body color="baseTextMediumContrast" textTransform="uppercase"> <Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{appDownloads.title} {appDownloads.title}
</Body> </Caption>
<ul className={styles.secondaryNavigationList}> <ul className={styles.secondaryNavigationList}>
{appDownloads.links.map( {appDownloads.links.map(
(link) => (link) =>
@@ -50,9 +55,13 @@ export default function FooterSecondaryNav({
)} )}
{secondaryLinks.map((link) => ( {secondaryLinks.map((link) => (
<nav className={styles.secondaryNavigationGroup} key={link.title}> <nav className={styles.secondaryNavigationGroup} key={link.title}>
<Body color="baseTextMediumContrast" textTransform="uppercase"> <Caption
color="textMediumContrast"
textTransform="uppercase"
type="label"
>
{link.title} {link.title}
</Body> </Caption>
<ul className={styles.secondaryNavigationList}> <ul className={styles.secondaryNavigationList}>
{link?.links?.map((link) => ( {link?.links?.map((link) => (
<li key={link.title} className={styles.secondaryNavigationItem}> <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 useDropdownStore from "@/stores/main-menu"
import { ChevronDownIcon, GlobeIcon } from "@/components/Icons" import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useClickOutside from "@/hooks/useClickOutside" import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
@@ -88,7 +89,9 @@ export default function LanguageSwitcher({
onClick={handleClick} onClick={handleClick}
> >
<GlobeIcon width={20} height={20} color={color} /> <GlobeIcon width={20} height={20} color={color} />
<span>{languages[currentLanguage]}</span> <Caption type="regular" color={color}>
{languages[currentLanguage]}
</Caption>
<ChevronDownIcon <ChevronDownIcon
className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`} className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
width={20} width={20}

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

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

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

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