formica-ui-lib 1.0.161 → 1.0.164

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/dist/componentProps/atoms/input/inputProps.d.ts +1 -0
  2. package/dist/componentProps/atoms/text/TextProps.d.ts +1 -1
  3. package/dist/componentProps/molecules/card/columncarouselcard/ColumnCarouselCardProps.d.ts +22 -0
  4. package/dist/componentProps/molecules/card/featurecard/FeatureCardProps.d.ts +1 -0
  5. package/dist/componentProps/molecules/card/featureproductcard/FeaturedProductCardProps.d.ts +1 -1
  6. package/dist/componentProps/molecules/card/swatchcard/SwatchCardProps.d.ts +2 -1
  7. package/dist/componentProps/molecules/carousel/carouselarrowcontrols/CarouselArrowControlsProps.d.ts +9 -0
  8. package/dist/componentProps/molecules/carousel/carouseldots/CarouselDotsProps.d.ts +6 -0
  9. package/dist/componentProps/{organisms/banner/columnbanner → molecules/carousel/columncarousel}/ColumnCarouselProps.d.ts +5 -5
  10. package/dist/componentProps/molecules/searchbar/SearchBarProps.d.ts +1 -2
  11. package/dist/componentProps/molecules/selectors/breadcrumb/BreadcrumbsProps.d.ts +1 -1
  12. package/dist/componentProps/molecules/selectors/slidingtabselector/SlidingTabsSelectorProps.d.ts +1 -1
  13. package/dist/componentProps/organisms/banner/columnbanner/ColumnBannerProps.d.ts +3 -8
  14. package/dist/componentProps/organisms/banner/featurebanner/FeatureBannerProps.d.ts +8 -3
  15. package/dist/componentProps/organisms/banner/herobanner/CallToActionHeroProps.d.ts +1 -1
  16. package/dist/componentProps/organisms/cart/purchasepanel/PurchasePanelLeftPanelProps.d.ts +2 -2
  17. package/dist/componentProps/organisms/cart/purchasepanel/PurchasePanelProps.d.ts +2 -2
  18. package/dist/componentProps/organisms/documentlinkcollection/DocumentLinkCollectionProps.d.ts +5 -2
  19. package/dist/componentProps/organisms/featurecards/featurecardscollection/FeatureCardCollectionProps.d.ts +2 -10
  20. package/dist/componentProps/organisms/search/searchheader/SearchHeaderProps.d.ts +5 -0
  21. package/dist/componentProps/scene/proresource/ProResourceSceneProps.d.ts +12 -0
  22. package/dist/componentProps/{scene/articlelanding/ArticleLandingSceneProps.d.ts → templates/articlelandingpagetemplate/ArticleLandingPageTemplateProps.d.ts} +1 -1
  23. package/dist/componentProps/templates/productdetailpagetemplate/ProductDetailPageTemplateProps.d.ts +2 -2
  24. package/dist/index.cjs +8 -8
  25. package/dist/index.d.ts +6 -0
  26. package/dist/index.js +1568 -1621
  27. package/dist/stories/atoms/buttons/buttongrid/ButtonGrid.test.d.ts +1 -0
  28. package/dist/stories/atoms/buttons/iconbutton/IconButton.test.d.ts +1 -0
  29. package/dist/stories/atoms/buttons/radiooption/RadioOption.test.d.ts +1 -0
  30. package/dist/stories/atoms/checkbox/Checkbox.test.d.ts +1 -0
  31. package/dist/stories/atoms/htmlblock/HtmlBlock.test.d.ts +1 -0
  32. package/dist/stories/atoms/image/Image.test.d.ts +1 -0
  33. package/dist/stories/atoms/input/Input.test.d.ts +1 -0
  34. package/dist/stories/atoms/layout/ContentContainer/ContentContainer.test.d.ts +1 -0
  35. package/dist/stories/atoms/layout/ContentGrid/ContentGrid.test.d.ts +1 -0
  36. package/dist/stories/atoms/layout/FlowRow/FlowRow.test.d.ts +1 -0
  37. package/dist/stories/atoms/text/Text.test.d.ts +1 -0
  38. package/dist/stories/molecules/banner/articlebannercontent/ArticleBannerContent.test.d.ts +1 -0
  39. package/dist/stories/molecules/banner/calltoactionherocontent/CallToActionHeroContent.test.d.ts +1 -0
  40. package/dist/stories/molecules/banner/featuredarticlebannercontent/FeaturedArticleBannerContent.test.d.ts +1 -0
  41. package/dist/stories/molecules/banner/standardcopybannercontent/StandardCopyBannerContent.test.d.ts +1 -0
  42. package/dist/stories/molecules/card/articlerecentcard/ArticleRecentCard.test.d.ts +1 -0
  43. package/dist/stories/molecules/card/columncarouselcard/ColumnCarouselCard.d.ts +4 -0
  44. package/dist/stories/molecules/card/columncarouselcard/ColumnCarouselCard.test.d.ts +1 -0
  45. package/dist/stories/molecules/card/documentlinkcard/DocumentLinkCard.test.d.ts +1 -0
  46. package/dist/stories/molecules/card/faqcard/FaqCard.test.d.ts +1 -0
  47. package/dist/stories/molecules/card/featurecard/FeatureCard.test.d.ts +1 -0
  48. package/dist/stories/molecules/card/featureproductcard/FeaturedProductCard.test.d.ts +1 -0
  49. package/dist/stories/molecules/card/moreinfohighlightscard/MoreInfoHighlightsCard.test.d.ts +1 -0
  50. package/dist/stories/molecules/carousel/carouselarrowcontrols/CarouselArrowControls.d.ts +4 -0
  51. package/dist/stories/molecules/carousel/carouselarrowcontrols/CarouselArrowControls.test.d.ts +1 -0
  52. package/dist/stories/molecules/carousel/carouseldots/CarouselDots.d.ts +4 -0
  53. package/dist/stories/molecules/carousel/carouseldots/CarouselDots.test.d.ts +1 -0
  54. package/dist/stories/molecules/carousel/columncarousel/ColumnCarousel.d.ts +4 -0
  55. package/dist/stories/molecules/carousel/columncarousel/ColumnCarousel.test.d.ts +1 -0
  56. package/dist/stories/molecules/cart/cartactions/CartActions.test.d.ts +1 -0
  57. package/dist/stories/molecules/clickable/clickablecard/ClickableCard.test.d.ts +1 -0
  58. package/dist/stories/molecules/segmentedcontrol/SegmentedControl.test.d.ts +1 -0
  59. package/dist/stories/molecules/selectors/appliedoptionslist/AppliedOptionsList.test.d.ts +1 -0
  60. package/dist/stories/molecules/selectors/radiooptionselector/RadioOptionSelector.test.d.ts +1 -0
  61. package/dist/stories/molecules/selectors/verticalcheckboxlist/VerticalCheckboxList.test.d.ts +1 -0
  62. package/dist/stories/molecules/selectors/verticalcolorswatchlist/VerticalColorSwatchList.test.d.ts +1 -0
  63. package/dist/stories/molecules/selectors/verticaltablist/VerticalTabList.test.d.ts +1 -0
  64. package/dist/stories/organisms/banner/featurebanner/FeatureBanner.test.d.ts +1 -0
  65. package/dist/stories/organisms/cart/purchasepanel/PurchasePanel.d.ts +0 -8
  66. package/dist/stories/organisms/decorgrid/DecorGrid.test.d.ts +1 -0
  67. package/dist/stories/organisms/search/searchheader/SearchHeader.d.ts +4 -0
  68. package/dist/stories/organisms/search/searchheader/SearchHeader.test.d.ts +1 -0
  69. package/dist/stories/scenes/proresource/ProResourceScene.d.ts +4 -0
  70. package/dist/stories/templates/articlelandingpagetemplate/ArticleLandingPageTemplate.d.ts +4 -0
  71. package/package.json +11 -4
  72. package/dist/componentProps/organisms/banner/columnbanner/ColumnBannerHeaderProps.d.ts +0 -4
  73. package/dist/componentProps/organisms/banner/columnbanner/ColumnBannerTabsProps.d.ts +0 -10
  74. package/dist/componentProps/organisms/banner/columnbanner/ColumnCarouselCardProps.d.ts +0 -15
  75. package/dist/componentProps/scene/productdetailscene/ProductDetailSceneProps.d.ts +0 -10
  76. package/dist/stories/organisms/banner/columnbanner/parts/ColumnBannerHeader.d.ts +0 -4
  77. package/dist/stories/organisms/banner/columnbanner/parts/ColumnBannerTabs.d.ts +0 -3
  78. package/dist/stories/organisms/banner/columnbanner/parts/ColumnCarousel.d.ts +0 -4
  79. package/dist/stories/organisms/banner/columnbanner/parts/ColumnCarouselCard.d.ts +0 -4
  80. package/dist/stories/scenes/articlelanding/ArticleLandingScene.d.ts +0 -4
  81. package/dist/stories/scenes/productDetailScene/ProductDetailScene.d.ts +0 -4
