feat(SW-322): remove two component structure

components/Blocks/Shortcuts/OneColumnList/index.tsx

@@ -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>
-  )
-}

components/Blocks/Shortcuts/OneColumnList/oneColumnList.module.css

@@ -1,6 +0,0 @@
-.section {
-  display: grid;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Subtle);
-  overflow: hidden;
-}

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}

components/Blocks/Shortcuts/TwoColumnList/index.tsx

@@ -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>
-  )
-}

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 ShortcutList from "./ShortcutList"
-import TwoColumnList from "./TwoColumnList"
+
+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 ? (
+      <section className={setStyles(columns).section}>
-        <TwoColumnList linkList={shortcuts} />
+        <div className={setStyles(columns).leftColumn}>
-      ) : (
+          <ShortcutList shortCutList={leftColumn} />
-        <OneColumnList linkList={shortcuts} />
+        </div>
-      )}
+        <div className={setStyles(columns).rightColumn}>
+          <ShortcutList shortCutList={rightColumn} />
+        </div>
+      </section>
     </SectionContainer>
   )
 }

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 {
+.leftColumn,
-  border-bottom: 0.5px solid var(--Base-Border-Subtle);
+.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;

types/components/blocks/shortcuts.ts

@@ -5,5 +5,5 @@ export interface ShortcutsProps extends Shortcut {
 }
 
 export type ShortcutsListProps = {
-  linkList: ShortcutsProps["shortcuts"]
+  shortCutList: ShortcutsProps["shortcuts"]
 }