@nuskin/marketing-components 1.17.0 → 1.18.0

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

@@ -1,12 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import Button from './Button';
-declare const meta: Meta<typeof Button>;
+declare function ButtonStory(args: Record<string, unknown>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ButtonStory>;
 export default meta;
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof ButtonStory>;
 export declare const Default: Story;
-export declare const Centered: Story;
-export declare const SmallSize: Story;
-export declare const MediumSize: Story;
-export declare const LargeSize: Story;
-export declare const WithNsIcon: Story;
+export declare const AddToCart: Story;
+export declare const BuyNow: Story;
+export declare const ShopNow: Story;
+export declare const LearnMore: Story;
+export declare const ViewDetails: Story;
+export declare const ExternalLink: Story;
+export declare const AbsoluteHttpUrl: Story;
+export declare const AbsoluteHttpsUrl: Story;
+export declare const ProtocolRelativeUrl: Story;
+export declare const SubmitButton: Story;
+export declare const CancelButton: Story;
+export declare const DisabledSubmit: Story;
+export declare const SmallButton: Story;
+export declare const MediumButton: Story;
+export declare const LargeButton: Story;
+export declare const PrimaryButton: Story;
+export declare const SecondaryButton: Story;
+export declare const IconLeft: Story;
 export declare const IconRight: Story;
+export declare const WithPlaceholder: Story;
+export declare const EditingMode: Story;
+export declare const RoundedButton: Story;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { ButtonAlignment, ButtonVariant } from './types';
+export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    alignment: ButtonAlignment;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface StyledButtonProps {
+    $variant: ButtonVariant;
+    $buttonWidth: string;
+    $buttonType: 'square' | 'rounded';
+    $bg: string;
+    $hover: string;
+    $pressed: string;
+    $text: string;
+    $border: string;
+    $disabledBg: string;
+    $disabledText: string;
+    $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"> & {
+    iconOnly?: boolean;
+    darkModeEnabled?: boolean;
+    startIconName?: import("@nuskin/foundation-ui-components").NsIconProps["name"];
+    endIconName?: import("@nuskin/foundation-ui-components").NsIconProps["name"];
+} & {
+    children?: React.ReactNode | undefined;
+} & {
+    theme?: import("@emotion/react").Theme;
+} & StyledButtonProps, {}, {}>;
+export declare const StyledLabelText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+interface StyledIconWrapperProps {
+    position: 'left' | 'right';
+}
+export declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & StyledIconWrapperProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export {};

package/dist/button/helpers.d.ts

@@ -0,0 +1,46 @@
+import type { ButtonSize, LinkTarget } from './types';
+export declare const ROUNDED_BORDER_RADIUS = "99px";
+export declare const ICON_MARGIN = 2;
+export declare const FLEX_SHRINK_ZERO = 0;
+export declare const REL_NOOPENER_NOREFERRER = "noopener noreferrer";
+export declare const CSS_WORD_BREAK = "break-word";
+export declare const PROTOCOL_HTTP = "http:";
+export declare const PROTOCOL_HTTPS = "https:";
+export declare const DISABLED_STATE_STRING = "disabled";
+export declare const DEFAULT_VARIANT = "primary";
+export declare const DEFAULT_SIZE = "small";
+export declare const DEFAULT_ALIGNMENT = "left";
+export declare const DEFAULT_ICON_POSITION = "left";
+export declare const DEFAULT_BUTTON_TYPE = "square";
+export declare const DEFAULT_PLACEHOLDER_TEXT = "Enter Label";
+export declare const DEFAULT_TARGET = "No";
+export declare const BUTTON_TYPE_ROUNDED = "rounded";
+export declare const BUTTON_TYPE_SQUARE = "square";
+export declare const BORDER_COLOR_TRANSPARENT = "transparent";
+export declare function isValidDestination(dest?: string): boolean;
+export declare function resolveTarget(target?: 'Yes' | 'No' | null): LinkTarget | undefined;
+export declare function resolveDisabled(disabled?: boolean | string | null): boolean;
+export declare function resolveIconName(iconName?: string): string | undefined;
+export declare const variantDefaults: {
+    readonly primary: {
+        readonly bg: "#1f1f1f";
+        readonly hover: "#3a3530";
+        readonly pressed: "#000000";
+        readonly text: "#ffffff";
+        readonly disabledBg: "#e6e6e6";
+        readonly disabledText: "#9e9e9e";
+        readonly focusRing: "#4f84b4";
+    };
+    readonly secondary: {
+        readonly bg: "#ffffff";
+        readonly hover: "#f2f2f2";
+        readonly pressed: "#e6e6e6";
+        readonly text: "#000000";
+        readonly border: "#626262";
+        readonly disabledBg: "#f2f2f2";
+        readonly disabledText: "#b0b0b0";
+        readonly focusRing: "#4f84b4";
+    };
+};
+export declare function getButtonWidth(size: string): string;
+export declare function getIconSize(size: string): ButtonSize;

package/dist/button/types.d.ts

@@ -1,17 +1,40 @@
 export type LinkTarget = '_self' | '_blank';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonAlignment = 'left' | 'center' | 'right';
 export type IconPosition = 'left' | 'right';
+export interface ButtonLabel$ {
+    title?: string;
+    href: string;
+    $?: {
+        title?: {
+            'data-cslp'?: string;
+        };
+        href?: {
+            'data-cslp'?: string;
+        };
+    };
+}
+export interface Button$ {
+    [key: string]: unknown;
+    label?: ButtonLabel$;
+    $?: {
+        icon?: Record<string, unknown>;
+    };
+}
+export type ButtonType = 'square' | 'rounded';
 export interface ButtonProps {
-    label: string;
-    url?: string;
-    target?: LinkTarget | string;
+    label?: ButtonLabel$;
+    placeholder_text?: string;
+    open_in_new_tab?: 'Yes' | 'No' | null;
     variant?: ButtonVariant;
-    size?: 'small' | 'medium' | 'large';
-    alignment?: 'left' | 'center' | 'right';
-    borderRadius?: string;
-    icon?: React.ReactNode | string;
-    iconPosition?: IconPosition;
-    disabled?: boolean | string;
-    $?: any;
-    parent$?: any;
+    button_size?: ButtonSize;
+    alignment?: ButtonAlignment;
+    buttontype?: string;
+    icon?: string;
+    iconposition?: IconPosition;
+    button_state?: boolean | string;
+    $?: Button$;
+    parent$?: Record<string, unknown>;
+    isEditing?: boolean;
 }

package/dist/hero-banner/HeroBanner.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { HeroBannerProps } from './types';
-export type GradientDepth = 'sm' | 'md' | 'lg';
 declare const HeroBanner: React.FC<HeroBannerProps>;
 export default HeroBanner;

package/dist/hero-banner/HeroBanner.stories.d.ts

@@ -3,8 +3,17 @@ import HeroBanner from './HeroBanner';
 declare const meta: Meta<typeof HeroBanner>;
 export default meta;
 type Story = StoryObj<typeof HeroBanner>;
-export declare const Default: Story;
+export declare const ProductLaunch: Story;
+export declare const HomepageHero: Story;
+export declare const CampaignHero: Story;
 export declare const VideoHero: Story;
-export declare const ImageHero: Story;
-export declare const GifHero: Story;
-export declare const GradientDirectionDemo: Story;
+export declare const LeftAligned: Story;
+export declare const CenterAligned: Story;
+export declare const RightAligned: Story;
+export declare const NoGradient: Story;
+export declare const EditingMode: Story;
+export declare const MinimalContent: Story;
+export declare const NoMedia: Story;
+export declare const ResponsiveImage: Story;
+export declare const ButtonWithoutLabel: Story;
+export declare const CustomMediaDimensions: Story;

package/dist/hero-banner/HeroBanner.styled.d.ts

@@ -1,4 +1,4 @@
-import { GradientDepth } from './HeroBanner';
+import { GradientDepth } from './helpers';
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
@@ -13,4 +13,24 @@ export declare const GradientOverlay: import("@emotion/styled").StyledComponent<
     depth: GradientDepth;
     color: "black" | "white";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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>, {}>;
+export declare const Overlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    justifyContent?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    textAlign?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const getJustifyContent: (alignment: "left" | "center" | "right") => "center" | "flex-start" | "flex-end";

package/dist/hero-banner/components/Media.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ParsedMedia } from '../helpers';
+interface MediaProps {
+    parsedMedia: ParsedMedia | null;
+    mediaWidth: string | number;
+    mediaHeight: string | number;
+    mediaAttributes?: Record<string, unknown>;
+}
+export declare const Media: React.FC<MediaProps>;
+export {};

