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

feat(SW-322): refactor shortcuts list

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-10-11 14:00:56 +02:00
parent 67a33c9dc8
commit 5d1bdd9cd8
13 changed files with 77 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/Blocks/Shortcuts/ShortcutList/index.tsx
View File

@@ -1,28 +0,0 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcutList.module.css"
import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
export default function ShortcutList({ shortCutList }: ShortcutsListProps) {
return (
<>
{shortCutList.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.title}</span>
</Body>
<ArrowRightIcon color="burgundy" width={24} height={24} />
</Link>
))}
</>
)
}

3
components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css
View File

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

31
components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./shortcutsListItems.module.css"
import type { ShortcutsListItemsProps } from "@/types/components/blocks/shortcuts"
export default function ShortcutsListItems({
shortCutList,
}: ShortcutsListItemsProps) {
return (
<ul>
{shortCutList.map((shortcut) => (
<li key={shortcut.title} className={styles.listItem}>
<Link
href={shortcut.url}
target={shortcut.openInNewTab ? "_blank" : undefined}
variant="shortcut"
className={styles.link}
>
<Body textTransform="bold" color="burgundy">
<span>{shortcut.text || shortcut.title}</span>
</Body>
<ArrowRightIcon color="burgundy" width={24} height={24} />
</Link>
</li>
))}
</ul>
)
}

11
components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css Normal file
View File

@@ -0,0 +1,11 @@
.link {
background-color: var(--Base-Surface-Primary-light-Normal);
}
.listItem {
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.listItem:last-child {
border-bottom: none;
}

30
components/Blocks/Shortcuts/index.tsx → components/Blocks/ShortcutsList/index.tsx
View File

@@ -1,48 +1,44 @@
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import ShortcutList from "./ShortcutList"
import ShortcutsListItems from "./ShortcutsListItems"
import styles from "./shortcuts.module.css"
import styles from "./shortcutsList.module.css"
import type { ShortcutsProps } from "@/types/components/blocks/shortcuts"
import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
export default function Shortcuts({
export default function ShortcutsList({
firstItem = false,
shortcuts,
subtitle,
title,
hasTwoColumns,
}: ShortcutsProps) {
}: ShortcutsListProps) {
const middleIndex = Math.ceil(shortcuts.length / 2)
const leftColumn = shortcuts.slice(0, middleIndex)
const rightColumn = shortcuts.slice(middleIndex)
function setStyles(twoColumns: boolean) {
if (twoColumns) {
return {
const classNames = hasTwoColumns
? {
section: styles.twoColumnSection,
leftColumn: styles.leftColumn,
rightColumn: styles.rightColumn,
}
} else {
return {
: {
section: styles.oneColumnSection,
leftColumn: styles.leftColumnBottomBorder,
rightColumn: "",
}
}
}
return (
<SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={setStyles(hasTwoColumns).section}>
<div className={setStyles(hasTwoColumns).leftColumn}>
<ShortcutList shortCutList={leftColumn} />
<section className={classNames.section}>
<div className={classNames.leftColumn}>
<ShortcutsListItems shortCutList={leftColumn} />
</div>
<div className={setStyles(hasTwoColumns).rightColumn}>
<ShortcutList shortCutList={rightColumn} />
<div className={classNames.rightColumn}>
<ShortcutsListItems shortCutList={rightColumn} />
</div>
</section>
</SectionContainer>

0
components/Blocks/Shortcuts/shortcuts.module.css → components/Blocks/ShortcutsList/shortcutsList.module.css
View File

4
components/Blocks/index.tsx
View File

@@ -1,6 +1,6 @@
import CardsGrid from "@/components/Blocks/CardsGrid"
import DynamicContent from "@/components/Blocks/DynamicContent"
import Shortcuts from "@/components/Blocks/Shortcuts"
import ShortcutsList from "@/components/Blocks/ShortcutsList"
import TextCols from "@/components/Blocks/TextCols"
import UspGrid from "@/components/Blocks/UspGrid"
import JsonToHtml from "@/components/JsonToHtml"
@@ -41,7 +41,7 @@ export default function Blocks({ blocks }: BlocksProps) {
)
case BlocksEnums.block.Shortcuts:
return (
<Shortcuts
<ShortcutsList
firstItem={firstItem}
key={`${block.shortcuts.title}-${idx}`}
shortcuts={block.shortcuts.shortcuts}

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

@@ -3,7 +3,7 @@ import EarnAndBurn from "@/components/Blocks/DynamicContent/Points/EarnAndBurn"
import PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel"
import Shortcuts from "@/components/Blocks/Shortcuts"
import ShortcutsList from "@/components/Blocks/ShortcutsList"
import JsonToHtml from "@/components/JsonToHtml"
import { getLang } from "@/i18n/serverContext"
import { modWebviewLink } from "@/utils/webviews"
@@ -65,7 +65,7 @@ export default function Content({ content }: ContentProps) {
}
})
return (
<Shortcuts
<ShortcutsList
key={`${item.shortcuts.title}-${idx}`}
shortcuts={shortcuts}
subtitle={item.shortcuts.subtitle}

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

@@ -1,6 +1,6 @@
import CardsGrid from "@/components/Blocks/CardsGrid"
import DynamicContent from "@/components/Blocks/DynamicContent"
import Shortcuts from "@/components/Blocks/Shortcuts"
import ShortcutsList from "@/components/Blocks/ShortcutsList"
import JsonToHtml from "@/components/JsonToHtml"
import { getLang } from "@/i18n/serverContext"
import { modWebviewLink } from "@/utils/webviews"
@@ -55,7 +55,7 @@ export default function Blocks({ blocks }: BlocksProps) {
url: modWebviewLink(shortcut.url, getLang()),
}))
return (
<Shortcuts
<ShortcutsList
key={`${block.shortcuts.title}-${idx}`}
firstItem={firstItem}
shortcuts={shortcuts}