From b0a7393d26eca8619c9f19045ca3a5564c97a691 Mon Sep 17 00:00:00 2001
From: mstrasinskis <maksims.strasinskis@dfinity.org>
Date: Mon, 2 Oct 2023 14:54:11 +0200
Subject: [PATCH 1/4] Add SplitBlock component

---
 src/docs/constants/docs.constants.ts          |  8 +++
 src/lib/components.ts                         |  1 +
 src/lib/components/SplitBlock.svelte          | 50 +++++++++++++++++++
 .../(split)/components/split-block/+page.md   | 46 +++++++++++++++++
 src/tests/lib/components/SplitBlock.spec.ts   | 11 ++++
 .../lib/components/SplitBlockTest.svelte      |  8 +++
 6 files changed, 124 insertions(+)
 create mode 100644 src/lib/components/SplitBlock.svelte
 create mode 100644 src/routes/(split)/components/split-block/+page.md
 create mode 100644 src/tests/lib/components/SplitBlock.spec.ts
 create mode 100644 src/tests/lib/components/SplitBlockTest.svelte

diff --git a/src/docs/constants/docs.constants.ts b/src/docs/constants/docs.constants.ts
index c159a461..e8bf0437 100644
--- a/src/docs/constants/docs.constants.ts
+++ b/src/docs/constants/docs.constants.ts
@@ -224,6 +224,14 @@ export const COMPONENT_ROUTES: ComponentRoute[] = [
       "The detail of the layout where the content finds place in two columns.",
   },
 
