formica-ui-lib 1.0.161 → 1.0.165

package/README.md

@@ -202,6 +202,15 @@ It is not the right tool when the component needs domain-specific rules.
 - a grid deciding what happens when a card is clicked
 - a layout wrapper deciding navigation or selection logic
 
+## Responsive Layout Rule
+
+Use one breakpoint for normal responsive work:
+
+- unprefixed Tailwind classes are mobile below `md`
+- `md:` classes are PC at `md` and above
+
+Avoid `sm:`, `lg:`, `xl:`, and `2xl:` layout variants unless the design explicitly requires an exception. Most responsive changes should live in templates and organisms, with fewer changes in molecules and very few in atoms.
+
 ## When To Use `ClickableCard`
 
 Use `ClickableCard` when a whole card or large visual surface acts as one click target.

package/dist/componentProps/atoms/input/inputProps.d.ts

@@ -6,6 +6,7 @@ export interface InputProps {
     value?: string;
     placeholder?: string;
     disabled?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     hasError?: boolean;
     className?: string;

package/dist/componentProps/atoms/text/TextProps.d.ts

@@ -9,5 +9,5 @@ export type TextProps<E extends React.ElementType = "p"> = {
     variant?: TextVariant;
     className?: string;
     children: React.ReactNode;
-} & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, {}>>;
+} & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, Record<never, never>>>;
 export {};

package/dist/componentProps/molecules/card/articlerecentcard/ArticleRecentCardProps.d.ts

@@ -1,11 +1,10 @@
 export interface ArticleRecentCardProps {
     imageSrc: string;
     imageAlt?: string;
-    category: string;
+    category?: string;
     title: string;
-    publishDate: string;
+    publishDate?: string;
     body: string;
     buttonLabel: string;
-    href?: string;
     onViewClick?: () => void;
 }

package/dist/componentProps/molecules/card/columncarouselcard/ColumnCarouselCardProps.d.ts

@@ -0,0 +1,22 @@
+export interface ColumnCarouselItem {
+    id: string;
+    label: string;
+    href: string;
+    source: string;
+    alt?: string;
+    description?: string;
+}
+export type ColumnCarouselCardProps = {
+    id: string;
+    item: ColumnCarouselItem;
+    absoluteIdx: number;
+    isActive: boolean;
+    showLabel: boolean;
+    grow: number;
+    isLoaded: boolean;
+    isFav: boolean;
+    setActiveIndex: (n: number | null) => void;
+    onLoaded: (id: string) => void;
+    onToggleFav: (item: ColumnCarouselItem) => void;
+    onItemClick?: (item: ColumnCarouselItem) => void;
+};

package/dist/componentProps/molecules/card/featurecard/FeatureCardProps.d.ts

@@ -11,5 +11,6 @@ export type FeatureCardProps = {
     description?: string;
     buttonLabel?: string;
     ctaMode?: FeatureCardCtaMode;
+    onCardClick?: () => void;
     onCtaClick?: (payload: FeatureCardClickPayload) => void;
 };

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

@@ -4,5 +4,5 @@ export type FeaturedProductCardProps = {
     title: string;
     brand?: string;
     decorNumber?: string | number;
-    onClick?: () => void;
+    onProductClick?: () => void;
 };

package/dist/componentProps/molecules/card/swatchcard/SwatchCardProps.d.ts

@@ -1,11 +1,12 @@
 export type SwatchStatus = "new" | "discontinued" | "comingSoon" | "sale";
 export interface SwatchCardProps {
+    id?: string;
     imageSrc: string;
     imageAlt: string;
     title: string;
     brand: string;
     product: string;
     decorNumber: string | number;
-    onClick?: () => void;
+    onSwatchClick?: () => void;
     status?: SwatchStatus;
 }

package/dist/componentProps/molecules/carousel/carouselarrowcontrols/CarouselArrowControlsProps.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonProps } from "../../../atoms/buttons/button/ButtonProps";
+export interface CarouselArrowControlsProps {
+    onPreviousClick: () => void;
+    onNextClick: () => void;
+    prevArrowButtonProps?: Partial<ButtonProps>;
+    nextArrowButtonProps?: Partial<ButtonProps>;
+    previousLabel?: string;
+    nextLabel?: string;
+}

