FilterToggle

Chevron + underlined-label filter-toggle button for opening/closing a tag/keyword filter panel, shared by /products/ and /metamodule-ref/.

Buttons & Controls

Default

LabelAria expandedDisabled

Closed

Expanded

With summary

Disabled

In toggle row

Interactive

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for FilterToggle — colocated in the reusable-UI package
// (@takazudo-modular/ui-preact) as part of the wave-4 batch migration (#2052).
// Migrated from `src/components/shared/`; imports the story contract from the
// canonical package subpath rather than the legacy `lib/styleguide` re-export.
//
// Chevron rotation is driven entirely by the `group-aria-expanded:` Tailwind
// variant reading the DOM `aria-expanded` attribute, so this works both for a
// Preact-controlled caller AND an SSR'd `disabled` no-JS baseline an island
// later enables and drives imperatively via `setAttribute` (see Disabled).
import { useState } from 'preact/hooks';
import { defineStory } from '@takazudo-modular/ui-preact/story-contract';
import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract';
import { FilterToggle } from './filter-toggle';
import type { FilterToggleProps } from './filter-toggle';

const meta: StoryMeta = {
  title: 'FilterToggle',
  category: 'Buttons & Controls',
  description:
    'Chevron + underlined-label filter-toggle button for opening/closing a tag/keyword filter panel, shared by /products/ and /metamodule-ref/.',
  usage: `import { FilterToggle } from '@takazudo-modular/ui-preact/filter-toggle';\n\n<FilterToggle label="絞り込み" ariaExpanded={false} />`,
};
export default meta;

export const Default = defineStory<FilterToggleProps>({
  name: 'Default',
  controls: [
    { type: 'text', prop: 'label', label: 'Label', defaultValue: '絞り込み' },
    { type: 'boolean', prop: 'ariaExpanded', label: 'Aria expanded', defaultValue: false },
    { type: 'boolean', prop: 'disabled', label: 'Disabled', defaultValue: false },
  ],
  render: ({ label = '絞り込み', ariaExpanded = false, disabled = false } = {}) => (
    <FilterToggle label={label} ariaExpanded={ariaExpanded} disabled={disabled} />
  ),
});

export const Closed = defineStory({
  name: 'Closed',
  render: () => <FilterToggle label="絞り込み" ariaExpanded={false} />,
});

export const Expanded = defineStory({
  name: 'Expanded',
  render: () => <FilterToggle label="絞り込み" ariaExpanded={true} />,
});

export const WithSummary = defineStory({
  name: 'With summary',
  render: () => <FilterToggle label="絞り込み" summary="12件" ariaExpanded={false} />,
});

// SSR no-JS baseline before an island hydrates and enables it — `ariaExpanded`
// is the literal string "false" here (not the boolean), matching the raw SSR
// attribute value the island later flips imperatively via `setAttribute`.
export const Disabled = defineStory({
  name: 'Disabled',
  render: () => <FilterToggle label="絞り込み" disabled ariaExpanded="false" />,
});

export const InToggleRow = defineStory({
  name: 'In toggle row',
  render: () => (
    <div class="flex flex-wrap items-center gap-x-hgap-md gap-y-vgap-2xs">
      <FilterToggle
        ariaExpanded={false}
        className="self-start"
        label={
          <>
            <span class="lg:hidden">絞り込み</span>
            <span class="hidden lg:inline">ブランド、キーワード、タグで絞り込み</span>
          </>
        }
      />
      <p class="font-futura text-sm text-zd-subtext whitespace-nowrap">
        <span>128</span> / 128 モジュール
      </p>
    </div>
  ),
});

const InteractiveToggle = () => {
  const [expanded, setExpanded] = useState(false);
  return (
    <FilterToggle
      label={expanded ? '閉じる' : '絞り込み'}
      ariaExpanded={expanded}
      onClick={() => setExpanded((v) => !v)}
    />
  );
};

export const Interactive = defineStory({
  name: 'Interactive',
  render: () => <InteractiveToggle />,
});

Live CSS

Injected into the previews above. FilterToggle

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */