ClearFilterButton

Bordered "clear filters" text button with a leading close-X icon, shared by the /products/ and /metamodule-ref/ filter UIs.

Buttons & Controls

Default

LabelDisabled

Disabled

Custom label

Responsive label

In filter row

Interactive

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ClearFilterButton — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ClearFilterButton } from './clear-filter-button'; import type { ClearFilterButtonProps } from './clear-filter-button'; const meta: StoryMeta = { title: 'ClearFilterButton', category: 'Buttons & Controls', description: 'Bordered "clear filters" text button with a leading close-X icon, shared by the /products/ and /metamodule-ref/ filter UIs.', usage: `import { ClearFilterButton } from '@/src/components/shared/clear-filter-button';\n\n<ClearFilterButton onClick={clearFilters} />`, }; export default meta; export const Default = defineStory<ClearFilterButtonProps>({ name: 'Default', controls: [ { type: 'text', prop: 'label', label: 'Label', defaultValue: '条件をクリア' }, { type: 'boolean', prop: 'disabled', label: 'Disabled', defaultValue: false }, ], render: ({ label = '条件をクリア', disabled = false } = {}) => ( <ClearFilterButton label={label} disabled={disabled} /> ), }); // The SSR no-JS baseline before an island hydrates and enables it (the // /metamodule-ref/ pattern — see filter-panel.tsx). export const Disabled = defineStory({ name: 'Disabled', render: () => <ClearFilterButton disabled />, }); export const CustomLabel = defineStory({ name: 'Custom label', render: () => <ClearFilterButton label="すべてクリア" />, }); // Responsive narrow/wide label pair (#1375 fix5 / issue #1389) — クリア below // `lg`, 条件をクリア at `lg`+. The mm-ref consumers never pass `labelNarrow`, // so they keep the unconditional single-label default seen in the stories above. export const ResponsiveLabel = defineStory({ name: 'Responsive label', render: () => <ClearFilterButton label="条件をクリア" labelNarrow="クリア" />, }); export const InFilterRow = defineStory({ name: 'In filter row', render: () => ( <div class="flex flex-col gap-vgap-sm sm:flex-row sm:items-center sm:gap-hgap-md w-[420px]"> <input type="search" placeholder="キーワードでフィルタ" class="w-full sm:w-[240px] rounded-none border border-zd-white bg-white px-hgap-sm py-vgap-2xs text-base text-zd-literal-black placeholder:text-zd-subtext" /> <ClearFilterButton className="sm:ml-auto" /> </div> ), }); const InteractiveClear = () => { const [clearCount, setClearCount] = useState(0); return ( <div class="flex items-center gap-hgap-sm"> <ClearFilterButton onClick={() => setClearCount((v) => v + 1)} /> <p class="font-futura text-xs text-zd-subtext">Cleared: {clearCount}</p> </div> ); }; export const Interactive = defineStory({ name: 'Interactive', render: () => <InteractiveClear />, });