package/dist/componentProps/molecules/carousel/carouseldots/CarouselDotsProps.d.ts

@@ -0,0 +1,6 @@
+export interface CarouselDotsProps {
+    count: number;
+    activeIndex: number;
+    onDotClick: (index: number) => void;
+    ariaLabelPrefix?: string;
+}

package/dist/componentProps/{organisms/banner/columnbanner → molecules/carousel/columncarousel}/ColumnCarouselProps.d.ts

@@ -1,6 +1,6 @@
-import type { CtaItem } from "./ColumnBannerProps";
+import type { ColumnCarouselItem } from "../../card/columncarouselcard/ColumnCarouselCardProps";
 export type ColumnCarouselProps = {
-    items: CtaItem[];
+    items: ColumnCarouselItem[];
     startIndex: number;
     activeIndex: number | null;
     setActiveIndex: (n: number | null) => void;
@@ -11,7 +11,7 @@ export type ColumnCarouselProps = {
     loadedIds: Set<string>;
     favoriteIds: Set<string>;
     onLoaded: (id: string) => void;
-    onToggleFav: (item: CtaItem) => void;
-    onItemClick?: (item: CtaItem) => void;
-    getItemId?: (item: CtaItem) => string;
+    onToggleFav: (item: ColumnCarouselItem) => void;
+    onItemClick?: (item: ColumnCarouselItem) => void;
+    getItemId?: (item: ColumnCarouselItem) => string;
 };

package/dist/componentProps/molecules/searchbar/SearchBarProps.d.ts

@@ -1,3 +1,2 @@
 import { InputProps } from "../../atoms/input/inputProps";
-export interface SearchBarProps extends Omit<InputProps, "type"> {
-}
+export type SearchBarProps = Omit<InputProps, "type">;

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

@@ -5,5 +5,5 @@ export type BreadcrumbsItem = {
 };
 export type BreadcrumbsProps = {
     Breadcrumbs?: BreadcrumbsItem[];
-    onNavigate?: (href: string, item: BreadcrumbsItem) => void;
+    onBreadcrumbClick?: (href: string, item: BreadcrumbsItem) => void;
 };

package/dist/componentProps/molecules/selectors/slidingtabselector/SlidingTabsSelectorProps.d.ts

@@ -10,7 +10,7 @@ export type SlidingTabIndicatorProps = {
     renderTab?: (args: {
         item: RailTabsItem;
         isActive: boolean;
-        onClick: () => void;
+        onTabClick: () => void;
     }) => React.ReactNode;
     className?: string;
     durationMs?: number;

package/dist/componentProps/organisms/articles/articlerecentsection/ArticleRecentSectionProps.d.ts

@@ -1,6 +1,10 @@
 import type { ArticleRecentCardProps } from "../../../molecules/card/articlerecentcard/ArticleRecentCardProps";
+export type TitleVariant = "h1" | "h2" | "h3" | "standard" | "bold" | "nav" | "free";
 export interface ArticleRecentSectionProps {
     title?: string;
+    titleVariant?: TitleVariant;
+    titleClassName?: string;
     items: ArticleRecentCardProps[];
     className?: string;
+    separatorClassName?: string;
 }

package/dist/componentProps/organisms/banner/columnbanner/ColumnBannerProps.d.ts

@@ -1,3 +1,4 @@
+import type { ColumnCarouselItem } from "../../../molecules/card/columncarouselcard/ColumnCarouselCardProps";
 export interface TabItem {
     label: string;
     columns?: ColumnGroup[];
@@ -6,14 +7,7 @@ export interface ColumnTab {
     label: string;
     items: CtaItem[];
 }
-export interface CtaItem {
-    id: string;
-    label: string;
-    href: string;
-    source: string;
-    alt?: string;
-    description?: string;
-}
+export type CtaItem = ColumnCarouselItem;
 export interface ColumnGroup {
     group: string;
     title: string;
@@ -25,6 +19,7 @@ export interface ColumnBannerProps {
     body?: string;
     description?: string;
     TabsWithColumns: TabItem[];
+    favoriteIds?: string[];
     onFavoriteToggle?: (item: CtaItem, isFavorite: boolean) => void;
     onItemClick?: (item: CtaItem) => void;
 }

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

@@ -1,10 +1,15 @@
-type AlignOption = "left" | "right";
+export type FeatureBannerAlign = "left" | "right";
+export interface FeatureBannerButtonClickPayload {
+    buttonLabel: string;
+    buttonHref?: string;
+}
 export interface FeatureBannerProps {
     imageSrc: string;
     imageAlt?: string;
     headline: string;
     body: string;
     buttonLabel: string;
-    align?: AlignOption;
+    buttonHref?: string;
+    align?: FeatureBannerAlign;
+    onButtonClick?: (payload: FeatureBannerButtonClickPayload) => void;
 }
-export {};

package/dist/componentProps/organisms/banner/herobanner/CallToActionHeroProps.d.ts

@@ -6,7 +6,7 @@ export type CallToActionHeroCta = {
     intent?: ButtonIntent;
     className?: string;
     href?: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 export interface CallToActionHeroProps {
     imageSrc: string;

package/dist/componentProps/organisms/cart/purchasepanel/PurchasePanelLeftPanelProps.d.ts

@@ -6,7 +6,7 @@ export type SwatchOption = ButtonGridItem & {
     value: string;
     disabled?: boolean;
     active?: boolean;
-    onClick?: () => void;
+    onOptionClick?: (id: string) => void;
 };
 export type SwatchPurchasePanelLeftPanelNavigateMeta = {
     kind: "availability" | "returnPolicy";
@@ -35,7 +35,7 @@ export type PurchasePanelLeftPanelProps = {
     notReturnableText?: string;
     returnPolicyHref?: string;
     returnPolicyLabel?: string;
-    onNavigate?: (href: string, meta?: SwatchPurchasePanelLeftPanelNavigateMeta) => void;
+    onPurchaseInfoLinkClick?: (href: string, meta?: SwatchPurchasePanelLeftPanelNavigateMeta) => void;
     priceLabel?: string;
     initialQuantity?: number;
     minQuantity?: number;

package/dist/componentProps/organisms/cart/purchasepanel/PurchasePanelProps.d.ts

@@ -14,7 +14,7 @@ export type PurchasePanelOptionProps = {
     disabled?: boolean;
     value?: string;
     active?: boolean;
-    onClick?: (id: string) => void;
+    onOptionClick?: (id: string) => void;
 };
 export type CartOrderProps = {
     type: PurchasePanelTab;
@@ -84,7 +84,7 @@ export type PurchasePanelProps = {
     returnPolicyHref?: string;
     returnPolicyLabel?: string;
     notReturnableText?: string;
-    onNavigate?: (href: string, meta?: SwatchPurchasePanelNavigateMeta) => void;
+    onPurchaseInfoLinkClick?: (href: string, meta?: SwatchPurchasePanelNavigateMeta) => void;
 };
 export type GroupName = "product" | "grade" | "texture" | "size";
 export type SelectedState = Record<GroupName, string | null>;

package/dist/componentProps/organisms/documentlinkcollection/DocumentLinkCollectionProps.d.ts

@@ -1,5 +1,8 @@
-import { DocumentLinkCardProps } from "../../molecules/card/documentlinkcard/DocumentLinkCardProps";
+import type { DocumentLinkCardProps } from "../../molecules/card/documentlinkcard/DocumentLinkCardProps";
+export interface DocumentLinkCardItem extends DocumentLinkCardProps {
+    id: string;
+}
 export interface DocumentLinkCollectionProps {
     title: string;
-    documentLinkCards: DocumentLinkCardProps[];
+    documentLinkCards: DocumentLinkCardItem[];
 }

package/dist/componentProps/organisms/featurecards/featurecardscollection/FeatureCardCollectionProps.d.ts

@@ -1,13 +1,5 @@
-import type { FeatureCardClickPayload } from "../../../molecules/card/featurecard/FeatureCardProps";
-export type FeatureCardCollectionItem = {
-    imageSrc: string;
-    imageAlt?: string;
-    title: string;
-    description?: string;
-    buttonLabel?: string;
-    onCardClick?: () => void;
-    onCtaClick?: (payload: FeatureCardClickPayload) => void;
-};
+import type { FeatureCardProps } from "../../../molecules/card/featurecard/FeatureCardProps";
+export type FeatureCardCollectionItem = FeatureCardProps;
 export type FeatureCardCollectionProps = {
     title?: string;
     body?: string;

package/dist/componentProps/organisms/search/searchheader/SearchHeaderProps.d.ts

@@ -0,0 +1,5 @@
+import type { SearchBarProps } from "../../../molecules/searchbar/SearchBarProps";
+export interface SearchHeaderProps {
+    searchBarProps: SearchBarProps;
+    onSearchClick: () => void;
+}

package/dist/componentProps/scene/proresource/ProResourceSceneProps.d.ts

@@ -0,0 +1,12 @@
+import type { StandardCopyHeroProps } from "../../organisms/banner/standardcopyhero/StandardCopyHeroProps";
+import type { MultiButtonBarProps } from "../../molecules/selectors/multibuttonbar/MultiButtonBarProps";
+import type { DocumentLinkCollectionProps } from "../../organisms/documentlinkcollection/DocumentLinkCollectionProps";
+import type { FeatureBannerProps } from "../../organisms/banner/featurebanner/FeatureBannerProps";
+import type { FaqCardCollectionProps } from "../../organisms/faqcardcollection/FaqCardCollectionProps";
+export type ProResourceSceneProps = {
+    standardCopyHeroProps: StandardCopyHeroProps;
+    multiButtonBarProps: MultiButtonBarProps;
+    documentLinkCollectionProps: DocumentLinkCollectionProps;
+    featureBannerProps: FeatureBannerProps;
+    faqCardCollectionProps: FaqCardCollectionProps;
+};

package/dist/componentProps/scene/searchresults/SearchResultsSceneProps.d.ts

@@ -0,0 +1,8 @@
+import { SearchHeaderProps } from "../../organisms/search/searchheader/SearchHeaderProps";
+import { FeaturedProductsCarouselProps } from "../../organisms/carousels/featureproductcarousel/FeaturedProductsCarouselProps";
+import { ArticleRecentSectionProps } from "../../organisms/articles/articlerecentsection/ArticleRecentSectionProps";
+export type SearchResultsSceneProps = {
+    searchHeaderProps: SearchHeaderProps;
+    featuredProductsCarouselProps: FeaturedProductsCarouselProps;
+    articleRecentSectionProps: ArticleRecentSectionProps;
+};

package/dist/componentProps/{scene/articlelanding/ArticleLandingSceneProps.d.ts → templates/articlelandingpagetemplate/ArticleLandingPageTemplateProps.d.ts}

@@ -4,7 +4,7 @@ import type { FilterBarProps } from "../../molecules/selectors/filterbar/FilterB
 import type { DropdownFilterProps } from "../../molecules/selectors/filterbar/DropdownFilterProps";
 import type { FeaturedArticleBannerProps } from "../../organisms/banner/featuredarticlebanner/FeaturedArticleBannerProps";
 import type { FeatureCardCollectionProps } from "../../organisms/featurecards/featurecardscollection/FeatureCardCollectionProps";
-export type ArticleLandingSceneProps = {
+export type ArticleLandingPageTemplateProps = {
     standardCopyHeroProps: StandardCopyHeroProps;
     multiButtonBarProps: MultiButtonBarProps;
     filterBarProps: FilterBarProps;

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

@@ -218,7 +218,7 @@ export type ProductDetailOrder = {
     currency?: string;
     bigCommerceProductId?: string | number;
 };
-export type ProductDetailCartFlyoutProps = Omit<CartFlyoutProps, "isOpen" | "onClose">;
+export type ProductDetailCartFlyoutProps = CartFlyoutProps;
 export type ProductDetailPageTemplateProps = {
     breadcrumbsProps?: BreadcrumbsProps;
     productData: ProductDetailData;
@@ -226,6 +226,6 @@ export type ProductDetailPageTemplateProps = {
     onDownloadFullSheet?: (productData: ProductDetailData) => void;
     onAddToWishlist?: (payload: ProductDetailWishlistPayload, productData: ProductDetailData) => void;
     onAddToCart?: (order: ProductDetailOrder, productData: ProductDetailData) => void;
-    onNavigate?: (href: string, meta?: unknown) => void;
+    onProductNavigate?: (href: string, meta?: unknown) => void;
     cartFlyoutProps?: ProductDetailCartFlyoutProps;
 };