feat(SW-322): refactor shortcuts list

2024-10-11 14:00:56 +02:00
parent 67a33c9dc8
commit 5d1bdd9cd8
13 changed files with 77 additions and 58 deletions
@@ -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>
+  )
+}
@@ -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;
+}
@@ -0,0 +1,46 @@
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+
+import ShortcutsListItems from "./ShortcutsListItems"
+
+import styles from "./shortcutsList.module.css"
+
+import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
+
+export default function ShortcutsList({
+  firstItem = false,
+  shortcuts,
+  subtitle,
+  title,
+  hasTwoColumns,
+}: ShortcutsListProps) {
+  const middleIndex = Math.ceil(shortcuts.length / 2)
+  const leftColumn = shortcuts.slice(0, middleIndex)
+  const rightColumn = shortcuts.slice(middleIndex)
+
+  const classNames = hasTwoColumns
+    ? {
+        section: styles.twoColumnSection,
+        leftColumn: styles.leftColumn,
+        rightColumn: styles.rightColumn,
+      }
+    : {
+        section: styles.oneColumnSection,
+        leftColumn: styles.leftColumnBottomBorder,
+        rightColumn: "",
+      }
+
+  return (
+    <SectionContainer>
+      <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
+      <section className={classNames.section}>
+        <div className={classNames.leftColumn}>
+          <ShortcutsListItems shortCutList={leftColumn} />
+        </div>
+        <div className={classNames.rightColumn}>
+          <ShortcutsListItems shortCutList={rightColumn} />
+        </div>
+      </section>
+    </SectionContainer>
+  )
+}
@@ -0,0 +1,29 @@
+.oneColumnSection,
+.twoColumnSection {
+  display: grid;
+  border-radius: var(--Corner-radius-Medium);
+  border: 1px solid var(--Base-Border-Subtle);
+  overflow: hidden;
+}
+
+.leftColumn,
+.leftColumnBottomBorder {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 1367px) {
+  .twoColumnSection {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--Spacing-x2);
+    border-radius: 0;
+    border: none;
+  }
+
+  .leftColumn,
+  .rightColumn {
+    height: fit-content;
+    border: 1px solid var(--Base-Border-Subtle);
+    border-radius: var(--Corner-radius-Medium);
+    overflow: hidden;
+  }
+}