formica-ui-lib 1.0.184 → 1.0.186

package/README.md

@@ -148,14 +148,39 @@ If the component props change, update the story right away.
 
 Do not leave stale story args, controls, or fake props around.
 
+### Storybook buckets should be editor-friendly
+
+Code folders follow atomic responsibility. Storybook titles should follow the organization that content editors and consumers use to browse components.
+
+Common buckets include:
+
+- `Molecules/Cards`
+- `Molecules/Selectors`
+- `Organisms/Banners`
+- `Organisms/Carousels`
+- `Organisms/Collections`
+- `Organisms/Grids`
+- `Organisms/Navigation`
+- `Organisms/Sections`
+- `Organisms/ProductInformation`
+
+Use `Molecules/Cards` for reusable `*Card` components. Use `Organisms/Collections` for `*Collection` components, `Organisms/Grids` for `*Grid` components, and `Organisms/Sections` for larger page-section wrappers.
+
+Avoid duplicate bucket names across atomic levels when possible. For example, selector components should generally stay under `Molecules/Selectors`.
+
+Avoid article-specific names for reusable components. Keep `Article*` names only when a component is truly article-specific, such as `ArticleBanner`.
+
 ## Scene Stories
 
 Scene stories are special.
 
-They should act like a lightweight simulation of how the UI will behave when wired into a BFF or application layer.
+They are Storybook-only composition shells, not React/Next integration surfaces. Use templates for React/Next page integration.
+
+Use scene stories when you need to preview how separately exposed CMS/XMC components appear together, or when you need a lightweight simulation of how the UI will behave when wired into a BFF or application layer.
 
-That means scene stories should often own:
+That means scene stories may own:
 
+- layout spacing needed to judge the combined composition
 - selected values
 - visible/hidden state
 - click handlers
@@ -248,9 +273,9 @@ Try to keep responsibility at the right layer:
 - atoms
   simple UI pieces and layout primitives
 - molecules
-  small composed patterns like `ClickableCard`
+  small composed patterns like `ClickableCard`, reusable cards, selectors, and inputs
 - organisms
-  richer composed sections like grids, navs, banners, panels
+  richer composed sections like grids, navs, banners, collections, panels, and page sections
 - scenes
   higher-level composition and interaction simulation
 

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

@@ -1,4 +1,5 @@
 export type FeatureCardCtaMode = "button" | "text" | "hidden";
