Merge pull request #240 from appwrite/feat-step-component

Feat step component
appwrite · Nov 29, 2024 · 2e16bc5 · 2e16bc5
2 parents 017ed85 + 1077bec
commit 2e16bc5
Show file tree

Hide file tree

Showing 7 changed files with 278 additions and 0 deletions.
diff --git a/v2/pink-sb/src/lib/index.ts b/v2/pink-sb/src/lib/index.ts
@@ -32,6 +32,7 @@ export { default as InlineCode } from './InlineCode.svelte';
 export { default as Popover } from './Popover.svelte';
 export { default as Fieldset } from './Fieldset.svelte';
 export { default as Image } from './Image.svelte';
+export { default as Step } from './step/index.js';
 export { default as Modal } from './Modal.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { Toast } from './toast/index.js';

diff --git a/v2/pink-sb/src/lib/step/StepItem.svelte b/v2/pink-sb/src/lib/step/StepItem.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+    import ActiveIndicator from './active-indicator.svg';
+    import Done from './done.svg';
+    import { Tag } from '$lib/index.js';
+    export let state: 'previous' | 'current' | 'next';
+    export let noLine: boolean = false;
+    export let shortLine: boolean = false;
+    export let hideBadge: boolean = false;
+</script>
+
+<div class="stepitem" class:noline={noLine} class:shortline={shortLine}>
+    {#if state === 'previous' || state === 'next'}
+        <div class="dot-inactive" />
+    {:else if state === 'current'}
+        <div class="dot-active">
+            <img src={ActiveIndicator} alt="Active" />
+        </div>
+    {/if}
+    {#if !hideBadge}
+        <div class="badge">
+            <Tag size="s">
+                {#if state === 'next'}
+                    Next
+                {:else if state === 'current'}
+                    Now
+                {:else}
+                    <img src={Done} alt="Done icon" /> <span>Done</span>
+                {/if}
+            </Tag>
+        </div>
+    {/if}
+    <div class:badge-margin={!hideBadge}>
+        <slot />
+    </div>
+</div>
+
+<style lang="scss">
+    .stepitem {
+        padding: var(--space-9) var(--space-10);
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            background-color: var(--color-light-neutral-10, #ededf0);
+            width: var(--border-width-m);
+            height: 100%;
+            margin-inline: calc(-1 * var(--space-10));
+            z-index: -2;
+        }
+    }
+
+    .stepitem.noline::before {
+        display: none;
+    }
+
+    .stepitem.shortline::before {
+        height: calc(100% - var(--base-80));
+    }
+
+    .dot-inactive {
+        width: 7px;
+        aspect-ratio: 1/1;
+        border-radius: 50%;
+        background-color: var(--color-light-neutral-10, #ededf0);
+        margin-inline: calc(-1 * (var(--base-36) - 1px));
+        position: absolute;
+    }
+
+    .dot-active {
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        margin-inline: calc(-1 * (var(--base-36) + var(--base-2)));
+        margin-block: calc(-1 * var(--space-2));
+        background-color: var(--color-bgcolor-neutral-primary);
+
+        img {
+            position: absolute;
+            right: var(--space-1);
+        }
+    }
+
+    .dot-active::before {
+        content: '';
+        width: 1px;
+        height: var(--base-80);
+        background: linear-gradient(
+            to bottom,
+            rgba(253, 54, 110, 0) 0%,
+            rgba(253, 54, 110, 1) 50%,
+            rgba(253, 54, 110, 0) 100%
+        );
+        margin-inline: var(--base-6);
+        position: absolute;
+        margin-block: calc(-1 * var(--base-32));
+        z-index: -1;
+    }
+
+    .badge {
+        position: absolute;
+        margin-block: calc(-1 * var(--space-4));
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .badge-margin {
+        margin-block: var(--space-10);
+    }
+</style>
diff --git a/v2/pink-sb/src/lib/step/StepList.svelte b/v2/pink-sb/src/lib/step/StepList.svelte
@@ -0,0 +1,3 @@
+<div class="steplist">
+    <slot />
+</div>
diff --git a/v2/pink-sb/src/lib/step/active-indicator.svg b/v2/pink-sb/src/lib/step/active-indicator.svg
diff --git a/v2/pink-sb/src/lib/step/done.svg b/v2/pink-sb/src/lib/step/done.svg
diff --git a/v2/pink-sb/src/lib/step/index.ts b/v2/pink-sb/src/lib/step/index.ts
@@ -0,0 +1,7 @@
+import List from './StepList.svelte';
+import Item from './StepItem.svelte';
+
+export default {
+    List,
+    Item
+};
diff --git a/v2/pink-sb/src/stories/Step.stories.svelte b/v2/pink-sb/src/stories/Step.stories.svelte
@@ -0,0 +1,90 @@
+<script context="module" lang="ts">
+    import { Step } from '$lib/index.js';
+    import type { MetaProps } from '@storybook/addon-svelte-csf';
+    import { Story } from '@storybook/addon-svelte-csf';
+
+    export const meta: MetaProps = {
+        title: 'Components/Step',
+        component: Step
+    };
+</script>
+
+<Story name="Multiple steps">
+    <Step.List>
+        <Step.Item state="previous"
+            ><div>
+                <p>
+                    Cras bibendum, erat id commodo rhoncus, justo mi porttitor ex, sit amet lacinia
+                    sem ipsum et tellus. Curabitur quis maximus sem. Nullam vel ullamcorper nunc, a
+                    maximus metus. Integer varius, nibh vitae interdum commodo, lectus enim rhoncus
+                    magna, nec ultricies erat massa nec risus. Nunc non elit tortor. Phasellus porta
+                    lectus a semper rhoncus. Donec quis pretium dolor. Morbi lobortis turpis velit,
+                    quis rutrum ipsum eleifend eu. Duis pretium sem at magna dapibus interdum.
+                    Praesent bibendum ornare consectetur. Orci varius natoque penatibus et magnis
+                    dis parturient montes, nascetur ridiculus mus. Fusce finibus nisi vitae odio
+                    scelerisque laoreet.
+                </p>
+            </div></Step.Item
+        >
+        <Step.Item state="previous" hideBadge={true}
+            ><div>
+                <p>
+                    Curabitur ac neque viverra, vestibulum turpis nec, rutrum dolor. Etiam sit amet
+                    est justo. Nam vestibulum lacinia quam sit amet maximus. Etiam sit amet
+                    tristique ligula. Praesent sagittis nibh eget neque elementum commodo. Proin ac
+                    orci turpis. Quisque quis erat id lectus fermentum porttitor non ut nunc.
+                    Aliquam ornare mi nec mi vestibulum, eget fringilla eros consequat.
+                </p>
+            </div></Step.Item
+        >
+        <Step.Item state="current"
+            ><div>
+                <p>
+                    Nulla nisl dolor, pellentesque in porttitor at, gravida quis neque. Donec nec
+                    turpis ac erat egestas convallis. Vivamus vel mi in ligula elementum viverra.
+                    Phasellus malesuada turpis at turpis elementum suscipit. Sed non arcu nibh.
+                    Etiam placerat ornare lectus, eu tempus augue sagittis eu. Proin iaculis, dui a
+                    euismod eleifend, diam elit viverra est, vitae ornare mi urna vel ante. Duis
+                    rutrum tempor mi.
+                </p>
+            </div></Step.Item
+        >
+        <Step.Item state="next" noLine={true}
+            ><div>
+                <p>
+                    Nullam at quam pharetra, dignissim erat non, pharetra eros. Ut vitae magna
+                    commodo, pretium risus at, elementum enim. Cras erat lectus, aliquet vel sem
+                    eget, tristique aliquam justo. Praesent et leo aliquam, bibendum turpis eget,
+                    egestas enim. Maecenas ac interdum ex, ac aliquet magna. Vestibulum ante ipsum
+                    primis in faucibus orci luctus et ultrices posuere cubilia curae
+                </p>
+            </div></Step.Item
+        >
+    </Step.List>
+</Story>
+
+<Story name="One steps">
+    <Step.List>
+        <Step.Item state="current" shortLine={true}>
+            <div>
+                <p>
+                    Cras bibendum, erat id commodo rhoncus, justo mi porttitor ex, sit amet lacinia
+                    sem ipsum et tellus. Curabitur quis maximus sem. Nullam vel ullamcorper nunc, a
+                    maximus metus. Integer varius, nibh vitae interdum commodo, lectus enim rhoncus
+                    magna, nec ultricies erat massa nec risus. Nunc non elit tortor. Phasellus porta
+                    lectus a semper rhoncus. Donec quis pretium dolor. Morbi lobortis turpis velit,
+                    quis rutrum ipsum eleifend eu. Duis pretium sem at magna dapibus interdum.
+                    Praesent bibendum ornare consectetur. Orci varius natoque penatibus et magnis
+                    dis parturient montes, nascetur ridiculus mus. Fusce finibus nisi vitae odio
+                    scelerisque laoreet.
+                </p>
+            </div></Step.Item
+        >
+    </Step.List>
+</Story>
+
+<style>
+    p:not(:last-child) {
+        margin-bottom: 12px;
+    }
+</style>