package/dist/hero-banner/components/Typography.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { NsTypography } from '@nuskin/foundation-ui-components';
+interface TypographyProps {
+    value?: string;
+    placeholder: string;
+    isEditing: boolean;
+    typographyProps: React.ComponentProps<typeof NsTypography>;
+}
+export declare const Typography: ({ value, placeholder, isEditing, typographyProps }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hero-banner/components/TypographyFields.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TypographyFieldsProps {
+    brandcaption?: string;
+    title?: string;
+    subtitle?: string;
+    body?: string;
+    isEditing: boolean;
+    editTags?: Record<string, unknown>;
+}
+export declare const TypographyFields: React.FC<TypographyFieldsProps>;
+export {};

package/dist/hero-banner/components/specs/Media.spec.d.ts

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

package/dist/hero-banner/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const PLACEHOLDER_BRAND_CAPTION = "Enter Brand Caption";
+export declare const PLACEHOLDER_TITLE = "Enter Title";
+export declare const PLACEHOLDER_SUBTITLE = "Enter Subtitle";
+export declare const PLACEHOLDER_BODY = "Enter Body";
+export declare const ARIA_LABEL_HERO_BANNER = "Hero banner";
+export declare const IMAGE_LOADING_LAZY = "lazy";

package/dist/hero-banner/helpers.d.ts

@@ -0,0 +1,35 @@
+export type GradientDepth = 'sm' | 'md' | 'lg';
+export type ContentAlignment = 'left' | 'center' | 'right';
+export type TextColor = 'black' | 'white';
+export declare const FULL_SIZE_PERCENT = "100%";
+export declare const MOBILE_BREAKPOINT = "(max-width: 768px)";
+export declare const DESKTOP_BREAKPOINT = "(min-width: 769px)";
+export interface ParsedMedia {
+    type: 'image' | 'gif' | 'video';
+    url: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    isResponsive?: boolean;
+    desktopUrl?: string;
+    mobileUrl?: string;
+}
+export declare function parseMedia(media: unknown): ParsedMedia | null;
+export declare function resolveContentAlignment(contentAlignment?: ContentAlignment): ContentAlignment;
+export declare function resolveGradientDepth(gradientDepth?: GradientDepth): GradientDepth;
+export declare function resolveTextColor(textColor?: string): TextColor;
+export declare function resolveWidth(width?: string | number): string | undefined;
+export declare function resolveHeight(height?: string | number): string | undefined;
+export declare function getGradientColor(textColor: TextColor): 'white' | 'black';
+export type GradientDirection = 'leftToRight' | 'radial' | 'rightToLeft';
+export declare function getGradientDirection(contentAlignment: ContentAlignment): GradientDirection;
+export declare function isFullSize(mediaWidth: string | number, mediaHeight: string | number): boolean;
+export declare function getImageProps(isFullSize: boolean, mediaWidth: string | number, mediaHeight: string | number): {
+    variant: 'fill';
+    className: 'media-fill';
+} | {
+    style: {
+        width: string;
+        height: string;
+    };
+};

package/dist/hero-banner/types.d.ts

@@ -1,33 +1,39 @@
-import { GradientDepth } from "./HeroBanner";
+import { GradientDepth } from "./helpers";
+import { ButtonProps } from "../button";
 export type MediaSource = {
     src: string;
     type?: string;
 };
+export type ContentAlignment = 'left' | 'center' | 'right';
+export type HeroBannerMediaType = 'image' | 'gif' | 'video';
 export type Media = {
-    type: 'image' | 'gif' | 'video';
+    type: HeroBannerMediaType;
     src: string | MediaSource[];
     alt?: string;
     width?: string | number;
     height?: string | number;
 };
-export type CTA = {
-    label: string;
-    destination: string;
-};
+export interface HeroBanner$ {
+    [key: string]: unknown;
+    button?: Record<string, unknown>;
+    media?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}
 export interface HeroBannerProps {
     title?: string;
     subtitle?: string;
     body?: string;
-    brandCaption?: string;
-    primaryCta?: CTA | null;
+    brandcaption?: string;
+    button?: ButtonProps;
     media?: Media | string | null;
-    className?: string;
-    contentAlignment?: 'left' | 'center' | 'right';
+    class_name?: string;
+    content_alignment?: ContentAlignment;
     width?: string | number;
     height?: string | number;
-    gradientEnabled?: boolean;
-    gradientDepth?: GradientDepth;
-    textColor?: string;
-    $?: Record<string, any>;
-    parent$?: Record<string, any>;
+    gradient_enabled?: boolean;
+    gradient_depth?: GradientDepth;
+    text_color?: string;
+    $?: HeroBanner$;
+    parent$?: Record<string, unknown>;
+    isEditing?: boolean;
 }