+export type FeatureCardStyle = "standard" | "vertical";
 export type FeatureCardClickPayload = {
     title: string;
     description?: string;
@@ -11,6 +12,7 @@ export type FeatureCardProps = {
     description?: string;
     buttonLabel?: string;
     ctaMode?: FeatureCardCtaMode;
+    cardStyle?: FeatureCardStyle;
     onCardClick?: () => void;
     onCtaClick?: (payload: FeatureCardClickPayload) => void;
 };

package/dist/componentProps/{organisms/articles/articleimage/ArticleImageProps.d.ts → molecules/card/imagecard/ImageCardProps.d.ts}

@@ -1,4 +1,4 @@
-export interface ArticleImageProps {
+export interface ImageCardProps {
     imageSrc?: string;
     imageAlt?: string;
 }

package/dist/componentProps/molecules/card/infocard/InfoCardProps.d.ts

@@ -0,0 +1,15 @@
+export type InfoCardAlign = "left" | "right";
+export interface InfoCardButtonClickPayload {
+    buttonLabel: string;
+    buttonHref?: string;
+}
+export interface InfoCardProps {
+    imageSrc: string;
+    imageAlt?: string;
+    headline: string;
+    body: string;
+    buttonLabel: string;
+    buttonHref?: string;
+    align?: InfoCardAlign;
+    onButtonClick?: (payload: InfoCardButtonClickPayload) => void;
+}

package/dist/componentProps/molecules/card/{articlerecentcard/ArticleRecentCardProps.d.ts → recentarticlecard/RecentArticleCardProps.d.ts}

@@ -1,5 +1,7 @@
 import type React from "react";
-export interface ArticleRecentCardProps {
+export type RecentArticleCardLayoutVariant = "default" | "mediaRightCompact";
+export interface RecentArticleCardProps {
+    layoutVariant?: RecentArticleCardLayoutVariant;
     mediaType?: "image" | "video";
     imageSrc?: string;
     imageAlt?: string;

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

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

package/dist/componentProps/{organisms/articles/articletext/ArticleTextProps.d.ts → molecules/card/textcard/TextCardProps.d.ts}

@@ -1,9 +1,9 @@
 export type HeadingSize = "small" | "large";
-export type ArticleTextAlign = "left" | "center" | "right";
-export interface ArticleTextProps {
+export type TextCardAlign = "left" | "center" | "right";
+export interface TextCardProps {
     heading?: string;
     headingSize?: HeadingSize;
-    align?: ArticleTextAlign;
+    align?: TextCardAlign;
     subheading?: string;
     datetimeStamp?: string;
     body?: string;

package/dist/componentProps/organisms/{articles/articlecarousel/ArticleCarouselProps.d.ts → carousels/contentcarousel/ContentCarouselProps.d.ts}

@@ -1,7 +1,7 @@
 import type { StandardCarouselDefaultSlideProps, StandardCarouselSlide } from "../../../molecules/carousel/standardcarousel/StandardCarouselProps";
-export interface ArticleCarouselSlide extends StandardCarouselSlide {
+export interface ContentCarouselSlide extends StandardCarouselSlide {
     imageText?: string;
 }
-export interface ArticleCarouselProps extends Omit<StandardCarouselDefaultSlideProps, "slides" | "onSlideChange" | "renderSlide" | "showImageOverlay"> {
-    slides: ArticleCarouselSlide[];
+export interface ContentCarouselProps extends Omit<StandardCarouselDefaultSlideProps, "slides" | "onSlideChange" | "renderSlide" | "showImageOverlay"> {
+    slides: ContentCarouselSlide[];
 }

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

@@ -1,4 +1,5 @@
 import type { ButtonGridItem } from "../../../molecules/buttons/buttongrid/ButtonGridProps";
+import type { ReactNode } from "react";
 export type SwatchPurchasePanelTab = "Sample" | "Buy Now" | string;
 export type SwatchOption = ButtonGridItem & {
     id: string;
@@ -43,4 +44,5 @@ export type PurchasePanelLeftPanelProps = {
     onQuantityChange?: (quantity: number) => void;
     onAddToWishlist: () => void;
     onAddToCart: (quantity: number) => void;
+    mobileMediaSlot?: ReactNode;
 };

package/dist/componentProps/organisms/{imageoverlaygrid → grids/imageoverlaygrid}/ImageOverlayGridProps.d.ts

@@ -1,5 +1,5 @@
-import type { ContentGridProps } from "../../atoms/layout/ContentGridProps";
-import type { ImageOverlayCardProps } from "../../molecules/card/imageoverlaycard/ImageOverlayCardProps";
+import type { ContentGridProps } from "../../../atoms/layout/ContentGridProps";
+import type { ImageOverlayCardProps } from "../../../molecules/card/imageoverlaycard/ImageOverlayCardProps";
 export type ImageOverlayGridItem = Omit<ImageOverlayCardProps, "onCardClick"> & {
     id?: string;
 };

package/dist/componentProps/organisms/sections/recentarticles/RecentArticlesProps.d.ts

@@ -0,0 +1,8 @@
+import type { RecentArticleCardProps } from "../../../molecules/card/recentarticlecard/RecentArticleCardProps";
+export interface RecentArticlesProps {
+    title?: string;
+    titleClassName?: string;
+    items: RecentArticleCardProps[];
+    className?: string;
+    separatorClassName?: string;
+}

package/dist/componentProps/organisms/swatchcardcollection/SwatchCardCollectionProps.d.ts

@@ -0,0 +1,15 @@
+import type { SwatchCardProps } from "../../molecules/card/swatchcard/SwatchCardProps";
+export type SwatchCardCollectionItem = SwatchCardProps;
+export type SwatchCardCollectionFooterButtonPayload = {
+    buttonLabel: string;
+    buttonHref?: string;
+};
+export type SwatchCardCollectionProps = {
+    title?: string;
+    body?: string;
+    cards?: SwatchCardCollectionItem[];
+    footerBlurb?: string;
+    footerButtonLabel?: string;
+    footerButtonHref?: string;
+    onFooterButtonClick?: (payload: SwatchCardCollectionFooterButtonPayload) => void;
+};

package/dist/componentProps/scene/article/ArticleSceneProps.d.ts

@@ -1,19 +1,19 @@
 import type { ArticleBannerProps } from "../../organisms/banner/articlebanner/ArticleBannerProps";
-import type { ArticleTextProps } from "../../organisms/articles/articletext/ArticleTextProps";
-import type { ArticleImageProps } from "../../organisms/articles/articleimage/ArticleImageProps";
-import type { ArticleCarouselProps } from "../../organisms/articles/articlecarousel/ArticleCarouselProps";
+import type { TextCardProps } from "../../molecules/card/textcard/TextCardProps";
+import type { ImageCardProps } from "../../molecules/card/imagecard/ImageCardProps";
+import type { ContentCarouselProps } from "../../organisms/carousels/contentcarousel/ContentCarouselProps";
 import { FeaturedProductsCarouselProps } from "../../organisms/carousels/featureproductcarousel/FeaturedProductsCarouselProps";
-import { ArticleRecentSectionProps } from "../../organisms/articles/articlerecentsection/ArticleRecentSectionProps";
-import type { ImageOverlayGridProps } from "../../organisms/imageoverlaygrid/ImageOverlayGridProps";
+import { RecentArticlesProps } from "../../organisms/sections/recentarticles/RecentArticlesProps";
+import type { ImageOverlayGridProps } from "../../organisms/grids/imageoverlaygrid/ImageOverlayGridProps";
 export interface ArticlePageProps {
     articleBannerProps: ArticleBannerProps;
     imageOverlayGridProps?: ImageOverlayGridProps;
-    articleHeaderProps: ArticleTextProps;
-    articleTextProps: ArticleTextProps;
-    articleTextProps2: ArticleTextProps;
-    additionalArticleTextProps?: ArticleTextProps[];
-    articleImageProps: ArticleImageProps;
-    articleCarouselProps: ArticleCarouselProps;
+    articleHeaderProps: TextCardProps;
+    textCardProps: TextCardProps;
+    textCardProps2: TextCardProps;
+    additionalTextCardProps?: TextCardProps[];
+    imageCardProps: ImageCardProps;
+    contentCarouselProps: ContentCarouselProps;
     featuredProductsCarouselProps: FeaturedProductsCarouselProps;
-    articleRecentSectionProps: ArticleRecentSectionProps;
+    recentArticlesProps: RecentArticlesProps;
 }

package/dist/componentProps/scene/campaign/CampaignSceneProps.d.ts

@@ -0,0 +1,15 @@
+import type { StandardCopyHeroProps } from "../../organisms/banner/standardcopyhero/StandardCopyHeroProps";
+import type { TextCardProps } from "../../molecules/card/textcard/TextCardProps";
+import type { ImageCardProps } from "../../molecules/card/imagecard/ImageCardProps";
+import type { ContentCarouselProps } from "../../organisms/carousels/contentcarousel/ContentCarouselProps";
+import type { RecentArticleCardProps } from "../../molecules/card/recentarticlecard/RecentArticleCardProps";
+export interface CampaignSceneProps {
+    standardCopyHeroProps: StandardCopyHeroProps;
+    articleHeaderProps: TextCardProps;
+    textCardProps: TextCardProps;
+    textCardProps2: TextCardProps;
+    imageCardProps: ImageCardProps;
+    contentCarouselProps: ContentCarouselProps;
+    contentCarouselProps2: ContentCarouselProps;
+    recentArticleCardProps: RecentArticleCardProps;
+}

package/dist/componentProps/scene/customerhub/CustomerHubHomeImprovementSceneProps.d.ts

@@ -0,0 +1,16 @@
+import type { StandardCopyHeroProps } from "../../organisms/banner/standardcopyhero/StandardCopyHeroProps";
+import type { SlidingTabIndicatorProps } from "../../molecules/selectors/slidingtabselector/SlidingTabsSelectorProps";
+import type { StandardCarouselProps } from "../../molecules/carousel/standardcarousel/StandardCarouselProps";
+import type { FilterBarProps } from "../../molecules/selectors/filterbar/FilterBarProps";
+import { DropdownFilterProps } from "../../molecules/selectors/filterbar/DropdownFilterProps";
+import type { ImageGridProps } from "../../organisms/imagegrid/ImageGridProps";
+import { RecentArticleCardProps } from "../../molecules/card/recentarticlecard/RecentArticleCardProps";
+export interface CustomerHubHomeImprovementSceneProps {
+    standardCopyHeroProps: StandardCopyHeroProps;
+    slidingTabIndicatorProps: SlidingTabIndicatorProps;
+    standardCarouselProps: StandardCarouselProps;
+    filterBarProps: FilterBarProps;
+    dropdownFilterPropsList: DropdownFilterProps[];
+    imageGridProps: ImageGridProps;
+    recentArticleCardProps: RecentArticleCardProps;
+}

package/dist/componentProps/scene/customerhub/CustomerHubSceneProps.d.ts

@@ -0,0 +1,6 @@
+import type { CallToActionHeroProps } from "../../organisms/banner/herobanner/CallToActionHeroProps";
+import type { ImageOverlayGridProps } from "../../organisms/grids/imageoverlaygrid/ImageOverlayGridProps";
+export interface CustomerHubSceneProps {
+    callToActionHeroProps: CallToActionHeroProps;
+    imageOverlayGridProps: ImageOverlayGridProps;
+}

package/dist/componentProps/scene/home/HomePageProps.d.ts

@@ -7,12 +7,12 @@ import type { ColumnBannerProps } from "../../organisms/banner/columnbanner/Colu
 import type { FeatureCardCollectionProps } from "../../organisms/featurecards/featurecardscollection/FeatureCardCollectionProps";
 import type { FooterProps } from "../../organisms/footer/FooterProps";
 import type { MoreInfoHighlightsSectionProps } from "../../organisms/moreinfohighlightssection/MoreInfoHighlightsSectionProps";
-import type { FeatureBannerProps } from "../../organisms/banner/featurebanner/FeatureBannerProps";
+import type { InfoCardProps } from "../../molecules/card/infocard/InfoCardProps";
 export type HomePageProps = {
     brandNavBarProps: BrandNavBarProps;
     topNavBarProps: TopNavBarProps;
     announcementBarProps?: AnnouncementBarProps;
-    callToActionCarouselProps?: {
+    generalCarouselProps?: {
         slides: CallToActionHeroProps[];
         showArrows?: boolean;
         showDots?: boolean;
@@ -21,7 +21,7 @@ export type HomePageProps = {
         prevArrowButtonProps?: Pick<ButtonProps, "buttonType" | "className">;
     };
     columnBannerProps?: ColumnBannerProps;
-    featureBannerProps?: FeatureBannerProps;
+    infoCardProps?: InfoCardProps;
     featureCardSectionProps?: FeatureCardCollectionProps;
     moreInfoHighlightsSectionProps?: MoreInfoHighlightsSectionProps;
     footerProps?: FooterProps;

package/dist/componentProps/scene/launch/LaunchSceneProps.d.ts

@@ -0,0 +1,16 @@
+import type { CallToActionHeroProps } from "../../organisms/banner/herobanner/CallToActionHeroProps";
+import type { TextCardProps } from "../../molecules/card/textcard/TextCardProps";
+import type { FeaturedProductsCarouselProps } from "../../organisms/carousels/featureproductcarousel/FeaturedProductsCarouselProps";
+import type { ContentCarouselProps } from "../../organisms/carousels/contentcarousel/ContentCarouselProps";
+import type { InfoCardProps } from "../../molecules/card/infocard/InfoCardProps";
+import { SwatchCardCollectionProps } from "../../organisms/swatchcardcollection/SwatchCardCollectionProps";
+export interface LaunchSceneProps {
+    callToActionHeroProps: CallToActionHeroProps;
+    textCardProps: TextCardProps;
+    featuredProductsCarouselProps: FeaturedProductsCarouselProps;
+    swatchCardCollectionProps: SwatchCardCollectionProps;
+    swatchCardCollectionProps2: SwatchCardCollectionProps;
+    contentCarouselProps: ContentCarouselProps;
+    contentCarouselProps2: ContentCarouselProps;
+    infoCardProps: InfoCardProps;
+}

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

@@ -1,12 +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 { InfoCardProps } from "../../molecules/card/infocard/InfoCardProps";
 import type { FaqCardCollectionProps } from "../../organisms/faqcardcollection/FaqCardCollectionProps";
 export type ProResourceSceneProps = {
     standardCopyHeroProps: StandardCopyHeroProps;
     multiButtonBarProps: MultiButtonBarProps;
     documentLinkCollectionProps: DocumentLinkCollectionProps;
-    featureBannerProps: FeatureBannerProps;
+    infoCardProps: InfoCardProps;
     faqCardCollectionProps: FaqCardCollectionProps;
 };

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

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