[Step] Rename content to point (prop and classes). Add `classes.l…

…abel`. Add example on how to add line gap
techniq · Jun 21, 2024 · a820878 · a820878
1 parent 31fce19
commit a820878
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 40 deletions.
diff --git a/.changeset/lazy-bulldogs-tap.md b/.changeset/lazy-bulldogs-tap.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+[Step] Rename `content` to `point` (prop and classes). Add `classes.label`
diff --git a/packages/svelte-ux/src/lib/components/Step.svelte b/packages/svelte-ux/src/lib/components/Step.svelte
@@ -6,19 +6,20 @@
   import { getComponentClasses } from './theme.js';
   import { cls } from '../utils/styles.js';
 
-  /** Override content (by default uses an incrementing counter)*/
-  export let content: string | undefined = undefined;
+  /** Override point content (by default uses an incrementing counter) */
+  export let point: string | undefined = undefined;
 
-  /** Use icon instead of content */
+  /** Use icon instead of point content */
   export let icon: ComponentProps<Icon>['data'] = undefined;
 
   /** If completed, will color content and line leading up to item */
   export let completed = false;
 
   export let classes: {
     root?: string;
+    label?: string;
     line?: string;
-    content?: string;
+    point?: string;
     /** Apply classes to completed item point and line leading up to item */
     completed?: string;
   } = {};
@@ -50,23 +51,25 @@
     )}
   />
 
-  <slot />
+  <span class={cls(settingsClasses.label, classes.label)}>
+    <slot />
+  </span>
 
   <div
     class={cls(
       'bg-surface-300 text-surface-content relative col-start-1 row-start-1 grid size-8 place-items-center place-self-center rounded-full [counter-increment:step]',
-      content == null && !$$slots.content && icon == null && 'before:content-[counter(step)]',
+      point == null && !$$slots.point && icon == null && 'before:content-[counter(step)]',
       completed &&
         (settingsClasses.completed ?? classes.completed ?? 'bg-primary text-primary-content'),
-      settingsClasses.content,
-      classes.content
+      settingsClasses.point,
+      classes.point
     )}
   >
-    <slot name="content">
+    <slot name="point">
       {#if icon}
         <Icon data={icon} />
       {:else}
-        {content ?? ''}
+        {point ?? ''}
       {/if}
     </slot>
   </div>

diff --git a/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte
@@ -17,11 +17,11 @@
     { label: 'Receive product', completed: false },
   ];
 
