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 SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header" 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, firstItem = false,
shortcuts, shortcuts,
subtitle, subtitle,
title, title,
hasTwoColumns, hasTwoColumns,
}: ShortcutsProps) { }: ShortcutsListProps) {
const middleIndex = Math.ceil(shortcuts.length / 2) const middleIndex = Math.ceil(shortcuts.length / 2)
const leftColumn = shortcuts.slice(0, middleIndex) const leftColumn = shortcuts.slice(0, middleIndex)
const rightColumn = shortcuts.slice(middleIndex) const rightColumn = shortcuts.slice(middleIndex)
function setStyles(twoColumns: boolean) { const classNames = hasTwoColumns
if (twoColumns) { ? {
return {
section: styles.twoColumnSection, section: styles.twoColumnSection,
leftColumn: styles.leftColumn, leftColumn: styles.leftColumn,
rightColumn: styles.rightColumn, rightColumn: styles.rightColumn,
} }
} else { : {
return {
section: styles.oneColumnSection, section: styles.oneColumnSection,
leftColumn: styles.leftColumnBottomBorder, leftColumn: styles.leftColumnBottomBorder,
rightColumn: "", rightColumn: "",
} }
}
}
return ( return (
<SectionContainer> <SectionContainer>
<SectionHeader preamble={subtitle} title={title} topTitle={firstItem} /> <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
<section className={setStyles(hasTwoColumns).section}> <section className={classNames.section}>
<div className={setStyles(hasTwoColumns).leftColumn}> <div className={classNames.leftColumn}>
<ShortcutList shortCutList={leftColumn} /> <ShortcutsListItems shortCutList={leftColumn} />
</div> </div>
<div className={setStyles(hasTwoColumns).rightColumn}> <div className={classNames.rightColumn}>
<ShortcutList shortCutList={rightColumn} /> <ShortcutsListItems shortCutList={rightColumn} />
</div> </div>
</section> </section>
</SectionContainer> </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 CardsGrid from "@/components/Blocks/CardsGrid"
import DynamicContent from "@/components/Blocks/DynamicContent" 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 TextCols from "@/components/Blocks/TextCols"
import UspGrid from "@/components/Blocks/UspGrid" import UspGrid from "@/components/Blocks/UspGrid"
import JsonToHtml from "@/components/JsonToHtml" import JsonToHtml from "@/components/JsonToHtml"
@@ -41,7 +41,7 @@ export default function Blocks({ blocks }: BlocksProps) {
) )
case BlocksEnums.block.Shortcuts: case BlocksEnums.block.Shortcuts:
return ( return (
<Shortcuts <ShortcutsList
firstItem={firstItem} firstItem={firstItem}
key={`${block.shortcuts.title}-${idx}`} key={`${block.shortcuts.title}-${idx}`}
shortcuts={block.shortcuts.shortcuts} 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 PointsOverview from "@/components/Blocks/DynamicContent/Points/Overview"
import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel" import CurrentRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/CurrentLevel"
import NextLevelRewardsBlock from "@/components/Blocks/DynamicContent/Rewards/NextLevel" 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 JsonToHtml from "@/components/JsonToHtml"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import { modWebviewLink } from "@/utils/webviews" import { modWebviewLink } from "@/utils/webviews"
@@ -65,7 +65,7 @@ export default function Content({ content }: ContentProps) {
} }
}) })
return ( return (
<Shortcuts <ShortcutsList
key={`${item.shortcuts.title}-${idx}`} key={`${item.shortcuts.title}-${idx}`}
shortcuts={shortcuts} shortcuts={shortcuts}
subtitle={item.shortcuts.subtitle} subtitle={item.shortcuts.subtitle}

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

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

6
server/routers/contentstack/contentPage/output.ts
View File

@@ -155,6 +155,12 @@ export const contentPageSchema = z.object({
}), }),
}) })
export const contentPageSchemaBlocks = z.object({
content_page: z.object({
blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
}),
})
/** REFS */ /** REFS */
const contentPageCardsRefs = z const contentPageCardsRefs = z
.object({ .object({

5
server/routers/contentstack/contentPage/query.ts
View File

@@ -18,7 +18,10 @@ import {
TrackingChannelEnum, TrackingChannelEnum,
type TrackingSDKPageData, type TrackingSDKPageData,
} from "@/types/components/tracking" } from "@/types/components/tracking"
import type { GetContentPageSchema } from "@/types/trpc/routers/contentstack/contentPage" import type {
GetContentPageSchema,
GetContentPageSchemaBlocks,
} from "@/types/trpc/routers/contentstack/contentPage"
export const contentPageQueryRouter = router({ export const contentPageQueryRouter = router({
get: contentstackExtendedProcedureUID.query(async ({ ctx }) => { get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {

6
types/components/blocks/shortcuts.ts
View File

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

3
types/trpc/routers/contentstack/contentPage.ts
View File

@@ -4,6 +4,7 @@ import {
blocksSchema, blocksSchema,
contentPageRefsSchema, contentPageRefsSchema,
contentPageSchema, contentPageSchema,
contentPageSchemaBlocks,
sidebarSchema, sidebarSchema,
} from "@/server/routers/contentstack/contentPage/output" } from "@/server/routers/contentstack/contentPage/output"
@@ -15,6 +16,8 @@ export interface ContentPageRefs
export interface GetContentPageSchema export interface GetContentPageSchema
extends z.input<typeof contentPageSchema> {} extends z.input<typeof contentPageSchema> {}
export interface GetContentPageSchemaBlocks
extends z.input<typeof contentPageSchemaBlocks> {}
export interface ContentPage extends z.output<typeof contentPageSchema> {} export interface ContentPage extends z.output<typeof contentPageSchema> {}