From 5d1bdd9cd8faddac9534076757f9c08d3a6413cf Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Fri, 11 Oct 2024 14:00:56 +0200 Subject: [PATCH] feat(SW-322): refactor shortcuts list --- .../Blocks/Shortcuts/ShortcutList/index.tsx | 28 ----------------- .../ShortcutList/shortcutList.module.css | 3 -- .../ShortcutsListItems/index.tsx | 31 +++++++++++++++++++ .../shortcutsListItems.module.css | 11 +++++++ .../{Shortcuts => ShortcutsList}/index.tsx | 30 ++++++++---------- .../shortcutsList.module.css} | 0 components/Blocks/index.tsx | 4 +-- components/Webviews/AccountPage/Blocks.tsx | 4 +-- components/Webviews/LoyaltyPage/Blocks.tsx | 4 +-- .../contentstack/contentPage/output.ts | 6 ++++ .../routers/contentstack/contentPage/query.ts | 5 ++- types/components/blocks/shortcuts.ts | 6 ++-- .../trpc/routers/contentstack/contentPage.ts | 3 ++ 13 files changed, 77 insertions(+), 58 deletions(-) delete mode 100644 components/Blocks/Shortcuts/ShortcutList/index.tsx delete mode 100644 components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css create mode 100644 components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx create mode 100644 components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css rename components/Blocks/{Shortcuts => ShortcutsList}/index.tsx (55%) rename components/Blocks/{Shortcuts/shortcuts.module.css => ShortcutsList/shortcutsList.module.css} (100%) diff --git a/components/Blocks/Shortcuts/ShortcutList/index.tsx b/components/Blocks/Shortcuts/ShortcutList/index.tsx deleted file mode 100644 index e2826ed5e..000000000 --- a/components/Blocks/Shortcuts/ShortcutList/index.tsx +++ /dev/null @@ -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) => ( - - - {shortcut.text || shortcut.title} - - - - ))} - - ) -} diff --git a/components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css b/components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css deleted file mode 100644 index fa03c1717..000000000 --- a/components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.link { - background-color: var(--Base-Surface-Primary-light-Normal); -} diff --git a/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx new file mode 100644 index 000000000..72f6977d6 --- /dev/null +++ b/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx @@ -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 ( + + ) +} diff --git a/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css b/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css new file mode 100644 index 000000000..b2f150257 --- /dev/null +++ b/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css @@ -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; +} diff --git a/components/Blocks/Shortcuts/index.tsx b/components/Blocks/ShortcutsList/index.tsx similarity index 55% rename from components/Blocks/Shortcuts/index.tsx rename to components/Blocks/ShortcutsList/index.tsx index 850aafe66..bd46f0ddf 100644 --- a/components/Blocks/Shortcuts/index.tsx +++ b/components/Blocks/ShortcutsList/index.tsx @@ -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 ( -
-
- +
+
+
-
- +
+
diff --git a/components/Blocks/Shortcuts/shortcuts.module.css b/components/Blocks/ShortcutsList/shortcutsList.module.css similarity index 100% rename from components/Blocks/Shortcuts/shortcuts.module.css rename to components/Blocks/ShortcutsList/shortcutsList.module.css diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx index 2764c9fc7..bd8abb6f7 100644 --- a/components/Blocks/index.tsx +++ b/components/Blocks/index.tsx @@ -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 ( - { diff --git a/types/components/blocks/shortcuts.ts b/types/components/blocks/shortcuts.ts index 4cb6b7195..10e651ae2 100644 --- a/types/components/blocks/shortcuts.ts +++ b/types/components/blocks/shortcuts.ts @@ -1,9 +1,9 @@ import type { Shortcut } from "@/types/trpc/routers/contentstack/blocks" -export interface ShortcutsProps extends Shortcut { +export interface ShortcutsListProps extends Shortcut { firstItem?: boolean } -export type ShortcutsListProps = { - shortCutList: ShortcutsProps["shortcuts"] +export type ShortcutsListItemsProps = { + shortCutList: ShortcutsListProps["shortcuts"] } diff --git a/types/trpc/routers/contentstack/contentPage.ts b/types/trpc/routers/contentstack/contentPage.ts index 6bc343278..7153539ad 100644 --- a/types/trpc/routers/contentstack/contentPage.ts +++ b/types/trpc/routers/contentstack/contentPage.ts @@ -4,6 +4,7 @@ import { blocksSchema, contentPageRefsSchema, contentPageSchema, + contentPageSchemaBlocks, sidebarSchema, } from "@/server/routers/contentstack/contentPage/output" @@ -15,6 +16,8 @@ export interface ContentPageRefs export interface GetContentPageSchema extends z.input {} +export interface GetContentPageSchemaBlocks + extends z.input {} export interface ContentPage extends z.output {}