@@ -6,6 +6,7 @@ export interface InputProps {
6
6
  value?: string;
7
7
  placeholder?: string;
8
8
  disabled?: boolean;
9
+ readOnly?: boolean;
9
10
  required?: boolean;
10
11
  hasError?: boolean;
11
12
  className?: string;
@@ -9,5 +9,5 @@ export type TextProps<E extends React.ElementType = "p"> = {
9
9
  variant?: TextVariant;
10
10
  className?: string;
11
11
  children: React.ReactNode;
12
- } & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, {}>>;
12
+ } & AsProp<E> & Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, Record<never, never>>>;
13
13
  export {};
@@ -0,0 +1,22 @@
1
+ export interface ColumnCarouselItem {
2
+ id: string;
3
+ label: string;
4
+ href: string;
5
+ source: string;
6
+ alt?: string;
7
+ description?: string;
8
+ }
9
+ export type ColumnCarouselCardProps = {
10
+ id: string;
11
+ item: ColumnCarouselItem;
12
+ absoluteIdx: number;
13
+ isActive: boolean;
14
+ showLabel: boolean;
15
+ grow: number;
16
+ isLoaded: boolean;
17
+ isFav: boolean;
18
+ setActiveIndex: (n: number | null) => void;
19
+ onLoaded: (id: string) => void;
20
+ onToggleFav: (item: ColumnCarouselItem) => void;
21
+ onItemClick?: (item: ColumnCarouselItem) => void;
22
+ };
@@ -11,5 +11,6 @@ export type FeatureCardProps = {
11
11
  description?: string;
12
12
  buttonLabel?: string;
13
13
  ctaMode?: FeatureCardCtaMode;
14
+ onCardClick?: () => void;
14
15
  onCtaClick?: (payload: FeatureCardClickPayload) => void;
15
16
  };
