simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/components/widgets/media-object-layout.ts

@@ -0,0 +1,156 @@
+/** Props type and grid/heading tables for the media-object widget. */
+
+import type { CSSProperties } from 'react';
+
+export type MediaObjectWidgetProps = {
+  imageUrl: string;
+  imageAlt: string;
+  imagePosition: 'left' | 'right';
+  heading: string;
+  body: string;
+  linkLabel: string;
+  linkHref: string;
+  logos?: { src: string; alt: string }[];
+  /** "narrow" constrains the heading so a short title wraps to two lines. */
+  headingWidth?: 'auto' | 'narrow';
+  /**
+   * Organic mask (SVG url, supplied by the tenant's content) applied to the
+   * side image. When set the image is clipped to the shape and loses its
+   * rounded corners. Empty = the plain rounded image (unchanged).
+   */
+  imageMaskUrl?: string;
+  /**
+   * How the side image is framed. "rounded" is the default rounded rectangle.
+   * "native" renders the file exactly as supplied — no crop, no rounding, no
+   * mask — for transparent artwork that is already cut to its final shape.
+   * Preferred over `imageMaskUrl`: a supplied cut-out is pixel-accurate, where
+   * a mask re-derives the silhouette and has to be kept in sync by hand.
+   */
+  imageShape?: 'rounded' | 'native';
+  /** Chip overlaid top-left on the image (e.g. a location tag). */
+  imageTag?: string;
+  /** CSS color for the image tag chip (text stays surface-contrast). */
+  imageTagColor?: string;
+  /**
+   * Organic mask for the image tag. Set it and the tag renders as the Figma's
+   * tilted blob overhanging the photo's top-left instead of a rounded pill.
+   */
+  imageTagMaskUrl?: string;
+  /**
+   * Transparent artwork for the image tag, used INSTEAD of `imageTagMaskUrl` +
+   * `imageTagColor`: the file carries the tag's shape and colour, and only the
+   * upright label is drawn over it.
+   */
+  imageTagImageUrl?: string;
+  /** Small pill rendered above the heading (e.g. a date/time or a count). */
+  datePill?: string;
+  /** CSS color for the date pill (text stays surface-contrast). */
+  datePillColor?: string;
+  surface: 'default' | 'dark' | 'muted';
+  /**
+   * Optional CSS color for the band background (e.g. a tenant's program
+   * color). When set, the band renders like the dark surface (white text)
+   * but on this color instead of `--secondary`.
+   */
+  surfaceColor?: string;
+  /** Small label in the first grid column (grid/banner layouts only). */
+  eyebrow?: string;
+  /**
+   * Structured points rendered under `body` as a marker list — the Figma's
+   * "Warum mitmachen?" (title + explanation per point) and "Netzwerk" (bare
+   * names). Kept separate from `body`, which is one text block and can only
+   * flatten such a list into indistinguishable lines.
+   */
+  bullets?: { title: string; body?: string }[];
+  /**
+   * Optional CSS max-width for the body paragraph alone (the Figma caps the
+   * event-card copy at 478px inside a wider text column). Empty = unconstrained.
+   */
+  bodyMaxWidth?: string;
+  /**
+   * Trailing credit line under the body, set semibold italic — the Figma's
+   * "In Zusammenarbeit mit …" on each event card.
+   */
+  footnote?: string;
+  /** Point-title size: `md` = 20px, `lg` = 24px (both from the Figma). */
+  bulletSize?: 'md' | 'lg';
+  /**
+   * Render `linkLabel` as the tenant's outlined CTA button rather than an
+   * inline text link — the Figma draws the "Projekt-Flyer herunterladen"
+   * action on the green band as a bordered pill, not a link.
+   */
+  linkVariant?: 'link' | 'button';
+  /** Show the design's small square marker before each point. */
+  bulletMarker?: 'square' | 'none';
+  /**
+   * "half" is the legacy 50/50 flex split. "grid" aligns image and text to the
+   * 12-column page grid (Mowing Figma: image spans 6 columns, text sits at the
+   * 2nd column for image-right / ends at the 12th for image-left). "banner"
+   * drops the side image: eyebrow left, text at the 4th column, with the image
+   * (e.g. a partner-logo strip) rendered underneath the text.
+   */
+  layout?: 'half' | 'grid' | 'banner';
+  /** Text column width on the page grid: xs ≈ 315px, sm ≈ 432px, md ≈ 546px. */
+  textWidth?: 'auto' | 'xs' | 'sm' | 'md';
+};
+
+// Display tokens for the heading — weight/tracking/font come from the per-tenant
+// page-builder theme (see styles.css `:root` for Recodo defaults and `.gca-root`
+// for the GCA overrides). Color is overridden to white in the dark surface. The
+// font-size reads `--pb-heading-lg` but falls back to the prior size, so tenants
+// that don't set the token (GCA, Recodo) render unchanged.
+
+export function headingStyle(
+  inverse: boolean,
+  layout: MediaObjectWidgetProps['layout'] = 'half',
+): CSSProperties {
+  return {
+    fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+    letterSpacing: 'var(--pb-display-tracking)',
+    fontFamily: 'var(--pb-display-font)',
+    // The banner reads the section-heading size (`--pb-heading-md`, Mowing →
+    // 40px) so its title matches the other eyebrow sections on the page.
+    fontSize:
+      layout === 'banner'
+        ? 'var(--pb-heading-md, clamp(1.875rem, 1.3rem + 1.4vw, 2.5rem))'
+        : 'var(--pb-heading-lg, clamp(1.875rem, 1.3rem + 1.8vw, 2.25rem))',
+    color: inverse ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--pb-heading-color)',
+  };
+}
+
+// 12-col grid placement (gap 24px): the text column spans 3/4/5 columns and the
+// image spans the design's 6 columns for image-right, or fills the columns left
+// of the text for image-left — both text placements end flush with the Figma
+// grid (image-right text starts at col 2; image-left text ends before col 12).
+export const GRID_TEXT: Record<'xs' | 'sm' | 'md', { right: string; left: string; max: string }> = {
+  xs: {
+    right: 'lg:col-start-2 lg:col-span-3',
+    left: 'lg:col-start-9 lg:col-span-3',
+    max: 'max-w-[315px]',
+  },
+  sm: {
+    right: 'lg:col-start-2 lg:col-span-4',
+    left: 'lg:col-start-8 lg:col-span-4',
+    max: 'max-w-[432px]',
+  },
+  md: {
+    right: 'lg:col-start-2 lg:col-span-5',
+    left: 'lg:col-start-7 lg:col-span-5',
+    max: 'max-w-[546px]',
+  },
+};
+
+export const GRID_IMAGE: Record<'xs' | 'sm' | 'md', { right: string; left: string }> = {
+  xs: {
+    right: 'lg:col-start-7 lg:col-span-6',
+    left: 'lg:col-start-1 lg:col-span-7',
+  },
+  sm: {
+    right: 'lg:col-start-7 lg:col-span-6',
+    left: 'lg:col-start-1 lg:col-span-6',
+  },
+  md: {
+    right: 'lg:col-start-7 lg:col-span-6',
+    left: 'lg:col-start-1 lg:col-span-5',
+  },
+};

