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

feat(SW-322): make Shortcut reusable component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-07 15:04:50 +02:00
parent 2db756b738
commit c1be1619da
6 changed files with 42 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/Blocks/Shortcuts/OneColumnList/index.tsx
View File

@@ -1,6 +1,4 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Shortcut from "../Shortcut"
import styles from "./oneColumnList.module.css"
@@ -9,19 +7,7 @@ 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>
))}
<Shortcut linkList={linkList} />
</section>
)
}

2
components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
View File

@@ -1,6 +1,6 @@
.section {
display: grid;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
overflow: hidden;
}

28
components/Blocks/Shortcuts/Shortcut/index.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcut.module.css"
import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts"
export default function Shortcut({ 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>
))}
</>
)
}

3
components/Blocks/Shortcuts/Shortcut/shortcut.module.css Normal file
View File

@@ -0,0 +1,3 @@
.link {
background-color: var(--Base-Surface-Primary-light-Normal);
}

29
components/Blocks/Shortcuts/TwoColumnList/index.tsx
View File

@@ -1,6 +1,4 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Shortcut from "../Shortcut"
import styles from "./twoColumnList.module.css"
@@ -11,30 +9,13 @@ export default function TwoColumnList({ linkList }: ShortcutsListProps) {
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 className={styles.leftColumn}>
<Shortcut linkList={leftColumn} />
</div>
<div className={styles.columnTwo}>
{renderShortcuts({ linkList: rightColumn })}
<div className={styles.rightColumn}>
<Shortcut linkList={rightColumn} />
</div>
</section>
)

10
components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css
View File

@@ -5,14 +5,10 @@
overflow: hidden;
}
.columeOne {
.leftColumn {
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;
@@ -21,8 +17,8 @@
border: none;
}
.columeOne,
.columnTwo {
.leftColumn,
.rightColumn {
height: fit-content;
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);