Add SplitBlock component (#299)

# Motivation

Add `SplitBlock` component to use on full-content-width pages.

# Changes

New component

# Screenshots

<img width="1138" alt="image"
src="https://github.com/dfinity/gix-components/assets/98811342/c3296eca-138e-4c9d-a1c4-68982e82591b">

<img width="751" alt="image"
src="https://github.com/dfinity/gix-components/assets/98811342/4b3ee3e1-134b-4950-955c-4756df28cd0f">

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");
+});

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",

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";

src/lib/components/SplitBlock.svelte

@@ -0,0 +1,38 @@
+<div class="split-block">
+  <div class="start">
+    <slot name="start" />
+  </div>
+  <hr />
+  <div class="end">
+    <slot name="end" />
+  </div>
+</div>
+
+<style lang="scss">
+  @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) {
+      grid-template-columns: 1fr 1px 1fr;
+      grid-template-rows: auto;
+      grid-row-gap: 0;
+      grid-column-gap: var(--padding-2x);
+    }
+  }
+
+  hr {
+    margin: 0;
+    height: 1px;
+    background: var(--line);
+
+    @include media.min-width(large) {
+      width: 1px;
+      height: auto;
+    }
+  }
+</style>

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" data-tid="start">Start slot content</div>
+    <div slot="end" class="item" data-tid="end">End slot content</div>
+  </SplitBlock>
+</div>
+
+<style lang="scss">
+  .container {
+    background: var(--card-background-contrast);
+  }
+
+  .item {
+    background: var(--card-background);
+  }
+</style>

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();
+  });
+});

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>