pagebuilder/components/widgets/media-object-render.tsx

@@ -0,0 +1,284 @@
+/** MediaObject render. The props type and layout tables live in
+ *  media-object-layout.ts so this file stays under the 300-line cap. */
+
+/** MediaObjectWidget types, helpers and render — split from media-object-widget.tsx,
+ *  which keeps the field definitions, so both stay under the 300-line cap. */
+
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { LinkArrow } from './_internal/link-arrow';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { CTAButton, eyebrowTextStyle, maskStyle } from './_shared';
+
+import { GRID_IMAGE, GRID_TEXT, type MediaObjectWidgetProps } from './media-object-layout';
+import { MediaObjectText } from './media-object-text';
+
+export type { MediaObjectWidgetProps } from './media-object-layout';
+
+export const MediaObjectWidgetRender = ({
+  imageUrl,
+  imageAlt,
+  imageMaskUrl = '',
+  imageShape = 'rounded',
+  imageTag = '',
+  imageTagColor = '',
+  imageTagMaskUrl = '',
+  imageTagImageUrl = '',
+  imagePosition,
+  eyebrow = '',
+  datePill = '',
+  datePillColor = '',
+  bodyMaxWidth = '',
+  footnote = '',
+  bullets = [],
+  bulletSize = 'md',
+  bulletMarker = 'square',
+  linkVariant = 'link',
+  heading,
+  body,
+  linkLabel,
+  linkHref,
+  logos,
+  headingWidth = 'auto',
+  layout = 'half',
+  textWidth = 'auto',
+  surface,
+  surfaceColor = '',
+}: MediaObjectWidgetProps) => {
+  const isDark = surface === 'dark' || !!surfaceColor;
+  const grid = layout === 'grid';
+  // "auto" keeps the legacy unconstrained text; the grid layout needs a
+  // concrete column span, so it falls back to the 4-column (~432px) text.
+  const widthKey = textWidth === 'auto' ? 'sm' : textWidth;
+  const textMax = textWidth === 'auto' ? '' : GRID_TEXT[widthKey].max;
+
+  const textBlock = (
+    <MediaObjectText
+      {...({
+        eyebrow,
+        datePill,
+        datePillColor,
+        heading,
+        body,
+        bodyMaxWidth,
+        bullets,
+        bulletSize,
+        bulletMarker,
+        footnote,
+        linkLabel,
+        linkHref,
+        linkVariant,
+        logos,
+        headingWidth,
+        layout,
+      } as MediaObjectWidgetProps)}
+      isDark={isDark}
+      grid={grid}
+      textMax={textMax}
+    />
+  );
+
+  // Supplied cut-out wins over a mask: the artwork already has the shape, so
+  // it renders untouched. A mask is the fallback for square source images.
+  const native = imageShape === 'native';
+  const masked = !native && Boolean(imageMaskUrl);
+  const imageEl = imageUrl ? (
+    <img
+      src={imageUrl}
+      alt={imageAlt || heading}
+      loading="lazy"
+      className={cn('w-full h-auto', !masked && !native && 'rounded-lg')}
+      style={masked ? maskStyle(imageMaskUrl) : undefined}
+    />
+  ) : (
+    <div
+      className={cn(
+        'w-full aspect-square bg-gradient-to-br from-gray-200 to-gray-300',
+        !masked && !native && 'rounded-lg',
+      )}
+      style={masked ? maskStyle(imageMaskUrl) : undefined}
+    />
+  );
+  const image = imageTag ? (
+    <div className="relative">
+      {imageEl}
+      {imageTagImageUrl ? (
+        // Supplied tag artwork: the file carries the shape AND the colour,
+        // so only the upright label is drawn over it. No colour behind it
+        // for the same reason as the timeline blob — the artwork is a
+        // transparent cut-out, and a backing colour would square off the
+        // tilted tag shape.
+        <span className="pointer-events-none absolute -top-4 -left-3 block w-[34%] max-w-[188px]">
+          <img
+            src={imageTagImageUrl}
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+            className="block h-auto w-full"
+          />
+          <span
+            className="absolute inset-0 flex items-center justify-center px-2 text-center text-[20px] font-bold leading-tight"
+            style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+          >
+            {renderRichText(imageTag)}
+          </span>
+        </span>
+      ) : imageTagMaskUrl ? (
+        // Figma tag: a tilted blob straddling the photo's top-left corner
+        // with an upright label over it (same two-layer construction the
+        // timeline marker uses — the art rotates, the text does not).
+        <span
+          className="pointer-events-none absolute -top-4 -left-3 block w-[34%] max-w-[188px]"
+          style={{ aspectRatio: '188 / 161' }}
+        >
+          <span
+            aria-hidden="true"
+            className="absolute inset-0"
+            style={{
+              backgroundColor: imageTagColor || 'var(--pb-accent, #16a34a)',
+              transform: 'rotate(-18.2deg)',
+              ...maskStyle(imageTagMaskUrl),
+            }}
+          />
+          <span
+            className="absolute inset-0 flex items-center justify-center px-2 text-center text-[20px] font-bold leading-tight"
+            style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+          >
+            {renderRichText(imageTag)}
+          </span>
+        </span>
+      ) : (
+        <span
+          className="absolute left-4 top-6 inline-flex items-center rounded-full px-4 py-1.5 text-sm font-bold"
+          style={{
+            backgroundColor: imageTagColor || 'var(--pb-accent, #16a34a)',
+            color: 'var(--pb-surface-contrast, #ffffff)',
+          }}
+        >
+          {renderRichText(imageTag)}
+        </span>
+      )}
+    </div>
+  ) : (
+    imageEl
+  );
+
+  // Banner: eyebrow in the first grid column, text at the 4th column
+  // (Figma "Project Partners": 652px text, logo strip underneath).
+  if (layout === 'banner') {
+    return (
+      <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        <div
+          className={cn(
+            'rounded-[12px] px-8 py-12 lg:grid lg:grid-cols-12 lg:gap-6 lg:px-0 lg:py-20',
+            isDark && !surfaceColor
+              ? 'bg-[var(--secondary,#1a353e)]'
+              : surface === 'muted' && !surfaceColor
+                ? 'bg-[var(--pb-surface-muted,#f3f3f4)]'
+                : '',
+          )}
+          style={surfaceColor ? { backgroundColor: surfaceColor } : undefined}
+        >
+          {eyebrow && (
+            <p
+              className="mb-6 lg:col-span-3 lg:mb-0 lg:pl-12"
+              style={{
+                ...eyebrowTextStyle('1.125rem', '400'),
+                color: isDark ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--pb-heading-color)',
+              }}
+            >
+              {renderRichText(eyebrow)}
+            </p>
+          )}
+          <div className="max-w-[652px] space-y-4 lg:col-start-4 lg:col-span-7">
+            {textBlock}
+            {imageUrl && (
+              <img
+                src={imageUrl}
+                alt={imageAlt || heading}
+                loading="lazy"
+                className="mt-8 h-[68px] w-auto max-w-full object-contain object-left"
+              />
+            )}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  const layoutBlock = grid ? (
+    // 12-col page grid: text and image cells sit on the same columns as the
+    // Figma layout, so section text lines up across the whole page. Both
+    // cells pin to row 1: the image cell renders first in the DOM, so for
+    // image-right (image at col 7, text at col 2) grid auto-placement would
+    // otherwise wrap the text cell to a second row instead of beside it.
+    <div className="flex flex-col gap-8 lg:grid lg:grid-cols-12 lg:items-center lg:gap-6">
+      <div
+        className={cn(
+          'w-full lg:row-start-1',
+          imagePosition === 'right' ? GRID_IMAGE[widthKey].right : GRID_IMAGE[widthKey].left,
+        )}
+      >
+        {image}
+      </div>
+      <div
+        className={cn(
+          'space-y-4 lg:row-start-1',
+          textMax,
+          imagePosition === 'right' ? GRID_TEXT[widthKey].right : GRID_TEXT[widthKey].left,
+        )}
+      >
+        {textBlock}
+      </div>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        'flex flex-col md:flex-row gap-8 lg:gap-12 items-center',
+        imagePosition === 'right' ? 'md:flex-row-reverse' : '',
+      )}
+    >
+      <div className="md:w-1/2">{image}</div>
+      <div className={cn('md:w-1/2 space-y-4', textMax)}>{textBlock}</div>
+    </div>
+  );
+
+  if (isDark) {
+    return (
+      <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        <div
+          className={cn(
+            'rounded-[12px]',
+            !surfaceColor && 'bg-[var(--secondary,#1a353e)]',
+            grid ? 'px-8 py-12 lg:px-0' : 'p-8 lg:p-12',
+          )}
+          style={surfaceColor ? { backgroundColor: surfaceColor } : undefined}
+        >
+          {layoutBlock}
+        </div>
+      </section>
+    );
+  }
+
+  if (surface === 'muted') {
+    return (
+      <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+        <div
+          className={cn(
+            'rounded-[12px] bg-[var(--pb-surface-muted,#f3f3f4)]',
+            grid ? 'px-8 py-12 lg:px-0' : 'p-8 sm:p-10 lg:p-14',
+          )}
+        >
+          {layoutBlock}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container mx-auto px-4 py-[var(--pb-section-py,3rem)] sm:px-6 lg:px-8">
+      {layoutBlock}
+    </section>
+  );
+};

