formica-ui-lib 1.0.69 → 1.0.71

package/README.md

@@ -1,19 +1,21 @@
-# formicaui
-
-This is the home of Formica's Storybook components for the UI
-
-## Branching / Git Workflow
-
-⚠️ **Direct commits to `main` are not allowed.** All work must be done in a feature branch created from `dev`.
-
-### Create a feature branch from `dev`
-
-1. Checkout `dev` and pull the latest changes
-2. Create a new feature branch named `feature/YourFeature`
-
-**Commands:**
-```bash
-git fetch
-git checkout dev
-git pull
-git checkout -b feature/YourFeature
+# formicaui
+
+This is the home of Formica's Storybook components for the UI
+
+## Branching / Git Workflow
+
+⚠️ **Direct commits to `main` are not allowed.** All work must be done in a feature branch created from `dev`.
+
+### Create a feature branch from `dev`
+
+1. Checkout `dev` and pull the latest changes
+2. Create a new feature branch named `feature/YourFeature`
+
+**Commands:**
+
+```bash
+git fetch
+git checkout dev
+git pull
+git checkout -b feature/YourFeature
+```

package/dist/componentProps/atoms/icon/IconProps.d.ts

@@ -1,6 +1,6 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-export type IconSize = 'base' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
-export type IconColor = 'inherit' | 'primary' | 'secondary' | 'secondaryHover' | 'accent';
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+export type IconSize = "base" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
+export type IconColor = "inherit" | "primary" | "secondary" | "secondaryHover" | "accent";
 export type IconProps = {
     icon?: IconDefinition;
     alt?: string;

package/dist/componentProps/molecules/card/featureproductcard/FeaturedProductCardProps.d.ts

@@ -0,0 +1,8 @@
+export type FeaturedProductCardProps = {
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    brand: string;
+    decorNumber: string | number;
+    href?: string;
+};

package/dist/componentProps/molecules/card/swatchquantitycard/SwatchQuantityCardProps.d.ts

@@ -0,0 +1,13 @@
+export type SwatchQuantityCardProps = {
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    brand: string;
+    decorNumber: number;
+    swatchType: string;
+    initialQuantity?: number;
+    minQuantity?: number;
+    maxQuantity?: number;
+    onQuantityChange?: (quantity: number) => void;
+    onRemoveItem?: () => void;
+};

package/dist/componentProps/molecules/carousel/minicarousel/MiniCarouselProps.d.ts

@@ -4,6 +4,8 @@ export type MiniCarouselProps<T> = {
     initialIndex?: number;
     loop?: boolean;
     showArrows?: boolean;
+    header?: React.ReactNode;
+    arrowPosition?: "sides" | "top-right";
     onSelect?: (index: number, item: T) => void;
     renderItem: (args: {
         item: T;

package/dist/componentProps/molecules/selectors/breadcrumb/BreadcrumbProps.d.ts

@@ -0,0 +1,9 @@
+export type BreadcrumbItem = {
+    id: string;
+    label: string;
+    href?: string;
+};
+export type BreadcrumbProps = {
+    Breadcrumbs?: BreadcrumbItem[];
+    onNavigate?: (href: string, item: BreadcrumbItem) => void;
+};

package/dist/componentProps/molecules/selectors/verticaltablist/VerticalTabListProps.d.ts

@@ -0,0 +1,10 @@
+export type VerticalTabListItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+export type VerticalTabListProps = {
+    items: VerticalTabListItem[];
+    value?: string;
+    onChange: (value: string, item: VerticalTabListItem) => void;
+};

package/dist/componentProps/organisms/banner/featurebanner/FeatureBannerProps.d.ts

@@ -1,4 +1,4 @@
-type AlignOption = 'left' | 'right';
+type AlignOption = "left" | "right";
 export interface FeatureBannerProps {
     imageSrc: string;
     imageAlt?: string;

package/dist/componentProps/organisms/banner/standardcopyhero/StandardCopyHeroProps.d.ts

@@ -4,4 +4,7 @@ export interface StandardCopyHeroProps {
     heading: string;
     subheading: string;
     body: string;
+    linkLabel?: string;
+    linkHref?: string;
+    onLinkClick?: () => void;
 }

package/dist/componentProps/organisms/carousels/featureproductcarousel/FeaturedProductsCarouselProps.d.ts

@@ -0,0 +1,13 @@
+export type FeaturedProductItem = {
+    id: string;
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    brand: string;
+    decorNumber: string | number;
+    href?: string;
+};
+export type FeaturedProductsCarouselProps = {
+    title?: string;
+    items: FeaturedProductItem[];
+};

package/dist/componentProps/organisms/section/productinformationsection/ProductInformationSectionProps.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+export type ProductInformationTabKey = "details" | "texture" | "sizeAndGrade";
+export type ProductDetailsData = {
+    summary?: string;
+    content?: React.ReactNode;
+};
+export type TextureItem = {
+    key: string;
+    title?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    description?: string;
+};
+export type TextureGroup = {
+    id: string;
+    title: string;
+    items: TextureItem[];
+};
+export type TextureData = {
+    groups?: TextureGroup[];
+};
+export type SizeAndGradeCardData = {
+    id: string;
+    title: string;
+    subtitle?: string;
+    items?: string[];
+    tone?: "filled" | "outlined";
+};
+export type SizeAndGradeData = {
+    summary?: string;
+    cards?: SizeAndGradeCardData[];
+    content?: React.ReactNode;
+};
+export type ProductInformationRange = {
+    id: string;
+    label: string;
+    details?: ProductDetailsData;
+    texture?: TextureData;
+    sizeAndGrade?: SizeAndGradeData;
+};
+export type ProductInformationSectionProps = {
+    ranges: ProductInformationRange[];
+    defaultTab?: ProductInformationTabKey;
+    defaultRangeId?: string;
+    className?: string;
+};

package/dist/componentProps/page/productdetailpage/ProductDetailPageProps.d.ts

@@ -0,0 +1,10 @@
+import type { BrandNavBarProps } from "../../organisms/navigation/BrandNavBarProps";
+import type { TopNavBarProps } from "../../organisms/navigation/TopNavBarProps";
+import type { FooterProps } from "../../organisms/footer/FooterProps";
+import { ProductDetailPageTemplateProps } from "../../templates/productdetailpagetemplate/ProductDetailPageTemplateProps";
+export type ProductDetailPageProps = {
+    brandNavBarProps: BrandNavBarProps;
+    topNavBarProps: TopNavBarProps;
+    productDetailPageTemplateProps: ProductDetailPageTemplateProps;
+    footerProps?: FooterProps;
+};

package/dist/componentProps/templates/productdetailpagetemplate/ProductDetailPageTemplateProps.d.ts

@@ -0,0 +1,200 @@
+import { BreadcrumbsProps } from "../../molecules/selectors/breadcrumb/BreadcrumbsProps";
+import { ProductInformationTabKey } from "../../organisms/section/productinformationsection/ProductInformationSectionProps";
+export type ProductDetailSimpleOption = {
+    id: string;
+    label: string;
+    value: string;
+    code?: string;
+    title?: string;
+    widthIn?: string;
+    lengthIn?: string;
+};
+export type ProductDetailImage = {
+    id: string;
+    type?: string;
+    src: string;
+    alt?: string;
+    thumbnailSrc?: string;
+    thumbnailAlt?: string;
+};
+export type ProductDetailPrice = {
+    value: number;
+    label: string;
+};
+export type ProductDetailProduct = {
+    parentId?: string;
+    decor?: string;
+    collection?: string;
+    title?: string;
+    description?: string;
+    sku?: string;
+    patternRepeat?: string;
+    currency?: string;
+    price?: ProductDetailPrice;
+};
+export type ProductDetailContent = {
+    defaultPurchaseTab?: string;
+    defaultInfoTab?: ProductInformationTabKey;
+    defaultRangeId?: string;
+    availabilityLabel?: string;
+    availabilityHref?: string;
+    returnPolicyLabel?: string;
+    returnPolicyHref?: string;
+    notReturnableText?: string;
+    sampleDisclaimer?: string;
+    sampleSizeNote?: string;
+};
+export type ProductDetailDownloadLink = {
+    label?: string;
+    href?: string;
+};
+export type ProductDetailDownloads = {
+    swatch?: ProductDetailDownloadLink;
+    fullSheet?: ProductDetailDownloadLink;
+};
+export type ProductDetailTextureItem = {
+    key: string;
+    title: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    description?: string;
+};
+export type ProductDetailTextureGroup = {
+    id: string;
+    title: string;
+    items: ProductDetailTextureItem[];
+};
+export type ProductDetailRange = {
+    id: string;
+    label: string;
+    details?: {
+        summary?: string;
+        content?: string;
+    };
+    texture?: {
+        groups?: ProductDetailTextureGroup[];
+    };
+    sizeAndGrade?: {
+        summary?: string;
+        cards?: Array<{
+            id: string;
+            title: string;
+            subtitle?: string;
+            tone?: "filled" | "outlined";
+            items: string[];
+        }>;
+        content?: string;
+    };
+};
+export type ProductDetailPurchaseTabOptionIds = {
+    productOptionIds?: string[];
+    textureOptionIds?: string[];
+    sizeOptionIds?: string[];
+};
+export type ProductDetailPurchase = {
+    defaults?: {
+        product?: string | null;
+        texture?: string | null;
+        size?: string | null;
+        quantity?: number;
+        minQuantity?: number;
+        maxQuantity?: number;
+    };
+    tabOptions?: {
+        Sample?: ProductDetailPurchaseTabOptionIds;
+        "Buy Now"?: ProductDetailPurchaseTabOptionIds;
+    };
+};
+export type ProductDetailVariant = {
+    id: string;
+    sku: string;
+    rangeId: string;
+    decor?: string;
+    title?: string;
+    textureId?: string;
+    thicknessId?: string;
+    sizeId?: string;
+    finish?: string;
+    grade?: string;
+    isWebEnabled?: boolean;
+};
+export type ProductDetailSizeAndGradeGuideRow = {
+    textureId?: string;
+    thicknessId?: string;
+    finish?: string;
+    grade?: string;
+    sizes?: Array<{
+        sizeId: string;
+        label: string;
+        skuIds?: string[];
+    }>;
+};
+export type ProductDetailStandardCopyHero = {
+    imageSrc?: string;
+    imageAlt?: string;
+    heading?: string;
+    subheading?: string;
+    body?: string;
+    linkLabel?: string;
+    linkHref?: string;
+};
+export type ProductDetailFeaturedProduct = {
+    id: string;
+    imageSrc: string;
+    imageAlt: string;
+    title: string;
+    brand: string;
+    decorNumber: string | number;
+    href?: string;
+};
+export type ProductDetailData = {
+    id?: string;
+    meta?: {
+        source?: string;
+        cacheKey?: string;
+        productType?: string;
+    };
+    product?: ProductDetailProduct;
+    content?: ProductDetailContent;
+    downloads?: ProductDetailDownloads;
+    images?: ProductDetailImage[];
+    ranges?: ProductDetailRange[];
+    optionSets?: {
+        purchaseTabs?: string[];
+        sampleSizes?: ProductDetailSimpleOption[];
+        ranges?: ProductDetailSimpleOption[];
+        thicknesses?: ProductDetailSimpleOption[];
+        textures?: ProductDetailSimpleOption[];
+        sizes?: ProductDetailSimpleOption[];
+    };
+    purchase?: ProductDetailPurchase;
+    variants?: ProductDetailVariant[];
+    sizeAndGradeGuide?: {
+        rows?: ProductDetailSizeAndGradeGuideRow[];
+    };
+    standardCopyHero?: ProductDetailStandardCopyHero;
+    featuredProducts?: ProductDetailFeaturedProduct[];
+};
+export type ProductDetailPageTemplateProps = {
+    breadcrumbsProps?: BreadcrumbsProps;
+    productData?: ProductDetailData;
+    onDownloadSwatch?: (data: ProductDetailData) => void;
+    onDownloadFullSheet?: (data: ProductDetailData) => void;
+    onAddToWishlist?: (payload: {
+        sku?: string;
+        decor?: string;
+    }, data: ProductDetailData) => void;
+    onAddToCart?: (order: {
+        type: string;
+        sku?: string;
+        decor?: string;
+        product: string | null;
+        texture: string | null;
+        size: string | null;
+        quantity: number;
+        priceValue?: number;
+        priceLabel?: string;
+        currency?: string;
+    }, data: ProductDetailData) => void;
+    onNavigate?: (href: string) => void;
+};