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

feat(SW-322): implement two column list

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-07 10:38:07 +02:00
parent 81ece30a0d
commit 5ea3410006
11 changed files with 118 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Blocks/Shortcuts/OneColumnList/index.tsx
+27
View File
@@ -0,0 +1,27 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./oneColumnList.module.css"
import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts"
export default function OneColumnList({ linkList }: ShortcutsListProps) {
return (
<section className={styles.section}>
{linkList.map((shortcut) => (
<Link
href={shortcut.url}
key={shortcut.title}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" width={24} height={24} />
</Link>
))}
</section>
)
}
components/Blocks/Shortcuts/shortcuts.module.css → components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
+2 -7
View File
@@ -1,11 +1,6 @@
.links {
.section {
display: grid;
background-color: var(--Scandic-Brand-Pale-Peach);
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
}
.arrowRight {
height: 24px;
width: 24px;
}
components/Blocks/Shortcuts/TwoColumList/index.tsx
+41
View File
@@ -0,0 +1,41 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./twoColumnList.module.css"
import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts"
export default function TwoColumnList({ linkList }: ShortcutsListProps) {
const middleIndex = Math.ceil(linkList.length / 2)
const leftColumn = linkList.slice(0, middleIndex)
const rightColumn = linkList.slice(middleIndex)
function renderShortcuts({ linkList }: ShortcutsListProps) {
return linkList.map((shortcut) => (
<Link
href={shortcut.url}
key={shortcut.title}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
className={styles.link}
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" width={24} height={24} />
</Link>
))
}
return (
<section className={styles.section}>
<div className={styles.columeOne}>
{renderShortcuts({ linkList: leftColumn })}
</div>
<div className={styles.columnTwo}>
{renderShortcuts({ linkList: rightColumn })}
</div>
</section>
)
}
components/Blocks/Shortcuts/TwoColumList/twoColumnList.module.css
+31
View File
@@ -0,0 +1,31 @@
.section {
display: grid;
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
overflow: hidden;
}
.columeOne {
border-bottom: 0.5px solid var(--Scandic-Beige-20);
}
.link {
background-color: var(--Base-Surface-Primary-light-Normal);
}
@media screen and (min-width: 1367px) {
.section {
grid-template-columns: 1fr 1fr;
column-gap: var(--Spacing-x2);
border-radius: 0;
border: none;
}
.columeOne,
.columnTwo {
height: fit-content;
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
}
components/Blocks/Shortcuts/index.tsx
+8 -19
View File
@@ -1,10 +1,8 @@
import { ArrowRightIcon } from "@/components/Icons"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcuts.module.css"
import OneColumnList from "./OneColumnList"
import TwoColumnList from "./TwoColumList"
import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
@@ -13,25 +11,16 @@ export default function Shortcuts({
shortcuts,
subtitle,
title,
columns,
}: ShortcutsProps) {
return (
<SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={styles.links}>
{shortcuts.map((shortcut) => (
<Link
href={shortcut.url}
key={shortcut.title}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text ? shortcut.text : shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" className={styles.arrowRight} />
</Link>
))}
</section>
{columns ? (
<TwoColumnList linkList={shortcuts} />
) : (
<OneColumnList linkList={shortcuts} />
)}
</SectionContainer>
)
}
components/Blocks/index.tsx
+1
View File
@@ -47,6 +47,7 @@ export default function Blocks({ blocks }: BlocksProps) {
shortcuts={block.shortcuts.shortcuts}
subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title}
columns={block.shortcuts.columns}
/>
)
case BlocksEnums.block.Table: