Shared/FilterSectionHeading

Default

label

Stacked Sections

With Children

Component Source

filter-section-heading.tsx

/**
 * Shared presentational filter-section heading — the guides "sectioning
 * rule" look (full-width 1px white top border + uppercase label). Extracted
 * from `renderFilterSplit` in `src/components/guides-landing/guides-filter-island.tsx`
 * (issue #1334, epic #1333) so `/products/` and `/metamodule-ref/` filter
 * panels can reuse the same section-heading shell instead of each hand-
 * rolling the same wrapper + label markup.
 *
 * Purely presentational — holds NO internal state.
 *
 * NOT related to `section-heading.tsx` (`SectionHeading`), an unrelated SSR
 * page-heading component (`font-futura font-bold text-lg`) used for content
 * sections elsewhere on the site. Do not confuse the two.
 */

import type { ComponentChildren } from 'preact';

export interface FilterSectionHeadingProps {
  label?: ComponentChildren;
  children?: ComponentChildren;
  className?: string;
  id?: string;
}

const WRAPPER_CLASS = 'border-t border-zd-white pt-vgap-sm';
const HEADING_CLASS =
  'block text-xs tracking-widest uppercase text-zd-white pb-vgap-sm font-futura';

export function FilterSectionHeading({
  label,
  children,
  className,
  id,
}: FilterSectionHeadingProps) {
  return (
    <div class={className ? `${WRAPPER_CLASS} ${className}` : WRAPPER_CLASS}>
      <span id={id} class={HEADING_CLASS}>
        {label ?? children}
      </span>
    </div>
  );
}

export default FilterSectionHeading;

Story Source

filter-section-heading.stories.tsx

import { FilterSectionHeading } from './filter-section-heading';
import type { ControlsMap } from '@/sub-packages/styleguide-v2/src/data/control-types';

/**
 * FilterSectionHeading Component
 *
 * Shared presentational filter-section heading — the guides "sectioning
 * rule" look (full-width 1px white top border + uppercase label). Extracted
 * from `renderFilterSplit` in the guides filter island (issue #1334, epic
 * #1333) so `/products/` and `/metamodule-ref/` filter panels reuse the same
 * section-heading shell instead of each hand-rolling the wrapper + label.
 *
 * Purely presentational — holds NO internal state.
 *
 * NOT related to `section-heading.tsx` (`SectionHeading`), an unrelated SSR
 * page-heading component used for content sections elsewhere on the site.
 */
export const meta = {
  title: 'Shared/FilterSectionHeading',
};

export const controls: ControlsMap = {
  label: { type: 'text', default: 'ブランドで絞り込む' },
};

/**
 * Default - controllable via props panel
 */
export const Default = {
  args: { label: 'ブランドで絞り込む' },
  render: ({ label }: { label: string }) => <FilterSectionHeading label={label} />,
};

/**
 * Via `children` instead of the `label` prop
 */
export const WithChildren = () => <FilterSectionHeading>タグで絞り込む</FilterSectionHeading>;

/**
 * Stacked sections — mirrors the real two-column `/metamodule-ref/` filter
 * panel layout (`filter-panel.tsx`), one heading per filter dimension
 */
export const StackedSections = () => (
  <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>
);