@nuskin/marketing-components 1.19.0 → 1.21.0

package/dist/button/Button.styled.d.ts

@@ -20,7 +20,7 @@ interface StyledButtonProps {
     $focusRing: string;
     href?: string;
 }
-export declare const StyledButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Button").ButtonProps, "color" | "fullWidth" | "href" | "className" | "variant" | "onClick" | "type" | "aria-label" | "disabled" | "endIcon" | "size" | "startIcon" | "onFocus" | "onBlur" | "onChange"> & {
+export declare const StyledButton: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Button").ButtonProps, "color" | "fullWidth" | "href" | "className" | "variant" | "type" | "disabled" | "endIcon" | "size" | "startIcon" | "aria-label" | "onFocus" | "onBlur" | "onChange" | "onClick"> & {
     iconOnly?: boolean;
     darkModeEnabled?: boolean;
     startIconName?: import("@nuskin/foundation-ui-components").NsIconProps["name"];

package/dist/bynder-media/BynderMedia.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BynderMediaProps } from './types';
+export declare function BynderMedia({ bynder_media, $ }: Readonly<BynderMediaProps>): React.ReactElement | null;

package/dist/bynder-media/BynderMedia.styled.d.ts

@@ -0,0 +1,20 @@
+export declare const MediaContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledVideo: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {}>;
+export declare const PictureElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const SourceElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, {}>;

package/dist/bynder-media/index.d.ts

@@ -0,0 +1,3 @@
+export { BynderMedia } from './BynderMedia';
+export type { BynderMediaProps, BynderMediaType, BynderMediaExtracted, BynderImageDataType } from './types';
+export { extractBynderMedia, getMediaUrl } from './utils';

package/dist/{utils/bynder-utils.d.ts → bynder-media/types.d.ts}

@@ -1,4 +1,11 @@
 export type BynderMediaType = 'image' | 'gif' | 'video';
+export type CSEditTags = Record<string, any>;
+export interface BynderMediaProps {
+    /** JSON string from Contentstack bynder_media field */
+    readonly bynder_media?: string;
+    /** Contentstack edit tags */
+    readonly $?: CSEditTags;
+}
 export type BynderMediaExtracted = {
     url: string;
     type: BynderMediaType;
@@ -45,5 +52,3 @@ export type BynderImageDataType = {
         };
     };
 };
-export declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
-export declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;

package/dist/bynder-media/utils.d.ts

@@ -0,0 +1,3 @@
+import { BynderImageDataType, BynderMediaExtracted } from './types';
+export declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
+export declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;

package/dist/content-card/ContentCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ContentCardProps } from './types';
+declare const ContentCard: React.FC<ContentCardProps>;
+export default ContentCard;

package/dist/content-card/ContentCard.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import ContentCard from './ContentCard';
+declare const meta: Meta<typeof ContentCard>;
+export default meta;
+type Story = StoryObj<typeof ContentCard>;
+export declare const ImageCard: Story;
+export declare const GifCard: Story;
+export declare const VideoCard: Story;
+export declare const BynderJsonMedia: Story;
+export declare const NoCta: Story;
+export declare const ButtonOpenInNewTab: Story;
+export declare const CardLinkOpenInNewTab: Story;
+export declare const ButtonNoLink: Story;
+export declare const RightAligned: Story;
+export declare const EditingPlaceholder: Story;

package/dist/content-card/ContentCard.styled.d.ts

@@ -0,0 +1,50 @@
+export declare const Card: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    align?: "left" | "center" | "right";
+    borderRadius?: string;
+    backgroundColor?: string;
+    backgroundOpacity?: number;
+    textColor?: string;
+    textOpacity?: number;
+    $maxHeight?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const MediaWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $mediaHeight?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const Subtitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const Body: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const CtaWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $height?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MediaPlaceholderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $contentMinHeight?: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/content-card/Media.d.ts

@@ -0,0 +1,7 @@
+/**
+ * BannerMedia Sub-Component
+ * Renders responsive media (image/gif/video) with lazy loading and fallback support
+ */
+import React from 'react';
+import { MediaProps } from './types';
+export declare function Media(props: Readonly<MediaProps>): React.ReactElement;

package/dist/content-card/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MEDIA_RATIO = 0.5;
+export declare const CTA_BUTTON_HEIGHT = 80;
+/** Content area vertical space: padding (16*2) + gap before CTA (8). */
+export declare const CONTENT_VERTICAL_SPACE = 40;

package/dist/content-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContentCard } from './ContentCard';
+export type { ContentCardProps } from './types';

