@opensite/ui 3.9.0 → 3.11.0

package/dist/instagram-post-grid.d.cts

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
+import { O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import '@page-speed/pressable';
+import '@opensite/hooks/usePlatformFromUrl';
+
+/**
+ * A single Instagram post rendered as a grid tile.
+ *
+ * Mirrors the wire shape hydrated from the toastability Instagram feed
+ * (`PublicFeeds::InstagramPostSerializer`). Media URLs MUST be the re-hosted
+ * MediaRecord CDN URLs — never expiring Instagram CDN URLs.
+ */
+interface InstagramPostItem {
+    /**
+     * Unique identifier for the post
+     */
+    id: string;
+    /**
+     * External Instagram permalink (opens instagram.com in a new tab)
+     */
+    href: string;
+    /**
+     * Image / poster source URL (required — items without it are skipped)
+     */
+    image: string;
+    /**
+     * Alt text for the image (falls back to "Instagram post")
+     */
+    imageAlt?: string;
+    /**
+     * Post caption (truncated for display).
+     *
+     * NOTE: For immersive rendering the caption must be a **string** — the
+     * library's `MediaItem.title`/`caption` are string-typed, so a caption is
+     * flowed through as text. A rich `ReactNode` caption (hand-authored markup,
+     * only ever used by the legacy pre-immersive block) cannot be threaded into
+     * the immersive card/viewer; when supplied it is dropped and the tile/viewer
+     * title falls back to `imageAlt` (then `"Instagram post"`). Hydrated feeds
+     * always send plain strings, so this only affects hand-authored usage.
+     */
+    caption?: React.ReactNode;
+    /**
+     * Whether this post is a video/reel
+     */
+    isVideo?: boolean;
+    /**
+     * Video source URL (only used when `isVideo` is true)
+     */
+    videoUrl?: string;
+    /**
+     * Formatted post date
+     */
+    date?: React.ReactNode;
+    /**
+     * Number of likes (badge is only rendered when present)
+     */
+    likeCount?: number;
+    /**
+     * Number of comments (badge is only rendered when present)
+     */
+    commentCount?: number;
+    /**
+     * Number of views (badge is only rendered when present)
+     */
+    viewCount?: number;
+    /**
+     * Additional CSS classes for the tile
+     */
+    className?: string;
+}
+interface InstagramPostGridProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Subheading/intro content below the heading
+     */
+    subheading?: React.ReactNode;
+    /**
+     * Array of Instagram posts to display
+     */
+    items?: InstagramPostItem[];
+    /**
+     * Custom slot for rendering items (overrides items array)
+     */
+    itemsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header container
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the subheading
+     */
+    subheadingClassName?: string;
+    /**
+     * Additional CSS classes for the grid container
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for each tile
+     */
+    itemClassName?: string;
+    /**
+     * Additional CSS classes for each media element
+     */
+    imageClassName?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
+}
+/**
+ * InstagramPostGrid displays a website's Instagram feed as a responsive grid of
+ * vertical (9:16) tiles that open a fullscreen, swipeable immersive viewer.
+ *
+ * Composition is powered by `@page-speed/media-immersive`: each post maps to a
+ * `MediaItem` (photos are first-class images, reels are videos), tiles are
+ * `ThumbnailCard`s, and tapping one opens `ImmersiveViewer` — a TikTok/Reels-
+ * style pager. Per the annotated design, each tile shows a like-count pill
+ * top-left (only when a numeric like count exists — never fabricated), no
+ * duration timestamp, and a center glyph on hover only (a play triangle for
+ * reels, an expand icon for photos). The fullscreen viewer carries the caption
+ * plus a read-only engagement rail (likes/comments/views) and an explicit
+ * "Open in Instagram" egress rendered as a real `<a target="_blank"
+ * rel="noopener noreferrer">` (a crawlable, affordance-correct link — not a
+ * scripted `window.open` button); the old whole-tile link-out is REPLACED by
+ * opening the viewer, with the permalink egress living in the viewer.
+ *
+ * Consumer image concerns are honored: `imageClassName` and `optixFlowConfig`
+ * are forwarded onto each tile's poster image via the library's
+ * `posterImgProps` passthrough.
+ *
+ * Captions should be plain strings when used with immersive rendering; a rich
+ * `ReactNode` caption falls back to `imageAlt` (see the `caption` field doc).
+ *
+ * Posts without an image are skipped; an empty or missing `items` array renders
+ * nothing. Data is hydrated from the toastability Instagram feed — media URLs
+ * are the re-hosted MediaRecord CDN URLs, never expiring Instagram CDN URLs.
+ *
+ * @example
+ * ```tsx
+ * <InstagramPostGrid
+ *   heading="Follow us on Instagram"
+ *   items={[
+ *     {
+ *       id: "1",
+ *       href: "https://www.instagram.com/p/abc123/",
+ *       image: "https://cdn.ing/assets/i/r/1320/instagram-1.webp",
+ *       caption: "Fresh out of the oven",
+ *       likeCount: 128,
+ *       commentCount: 12,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
+
+export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };

package/dist/instagram-post-grid.d.ts

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
+import { O as OptixFlowConfig } from './blocks-DyouPohq.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import '@page-speed/pressable';
+import '@opensite/hooks/usePlatformFromUrl';
+
+/**
+ * A single Instagram post rendered as a grid tile.
+ *
+ * Mirrors the wire shape hydrated from the toastability Instagram feed
+ * (`PublicFeeds::InstagramPostSerializer`). Media URLs MUST be the re-hosted
+ * MediaRecord CDN URLs — never expiring Instagram CDN URLs.
+ */
+interface InstagramPostItem {
+    /**
+     * Unique identifier for the post
+     */
+    id: string;
+    /**
+     * External Instagram permalink (opens instagram.com in a new tab)
+     */
+    href: string;
+    /**
+     * Image / poster source URL (required — items without it are skipped)
+     */
+    image: string;
+    /**
+     * Alt text for the image (falls back to "Instagram post")
+     */
+    imageAlt?: string;
+    /**
+     * Post caption (truncated for display).
+     *
+     * NOTE: For immersive rendering the caption must be a **string** — the
+     * library's `MediaItem.title`/`caption` are string-typed, so a caption is
+     * flowed through as text. A rich `ReactNode` caption (hand-authored markup,
+     * only ever used by the legacy pre-immersive block) cannot be threaded into
+     * the immersive card/viewer; when supplied it is dropped and the tile/viewer
+     * title falls back to `imageAlt` (then `"Instagram post"`). Hydrated feeds
+     * always send plain strings, so this only affects hand-authored usage.
+     */
+    caption?: React.ReactNode;
+    /**
+     * Whether this post is a video/reel
+     */
+    isVideo?: boolean;
+    /**
+     * Video source URL (only used when `isVideo` is true)
+     */
+    videoUrl?: string;
+    /**
+     * Formatted post date
+     */
+    date?: React.ReactNode;
+    /**
+     * Number of likes (badge is only rendered when present)
+     */
+    likeCount?: number;
+    /**
+     * Number of comments (badge is only rendered when present)
+     */
+    commentCount?: number;
+    /**
+     * Number of views (badge is only rendered when present)
+     */
+    viewCount?: number;
+    /**
+     * Additional CSS classes for the tile
+     */
+    className?: string;
+}
+interface InstagramPostGridProps {
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Subheading/intro content below the heading
+     */
+    subheading?: React.ReactNode;
+    /**
+     * Array of Instagram posts to display
+     */
+    items?: InstagramPostItem[];
+    /**
+     * Custom slot for rendering items (overrides items array)
+     */
+    itemsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the section
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional CSS classes for the header container
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Additional CSS classes for the subheading
+     */
+    subheadingClassName?: string;
+    /**
+     * Additional CSS classes for the grid container
+     */
+    gridClassName?: string;
+    /**
+     * Additional CSS classes for each tile
+     */
+    itemClassName?: string;
+    /**
+     * Additional CSS classes for each media element
+     */
+    imageClassName?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
+}
+/**
+ * InstagramPostGrid displays a website's Instagram feed as a responsive grid of
+ * vertical (9:16) tiles that open a fullscreen, swipeable immersive viewer.
+ *
+ * Composition is powered by `@page-speed/media-immersive`: each post maps to a
+ * `MediaItem` (photos are first-class images, reels are videos), tiles are
+ * `ThumbnailCard`s, and tapping one opens `ImmersiveViewer` — a TikTok/Reels-
+ * style pager. Per the annotated design, each tile shows a like-count pill
+ * top-left (only when a numeric like count exists — never fabricated), no
+ * duration timestamp, and a center glyph on hover only (a play triangle for
+ * reels, an expand icon for photos). The fullscreen viewer carries the caption
+ * plus a read-only engagement rail (likes/comments/views) and an explicit
+ * "Open in Instagram" egress rendered as a real `<a target="_blank"
+ * rel="noopener noreferrer">` (a crawlable, affordance-correct link — not a
+ * scripted `window.open` button); the old whole-tile link-out is REPLACED by
+ * opening the viewer, with the permalink egress living in the viewer.
+ *
+ * Consumer image concerns are honored: `imageClassName` and `optixFlowConfig`
+ * are forwarded onto each tile's poster image via the library's
+ * `posterImgProps` passthrough.
+ *
+ * Captions should be plain strings when used with immersive rendering; a rich
+ * `ReactNode` caption falls back to `imageAlt` (see the `caption` field doc).
+ *
+ * Posts without an image are skipped; an empty or missing `items` array renders
+ * nothing. Data is hydrated from the toastability Instagram feed — media URLs
+ * are the re-hosted MediaRecord CDN URLs, never expiring Instagram CDN URLs.
+ *
+ * @example
+ * ```tsx
+ * <InstagramPostGrid
+ *   heading="Follow us on Instagram"
+ *   items={[
+ *     {
+ *       id: "1",
+ *       href: "https://www.instagram.com/p/abc123/",
+ *       image: "https://cdn.ing/assets/i/r/1320/instagram-1.webp",
+ *       caption: "Fresh out of the oven",
+ *       likeCount: 128,
+ *       commentCount: 12,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function InstagramPostGrid({ sectionId, heading, subheading, items, itemsSlot, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, itemClassName, imageClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: InstagramPostGridProps): React.JSX.Element | null;
+
+export { InstagramPostGrid, type InstagramPostGridProps, type InstagramPostItem };