formica-ui-lib 1.0.164 → 1.0.165

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.
package/README.md CHANGED
@@ -202,6 +202,15 @@ It is not the right tool when the component needs domain-specific rules.
202
202
  - a grid deciding what happens when a card is clicked
203
203
  - a layout wrapper deciding navigation or selection logic
204
204
 
205
+ ## Responsive Layout Rule
206
+
207
+ Use one breakpoint for normal responsive work:
208
+
209
+ - unprefixed Tailwind classes are mobile below `md`
210
+ - `md:` classes are PC at `md` and above
211
+
212
+ 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.
213
+
205
214
  ## When To Use `ClickableCard`
206
215
 
207
216
  Use `ClickableCard` when a whole card or large visual surface acts as one click target.
@@ -1,11 +1,10 @@
1
1
  export interface ArticleRecentCardProps {
2
2
  imageSrc: string;
3
3
  imageAlt?: string;
4
- category: string;
4
+ category?: string;
5
5
  title: string;
6
- publishDate: string;
6
+ publishDate?: string;
7
7
  body: string;
8
8
  buttonLabel: string;
9
- href?: string;
10
9
  onViewClick?: () => void;
11
10
  }
@@ -1,6 +1,10 @@
1
1
  import type { ArticleRecentCardProps } from "../../../molecules/card/articlerecentcard/ArticleRecentCardProps";
2
+ export type TitleVariant = "h1" | "h2" | "h3" | "standard" | "bold" | "nav" | "free";
2
3
  export interface ArticleRecentSectionProps {
3
4
  title?: string;
5
+ titleVariant?: TitleVariant;
6
+ titleClassName?: string;
4
7
  items: ArticleRecentCardProps[];
5
8
  className?: string;
9
+ separatorClassName?: string;
6
10
  }
@@ -6,7 +6,7 @@ export type SwatchOption = ButtonGridItem & {
6
6
  value: string;
7
7
  disabled?: boolean;
8
8
  active?: boolean;
9
- onOptionClick?: () => void;
9
+ onOptionClick?: (id: string) => void;
10
10
  };
11
11
  export type SwatchPurchasePanelLeftPanelNavigateMeta = {
12
12
  kind: "availability" | "returnPolicy";
@@ -0,0 +1,8 @@
1
+ import { SearchHeaderProps } from "../../organisms/search/searchheader/SearchHeaderProps";
2
+ import { FeaturedProductsCarouselProps } from "../../organisms/carousels/featureproductcarousel/FeaturedProductsCarouselProps";
3
+ import { ArticleRecentSectionProps } from "../../organisms/articles/articlerecentsection/ArticleRecentSectionProps";
4
+ export type SearchResultsSceneProps = {
5
+ searchHeaderProps: SearchHeaderProps;
6
+ featuredProductsCarouselProps: FeaturedProductsCarouselProps;
7
+ articleRecentSectionProps: ArticleRecentSectionProps;
8
+ };