@@ -4,5 +4,5 @@ export type FeaturedProductCardProps = {
4
4
  title: string;
5
5
  brand?: string;
6
6
  decorNumber?: string | number;
7
- onClick?: () => void;
7
+ onProductClick?: () => void;
8
8
  };
@@ -1,11 +1,12 @@
1
1
  export type SwatchStatus = "new" | "discontinued" | "comingSoon" | "sale";
2
2
  export interface SwatchCardProps {
3
+ id?: string;
3
4
  imageSrc: string;
4
5
  imageAlt: string;
5
6
  title: string;
6
7
  brand: string;
7
8
  product: string;
8
9
  decorNumber: string | number;
9
- onClick?: () => void;
10
+ onSwatchClick?: () => void;
10
11
  status?: SwatchStatus;
11
12
  }
@@ -0,0 +1,9 @@
1
+ import type { ButtonProps } from "../../../atoms/buttons/button/ButtonProps";
2
+ export interface CarouselArrowControlsProps {
3
+ onPreviousClick: () => void;
4
+ onNextClick: () => void;
5
+ prevArrowButtonProps?: Partial<ButtonProps>;
6
+ nextArrowButtonProps?: Partial<ButtonProps>;
7
+ previousLabel?: string;
8
+ nextLabel?: string;
9
+ }
@@ -0,0 +1,6 @@
1
+ export interface CarouselDotsProps {
2
+ count: number;
3
+ activeIndex: number;
4
+ onDotClick: (index: number) => void;
5
+ ariaLabelPrefix?: string;
6
+ }
@@ -1,6 +1,6 @@
1
- import type { CtaItem } from "./ColumnBannerProps";
1
+ import type { ColumnCarouselItem } from "../../card/columncarouselcard/ColumnCarouselCardProps";
2
2
  export type ColumnCarouselProps = {
3
- items: CtaItem[];
3
+ items: ColumnCarouselItem[];
4
4
  startIndex: number;
5
5
  activeIndex: number | null;
6
6
  setActiveIndex: (n: number | null) => void;
@@ -11,7 +11,7 @@ export type ColumnCarouselProps = {
11
11
  loadedIds: Set<string>;
12
12
  favoriteIds: Set<string>;
13
13
  onLoaded: (id: string) => void;
14
- onToggleFav: (item: CtaItem) => void;
15
- onItemClick?: (item: CtaItem) => void;
16
- getItemId?: (item: CtaItem) => string;
14
+ onToggleFav: (item: ColumnCarouselItem) => void;
15
+ onItemClick?: (item: ColumnCarouselItem) => void;
16
+ getItemId?: (item: ColumnCarouselItem) => string;
17
17
  };
@@ -1,3 +1,2 @@
1
1
  import { InputProps } from "../../atoms/input/inputProps";
2
- export interface SearchBarProps extends Omit<InputProps, "type"> {
3
- }
2
+ export type SearchBarProps = Omit<InputProps, "type">;
@@ -5,5 +5,5 @@ export type BreadcrumbsItem = {
5
5
  };
6
6
  export type BreadcrumbsProps = {
7
7
  Breadcrumbs?: BreadcrumbsItem[];
8
- onNavigate?: (href: string, item: BreadcrumbsItem) => void;
8
+ onBreadcrumbClick?: (href: string, item: BreadcrumbsItem) => void;
9
9
  };
@@ -10,7 +10,7 @@ export type SlidingTabIndicatorProps = {
10
10
  renderTab?: (args: {
11
11
  item: RailTabsItem;
12
12
  isActive: boolean;
13
- onClick: () => void;
13
+ onTabClick: () => void;
14
14
  }) => React.ReactNode;
15
15
  className?: string;
16
16
  durationMs?: number;
@@ -1,3 +1,4 @@
1
+ import type { ColumnCarouselItem } from "../../../molecules/card/columncarouselcard/ColumnCarouselCardProps";
1
2
  export interface TabItem {
2
3
  label: string;
3
4
  columns?: ColumnGroup[];
@@ -6,14 +7,7 @@ export interface ColumnTab {
6
7
  label: string;
7
8
  items: CtaItem[];
8
9
  }
9
- export interface CtaItem {
10
- id: string;
11
- label: string;
12
- href: string;
13
- source: string;
14
- alt?: string;
15
- description?: string;
16
- }
10
+ export type CtaItem = ColumnCarouselItem;
17
11
  export interface ColumnGroup {
18
12
  group: string;
19
13
  title: string;
@@ -25,6 +19,7 @@ export interface ColumnBannerProps {
25
19
  body?: string;
26
20
  description?: string;
27
21
  TabsWithColumns: TabItem[];
22
+ favoriteIds?: string[];
28
23
  onFavoriteToggle?: (item: CtaItem, isFavorite: boolean) => void;
29
24
  onItemClick?: (item: CtaItem) => void;
30
25
  }
@@ -1,10 +1,15 @@
1
- type AlignOption = "left" | "right";
1
+ export type FeatureBannerAlign = "left" | "right";
2
+ export interface FeatureBannerButtonClickPayload {
3
+ buttonLabel: string;
4
+ buttonHref?: string;
5
+ }
2
6
  export interface FeatureBannerProps {
3
7
  imageSrc: string;
4
8
  imageAlt?: string;
5
9
  headline: string;
6
10
  body: string;
7
11
  buttonLabel: string;
8
- align?: AlignOption;
12
+ buttonHref?: string;
13
+ align?: FeatureBannerAlign;
14
+ onButtonClick?: (payload: FeatureBannerButtonClickPayload) => void;
9
15
  }
10
- export {};
@@ -6,7 +6,7 @@ export type CallToActionHeroCta = {
6
6
  intent?: ButtonIntent;
7
7
  className?: string;
8
8
  href?: string;
9
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
9
+ onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
10
10
  };
11
11
  export interface CallToActionHeroProps {
12
12
  imageSrc: string;
@@ -6,7 +6,7 @@ export type SwatchOption = ButtonGridItem & {
6
6
  value: string;
7
7
  disabled?: boolean;
8
8
  active?: boolean;
9
- onClick?: () => void;
9
+ onOptionClick?: () => void;
10
10
  };
11
11
  export type SwatchPurchasePanelLeftPanelNavigateMeta = {
12
12
  kind: "availability" | "returnPolicy";
@@ -35,7 +35,7 @@ export type PurchasePanelLeftPanelProps = {
35
35
  notReturnableText?: string;
36
36
  returnPolicyHref?: string;
37
37
  returnPolicyLabel?: string;
38
- onNavigate?: (href: string, meta?: SwatchPurchasePanelLeftPanelNavigateMeta) => void;
38
+ onPurchaseInfoLinkClick?: (href: string, meta?: SwatchPurchasePanelLeftPanelNavigateMeta) => void;
39
39
  priceLabel?: string;
40
40
  initialQuantity?: number;
41
41
  minQuantity?: number;
@@ -14,7 +14,7 @@ export type PurchasePanelOptionProps = {
14
14
  disabled?: boolean;
15
15
  value?: string;
16
16
  active?: boolean;
17
- onClick?: (id: string) => void;
17
+ onOptionClick?: (id: string) => void;
18
18
  };
19
19
  export type CartOrderProps = {
20
20
  type: PurchasePanelTab;
@@ -84,7 +84,7 @@ export type PurchasePanelProps = {
84
84
  returnPolicyHref?: string;
85
85
  returnPolicyLabel?: string;
86
86
  notReturnableText?: string;
87
- onNavigate?: (href: string, meta?: SwatchPurchasePanelNavigateMeta) => void;
87
+ onPurchaseInfoLinkClick?: (href: string, meta?: SwatchPurchasePanelNavigateMeta) => void;
88
88
  };
89
89
  export type GroupName = "product" | "grade" | "texture" | "size";
90
90
  export type SelectedState = Record<GroupName, string | null>;
@@ -1,5 +1,8 @@
1
- import { DocumentLinkCardProps } from "../../molecules/card/documentlinkcard/DocumentLinkCardProps";
1
+ import type { DocumentLinkCardProps } from "../../molecules/card/documentlinkcard/DocumentLinkCardProps";
2
+ export interface DocumentLinkCardItem extends DocumentLinkCardProps {
3
+ id: string;
4
+ }
2
5
  export interface DocumentLinkCollectionProps {
3
6
  title: string;
4
- documentLinkCards: DocumentLinkCardProps[];
7
+ documentLinkCards: DocumentLinkCardItem[];
5
8
  }
@@ -1,13 +1,5 @@
1
- import type { FeatureCardClickPayload } from "../../../molecules/card/featurecard/FeatureCardProps";
2
- export type FeatureCardCollectionItem = {
3
- imageSrc: string;
4
- imageAlt?: string;
5
- title: string;
6
- description?: string;
7
- buttonLabel?: string;
8
- onCardClick?: () => void;
9
- onCtaClick?: (payload: FeatureCardClickPayload) => void;
10
- };
1
+ import type { FeatureCardProps } from "../../../molecules/card/featurecard/FeatureCardProps";
2
+ export type FeatureCardCollectionItem = FeatureCardProps;
11
3
  export type FeatureCardCollectionProps = {
12
4
  title?: string;
13
5
  body?: string;
@@ -0,0 +1,5 @@
1
+ import type { SearchBarProps } from "../../../molecules/searchbar/SearchBarProps";
2
+ export interface SearchHeaderProps {
3
+ searchBarProps: SearchBarProps;
4
+ onSearchClick: () => void;
5
+ }
@@ -0,0 +1,12 @@
1
+ import type { StandardCopyHeroProps } from "../../organisms/banner/standardcopyhero/StandardCopyHeroProps";
2
+ import type { MultiButtonBarProps } from "../../molecules/selectors/multibuttonbar/MultiButtonBarProps";
3
+ import type { DocumentLinkCollectionProps } from "../../organisms/documentlinkcollection/DocumentLinkCollectionProps";
4
+ import type { FeatureBannerProps } from "../../organisms/banner/featurebanner/FeatureBannerProps";
5
+ import type { FaqCardCollectionProps } from "../../organisms/faqcardcollection/FaqCardCollectionProps";
6
+ export type ProResourceSceneProps = {
7
+ standardCopyHeroProps: StandardCopyHeroProps;
8
+ multiButtonBarProps: MultiButtonBarProps;
9
+ documentLinkCollectionProps: DocumentLinkCollectionProps;
10
+ featureBannerProps: FeatureBannerProps;
11
+ faqCardCollectionProps: FaqCardCollectionProps;
12
+ };
@@ -4,7 +4,7 @@ import type { FilterBarProps } from "../../molecules/selectors/filterbar/FilterB
4
4
  import type { DropdownFilterProps } from "../../molecules/selectors/filterbar/DropdownFilterProps";
5
5
  import type { FeaturedArticleBannerProps } from "../../organisms/banner/featuredarticlebanner/FeaturedArticleBannerProps";
6
6
  import type { FeatureCardCollectionProps } from "../../organisms/featurecards/featurecardscollection/FeatureCardCollectionProps";
7
- export type ArticleLandingSceneProps = {
7
+ export type ArticleLandingPageTemplateProps = {
8
8
  standardCopyHeroProps: StandardCopyHeroProps;
9
9
  multiButtonBarProps: MultiButtonBarProps;
10
10
  filterBarProps: FilterBarProps;
@@ -218,7 +218,7 @@ export type ProductDetailOrder = {
218
218
  currency?: string;
219
219
  bigCommerceProductId?: string | number;
220
220
  };
221
- export type ProductDetailCartFlyoutProps = Omit<CartFlyoutProps, "isOpen" | "onClose">;
221
+ export type ProductDetailCartFlyoutProps = CartFlyoutProps;
222
222
  export type ProductDetailPageTemplateProps = {
223
223
  breadcrumbsProps?: BreadcrumbsProps;
224
224
  productData: ProductDetailData;
@@ -226,6 +226,6 @@ export type ProductDetailPageTemplateProps = {
226
226
  onDownloadFullSheet?: (productData: ProductDetailData) => void;
227
227
  onAddToWishlist?: (payload: ProductDetailWishlistPayload, productData: ProductDetailData) => void;
228
228
  onAddToCart?: (order: ProductDetailOrder, productData: ProductDetailData) => void;
229
- onNavigate?: (href: string, meta?: unknown) => void;
229
+ onProductNavigate?: (href: string, meta?: unknown) => void;
230
230
  cartFlyoutProps?: ProductDetailCartFlyoutProps;
231
231
  };