Update stories

umbraco · Oct 3, 2023 · 58f926f · 58f926f
1 parent 7c4dfc8
commit 58f926f
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/packages/uui-split-panel/lib/uui-split-panel.element.ts b/packages/uui-split-panel/lib/uui-split-panel.element.ts
@@ -309,6 +309,7 @@ export class UUISplitPanelElement extends LitElement {
 
         return html
         `<slot name="start" part="panel start" class="start"></slot>
+
         <div
           part="divider"
           class="divider"
@@ -324,6 +325,7 @@ export class UUISplitPanelElement extends LitElement {
         >
           <slot name="divider"></slot>
         </div>
+        
         <slot name="end" part="panel end" class="end"></slot>
       `;
     }

diff --git a/packages/uui-split-panel/lib/uui-split-panel.story.ts b/packages/uui-split-panel/lib/uui-split-panel.story.ts
@@ -23,6 +23,32 @@ type Story = StoryObj<UUISplitPanelElement>;
 
 export const Overview: Story = {};
 
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-split-panel disabled style="height: 400px;">
+        <div
+          slot="start"
+          style="height: 200px; background: var(--uui-color-background); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style="height: 200px; background: var(--uui-color-background); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+        >
+          End
+        </div>
+      </uui-split-panel>`,
+      },
+    },
+  },
+};
+
 export const Vertical: Story = {
   args: {
     vertical: true,
@@ -48,3 +74,57 @@ export const Vertical: Story = {
     },
   },
 };
+
+export const Snapping: Story = {
+  args: {
+    snap: "100px 50%",
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<div class="split-panel-snapping">
+        <uui-split-panel snap="100px 50%" style="height: 400px;">
+        <div
+          slot="start"
+          style="height: 200px; background: var(--uui-color-background); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+        >
+          Start
+        </div>
+        <div
+          slot="end"
+          style="height: 200px; background: var(--uui-color-background); display: flex; align-items: center; justify-content: center; overflow: hidden;"
+        >
+          End
+        </div>
+      </uui-split-panel>
+      <div class="split-panel-snapping-dots"></div>
+      </div>
+      <style>
+  .split-panel-snapping {
+    position: relative;
+  }
+
+  .split-panel-snapping-dots::before,
+  .split-panel-snapping-dots::after {
+    content: '';
+    position: absolute;
+    bottom: -12px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--sl-color-neutral-400);
+    transform: translateX(-3px);
+  }
+
+  .split-panel-snapping-dots::before {
+    left: 100px;
+  }
+
+  .split-panel-snapping-dots::after {
+    left: 50%;
+  }
+</style>`,
+      },
+    },
+  },
+};