pagebuilder/components/widgets/media-object-text.tsx

@@ -0,0 +1,202 @@
+/** The text column of the media-object widget — eyebrow, heading, body,
+ *  bullets, footnote and link. Split out so the render file stays under
+ *  the 300-line cap. */
+
+import type { CSSProperties } from 'react';
+
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { LinkArrow } from './_internal/link-arrow';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import { CTAButton, eyebrowTextStyle, maskStyle } from './_shared';
+import { GRID_TEXT, headingStyle, type MediaObjectWidgetProps } from './media-object-layout';
+
+type TextBlockProps = MediaObjectWidgetProps & {
+  isDark: boolean;
+  grid: boolean;
+  textMax: string;
+};
+
+export function MediaObjectText({
+  eyebrow = '',
+  datePill = '',
+  datePillColor = '',
+  heading,
+  body,
+  bodyMaxWidth = '',
+  bullets = [],
+  bulletSize = 'md',
+  bulletMarker = 'square',
+  footnote = '',
+  linkLabel,
+  linkHref,
+  linkVariant = 'link',
+  logos,
+  headingWidth = 'auto',
+  layout = 'half',
+  isDark,
+  grid,
+  textMax,
+}: TextBlockProps) {
+  return (
+    <>
+      {/* The banner layout renders the eyebrow in its own grid column, so
+				    only the other layouts carry it inline above the heading (the
+				    BioGarden "VIELFÄLTIGE GÄRTEN" kicker). */}
+      {eyebrow && layout !== 'banner' && (
+        <p
+          style={{
+            ...eyebrowTextStyle(),
+            color: isDark
+              ? 'var(--pb-surface-contrast, #ffffff)'
+              : 'var(--pb-heading-color, #161728)',
+          }}
+        >
+          {renderRichText(eyebrow)}
+        </p>
+      )}
+      {datePill && (
+        <span
+          className="inline-flex w-fit items-center rounded-full px-3 py-1 text-sm font-bold"
+          style={{
+            backgroundColor: datePillColor || 'var(--pb-accent, #16a34a)',
+            color: 'var(--pb-surface-contrast, #ffffff)',
+          }}
+        >
+          {renderRichText(datePill)}
+        </span>
+      )}
+      {heading && (
+        <h3
+          className={cn('leading-tight', headingWidth === 'narrow' && 'max-w-[400px]')}
+          style={headingStyle(isDark, layout)}
+        >
+          <AccentText text={heading} />
+        </h3>
+      )}
+      {body && (
+        <RichTextBlock
+          text={body}
+          className={cn(
+            'whitespace-pre-line text-lg leading-[var(--pb-body-leading,1.625)]',
+            isDark && 'opacity-80',
+          )}
+          style={{
+            color: isDark ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--pb-body-color)',
+            maxWidth: bodyMaxWidth || undefined,
+          }}
+        />
+      )}
+      {footnote && (
+        <p
+          className={cn(
+            'font-semibold italic leading-[var(--pb-body-leading,1.625)]',
+            isDark && 'opacity-80',
+          )}
+          style={{
+            color: isDark ? 'var(--pb-surface-contrast, #ffffff)' : 'var(--pb-body-color)',
+          }}
+        >
+          {renderRichText(footnote)}
+        </p>
+      )}
+      {bullets.filter((b) => b.title || b.body).length > 0 && (
+        // The design's point list: a small square marker, a Medium point
+        // title, and an optional explanation line beneath it.
+        <ul className="flex list-none flex-col gap-6 pt-2">
+          {bullets
+            .filter((b) => b.title || b.body)
+            .map((point, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+              <li key={i} className="flex gap-3">
+                {bulletMarker === 'square' && (
+                  <span
+                    aria-hidden="true"
+                    className="mt-[0.55em] size-[7px] shrink-0 bg-current"
+                    style={{
+                      color: isDark
+                        ? 'var(--pb-surface-contrast, #ffffff)'
+                        : 'var(--pb-heading-color, #161728)',
+                    }}
+                  />
+                )}
+                <div className="flex flex-col gap-2">
+                  {point.title && (
+                    <p
+                      className={cn(
+                        'font-medium leading-tight',
+                        bulletSize === 'lg' ? 'text-[24px]' : 'text-[20px]',
+                      )}
+                      style={{
+                        color: isDark
+                          ? 'var(--pb-surface-contrast, #ffffff)'
+                          : 'var(--pb-heading-color, #161728)',
+                      }}
+                    >
+                      {renderRichText(point.title)}
+                    </p>
+                  )}
+                  {point.body && (
+                    <RichTextBlock
+                      text={point.body}
+                      className="whitespace-pre-line leading-[var(--pb-body-leading,1.625)]"
+                      style={{
+                        color: isDark
+                          ? 'var(--pb-surface-contrast, #ffffff)'
+                          : 'var(--pb-body-color)',
+                        opacity: isDark ? 0.8 : 1,
+                      }}
+                    />
+                  )}
+                </div>
+              </li>
+            ))}
+        </ul>
+      )}
+      {linkLabel && linkVariant === 'button' && (
+        <div className="pt-2">
+          <CTAButton
+            label={linkLabel}
+            href={linkHref || '#'}
+            variant={isDark ? 'inverse-outline' : 'secondary'}
+          />
+        </div>
+      )}
+      {linkLabel &&
+        linkVariant === 'link' &&
+        (isDark ? (
+          <a
+            href={linkHref || '#'}
+            className="inline-flex items-center gap-1 font-medium hover:opacity-80"
+            style={{ color: 'var(--pb-surface-contrast, #ffffff)' }}
+          >
+            {renderRichText(linkLabel, { allowLinks: false })}
+            <LinkArrow className="size-5" />
+          </a>
+        ) : (
+          <a
+            href={linkHref || '#'}
+            className="inline-flex items-center gap-1 font-medium text-[color:var(--pb-link-color,var(--pb-accent,#2f7d32))] hover:text-[color:var(--pb-link-hover-color,var(--pb-link-color,var(--pb-accent,#2f7d32)))] hover:[text-decoration-line:var(--pb-link-hover-decoration,underline)]"
+          >
+            {renderRichText(linkLabel, { allowLinks: false })}
+            <LinkArrow className="size-5" />
+          </a>
+        ))}
+      {logos && logos.filter((l) => l.src).length > 0 && (
+        <div className="flex flex-wrap items-center gap-6 pt-2">
+          {logos
+            .filter((l) => l.src)
+            .map((logo, i) => (
+              <img
+                // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                key={i}
+                src={logo.src}
+                alt={logo.alt}
+                className="h-12 w-auto object-contain"
+              />
+            ))}
+        </div>
+      )}
+    </>
+  );
+}