feat: add data-testid attribute
This commit is contained in:
Ilia Mashkov
@@ -1,112 +0,0 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import CheckboxFilter from './CheckboxFilter.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Shared/UI/CheckboxFilter',
|
||||
component: CheckboxFilter,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
displayedLabel: { control: 'text' },
|
||||
// filter is complex, use stories for examples
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import WithFilterDecorator from './WithFilterDecorator.svelte';
|
||||
import type { Property } from '$shared/lib';
|
||||
|
||||
// Define initial values for each story
|
||||
const basicProperties: Property[] = [
|
||||
{ id: 'serif', name: 'Serif', selected: false },
|
||||
{ id: 'sans-serif', name: 'Sans-serif', selected: false },
|
||||
{ id: 'display', name: 'Display', selected: false },
|
||||
{ id: 'handwriting', name: 'Handwriting', selected: false },
|
||||
{ id: 'monospace', name: 'Monospace', selected: false },
|
||||
];
|
||||
|
||||
const withSelectedProperties: Property[] = [
|
||||
{ id: 'serif', name: 'Serif', selected: true },
|
||||
{ id: 'sans-serif', name: 'Sans-serif', selected: false },
|
||||
{ id: 'display', name: 'Display', selected: true },
|
||||
{ id: 'handwriting', name: 'Handwriting', selected: false },
|
||||
];
|
||||
|
||||
const allSelectedProperties: Property[] = [
|
||||
{ id: 'serif', name: 'Serif', selected: true },
|
||||
{ id: 'sans-serif', name: 'Sans-serif', selected: true },
|
||||
{ id: 'display', name: 'Display', selected: true },
|
||||
{ id: 'handwriting', name: 'Handwriting', selected: true },
|
||||
];
|
||||
|
||||
const emptyProperties: Property[] = [];
|
||||
|
||||
const singleProperty: Property[] = [{ id: 'serif', name: 'Serif', selected: false }];
|
||||
|
||||
const multipleProperties: Property[] = [
|
||||
{ id: 'thin', name: 'Thin', selected: false },
|
||||
{ id: 'extra-light', name: 'Extra Light', selected: false },
|
||||
{ id: 'light', name: 'Light', selected: false },
|
||||
{ id: 'regular', name: 'Regular', selected: false },
|
||||
{ id: 'medium', name: 'Medium', selected: false },
|
||||
{ id: 'semi-bold', name: 'Semi Bold', selected: false },
|
||||
{ id: 'bold', name: 'Bold', selected: false },
|
||||
{ id: 'extra-bold', name: 'Extra Bold', selected: false },
|
||||
{ id: 'black', name: 'Black', selected: false },
|
||||
];
|
||||
</script>
|
||||
|
||||
<!-- Basic usage - multiple properties -->
|
||||
<Story name="Basic Usage" args={{ displayedLabel: 'Font Category' }}>
|
||||
<WithFilterDecorator initialValues={basicProperties}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Font Category'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
|
||||
<!-- With some items pre-selected -->
|
||||
<Story name="With Selected Items" args={{ displayedLabel: 'Font Category' }}>
|
||||
<WithFilterDecorator initialValues={withSelectedProperties}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Font Category'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
|
||||
<!-- All items selected -->
|
||||
<Story name="All Selected" args={{ displayedLabel: 'Font Category' }}>
|
||||
<WithFilterDecorator initialValues={allSelectedProperties}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Font Category'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
|
||||
<!-- Empty filter (no properties) -->
|
||||
<Story name="Empty Filter" args={{ displayedLabel: 'Empty Filter' }}>
|
||||
<WithFilterDecorator initialValues={emptyProperties}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Empty Filter'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
|
||||
<!-- Single property -->
|
||||
<Story name="Single Property" args={{ displayedLabel: 'Font Category' }}>
|
||||
<WithFilterDecorator initialValues={singleProperty}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Font Category'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
|
||||
<!-- Large number of properties -->
|
||||
<Story name="Multiple Properties" args={{ displayedLabel: 'Font Weight' }}>
|
||||
<WithFilterDecorator initialValues={multipleProperties}>
|
||||
{#snippet children({ filter })}
|
||||
<CheckboxFilter displayedLabel={'Font Weight'} {filter} />
|
||||
{/snippet}
|
||||
</WithFilterDecorator>
|
||||
</Story>
|
||||
@@ -86,6 +86,7 @@ const hasSelection = $derived(selectedCount > 0);
|
||||
{#if hasSelection}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
data-testid="badge"
|
||||
class="mr-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums"
|
||||
>
|
||||
{selectedCount}
|
||||
@@ -94,6 +95,7 @@ const hasSelection = $derived(selectedCount > 0);
|
||||
|
||||
<!-- Chevron rotates based on open state for visual feedback -->
|
||||
<div
|
||||
data-testid="chevron"
|
||||
class="shrink-0 transition-transform duration-200 ease-out"
|
||||
style:transform={isOpen ? 'rotate(0deg)' : 'rotate(-90deg)'}
|
||||
>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import { createFilter } from '$shared/lib';
|
||||
import type { Property, Filter } from '$shared/lib';
|
||||
|
||||
/**
|
||||
* Props for the WithFilter decorator component.
|
||||
*/
|
||||
let {
|
||||
children,
|
||||
/** Initial properties to create the filter from */
|
||||
initialValues,
|
||||
}: {
|
||||
children: Snippet<[props: { filter: Filter }]>;
|
||||
initialValues: Property[];
|
||||
} = $props();
|
||||
|
||||
// Create filter inside component body so Svelte 5 runes work correctly
|
||||
const filter = createFilter({ properties: initialValues });
|
||||
</script>
|
||||
|
||||
{@render children({ filter })}
|
||||
@@ -1,76 +0,0 @@
|
||||
<script module lang="ts">
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import ComboControl from './ComboControl.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Shared/UI/ComboControl',
|
||||
component: ComboControl,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
controlLabel: { control: 'text' },
|
||||
increaseLabel: { control: 'text' },
|
||||
decreaseLabel: { control: 'text' },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import WithControlDecorator from './WithControlDecorator.svelte';
|
||||
|
||||
// Define initial values for each story
|
||||
const fontSizeInitial = { value: 16, min: 8, max: 100, step: 1 };
|
||||
|
||||
const letterSpacingInitial = { value: 0, min: -2, max: 4, step: 0.05 };
|
||||
|
||||
const atMinimumInitial = { value: 10, min: 10, max: 100, step: 1 };
|
||||
|
||||
const atMaximumInitial = { value: 100, min: 10, max: 100, step: 1 };
|
||||
</script>
|
||||
|
||||
<Story name="Integer Step" args={{ controlLabel: 'Font size' }}>
|
||||
<WithControlDecorator initialValues={fontSizeInitial}>
|
||||
{#snippet children({ control })}
|
||||
<ComboControl controlLabel={'Font size'} {control} />
|
||||
{/snippet}
|
||||
</WithControlDecorator>
|
||||
</Story>
|
||||
|
||||
<Story name="Decimal Step" args={{ controlLabel: 'Letter spacing' }}>
|
||||
<WithControlDecorator initialValues={letterSpacingInitial}>
|
||||
{#snippet children({ control })}
|
||||
<ComboControl controlLabel={'Letter spacing'} {control} />
|
||||
{/snippet}
|
||||
</WithControlDecorator>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="At Minimum"
|
||||
args={{ controlLabel: 'Font size', increaseLabel: 'Increase', decreaseLabel: 'Decrease' }}
|
||||
>
|
||||
<WithControlDecorator initialValues={atMinimumInitial}>
|
||||
{#snippet children({ control })}
|
||||
<ComboControl
|
||||
controlLabel={'Font size'}
|
||||
increaseLabel={'Increase'}
|
||||
decreaseLabel={'Decrease'}
|
||||
{control}
|
||||
/>
|
||||
{/snippet}
|
||||
</WithControlDecorator>
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="At Maximum"
|
||||
args={{ controlLabel: 'Font size', increaseLabel: 'Increase', decreaseLabel: 'Decrease' }}
|
||||
>
|
||||
<WithControlDecorator initialValues={atMaximumInitial}>
|
||||
{#snippet children({ control })}
|
||||
<ComboControl
|
||||
controlLabel={'Font size'}
|
||||
increaseLabel={'Increase'}
|
||||
decreaseLabel={'Decrease'}
|
||||
{control}
|
||||
/>
|
||||
{/snippet}
|
||||
</WithControlDecorator>
|
||||
</Story>
|
||||
Reference in New Issue
Block a user