package/dist/content-card/specs/ContentCard.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/content-card/specs/Media.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/content-card/specs/helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/content-card/specs/mockData.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Mock Data for Bynder Utils Tests
+ * Contains test data for Bynder media extraction functions
+ */
+export declare const mockSelectedImage: {
+    url: string;
+    type: "IMAGE";
+    fileSize: number;
+    width: number;
+    height: number;
+    fit: "cover";
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedVideo: {
+    url: string;
+    type: "VIDEO";
+    fileSize: number;
+    width: number;
+    height: number;
+    fit: "cover";
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithAltText: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedGif: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedGifUppercase: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedVideoWithAlt: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithDescriptiveAlt: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithoutAlt: {
+    url: string;
+    type: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedCustomTransformation: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedCustomTransformationSimple: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithExistingQuality: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockSelectedWithMultipleParams: {
+    url: string;
+    type: string;
+    altText: string;
+    imageType: string;
+    fit: string;
+    position: string;
+    bgColor: string;
+};
+export declare const mockPreviewUrls: string[];
+export declare const mockMediaJsonImage: string;
+export declare const mockMediaJsonGif: string;
+export declare const mockMediaJsonGifUppercase: string;
+export declare const mockMediaJsonVideo: string;
+export declare const mockMediaJsonWithDescriptiveAlt: string;
+export declare const mockMediaJsonWithoutAlt: string;
+export declare const mockMediaJsonCustomTransformation: string;
+export declare const mockMediaJsonCustomTransformationSimple: string;
+export declare const mockMediaJsonDefaultTransform: string;
+export declare const mockMediaJsonVideoNoTransform: string;
+export declare const mockMediaJsonGifNoTransform: string;
+export declare const mockMediaJsonWithExistingQuality: string;
+export declare const mockMediaJsonWithMultipleParams: string;
+export declare const mockMediaJsonRealCustomTransformation: string;
+export declare const mockMediaJsonVideoIntegration: string;

package/dist/content-card/types.d.ts

@@ -0,0 +1,50 @@
+import { ButtonProps } from "@/button/types";
+export type MediaType = 'image' | 'gif' | 'video';
+export type MediaProvider = 'bynder';
+export type ContentAlignment = 'left' | 'center' | 'right';
+export type CtaStyle = 'card' | 'button' | 'none';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type IconPosition = 'left' | 'right';
+export type LinkTarget = '_self' | '_blank';
+export interface MediaProps {
+    readonly mediaUrl: string;
+    readonly fallbackMediaUrl?: string;
+    readonly mediaType?: MediaType;
+    readonly mediaAlt?: string;
+    readonly onError?: () => void;
+    readonly testId?: string;
+    readonly $?: Record<string, unknown>;
+    readonly isResponsive?: boolean;
+    readonly desktopUrl?: string;
+    readonly mobileUrl?: string;
+}
+export type BynderMediaType = 'image' | 'gif' | 'video';
+export interface BynderMediaExtracted {
+    url: string;
+    type: BynderMediaType;
+    alt: string;
+    isResponsive?: boolean;
+    desktopUrl?: string;
+    mobileUrl?: string;
+}
+export interface ContentCardProps {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+    media?: MediaProps | string;
+    cta?: ButtonProps;
+    cta_style?: CtaStyle;
+    content_alignment?: ContentAlignment;
+    _metadata?: {
+        uid?: string;
+    };
+    max_height?: number;
+    background_color?: string;
+    background_opacity?: number;
+    text_color?: string;
+    text_opacity?: number;
+    border_radius?: string;
+    isEditing?: boolean;
+    parent$?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}

package/dist/content-card/utils/helpers.d.ts

@@ -0,0 +1,33 @@
+import type { ContentAlignment, CtaStyle, LinkTarget, MediaProps } from '../types';
+/**
+ * Validates that the value is a hex color (#rgb or #rrggbb).
+ * Returns the trimmed hex string, or defaultColor when invalid.
+ */
+export declare function validateHex(color: string, defaultColor: string): string;
+/**
+ * Converts a hex color to rgba using the given opacity.
+ * If hex is invalid or empty, returns defRgba when provided.
+ */
+export declare function hexToRgba(hex: string, opacity: number, defaultRgba?: string): string;
+/** Card background as rgba; uses hex default and fallback. */
+export declare function toCardBackgroundRgba(backgroundColor?: string, backgroundOpacity?: number): string;
+/** Card text color as rgba; uses hex default and fallback. */
+export declare function toCardTextRgba(textColor?: string, textOpacity?: number): string;
+export declare const calculateMediaHeight: (maxHeight?: number) => number;
+export declare const getMaxHeight: (maxHeight: number) => number;
+export declare const getTitle: (title: string, isEditing: boolean) => string;
+/** Normalize content alignment string to 'left' | 'center' | 'right'. */
+export declare function normalizeContentAlignment(alignment?: string | null): ContentAlignment;
+/** Normalize CTA style string to 'card' | 'button' | 'none'. */
+export declare function normalizeCtaStyle(value?: string | null): CtaStyle;
+/**
+ * Normalize media prop (string or object) to MediaProps or undefined.
+ * - string: parsed as Bynder JSON, then mapped to MediaProps (with $ passthrough).
+ * - object with mediaUrl: returned as-is.
+ * - other: returned as MediaProps for legacy/custom shapes.
+ */
+export declare function normalizeContentCardMedia(media: MediaProps | string | undefined, $: Record<string, unknown>): MediaProps | undefined;
+/** Content inner min/max height so card total height fits within maxHeight. */
+export declare function calculateContentMinHeight(maxHeight: number, mediaHeight: number, ctaHeight: number): number;
+/** Resolve target from open_in_new_tab string. */
+export declare function resolveTarget(target?: 'Yes' | 'No' | null): LinkTarget | undefined;

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export * from './image';
 export * from './marketing-banner';
 export * from './spacing-divider';
 export * from './column-control';
+export * from './content-card';
 export * from './hero-banner';
 export * from './button';
 export * from './rich-text';
+export * from './bynder-media';