Skip to content

Commit

Permalink
fix(Steps.Step): changed prop index to step
Browse files Browse the repository at this point in the history 
fix(Steps): class is reactive including child components
docs(steps): aadded examples, props, and slots tables
  • Loading branch information
Craig Howell committed Oct 12, 2022
1 parent 3e49ddc commit 6610713
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 79 deletions.
20 changes: 10 additions & 10 deletions src/lib/components/steps/Description.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,42 +25,42 @@
currentStep: Writable<number>;
variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text';
} = getContext(STEPS_CONTEXT_ID);
const { index }: { index: number } = getContext(STEPS_STEP_CONTEXT_ID);
const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID);
let defaultClass = '';
if (variant === 'circles-text') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content';
} else {
defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content';
}
} else if (variant === 'simple') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
} else {
defaultClass =
'text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content';
}
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

{#if variant === 'simple'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<span class={finalClass} style={$$props.style}><slot /></span>
{/if}
{:else if variant === 'circles-text'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<span class={finalClass} style={$$props.style}><slot /></span>
Expand Down
53 changes: 26 additions & 27 deletions src/lib/components/steps/Step.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
import type { Writable } from 'svelte/store';
export let href: string;
export let index: number;
export let step: number;
useContext({
context_id: STEPS_CONTEXT_ID,
Expand All @@ -19,8 +19,7 @@
});
setContext(STEPS_STEP_CONTEXT_ID, {
step: true,
index
step
});
const {
Expand All @@ -33,19 +32,19 @@
let defaultClass = '';
$: if (variant === 'bullets') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'block h-2.5 w-2.5 rounded-full bg-primary hover:bg-primary-hover';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'relative flex items-center justify-center';
} else {
defaultClass =
'block h-2.5 w-2.5 rounded-full bg-light-border dark:bg-dark-border hover:bg-light-border-base dark:hover:bg-dark-border-base';
}
} else if (variant === 'simple') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass =
'group flex flex-col border-l-4 border-primary hover:border-primary-hover py-2 pl-4 md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass =
'flex flex-col border-l-4 border-primary dark:border-primary py-2 pl-4 md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0';
} else {
Expand All @@ -57,24 +56,24 @@
</script>

{#if variant === 'simple'}
{#if $currentStep > index + 1}
<li data-step={index + 1} class="md:flex-1" on:click>
{#if $currentStep > step}
<li data-step={step} class="md:flex-1" on:click>
<!-- Completed Step -->
<a {href} class={finalClass} style={$$props.style}>
<slot name="title" />
<slot name="description" />
</a>
</li>
{:else if $currentStep === index + 1}
<li data-step={index + 1} class="md:flex-1" on:click>
{:else if $currentStep === step}
<li data-step={step} class="md:flex-1" on:click>
<!-- Current Step -->
<a {href} class={finalClass} style={$$props.style}>
<slot name="title" />
<slot name="description" />
</a>
</li>
{:else}
<li data-step={index + 1} class="md:flex-1" on:click>
<li data-step={step} class="md:flex-1" on:click>
<!-- Upcoming Step -->
<a {href} class={finalClass} style={$$props.style}>
<slot name="title" />
Expand All @@ -83,15 +82,15 @@
</li>
{/if}
{:else if variant === 'bullets'}
{#if $currentStep > index + 1}
<li data-step={index + 1} on:click>
{#if $currentStep > step}
<li data-step={step} on:click>
<!-- Completed Step -->
<a {href} class={finalClass} style={$$props.style}>
<slot name="title" />
</a>
</li>
{:else if $currentStep === index + 1}
<li data-step={index + 1} on:click>
{:else if $currentStep === step}
<li data-step={step} on:click>
<!-- Current Step -->
<a {href} class={finalClass} style={$$props.style}>
<span class="absolute flex h-5 w-5 p-px">
Expand All @@ -102,16 +101,16 @@
</a>
</li>
{:else}
<li data-step={index + 1} on:click>
<li data-step={step} on:click>
<!-- Upcoming Step -->
<a {href} class={finalClass} style={$$props.style}>
<slot name="title" />
</a>
</li>
{/if}
{:else if variant === 'bullets-text'}
{#if $currentStep > index + 1}
<li data-step={index + 1} on:click>
{#if $currentStep > step}
<li data-step={step} on:click>
<!-- Complete Step -->
<a {href} class="group">
<span class="flex items-start">
Expand All @@ -133,8 +132,8 @@
</span>
</a>
</li>
{:else if $currentStep === index + 1}
<li data-step={index + 1} on:click>
{:else if $currentStep === step}
<li data-step={step} on:click>
<!-- Current Step -->
<a {href} class="flex items-start">
<span class="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
Expand All @@ -145,7 +144,7 @@
</a>
</li>
{:else}
<li data-step={index + 1} on:click>
<li data-step={step} on:click>
<!-- Upcoming Step -->
<a {href} class="group">
<div class="flex items-start">
Expand All @@ -160,8 +159,8 @@
</li>
{/if}
{:else if variant === 'circles-text'}
{#if $currentStep > index + 1}
<li data-step={index + 1} class="relative pb-10" on:click>
{#if $currentStep > step}
<li data-step={step} class="relative pb-10" on:click>
<div class="absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 bg-primary" />
<!-- Complete Step -->
<a {href} class="group relative flex items-start">
Expand Down Expand Up @@ -190,8 +189,8 @@
</span>
</a>
</li>
{:else if $currentStep === index + 1}
<li data-step={index + 1} class="step relative pb-10" on:click>
{:else if $currentStep === step}
<li data-step={step} class="step relative pb-10" on:click>
<div
class="divider absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 bg-light-border dark:bg-dark-border"
/>
Expand All @@ -211,7 +210,7 @@
</a>
</li>
{:else}
<li data-step={index + 1} class="step relative pb-10" on:click>
<li data-step={step} class="step relative pb-10" on:click>
<div
class="divider absolute top-4 left-4 -ml-px mt-0.5 h-full w-0.5 bg-light-border dark:bg-dark-border"
/>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/steps/Steps.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
} else if (variant === 'simple') {
defaultClass = 'space-y-4 md:flex md:space-y-0 md:space-x-8';
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

{#if variant === 'simple'}
Expand Down
5 changes: 1 addition & 4 deletions src/lib/components/steps/Summary.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { STEPS_CONTEXT_ID } from './Steps.svelte';
// import { getContext } from 'svelte';
import { useContext } from '../../utils/useContext';
import { twMerge } from 'tailwind-merge';
Expand All @@ -10,10 +9,8 @@
component: 'Steps.Summary'
});
// const { currentStep }: { currentStep: number } = getContext(STEPS_CONTEXT_ID);
const defaultClass = 'text-sm font-medium';
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<p class={finalClass} style={$$props.style}><slot /></p>
36 changes: 18 additions & 18 deletions src/lib/components/steps/Title.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,77 +25,77 @@
currentStep: Writable<number>;
variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text';
} = getContext(STEPS_CONTEXT_ID);
const { index }: { index: number } = getContext(STEPS_STEP_CONTEXT_ID);
const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID);
let defaultClass = '';
if (variant === 'bullets') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'sr-only';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'sr-only';
} else {
defaultClass = 'sr-only';
}
} else if (variant === 'bullets-text') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'ml-3 text-sm font-medium text-light-content dark:text-dark-content';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'ml-3 text-sm font-medium text-primary';
} else {
defaultClass =
'ml-3 text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content group-hover:text-light-content dark:group-hover:text-dark-content';
}
} else if (variant === 'circles-text') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'text-sm font-medium text-primary';
} else {
defaultClass =
'text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content';
}
} else if (variant === 'simple') {
if ($currentStep > index + 1) {
if ($currentStep > step) {
defaultClass = 'text-sm font-medium text-primary group-hover:text-primary-hover';
} else if ($currentStep === index + 1) {
} else if ($currentStep === step) {
defaultClass = 'text-sm font-medium text-primary dark:text-primary';
} else {
defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
}
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

{#if variant === 'simple'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<span class={finalClass} style={$$props.style}><slot /></span>
{/if}
{:else if variant === 'bullets'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<span class={finalClass} style={$$props.style}><slot /></span>
{/if}
{:else if variant === 'bullets-text'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<p class={finalClass} style={$$props.style}>
<slot />
</p>
{/if}
{:else if variant === 'circles-text'}
{#if $currentStep > index + 1}
{#if $currentStep > step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else if $currentStep === index + 1}
{:else if $currentStep === step}
<span class={finalClass} style={$$props.style}><slot /></span>
{:else}
<span class={finalClass} style={$$props.style}><slot /></span>
Expand Down
Loading

0 comments on commit 6610713

Please sign in to comment.