From febd400c81dfebf7e52f7b31f35c20c53d8a9d81 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 8 Oct 2024 11:49:32 +0200
Subject: [PATCH] feat(SW-322): remove two component structure

---
 .../Blocks/Shortcuts/OneColumnList/index.tsx  | 13 -------
 .../OneColumnList/oneColumnList.module.css    |  6 ---
 .../{Shortcut => ShortcutList}/index.tsx      |  6 +--
 .../shortcutList.module.css}                  |  0
 .../Blocks/Shortcuts/TwoColumnList/index.tsx  | 22 -----------
 components/Blocks/Shortcuts/index.tsx         | 38 +++++++++++++++----
 ...mnList.module.css => shortcuts.module.css} | 10 +++--
 types/components/blocks/shortcuts.ts          |  2 +-
 8 files changed, 41 insertions(+), 56 deletions(-)
 delete mode 100644 components/Blocks/Shortcuts/OneColumnList/index.tsx
 delete mode 100644 components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
 rename components/Blocks/Shortcuts/{Shortcut => ShortcutList}/index.tsx (81%)
 rename components/Blocks/Shortcuts/{Shortcut/shortcut.module.css => ShortcutList/shortcutList.module.css} (100%)
 delete mode 100644 components/Blocks/Shortcuts/TwoColumnList/index.tsx
 rename components/Blocks/Shortcuts/{TwoColumnList/twoColumnList.module.css => shortcuts.module.css} (75%)

diff --git a/components/Blocks/Shortcuts/OneColumnList/index.tsx b/components/Blocks/Shortcuts/OneColumnList/index.tsx
deleted file mode 100644
index 9f113fe34..000000000
--- a/components/Blocks/Shortcuts/OneColumnList/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Shortcut from "../Shortcut"
-
-import styles from "./oneColumnList.module.css"
-
-import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
-
-export default function OneColumnList({ linkList }: ShortcutsListProps) {
-  return (
-    <section className={styles.section}>
-      <Shortcut linkList={linkList} />
-    </section>
-  )
-}
diff --git a/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css b/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
deleted file mode 100644
index 5918f2b65..000000000
--- a/components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.section {
-  display: grid;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Subtle);
-  overflow: hidden;
-}
diff --git a/components/Blocks/Shortcuts/Shortcut/index.tsx b/components/Blocks/Shortcuts/ShortcutList/index.tsx
similarity index 81%
rename from components/Blocks/Shortcuts/Shortcut/index.tsx
rename to components/Blocks/Shortcuts/ShortcutList/index.tsx
index 6de9c9ff7..e2826ed5e 100644
--- a/components/Blocks/Shortcuts/Shortcut/index.tsx
+++ b/components/Blocks/Shortcuts/ShortcutList/index.tsx
@@ -2,14 +2,14 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
-import styles from "./shortcut.module.css"
+import styles from "./shortcutList.module.css"
 
 import type { ShortcutsListProps } from "@/types/components/blocks/shortcuts"
 
-export default function Shortcut({ linkList }: ShortcutsListProps) {
+export default function ShortcutList({ shortCutList }: ShortcutsListProps) {
   return (
     <>
-      {linkList.map((shortcut) => (
+      {shortCutList.map((shortcut) => (
         <Link
           href={shortcut.url}
           key={shortcut.title}
diff --git a/components/Blocks/Shortcuts/Shortcut/shortcut.module.css b/components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css
similarity index 100%
rename from components/Blocks/Shortcuts/Shortcut/shortcut.module.css
rename to components/Blocks/Shortcuts/ShortcutList/shortcutList.module.css
diff --git a/components/Blocks/Shortcuts/TwoColumnList/index.tsx b/components/Blocks/Shortcuts/TwoColumnList/index.tsx
deleted file mode 100644
index 04c58b23d..000000000
--- a/components/Blocks/Shortcuts/TwoColumnList/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Shortcut from "../Shortcut"
-
-import styles from "./twoColumnList.module.css"
-
-import type { ShortcutsListProps } from "@/types/components/blocks/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)
-
-  return (
-    <section className={styles.section}>
-      <div className={styles.leftColumn}>
-        <Shortcut linkList={leftColumn} />
-      </div>
-      <div className={styles.rightColumn}>
-        <Shortcut linkList={rightColumn} />
-      </div>
-    </section>
-  )
-}
diff --git a/components/Blocks/Shortcuts/index.tsx b/components/Blocks/Shortcuts/index.tsx
index 4a9afd98d..f0a88e37b 100644
--- a/components/Blocks/Shortcuts/index.tsx
+++ b/components/Blocks/Shortcuts/index.tsx
@@ -1,8 +1,9 @@
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 
-import OneColumnList from "./OneColumnList"
-import TwoColumnList from "./TwoColumnList"
+import ShortcutList from "./ShortcutList"
+
+import styles from "./shortcuts.module.css"
 
 import type { ShortcutsProps } from "@/types/components/blocks/shortcuts"
 
@@ -13,14 +14,37 @@ export default function Shortcuts({
   title,
   columns,
 }: ShortcutsProps) {
+  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 {
+        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} />
-      {columns ? (
-        <TwoColumnList linkList={shortcuts} />
-      ) : (
-        <OneColumnList linkList={shortcuts} />
-      )}
+      <section className={setStyles(columns).section}>
+        <div className={setStyles(columns).leftColumn}>
+          <ShortcutList shortCutList={leftColumn} />
+        </div>
+        <div className={setStyles(columns).rightColumn}>
+          <ShortcutList shortCutList={rightColumn} />
+        </div>
+      </section>
     </SectionContainer>
   )
 }
diff --git a/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css b/components/Blocks/Shortcuts/shortcuts.module.css
similarity index 75%
rename from components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css
rename to components/Blocks/Shortcuts/shortcuts.module.css
index 0f9856acf..37daea30f 100644
--- a/components/Blocks/Shortcuts/TwoColumnList/twoColumnList.module.css
+++ b/components/Blocks/Shortcuts/shortcuts.module.css
@@ -1,16 +1,18 @@
-.section {
+.oneColumnSection,
+.twoColumnSection {
   display: grid;
   border-radius: var(--Corner-radius-Medium);
   border: 1px solid var(--Base-Border-Subtle);
   overflow: hidden;
 }
 
-.leftColumn {
-  border-bottom: 0.5px solid var(--Base-Border-Subtle);
+.leftColumn,
+.leftColumnBottomBorder {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 @media screen and (min-width: 1367px) {
-  .section {
+  .twoColumnSection {
     grid-template-columns: 1fr 1fr;
     column-gap: var(--Spacing-x2);
     border-radius: 0;
diff --git a/types/components/blocks/shortcuts.ts b/types/components/blocks/shortcuts.ts
index 1e6fa4ae4..4cb6b7195 100644
--- a/types/components/blocks/shortcuts.ts
+++ b/types/components/blocks/shortcuts.ts
@@ -5,5 +5,5 @@ export interface ShortcutsProps extends Shortcut {
 }
 
 export type ShortcutsListProps = {
-  linkList: ShortcutsProps["shortcuts"]
+  shortCutList: ShortcutsProps["shortcuts"]
 }