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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Current/Footer/index.tsx
View File

@@ -7,7 +7,7 @@ import Navigation from "./Navigation"
import styles from "./footer.module.css"
export default async function Footer() {
const footerData = await serverClient().contentstack.config.footer()
const footerData = await serverClient().contentstack.base.footer()
return (
<footer className={styles.container}>
<div className={styles.content}>

11
components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css
View File

@@ -1,3 +1,7 @@
.desktop {
display: none;
}
.container {
position: relative;
@@ -30,6 +34,7 @@
height: 1px;
overflow: hidden;
}
.caret {
display: inline-block;
width: 0;
@@ -100,3 +105,9 @@
outline: 0;
text-decoration: none;
}
@media (min-width: 950px) {
.desktop {
display: block;
}
}

76
components/Current/Header/LanguageSwitcher/Desktop/index.tsx
View File

@@ -56,42 +56,44 @@ export default function Desktop({
}
return (
<div className={styles.container} ref={divRef}>
<button
aria-pressed="false"
className={styles.languageSwitcher}
onClick={toggleOpen}
>
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
<use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
</svg>
{languages[currentLanguage]}
<span className={styles.hiddenAccessible}>Choose language</span>
<span className={styles.caret}></span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{urlKeys.map((key) => {
const url = urls[key as Lang]?.url
if (url) {
return (
<li
key={key}
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
>
{urls[key as Lang]?.isExternal ? (
<Link className={styles.link} href={url}>
{languages[key as Lang]}
</Link>
) : (
<a className={styles.link} href={url}>
{languages[key as Lang]}
</a>
)}
</li>
)
}
})}
</ul>
</div>
<section className={styles.desktop}>
<div className={styles.container} ref={divRef}>
<button
aria-pressed="false"
className={styles.toggle}
onClick={toggleOpen}
>
<svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
<use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
</svg>
{languages[currentLanguage]}
<span className={styles.hiddenAccessible}>Choose language</span>
<span className={styles.caret}></span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{urlKeys.map((key) => {
const url = urls[key as Lang]?.url
if (url) {
return (
<li
key={key}
className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
>
{urls[key as Lang]?.isExternal ? (
<Link className={styles.link} href={url}>
{languages[key as Lang]}
</Link>
) : (
<a className={styles.link} href={url}>
{languages[key as Lang]}
</a>
)}
</li>
)
}
})}
</ul>
</div>
</section>
)
}

54
components/Current/Header/LanguageSwitcher/Mobile/index.tsx
View File

@@ -27,30 +27,34 @@ export default function Mobile({
}
return (
<div>
<button
aria-pressed="false"
className={styles.languageSwitcher}
onClick={toggleOpen}
>
{languages[currentLanguage]}
<span className={`${styles.arrow} ${isOpen ? styles.open : ""}`}></span>
<span className={styles.hiddenAccessible}>Choose language</span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{urlKeys.map((key) => {
const url = urls[key as Lang]?.url
if (url) {
return (
<li key={key} className={styles.li}>
<a href={url} className={styles.link}>
{languages[key as Lang]}
</a>
</li>
)
}
})}
</ul>
</div>
<section className={styles.mobile}>
<div>
<button
aria-pressed="false"
className={styles.toggle}
onClick={toggleOpen}
>
{languages[currentLanguage]}{" "}
<span
className={`${styles.arrow} ${isOpen ? styles.open : ""}`}
></span>
<span className={styles.hiddenAccessible}>Choose language</span>
</button>
<ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
{urlKeys.map((key) => {
const url = urls[key as Lang]?.url
if (url) {
return (
<li key={key} className={styles.li}>
<a href={url} className={styles.link}>
{languages[key as Lang]}
</a>
</li>
)
}
})}
</ul>
</div>
</section>
)
}

12
components/Current/Header/LanguageSwitcher/Mobile/mobile.module.css
View File

@@ -1,5 +1,9 @@
.languageSwitcher {
.mobile {
display: block;
font-family: Helvetica, Arial, sans-serif;
}
.toggle {
font-size: 14px;
padding: 5px 0;
display: block;
@@ -62,3 +66,9 @@
color: #7f7369;
text-decoration: none;
}
@media (min-width: 950px) {
.mobile {
display: none;
}
}

2
components/Current/Header/index.tsx
View File

@@ -16,7 +16,7 @@ export default async function Header({
lang,
languageSwitcher,
}: LangParams & { languageSwitcher: React.ReactNode }) {
const data = await serverClient().contentstack.config.header()
const data = await serverClient().contentstack.base.header()
const session = await auth()
const homeHref = homeHrefs[env.NODE_ENV][lang]

2
components/Current/LangPopup/index.tsx
View File

@@ -67,7 +67,7 @@ export default function LangPopup({ lang }: { lang: Lang }) {
}}
>
<title>Close</title>
<g id="web-close" fill-rule="evenodd">
<g id="web-close" fillRule="evenodd">
<line x1="0" y1="0" x2="100%" y2="100%" />
<line x1="0" y1="100%" x2="100%" y2="0" />
</g>