PrintShell

PrintShell, ekranda A4 oranlı bir sayfa gösterir ve yazdırırken yalnızca belgeyi bırakır. Dekont, döküm ve özet gibi belgeler bu kabuğa oturur.

Önizleme

Sayfa başlığındaki marka ve mod seçimi önizlemeyi de değiştirir. Tarayıcının yazdırma önizlemesinde işlem düğmeleri, gölge ve kenarlık kaybolur.

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Bölgeler

Bölge	Öğe	Not
İşlemler	actions	Yazdır ve indir düğmeleri; adlandırılmış toolbar, kâğıtta print:hidden ile gizli.
Sayfa	article	h1 başlığıyla adlandırılır; en geniş 832 px (A4 oranı).
Üst bilgi	header	Marka solda; başlık, belge no ve tarih sağda.
Gövde	children	DescriptionList ile bilgiler, Table ile rakamlar.
Alt bilgi	footer	Sayfa notu ve doğrulama kodu.

Kırılım noktaları

Ortam	Düzen
Ekran, 640 px altı	Sayfa tam genişlik; üst bilgi alt alta dizilir.
Ekran, 640 px ve üstü	Gri zemin üstünde ortalanmış sayfa, space.3xl iç boşluk.
Kâğıt	Zemin, gölge, kenarlık ve iç boşluk kalkar; A4 ölçüsünü ve 12 mm kenar boşluğunu uygulamanın baskı CSS’i (@page) belirler. Docs CSP’si satır içi <style> bloklarına izin vermediği için @page kabukta değil uygulamada durur.

Erişilebilirlik

• Belge tek article ve tek h1 taşır; bölümler h2 ile başlar.
• Rakamlar tablo hücrelerinde, başlık hücreleriyle (th) eşleşir; toplam satırı da satır başlığı taşır.
• Durum yalnız renkle değil, StatusBadge metniyle okunur; siyah beyaz baskıda da anlaşılır.
• Maskeli değerler (•••• 1234) ekranda ve kâğıtta aynı kalır.
• İşlem düğmeleri ekran okuyucu için “Belge işlemleri” araç çubuğunda toplanır.

Kod

import { Heading, Inline, Stack, Text } from '@bigbang/ui';
import type { ReactNode } from 'react';
import { type Lang, LangProvider } from '../../patterns/lang';

const copy = {
  tr: { product: 'Ürün adı', actions: 'Belge işlemleri' },
  en: { product: 'Product name', actions: 'Document actions' },
};

export type PrintShellProps = {
  /** The document's h1, such as "İşlem özeti". */
  title: string;
  /** Document number, date and similar facts under the title. */
  meta?: ReactNode;
  /** Print and download buttons; they are hidden on paper. */
  actions?: ReactNode;
  /** The document body. */
  children: ReactNode;
  /** Page note and verification code at the bottom of the sheet. */
  footer?: ReactNode;
  /** Logo or product name in the header. */
  brand?: ReactNode;
  lang?: Lang;
};

/**
 * Template for printable documents: an A4-proportioned sheet on screen, plain black on white on paper.
 * Screen-only parts carry `print:hidden`; the app's print CSS sets `@page` size and margins.
 */
export function PrintShell({ title, meta, actions, children, footer, brand, lang = 'tr' }: PrintShellProps) {
  const t = copy[lang];
  return (
    <LangProvider lang={lang}>
      <div className="flex w-full flex-col items-center gap-lg bg-surface-sunken px-lg py-2xl print:block print:bg-transparent print:p-0" data-template="print-shell">
        {actions ? (
          <div className="flex w-full max-w-[52rem] justify-end print:hidden" role="toolbar" aria-label={t.actions} data-part="actions">
            <Inline gap="sm">{actions}</Inline>
          </div>
        ) : null}
        <article
          className="w-full max-w-[52rem] rounded-md border border-line-subtle bg-surface-raised p-3xl shadow-raised print:max-w-none print:rounded-none print:border-0 print:p-0 print:shadow-none"
          aria-labelledby={`print-title-${lang}`}
          data-part="sheet"
        >
          <Stack gap="2xl">
            <header className="flex flex-wrap items-start justify-between gap-lg border-b border-line-default pb-lg">
              <div>
                {brand ?? <Text weight="medium">{t.product}</Text>}
              </div>
              <Stack gap="xs" align="end">
                <Heading level={1} size="lg" id={`print-title-${lang}`}>
                  {title}
                </Heading>
                {meta ? (
                  <Text size="sm" tone="subtle">
                    {meta}
                  </Text>
                ) : null}
              </Stack>
            </header>
            <div data-part="body">{children}</div>
            {footer ? (
              <footer className="border-t border-line-subtle pt-lg">
                <Text size="sm" tone="subtle">
                  {footer}
                </Text>
              </footer>
            ) : null}
          </Stack>
        </article>
      </div>
    </LangProvider>
  );
}

Kullanılan bileşenler

Heading, Text, Stack, Inline. Bu kabuğu kullanan blok: Dekont ve döküm.