-  const stepsWithContent = [
-    { label: 'Register', completed: true, content: '✓' },
-    { label: 'Choose plan', completed: true, content: '✓' },
-    { label: 'Purchase', completed: false, content: '' },
-    { label: 'Receive product', completed: false, content: '' },
+  const stepsWithPoint = [
+    { label: 'Register', completed: true, point: '✓' },
+    { label: 'Choose plan', completed: true, point: '✓' },
+    { label: 'Purchase', completed: false, point: '' },
+    { label: 'Receive product', completed: false, point: '' },
   ];
 
   const stepsWithIcon = [
@@ -46,23 +46,23 @@
   <Steps data={steps} vertical />
 </Preview>
 
-<h2>Custom content (step data)</h2>
+<h2>Custom point content (step data)</h2>
 
 <Preview>
-  <Steps data={stepsWithContent} />
+  <Steps data={stepsWithPoint} />
 </Preview>
 
-<h2>Custom content (Step component)</h2>
+<h2>Custom point (Step component)</h2>
 
 <Preview>
   <Steps>
-    <Step content="?">Step 1</Step>
-    <Step content="!">Step 2</Step>
-    <Step content="✓">Step 3</Step>
-    <Step content="✕">Step 4</Step>
-    <Step content="★">Step 5</Step>
-    <Step content="">Step 6</Step>
-    <Step content="●">Step 7</Step>
+    <Step point="?">Step 1</Step>
+    <Step point="!">Step 2</Step>
+    <Step point="✓">Step 3</Step>
+    <Step point="✕">Step 4</Step>
+    <Step point="★">Step 5</Step>
+    <Step point="">Step 6</Step>
+    <Step point="●">Step 7</Step>
     <Step>Step 8</Step>
     <Step>Step 9</Step>
   </Steps>
@@ -85,23 +85,23 @@
   </Steps>
 </Preview>
 
-<h2>Custom content and completed colors</h2>
+<h2>Custom point content and completed colors</h2>
 
 <Preview>
   <Steps>
-    <Step content="?">Step 1</Step>
-    <Step content="!" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
+    <Step point="?">Step 1</Step>
+    <Step point="!" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
       Step 2
     </Step>
-    <Step content="✓" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
+    <Step point="✓" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
       Step 3
     </Step>
-    <Step content="✕" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
+    <Step point="✕" classes={{ completed: 'bg-secondary text-secondary-content' }} completed>
       Step 4
     </Step>
-    <Step content="★">Step 5</Step>
-    <Step content="" classes={{ completed: 'bg-info text-info-content' }} completed>Step 6</Step>
-    <Step content="●" classes={{ completed: 'bg-success text-success-content' }} completed>
+    <Step point="★">Step 5</Step>
+    <Step point="" classes={{ completed: 'bg-info text-info-content' }} completed>Step 6</Step>
+    <Step point="●" classes={{ completed: 'bg-success text-success-content' }} completed>
       Step 7
     </Step>
     <Step classes={{ completed: 'bg-success text-success-content' }} completed>Step 8</Step>
@@ -117,15 +117,29 @@
     <Step completed classes={{ completed: 'bg-success text-success-content' }}>Shrink the moon</Step
     >
     <Step completed classes={{ completed: 'bg-success text-success-content' }}>Grab the moon</Step>
-    <Step content="?" classes={{ content: 'bg-danger text-danger-content' }}>Sit on the toilet</Step
-    >
+    <Step point="?" classes={{ point: 'bg-danger text-danger-content' }}>Sit on the toilet</Step>
   </Steps>
 </Preview>
 
 <h2>Change line and point size</h2>
 
 <Preview>
-  <Steps data={stepsWithIcon} classes={{ item: { content: 'size-6 text-xs', line: 'h-1' } }} />
+  <Steps data={stepsWithIcon} classes={{ item: { point: 'size-6 text-xs', line: 'h-1' } }} />
+</Preview>
+
+<h2>Add line gap</h2>
+
+<Preview>
+  <div class="inline-grid gap-2 justify-items-center">
+    <Steps data={stepsWithIcon} classes={{ item: { line: 'h-1 w-1/2 rounded' } }} />
+    <div>or</div>
+    <Steps
+      data={stepsWithIcon}
+      classes={{
+        item: { label: 'z-[1]', point: 'outline outline-[20px] outline-surface-100', line: 'h-1' },
+      }}
+    />
+  </div>
 </Preview>
 
 <h2>Remove point background</h2>
@@ -135,7 +149,7 @@
     data={stepsWithIcon}
     classes={{
       item: {
-        content: 'bg-surface-100 size-12',
+        point: 'bg-surface-100 size-12',
         line: 'h-0.5',
         completed: 'text-primary bg-primary',
       },
@@ -151,7 +165,7 @@
     vertical
     classes={{
       item: {
-        content: 'bg-surface-100 size-10',
+        point: 'bg-surface-100 size-10',
         line: 'w-0.5',
         completed: 'text-primary bg-primary',
       },
@@ -166,7 +180,7 @@
     data={stepsWithIcon}
     classes={{
       item: {
-        content: 'size-10',
+        point: 'size-10',
         completed: 'bg-gradient-to-br from-primary to-secondary text-primary-content',
       },
     }}
@@ -181,7 +195,7 @@
     vertical
     classes={{
       item: {
-        content: 'size-10',
+        point: 'size-10',
         completed: 'bg-gradient-to-br from-primary to-secondary text-primary-content',
       },
     }}