From 105eaceb750cce656d570d9c715bf80a82d51eab Mon Sep 17 00:00:00 2001
From: Clara Martin <clara@studiometa.fr>
Date: Tue, 19 Mar 2024 18:09:54 +0100
Subject: [PATCH] Add an exemple of usage for the sticky table of content

---
 .../StickyTableOfContent/examples.md          | 10 ++++++
 .../molecules/StickyTableOfContent/index.md   | 11 +++++++
 .../molecules/StickyTableOfContent/js-api.md  |  5 +++
 .../StickyTableOfContent/stories/app.js       | 33 +++++++++++++++++++
 .../StickyTableOfContent/stories/app.twig     | 18 ++++++++++
 5 files changed, 77 insertions(+)
 create mode 100644 packages/docs/components/molecules/StickyTableOfContent/examples.md
 create mode 100644 packages/docs/components/molecules/StickyTableOfContent/index.md
 create mode 100644 packages/docs/components/molecules/StickyTableOfContent/js-api.md
 create mode 100644 packages/docs/components/molecules/StickyTableOfContent/stories/app.js
 create mode 100644 packages/docs/components/molecules/StickyTableOfContent/stories/app.twig

diff --git a/packages/docs/components/molecules/StickyTableOfContent/examples.md b/packages/docs/components/molecules/StickyTableOfContent/examples.md
new file mode 100644
index 00000000..f5e5d5d7
--- /dev/null
+++ b/packages/docs/components/molecules/StickyTableOfContent/examples.md
@@ -0,0 +1,10 @@
+---
+outline: deep
+---
+
+# Examples
+
+<PreviewPlayground
+  :html="() => import('./stories/app.twig')"
+  :script="() => import('./stories/app.js?raw')"
+/>
diff --git a/packages/docs/components/molecules/StickyTableOfContent/index.md b/packages/docs/components/molecules/StickyTableOfContent/index.md
new file mode 100644
index 00000000..c4b3dd8d
--- /dev/null
+++ b/packages/docs/components/molecules/StickyTableOfContent/index.md
@@ -0,0 +1,11 @@
+# StickyTable <Badges :texts="badges" />
+
+<script setup>
+  import pkg from '@studiometa/ui/molecules/StickyTable/package.json';
+  const badges = [`v${pkg.version}`, 'Twig'];
+</script>
+
+## Table of content
+
+- [Examples](./examples)
+- [Twig API](./twig-api)
diff --git a/packages/docs/components/molecules/StickyTableOfContent/js-api.md b/packages/docs/components/molecules/StickyTableOfContent/js-api.md
new file mode 100644
index 00000000..d542109c
--- /dev/null
+++ b/packages/docs/components/molecules/StickyTableOfContent/js-api.md
@@ -0,0 +1,5 @@
+---
+title: Slider JS API
+---
+
+# JS API (todo)
diff --git a/packages/docs/components/molecules/StickyTableOfContent/stories/app.js b/packages/docs/components/molecules/StickyTableOfContent/stories/app.js
new file mode 100644
index 00000000..2b25b9df
--- /dev/null
+++ b/packages/docs/components/molecules/StickyTableOfContent/stories/app.js
@@ -0,0 +1,33 @@
+/* eslint-disable max-classes-per-file */
+import { Base, createApp } from '@studiometa/js-toolkit';
+import {
+  StickyTable as StickyTableCore,
+  StickyTableItem,
+  StickyTableSection,
+} from '@studiometa/ui';
+
+/**
+ *
+ */
+class StickyTable extends StickyTableCore {
+  static config = {
+    components: {
+      StickyTableItem,
+      StickyTableSection,
+    },
+  };
+}
+
+/**
+ *
+ */
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      StickyTable,
+    },
+  };
+}
+
+createApp(App, document.body);
diff --git a/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig b/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig
new file mode 100644
index 00000000..3b581ef9
--- /dev/null
+++ b/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig
@@ -0,0 +1,18 @@
+<style type="text/css">
+  .current {
+    color: red;
+  }
+</style>
+
+<div data-component="StickyTable" class="flex items-start">
+  <div class="bg-blue-200 w-1/3 sticky top-4">
+    <div data-component="StickyTableItem" data-option-id="item-1"> item-1 </div>
+    <div data-component="StickyTableItem" data-option-id="item-2"> item-2</div>
+    <div data-component="StickyTableItem" data-option-id="item-3"> item-3</div>
+  </div>
+  <div data-component="StickyTableSection" class="bg-green-200 w-2/3 h-[300vh]">
+    <div class="h-1/3" data-ref="item[]" id="item-1">Item1</div>
+    <div class="h-1/3" data-ref="item[]" id="item-2">Item2</div>
+    <div class="h-1/3" data-ref="item[]" id="item-3">Item3</div>
+  </div>
+</div>