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

pagebuilder/components/widgets/feature-cards-render.tsx

@@ -0,0 +1,258 @@
+/** FeatureCards render. Icon map, types and style tables live in
+ *  feature-cards-styles.ts so this file stays under the 300-line cap. */
+
+/** FeatureCardsWidget types, helpers and render — split from feature-cards-widget.tsx,
+ *  which keeps the field definitions, so both stay under the 300-line cap. */
+
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
+import type { CSSProperties } from 'react';
+import { cn } from '../../utils/widgetUtils';
+import { AccentText } from './_internal/accent-text';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+import {
+  ChartAreaSolid,
+  MagnifyingGlassChartSolid,
+  PawSolid,
+  type SolidIconProps,
+  TemperatureSolid,
+  TreeSolid,
+  WaterSolid,
+} from './_internal/solid-icons';
+import { TextLink } from './_shared/text-link';
+
+// Named glyphs selectable per card — solid icons matching the GCA design
+// system "Icons" page (SNAG_009/SNAG_014). Keep the set small and meaningful;
+// unknown names fall back to a plain coloured badge.
+
+export type { FeatureCardItem, FeatureCardsWidgetProps } from './feature-cards-styles';
+
+import {
+  CARD_BODY_STYLE,
+  CARD_TAG_STYLE,
+  CARD_TITLE_STYLE,
+  COLS_CLASS,
+  DISPLAY_STYLE,
+  EYEBROW_STYLE,
+  type FeatureCardsWidgetProps,
+  HEADING_LG_STYLE,
+  ICON_MAP,
+} from './feature-cards-styles';
+
+export const FeatureCardsWidgetRender = ({
+  eyebrow,
+  title,
+  subtitle,
+  linkLabel,
+  linkHref,
+  cardLinkLabel = 'Learn more',
+  surface = 'default',
+  cardSurface = 'default',
+  columns,
+  items,
+}: FeatureCardsWidgetProps) => {
+  const hasHeaderLink = Boolean(linkLabel && linkHref);
+  const hasSide = Boolean(eyebrow) || hasHeaderLink;
+  const panelClass =
+    surface === 'muted' ? 'rounded-3xl bg-[#f3f3f4] px-6 py-12 sm:px-10 lg:px-12' : '';
+  const cardClass =
+    cardSurface === 'muted'
+      ? 'group flex flex-col rounded-xl bg-[#f3f3f4] p-6 transition-shadow hover:shadow-md'
+      : 'group flex flex-col rounded-xl border border-[var(--border,#e4e6e7)] bg-white p-6 transition-shadow hover:shadow-lg dark:bg-gray-900';
+  const headerLink = hasHeaderLink ? <TextLink label={linkLabel} href={linkHref} /> : null;
+
+  return (
+    <section className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
+      <div className={panelClass}>
+        {(title || subtitle || hasSide) &&
+          (hasSide ? (
+            <div className="mb-10 grid items-center gap-4 sm:grid-cols-[1fr_auto_1fr]">
+              <span className="font-medium" style={EYEBROW_STYLE}>
+                {renderRichText(eyebrow)}
+              </span>
+              <div className="mx-auto max-w-3xl text-center">
+                {title && (
+                  <h2 className="leading-[var(--pb-heading-leading,1.1)]" style={HEADING_LG_STYLE}>
+                    {renderRichText(title)}
+                  </h2>
+                )}
+                {subtitle && (
+                  <RichTextBlock
+                    text={subtitle}
+                    className="mt-3 text-lg"
+                    style={{ color: 'var(--pb-body-color)' }}
+                  />
+                )}
+              </div>
+              <div className="sm:justify-self-end">{headerLink}</div>
+            </div>
+          ) : (
+            <div className="text-center mb-10 max-w-3xl mx-auto">
+              {title && (
+                <h2 className="text-3xl sm:text-4xl lg:text-5xl" style={DISPLAY_STYLE}>
+                  {renderRichText(title)}
+                </h2>
+              )}
+              {subtitle && (
+                <RichTextBlock
+                  text={subtitle}
+                  className="mt-3 text-lg"
+                  style={{ color: 'var(--pb-body-color)' }}
+                />
+              )}
+            </div>
+          ))}
+        {items && items.length > 0 ? (
+          <div className={cn('grid gap-6 grid-cols-1', COLS_CLASS[columns])}>
+            {items.map((item, idx) => {
+              const Icon = item.icon ? ICON_MAP[item.icon] : undefined;
+              const linked = Boolean(item.href);
+              const colored = Boolean(item.cardBg);
+              return (
+                <a
+                  // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; card content repeats, so a content key collides
+                  key={idx}
+                  href={item.href || '#'}
+                  className={
+                    colored
+                      ? 'group flex min-h-[var(--pb-card-min-h,0)] flex-col rounded-xl p-6 transition-shadow hover:shadow-lg'
+                      : cardClass
+                  }
+                  style={colored ? { backgroundColor: item.cardBg } : undefined}
+                >
+                  <div className="mb-4 flex items-start justify-between gap-2">
+                    {item.iconUrl ? (
+                      <img
+                        src={item.iconUrl}
+                        alt={item.iconAlt || ''}
+                        loading="lazy"
+                        className={
+                          colored
+                            ? 'h-36 w-auto max-w-[70%] object-contain object-left'
+                            : 'size-12 object-contain'
+                        }
+                      />
+                    ) : (
+                      <div
+                        className="flex size-12 items-center justify-center rounded-lg"
+                        style={{
+                          backgroundColor:
+                            item.iconBg || (Icon ? 'var(--pb-accent)' : 'var(--pb-surface-muted)'),
+                        }}
+                      >
+                        {Icon && <Icon className="size-6 text-white" />}
+                      </div>
+                    )}
+                    {/* On colored cards the tag is a bold lead-in line above the
+											    description (BioGarden's "Jetzt anmelden"), so it is
+											    rendered down there rather than as a pill up here. */}
+                    {item.tag && !colored && (
+                      <span
+                        className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
+                        style={{
+                          backgroundColor: 'var(--pb-surface-muted)',
+                          color: 'var(--pb-heading-color)',
+                        }}
+                      >
+                        {renderRichText(item.tag, { allowLinks: false })}
+                      </span>
+                    )}
+                  </div>
+                  <h3
+                    className="transition-colors"
+                    style={
+                      colored
+                        ? {
+                            ...CARD_TITLE_STYLE,
+                            color: 'var(--pb-surface-contrast, #ffffff)',
+                          }
+                        : CARD_TITLE_STYLE
+                    }
+                  >
+                    {renderRichText(item.title, { allowLinks: false })}
+                  </h3>
+                  {/* Colored cards put the tag, description and arrow button in
+										    one bottom group — tag as a bold lead-in, copy on the left
+										    (~2/3 of the card), circle bottom-right — as the BioGarden
+										    Figma does. `mt-auto` sits on the GROUP, not on either
+										    child: on the tag it would break tagless cards, on the row
+										    it would push the copy away from the tag leading into it. */}
+                  {colored ? (
+                    <div className="mt-auto">
+                      {item.tag && (
+                        <p
+                          className="pt-6 font-bold"
+                          style={{
+                            ...CARD_TAG_STYLE,
+                            color: 'var(--pb-surface-contrast, #ffffff)',
+                          }}
+                        >
+                          {renderRichText(item.tag, { allowLinks: false })}
+                        </p>
+                      )}
+                      <div className="flex items-end justify-between gap-4">
+                        {item.description && (
+                          <p
+                            className="mt-2 max-w-[66%] leading-relaxed"
+                            style={{
+                              ...CARD_BODY_STYLE,
+                              color: 'var(--pb-surface-contrast, #ffffff)',
+                              opacity: 0.85,
+                            }}
+                          >
+                            {/* `*word*` marks the semibold key phrase the
+															    Figma uses to lead each description. Links off:
+															    this sits inside the card-wide <a>. */}
+                            <AccentText text={item.description} allowLinks={false} />
+                          </p>
+                        )}
+                        {linked && (
+                          // The wrapping <a> already names the link (card
+                          // title), so the arrow is decorative.
+                          <span
+                            className="flex size-16 shrink-0 items-center justify-center rounded-full bg-[var(--pb-surface,#ffffff)]"
+                            style={{
+                              color: 'var(--pb-heading-color, #161728)',
+                            }}
+                          >
+                            <ArrowRight className="size-6" />
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    item.description && (
+                      <p className="mt-2 leading-relaxed" style={CARD_BODY_STYLE}>
+                        {/* Inline (not RichTextBlock): the whole card is one
+													    <a>, so a `[label](href)` here would nest anchors. */}
+                        {renderRichText(item.description, {
+                          allowLinks: false,
+                        })}
+                      </p>
+                    )
+                  )}
+                  {linked &&
+                    (colored ? null : (
+                      <span className="mt-auto inline-flex items-center gap-1 pt-6 text-sm font-medium text-[color:var(--pb-link-color,var(--pb-accent))] group-hover:text-[color:var(--pb-link-hover-color,var(--pb-link-color,var(--pb-accent)))]">
+                        {renderRichText(cardLinkLabel, { allowLinks: false })}
+                        <ArrowUpRight className="size-4" />
+                      </span>
+                    ))}
+                </a>
+              );
+            })}
+          </div>
+        ) : (
+          <EmptyState />
+        )}
+      </div>
+    </section>
+  );
+};
+
+function EmptyState() {
+  return (
+    <div className="text-center text-gray-500 py-6">
+      Add cards in the editor to populate this section.
+    </div>
+  );
+}

pagebuilder/components/widgets/feature-cards-styles.ts

@@ -0,0 +1,107 @@
+/** Icon map and style tables for the feature-cards widget. */
+
+import type { CSSProperties } from 'react';
+
+import type { SolidIconProps } from './_internal/solid-icons';
+import {
+  ChartAreaSolid,
+  MagnifyingGlassChartSolid,
+  PawSolid,
+  TemperatureSolid,
+  TreeSolid,
+  WaterSolid,
+} from './_internal/solid-icons';
+
+export const ICON_MAP: Record<string, (props: SolidIconProps) => React.JSX.Element> = {
+  chart: ChartAreaSolid,
+  search: MagnifyingGlassChartSolid,
+  thermometer: TemperatureSolid,
+  tree: TreeSolid,
+  paw: PawSolid,
+  waves: WaterSolid,
+};
+
+export type FeatureCardItem = {
+  title: string;
+  description: string;
+  icon: string;
+  iconBg: string;
+  iconUrl: string;
+  /**
+   * Alt text for `iconUrl`. Needed when the image IS the card's visible title
+   * (BioGarden's wordmark cards leave `title` empty) — otherwise the card link
+   * is announced without its name. Empty = decorative.
+   */
+  iconAlt?: string;
+  href: string;
+  /** Optional category label shown top-right of the card (e.g. outputs type). */
+  tag?: string;
+  /**
+   * Optional CSS color filling the whole card (e.g. a tenant's program
+   * color). When set, the card renders with white text and the icon image
+   * becomes a larger wordmark-style lockup.
+   */
+  cardBg?: string;
+};
+
+export type FeatureCardsWidgetProps = {
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  linkLabel: string;
+  linkHref: string;
+  /** Per-card link label (defaults to "Learn more"; e.g. "View output"). */
+  cardLinkLabel: string;
+  /** Section surface: plain (default) or a soft grey rounded panel. */
+  surface: 'default' | 'muted';
+  /** Card surface: white with a border (default) or a soft grey panel. */
+  cardSurface: 'default' | 'muted';
+  columns: '2' | '3' | '4';
+  items: FeatureCardItem[];
+};
+
+export const COLS_CLASS: Record<FeatureCardsWidgetProps['columns'], string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export const DISPLAY_STYLE: CSSProperties = {
+  fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+  letterSpacing: 'var(--pb-display-tracking)',
+  fontFamily: 'var(--pb-display-font)',
+  color: 'var(--pb-heading-color)',
+};
+
+// Hoisted (not per-render) style objects — all values are constant tokens.
+// The heading fallback clamp reproduces the prior `text-3xl sm:text-4xl`
+// steps: 30px below 640px, 36px from the 640px breakpoint up.
+export const HEADING_LG_STYLE: CSSProperties = {
+  ...DISPLAY_STYLE,
+  fontSize: 'var(--pb-heading-lg, clamp(1.875rem, 1.3125rem + 2.34375vw, 2.25rem))',
+};
+
+export const EYEBROW_STYLE: CSSProperties = {
+  color: 'var(--pb-body-color)',
+  fontSize: 'var(--pb-eyebrow-size, 0.875rem)',
+};
+
+export const CARD_TITLE_STYLE: CSSProperties = {
+  fontFamily: 'var(--pb-display-font)',
+  fontWeight:
+    'var(--pb-card-title-weight, var(--pb-display-weight))' as CSSProperties['fontWeight'],
+  fontSize: 'var(--pb-card-title-size, 1.125rem)',
+  color: 'var(--pb-heading-color)',
+};
+
+export const CARD_BODY_STYLE: CSSProperties = {
+  color: 'var(--pb-body-color)',
+  fontSize: 'var(--pb-card-body-size, 0.875rem)',
+};
+
+// The bold lead-in line above a coloured card's description (BioGarden's
+// "Jetzt anmelden"). Sized by its own token so it can be the Figma's 22px
+// without dragging the body copy with it; the fallback is the previous 1rem.
+export const CARD_TAG_STYLE: CSSProperties = {
+  fontSize: 'var(--pb-card-tag-size, 1rem)',
+};

pagebuilder/components/widgets/feature-cards-widget.tsx

@@ -0,0 +1,133 @@
+/** FeatureCardsWidget: field definitions and config assembly.
+ *  Types, helpers and render live in feature-cards-render.tsx. */
+
+import type { ComponentConfig } from '@puckeditor/core';
+
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+
+import { type FeatureCardsWidgetProps, FeatureCardsWidgetRender } from './feature-cards-render';
+
+export type * from './feature-cards-render';
+
+export const FeatureCardsWidget: ComponentConfig<FeatureCardsWidgetProps> = {
+  label: 'Feature cards (linked grid)',
+  fields: {
+    eyebrow: { type: 'text', label: 'Eyebrow (left of title)' },
+    title: { type: 'text', label: 'Section title' },
+    subtitle: { type: 'textarea', label: 'Section subtitle' },
+    linkLabel: { type: 'text', label: 'Header link label' },
+    linkHref: { type: 'text', label: 'Header link URL' },
+    cardLinkLabel: { type: 'text', label: 'Card link label' },
+    surface: {
+      type: 'select',
+      label: 'Surface',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Soft grey panel', value: 'muted' },
+      ],
+    },
+    cardSurface: {
+      type: 'select',
+      label: 'Card surface',
+      options: [
+        { label: 'White + border', value: 'default' },
+        { label: 'Soft grey', value: 'muted' },
+      ],
+    },
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Cards',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        // The whole card is a link, so markdown links in this copy render
+        // as their label text only — say so where the editor can see it.
+        description: {
+          type: 'textarea',
+          label: 'Description (links not supported here)',
+        },
+        icon: {
+          type: 'select',
+          label: 'Icon',
+          options: [
+            { label: 'None', value: '' },
+            { label: 'Chart', value: 'chart' },
+            { label: 'Search', value: 'search' },
+            { label: 'Thermometer', value: 'thermometer' },
+            { label: 'Tree', value: 'tree' },
+            { label: 'Paw', value: 'paw' },
+            { label: 'Waves', value: 'waves' },
+          ],
+        },
+        iconBg: { type: 'text', label: 'Icon badge colour' },
+        iconUrl: createImageField(mediaLibraryAdapter, 'Icon image (overrides icon)'),
+        iconAlt: { type: 'text', label: 'Icon image alt text' },
+        href: { type: 'text', label: 'Link URL' },
+        tag: { type: 'text', label: 'Tag (top-right)' },
+        cardBg: {
+          type: 'text',
+          label: 'Card colour (CSS, white text — optional)',
+        },
+      },
+      defaultItemProps: {
+        title: 'Card title',
+        description: 'Short description.',
+        icon: '',
+        iconBg: '',
+        iconUrl: '',
+        iconAlt: '',
+        href: '#',
+        tag: '',
+        cardBg: '',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    eyebrow: '',
+    title: 'Featured topics',
+    subtitle: '',
+    linkLabel: '',
+    linkHref: '',
+    cardLinkLabel: 'Learn more',
+    surface: 'default',
+    cardSurface: 'default',
+    columns: '3',
+    items: [
+      {
+        title: 'First topic',
+        description: 'Short description of the topic.',
+        icon: '',
+        iconBg: '',
+        iconUrl: '',
+        href: '#',
+      },
+      {
+        title: 'Second topic',
+        description: 'Short description of the topic.',
+        icon: '',
+        iconBg: '',
+        iconUrl: '',
+        href: '#',
+      },
+      {
+        title: 'Third topic',
+        description: 'Short description of the topic.',
+        icon: '',
+        iconBg: '',
+        iconUrl: '',
+        href: '#',
+      },
+    ],
+  },
+  render: (props) => <FeatureCardsWidgetRender {...props} />,
+};

pagebuilder/components/widgets/feature-grid-widget.tsx

@@ -0,0 +1,118 @@
+import type { ComponentConfig } from '@puckeditor/core';
+import type { CSSProperties } from 'react';
+import { createImageField, mediaLibraryAdapter } from '../../fields';
+import { cn } from '../../utils/widgetUtils';
+import { RichTextBlock, renderRichText } from './_internal/rich-text';
+
+export type FeatureGridItem = {
+  title: string;
+  description: string;
+  iconUrl: string;
+};
+
+export type FeatureGridWidgetProps = {
+  heading: string;
+  subtext: string;
+  columns: '2' | '3' | '4';
+  items: FeatureGridItem[];
+};
+
+const COLS_CLASS: Record<FeatureGridWidgetProps['columns'], string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+export const FeatureGridWidget: ComponentConfig<FeatureGridWidgetProps> = {
+  label: 'Feature grid (marketing)',
+  fields: {
+    heading: { type: 'text', label: 'Heading' },
+    subtext: { type: 'textarea', label: 'Subtext' },
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    items: {
+      type: 'array',
+      label: 'Features',
+      arrayFields: {
+        title: { type: 'text', label: 'Title' },
+        description: { type: 'textarea', label: 'Description' },
+        iconUrl: createImageField(mediaLibraryAdapter, 'Icon URL'),
+      },
+      defaultItemProps: {
+        title: 'Feature',
+        description: 'Feature description.',
+        iconUrl: '',
+      },
+      min: 1,
+      max: 12,
+    },
+  },
+  defaultProps: {
+    heading: 'Powerful features',
+    subtext: 'Everything you need to build amazing pages.',
+    columns: '3',
+    items: [
+      { title: 'Fast', description: 'Loads in milliseconds.', iconUrl: '' },
+      { title: 'Flexible', description: 'Compose any layout.', iconUrl: '' },
+      {
+        title: 'Reliable',
+        description: 'Battle-tested in production.',
+        iconUrl: '',
+      },
+    ],
+  },
+  render: ({ heading, subtext, columns, items }) => (
+    <section className="container px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
+      {(heading || subtext) && (
+        <div className="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+          {heading && (
+            <h2
+              className="max-w-lg mb-6 text-3xl leading-tight sm:text-4xl md:mx-auto"
+              style={{
+                fontWeight: 'var(--pb-display-weight)' as CSSProperties['fontWeight'],
+                letterSpacing: 'var(--pb-display-tracking)',
+                fontFamily: 'var(--pb-display-font)',
+                color: 'var(--pb-heading-color)',
+              }}
+            >
+              {renderRichText(heading)}
+            </h2>
+          )}
+          {subtext && <RichTextBlock text={subtext} className="text-base md:text-lg" />}
+        </div>
+      )}
+      <div className={cn('grid gap-8 grid-cols-1', COLS_CLASS[columns])}>
+        {items?.map((item, idx) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: author-ordered array with no stable id; content repeats, so a content key collides
+          <div key={idx} className="text-center">
+            {item.iconUrl ? (
+              <img
+                src={item.iconUrl}
+                alt=""
+                loading="lazy"
+                className="size-12 mx-auto mb-4 object-contain"
+              />
+            ) : (
+              <div className="size-12 rounded-full bg-primary-100 mx-auto mb-4" />
+            )}
+            <h3 className="mb-3 text-xl font-medium leading-snug">{renderRichText(item.title)}</h3>
+            {item.description && (
+              <RichTextBlock
+                text={item.description}
+                className="text-sm"
+                style={{ color: 'var(--pb-body-color)' }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  ),
+};