+  {
+    path: "/components/split-block",
+    title: "Split Block",
+
+    description:
+      "Displays content in a column on mobile devices and in a row on desktops.",
+  },
+
   {
     path: "/components/tag",
     title: "Tag",
diff --git a/src/lib/components.ts b/src/lib/components.ts
index a478486d..d2a424fd 100644
--- a/src/lib/components.ts
+++ b/src/lib/components.ts
@@ -38,6 +38,7 @@ export { default as Segment } from "./components/Segment.svelte";
 export { default as SegmentButton } from "./components/SegmentButton.svelte";
 export { default as SkeletonText } from "./components/SkeletonText.svelte";
 export { default as Spinner } from "./components/Spinner.svelte";
+export { default as SplitBlock } from "./components/SplitBlock.svelte";
 export { default as SplitContent } from "./components/SplitContent.svelte";
 export { default as SplitPane } from "./components/SplitPane.svelte";
 export { default as Tag } from "./components/Tag.svelte";
diff --git a/src/lib/components/SplitBlock.svelte b/src/lib/components/SplitBlock.svelte
new file mode 100644
index 00000000..721655ed
--- /dev/null
+++ b/src/lib/components/SplitBlock.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+</script>
+
+<div class="split-block">
+  <div class="start">
+    <slot name="start" />
+  </div>
+  <div class="end">
+    <slot name="end" />
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../styles/mixins/media";
+
+  .split-block {
+    @include media.min-width(large) {
+      display: flex;
+      flex-direction: row;
+      gap: var(--padding-4x);
+    }
+  }
+
+  .start,
+  .end {
+    flex: 1;
+  }
+
+  // line separator
+  .start {
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      height: 1px;
+      background: var(--line);
+      margin: var(--padding-2x) 0;
+
+      @include media.min-width(large) {
+        position: absolute;
+        top: 0;
+        right: calc(-1 * var(--padding-2x));
+        height: 100%;
+        width: 1px;
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/routes/(split)/components/split-block/+page.md b/src/routes/(split)/components/split-block/+page.md
new file mode 100644
index 00000000..a7ae3102
--- /dev/null
+++ b/src/routes/(split)/components/split-block/+page.md
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import SplitBlock from "$lib/components/SplitBlock.svelte";
+</script>
+
+# Split Content
+
+This component displays two slots in a column on mobile devices and in a row on desktops, with a 1px separation line.
+
+```javascript
+<SplitBlock>
+  <div slot="start">Content A</div>
+  <div slot="end">Content B</div>
+</SplitBlock>
+```
+
+## Properties
+
+No properties
+
+## Slots
+
+| Slot name | Description               |
+| --------- | ------------------------- |
+| `start`   | First column on desktop.  |
+| `end`     | Second column on desktop. |
+
+## Showcase
+
+> Colors added for demo purposes
+
+<div class="container">
+  <SplitBlock>
+    <div slot="start" class="item">Content A</div>
+    <div slot="end" class="item">Content B</div>
+  </SplitBlock>
+</div>
+
+<style lang="scss">
+  .container {
+    background: var(--card-background-contrast);
+  }
+
+  .item {
+    background: var(--card-background);
+  }
+</style>
diff --git a/src/tests/lib/components/SplitBlock.spec.ts b/src/tests/lib/components/SplitBlock.spec.ts
new file mode 100644
index 00000000..99c58d7f
--- /dev/null
+++ b/src/tests/lib/components/SplitBlock.spec.ts
@@ -0,0 +1,11 @@
+import { render } from "@testing-library/svelte";
+import SplitBlockTest from "./SplitBlockTest.svelte";
+
+describe("SplitBlock", () => {
+  it("should render slotted elements", () => {
+    const { getByTestId } = render(SplitBlockTest);
+
+    expect(getByTestId("content-test-start-slot")).not.toBeNull();
+    expect(getByTestId("content-test-end-slot")).not.toBeNull();
+  });
+});
diff --git a/src/tests/lib/components/SplitBlockTest.svelte b/src/tests/lib/components/SplitBlockTest.svelte
new file mode 100644
index 00000000..2cd3fdaa
--- /dev/null
+++ b/src/tests/lib/components/SplitBlockTest.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import SplitBlock from "$lib/components/SplitBlock.svelte";
+</script>
+
+<SplitBlock>
+  <div data-tid="content-test-start-slot" slot="start" />
+  <div data-tid="content-test-end-slot" slot="end" />
+</SplitBlock>

From 9b98ec99f970f4d544c6a0aed11d724ffabc086d Mon Sep 17 00:00:00 2001
From: mstrasinskis <maksims.strasinskis@dfinity.org>
Date: Mon, 2 Oct 2023 16:47:25 +0200
Subject: [PATCH 2/4] Cleanup code

---
 src/lib/components/SplitBlock.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/components/SplitBlock.svelte b/src/lib/components/SplitBlock.svelte
index 721655ed..95b5e0ea 100644
--- a/src/lib/components/SplitBlock.svelte
+++ b/src/lib/components/SplitBlock.svelte
@@ -1,6 +1,3 @@
-<script lang="ts">
-</script>
-
 <div class="split-block">
   <div class="start">
     <slot name="start" />
@@ -16,7 +13,6 @@
   .split-block {
     @include media.min-width(large) {
       display: flex;
-      flex-direction: row;
       gap: var(--padding-4x);
     }
   }

From 34e2d14d97b8ddcdd1fb08aae1b98bbdac9afb66 Mon Sep 17 00:00:00 2001
From: mstrasinskis <maksims.strasinskis@dfinity.org>
Date: Wed, 4 Oct 2023 10:38:55 +0200
Subject: [PATCH 3/4] test: split block e2e test

---
 e2e/split-block.e2e.ts                             | 13 +++++++++++++
 src/routes/(split)/components/split-block/+page.md |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 e2e/split-block.e2e.ts

diff --git a/e2e/split-block.e2e.ts b/e2e/split-block.e2e.ts
new file mode 100644
index 00000000..1ca5604c
--- /dev/null
+++ b/e2e/split-block.e2e.ts
@@ -0,0 +1,13 @@
+import { expect, test } from "@playwright/test";
+
+const testUrl = "/components/split-block";
+
+test("Should display start slot content", async ({ page }) => {
+  await page.goto(testUrl);
+  await expect(page.getByTestId("start")).toHaveText("Start slot content");
+});
+
+test("Should display end slot content", async ({ page }) => {
+  await page.goto(testUrl);
+  await expect(page.getByTestId("end")).toHaveText("End slot content");
+});
diff --git a/src/routes/(split)/components/split-block/+page.md b/src/routes/(split)/components/split-block/+page.md
index a7ae3102..89a946c4 100644
--- a/src/routes/(split)/components/split-block/+page.md
+++ b/src/routes/(split)/components/split-block/+page.md
@@ -30,8 +30,8 @@ No properties
 
 <div class="container">
   <SplitBlock>
-    <div slot="start" class="item">Content A</div>
-    <div slot="end" class="item">Content B</div>
+    <div slot="start" class="item" data-tid="start">Start slot content</div>
+    <div slot="end" class="item" data-tid="end">End slot content</div>
   </SplitBlock>
 </div>
 

From 7b1c12a585d5746bf2106afdd723d234e9dfdc12 Mon Sep 17 00:00:00 2001
From: mstrasinskis <maksims.strasinskis@dfinity.org>
Date: Wed, 4 Oct 2023 11:22:09 +0200
Subject: [PATCH 4/4] refactor: SplitBlock layout style

---
 src/lib/components/SplitBlock.svelte | 42 +++++++++++-----------------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/SplitBlock.svelte b/src/lib/components/SplitBlock.svelte
index 95b5e0ea..bdae4bda 100644
--- a/src/lib/components/SplitBlock.svelte
+++ b/src/lib/components/SplitBlock.svelte
@@ -2,6 +2,7 @@
   <div class="start">
     <slot name="start" />
   </div>
+  <hr />
   <div class="end">
     <slot name="end" />
   </div>
@@ -11,36 +12,27 @@
   @use "../styles/mixins/media";
 
   .split-block {
+    display: grid;
+    grid-template-rows: auto 1px auto;
+    grid-template-columns: auto;
+    grid-row-gap: var(--padding-2x);
+
     @include media.min-width(large) {
-      display: flex;
-      gap: var(--padding-4x);
+      grid-template-columns: 1fr 1px 1fr;
+      grid-template-rows: auto;
+      grid-row-gap: 0;
+      grid-column-gap: var(--padding-2x);
     }
   }
 
-  .start,
-  .end {
-    flex: 1;
-  }
-
-  // line separator
-  .start {
-    position: relative;
+  hr {
+    margin: 0;
+    height: 1px;
+    background: var(--line);
 
-    &::after {
-      content: "";
-      display: block;
-      height: 1px;
-      background: var(--line);
-      margin: var(--padding-2x) 0;
-
-      @include media.min-width(large) {
-        position: absolute;
-        top: 0;
-        right: calc(-1 * var(--padding-2x));
-        height: 100%;
-        width: 1px;
-        margin: 0;
-      }
+    @include media.min-width(large) {
+      width: 1px;
+      height: auto;
     }
   }
 </style>