FilterSectionHeading

Filter-section heading shell — full-width top rule plus an uppercase label — shared by the /products/ and /metamodule-ref/ filter panels.

Filters & Search

Default

Label

With children

Stacked sections

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for FilterSectionHeading — 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.
//
// NOT related to `section-heading.tsx` (`SectionHeading`) — an unrelated SSR
// page-heading component used for content sections elsewhere on the site.
import { defineStory } from '@takazudo-modular/ui-preact/story-contract';
import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract';
import { FilterSectionHeading } from './filter-section-heading';
import type { FilterSectionHeadingProps } from './filter-section-heading';

const meta: StoryMeta = {
  title: 'FilterSectionHeading',
  category: 'Filters & Search',
  description:
    'Filter-section heading shell — full-width top rule plus an uppercase label — shared by the /products/ and /metamodule-ref/ filter panels.',
  usage: `import { FilterSectionHeading } from '@takazudo-modular/ui-preact/filter-section-heading';\n\n<FilterSectionHeading label="ブランドで絞り込む" />`,
};
export default meta;

export const Default = defineStory<FilterSectionHeadingProps>({
  name: 'Default',
  controls: [{ type: 'text', prop: 'label', label: 'Label', defaultValue: 'ブランドで絞り込む' }],
  render: ({ label = 'ブランドで絞り込む' } = {}) => <FilterSectionHeading label={label} />,
});

export const WithChildren = defineStory({
  name: 'With children',
  render: () => <FilterSectionHeading>タグで絞り込む</FilterSectionHeading>,
});

export const StackedSections = defineStory({
  name: 'Stacked sections',
  render: () => (
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-hgap-md gap-y-vgap-md max-w-[600px]">
      <section>
        <FilterSectionHeading label="ブランドで絞り込む" />
      </section>
      <section>
        <FilterSectionHeading label="タグで絞り込む" />
      </section>
    </div>
  ),
});

Live CSS

Injected into the previews above. FilterSectionHeading

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