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

27
components/Blocks/Shortcuts/OneColumnList/index.tsx Normal file
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>
)
}

9
components/Blocks/Shortcuts/shortcuts.module.css → components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
View File

@@ -1,11 +1,6 @@
.links { .section {
display: grid; display: grid;
background-color: var(--Scandic-Brand-Pale-Peach); 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);
} }
.arrowRight {
height: 24px;
width: 24px;
}

41
components/Blocks/Shortcuts/TwoColumList/index.tsx Normal file
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>
)
}

31
components/Blocks/Shortcuts/TwoColumList/twoColumnList.module.css Normal file
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;
}
}

27
components/Blocks/Shortcuts/index.tsx
View File

@@ -1,10 +1,8 @@
import { ArrowRightIcon } from "@/components/Icons"
import SectionContainer from "@/components/Section/Container" import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header" 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" import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
@@ -13,25 +11,16 @@ export default function Shortcuts({
shortcuts, shortcuts,
subtitle, subtitle,
title, title,
columns,
}: ShortcutsProps) { }: ShortcutsProps) {
return ( return (
<SectionContainer> <SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} /> <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={styles.links}> {columns ? (
{shortcuts.map((shortcut) => ( <TwoColumnList linkList={shortcuts} />
<Link ) : (
href={shortcut.url} <OneColumnList linkList={shortcuts} />
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>
</SectionContainer> </SectionContainer>
) )
} }

1
components/Blocks/index.tsx
View File

@@ -47,6 +47,7 @@ export default function Blocks({ blocks }: BlocksProps) {
shortcuts={block.shortcuts.shortcuts} shortcuts={block.shortcuts.shortcuts}
subtitle={block.shortcuts.subtitle} subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title} title={block.shortcuts.title}
columns={block.shortcuts.columns}
/> />
) )
case BlocksEnums.block.Table: case BlocksEnums.block.Table:

1
components/Webviews/AccountPage/Blocks.tsx
View File

@@ -70,6 +70,7 @@ export default function Content({ content }: ContentProps) {
shortcuts={shortcuts} shortcuts={shortcuts}
subtitle={item.shortcuts.subtitle} subtitle={item.shortcuts.subtitle}
title={item.shortcuts.title} title={item.shortcuts.title}
columns={item.shortcuts.columns}
/> />
) )
case BlocksEnums.block.TextContent: case BlocksEnums.block.TextContent:

1
components/Webviews/LoyaltyPage/Blocks.tsx
View File

@@ -61,6 +61,7 @@ export default function Blocks({ blocks }: BlocksProps) {
shortcuts={shortcuts} shortcuts={shortcuts}
subtitle={block.shortcuts.subtitle} subtitle={block.shortcuts.subtitle}
title={block.shortcuts.title} title={block.shortcuts.title}
columns={block.shortcuts.columns}
/> />
) )
default: default:

1
lib/graphql/Fragments/Blocks/Shortcuts.graphql
View File

@@ -9,6 +9,7 @@
fragment Shortcuts on Shortcuts { fragment Shortcuts on Shortcuts {
subtitle: preamble subtitle: preamble
title title
columns
shortcuts { shortcuts {
open_in_new_tab open_in_new_tab
text text

1
server/routers/contentstack/schemas/blocks/shortcuts.ts
View File

@@ -12,6 +12,7 @@ export const shortcutsSchema = z.object({
shortcuts: z.object({ shortcuts: z.object({
subtitle: z.string().nullable(), subtitle: z.string().nullable(),
title: z.string().nullable(), title: z.string().nullable(),
columns: z.boolean().default(false),
shortcuts: z shortcuts: z
.array( .array(
z.object({ z.object({

4
types/components/myPages/myPage/shortcuts.ts
View File

@@ -3,3 +3,7 @@ import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks"
export interface ShortcutsProps extends Shortcut { export interface ShortcutsProps extends Shortcut {
firstItem?: boolean firstItem?: boolean
} }
export type ShortcutsListProps = {
linkList: ShortcutsProps["shortcuts"]
}