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 Shortcut from "../Shortcut"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./oneColumnList.module.css" import styles from "./oneColumnList.module.css"
@@ -9,19 +7,7 @@ import { ShortcutsListProps } from "@/types/components/myPages/myPage/shortcuts"
export default function OneColumnList({ linkList }: ShortcutsListProps) { export default function OneColumnList({ linkList }: ShortcutsListProps) {
return ( return (
<section className={styles.section}> <section className={styles.section}>
{linkList.map((shortcut) => ( <Shortcut linkList={linkList} />
<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> </section>
) )
} }

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

@@ -1,6 +1,6 @@
.section { .section {
display: grid; display: grid;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle); 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 Shortcut from "../Shortcut"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./twoColumnList.module.css" import styles from "./twoColumnList.module.css"
@@ -11,30 +9,13 @@ export default function TwoColumnList({ linkList }: ShortcutsListProps) {
const leftColumn = linkList.slice(0, middleIndex) const leftColumn = linkList.slice(0, middleIndex)
const rightColumn = linkList.slice(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 ( return (
<section className={styles.section}> <section className={styles.section}>
<div className={styles.columeOne}> <div className={styles.leftColumn}>
{renderShortcuts({ linkList: leftColumn })} <Shortcut linkList={leftColumn} />
</div> </div>
<div className={styles.columnTwo}> <div className={styles.rightColumn}>
{renderShortcuts({ linkList: rightColumn })} <Shortcut linkList={rightColumn} />
</div> </div>
</section> </section>
) )

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

@@ -5,14 +5,10 @@
overflow: hidden; overflow: hidden;
} }
.columeOne { .leftColumn {
border-bottom: 0.5px solid var(--Scandic-Beige-20); border-bottom: 0.5px solid var(--Scandic-Beige-20);
} }
.link {
background-color: var(--Base-Surface-Primary-light-Normal);
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.section { .section {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -21,8 +17,8 @@
border: none; border: none;
} }
.columeOne, .leftColumn,
.columnTwo { .rightColumn {
height: fit-content; height: fit-content;
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);