formica-ui-lib 1.0.164 → 1.0.166

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/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/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/cart/purchasepanel/PurchasePanelLeftPanelProps.d.ts

@@ -6,7 +6,7 @@ export type SwatchOption = ButtonGridItem & {
     value: string;
     disabled?: boolean;
     active?: boolean;
-    onOptionClick?: () => void;
+    onOptionClick?: (id: string) => void;
 };
 export type SwatchPurchasePanelLeftPanelNavigateMeta = {
     kind: "availability" | "returnPolicy";

package/dist/componentProps/organisms/navigation/TopNavBarProps.d.ts

@@ -39,8 +39,10 @@ export type TopNavBarProps = {
     Login?: TopNavLogin;
     Cart?: TopNavCartSummary;
     Logo?: TopNavLogo;
+    defaultOpenSubcategory?: NavSubcategory | null;
     onLogoClick?: () => void;
     onNavItemClick?: (item: NavItem) => void;
+    onOpenSubcategoryChange?: (subcategory: NavSubcategory | null, item: NavItem) => void;
     onMegaMenuLinkClick?: (link: NavLinkItem) => void;
     onPromoClick?: (promo: NavPromo) => void;
     onSearchClick?: () => void;

package/dist/componentProps/organisms/navigation/TopNavMegaMenuProps.d.ts

@@ -1,8 +1,8 @@
-import type { NavItem, NavLinkItem, NavPromo } from "./TopNavBarProps";
+import type { NavItem, NavLinkItem, NavPromo, NavSubcategory } from "./TopNavBarProps";
 export type TopNavMegaMenuProps = {
     activeItem?: NavItem;
-    openSubcategory: string | null;
-    setOpenSubcategory: (label: string | null) => void;
+    openSubcategory: NavSubcategory | null;
+    setOpenSubcategory: (subcategory: NavSubcategory | null) => void;
     onMegaMenuLinkClick?: (link: NavLinkItem) => void;
     onPromoClick?: (promo: NavPromo) => void;
 };

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;
+};