@boostdev/design-system-components 2.3.0 → 2.4.0
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/dist/client.cjs +95 -58
- package/dist/client.css +537 -537
- package/dist/client.d.cts +30 -26
- package/dist/client.d.ts +30 -26
- package/dist/client.js +95 -58
- package/dist/index.cjs +95 -58
- package/dist/index.css +537 -537
- package/dist/index.d.cts +30 -26
- package/dist/index.d.ts +30 -26
- package/dist/index.js +95 -58
- package/dist/web-components/index.d.ts +9 -5
- package/dist/web-components/index.js +53 -9
- package/package.json +1 -1
- package/src/components/layout/Grid/Grid.mdx +4 -2
- package/src/components/layout/Grid/Grid.spec.tsx +62 -6
- package/src/components/layout/Grid/Grid.stories.tsx +16 -9
- package/src/components/layout/Grid/Grid.tsx +11 -6
- package/src/components/layout/Grid/masonry.ts +88 -18
- package/src/web-components/layout/BdsGrid.mdx +5 -3
- package/src/web-components/layout/BdsGrid.stories.tsx +16 -10
- package/src/web-components/layout/bds-grid.spec.ts +3 -3
- package/src/web-components/layout/bds-grid.ts +19 -6
package/dist/client.d.cts
CHANGED
|
@@ -483,32 +483,6 @@ type CardOwnProps = WithClassName & {
|
|
|
483
483
|
type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
|
|
484
484
|
declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
|
|
485
485
|
|
|
486
|
-
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
487
|
-
type GridOwnProps = WithClassName & {
|
|
488
|
-
variant?: GridVariant;
|
|
489
|
-
columns?: number;
|
|
490
|
-
isCentered?: boolean;
|
|
491
|
-
isMasonry?: boolean;
|
|
492
|
-
/**
|
|
493
|
-
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
494
|
-
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
495
|
-
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
496
|
-
* are unaffected.
|
|
497
|
-
*/
|
|
498
|
-
autoSpanMedia?: boolean;
|
|
499
|
-
/**
|
|
500
|
-
* Masonry only. When set (>= 2), each `GridItem` without an explicit
|
|
501
|
-
* `columnSpan` tries to span this many columns; an item at the end of a row
|
|
502
|
-
* is demoted to fill just the remaining columns rather than wrapping and
|
|
503
|
-
* leaving a gap. Requires `isMasonry`; no-op otherwise. Items with an
|
|
504
|
-
* explicit `columnSpan` keep their span.
|
|
505
|
-
*/
|
|
506
|
-
masonryPreferredColumnSpan?: number;
|
|
507
|
-
as?: ElementType;
|
|
508
|
-
};
|
|
509
|
-
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
510
|
-
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
511
|
-
|
|
512
486
|
type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
|
|
513
487
|
declare const GridItemSpan: {
|
|
514
488
|
readonly full: "full";
|
|
@@ -529,6 +503,36 @@ type GridItemOwnProps = WithClassName & {
|
|
|
529
503
|
type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
|
|
530
504
|
declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
531
505
|
|
|
506
|
+
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
507
|
+
type GridOwnProps = WithClassName & {
|
|
508
|
+
variant?: GridVariant;
|
|
509
|
+
columns?: number;
|
|
510
|
+
isCentered?: boolean;
|
|
511
|
+
isMasonry?: boolean;
|
|
512
|
+
/**
|
|
513
|
+
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
514
|
+
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
515
|
+
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
516
|
+
* are unaffected.
|
|
517
|
+
*/
|
|
518
|
+
autoSpanMedia?: boolean;
|
|
519
|
+
/**
|
|
520
|
+
* Masonry only. When set, each `GridItem` without an explicit `columnSpan`
|
|
521
|
+
* tries to span this value; an item at the end of a row is demoted to fill
|
|
522
|
+
* just the remaining columns rather than wrapping and leaving a gap. Uses
|
|
523
|
+
* the same named span vocabulary as `columnSpan` on `GridItem`, so a value
|
|
524
|
+
* like `"half"` adapts across breakpoints via the foundation's responsive
|
|
525
|
+
* column tokens (4/8/12). A `number` is a literal column count and does
|
|
526
|
+
* **not** adapt — prefer named values unless you're using `variant="custom"`.
|
|
527
|
+
* Requires `isMasonry`; no-op otherwise. Items with an explicit `columnSpan`
|
|
528
|
+
* keep their span.
|
|
529
|
+
*/
|
|
530
|
+
masonryPreferredColumnSpan?: Exclude<GridItemSpanValue, 'auto'>;
|
|
531
|
+
as?: ElementType;
|
|
532
|
+
};
|
|
533
|
+
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
534
|
+
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
535
|
+
|
|
532
536
|
type IntrinsicElement = keyof JSX.IntrinsicElements;
|
|
533
537
|
type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
|
|
534
538
|
title: string;
|
package/dist/client.d.ts
CHANGED
|
@@ -483,32 +483,6 @@ type CardOwnProps = WithClassName & {
|
|
|
483
483
|
type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
|
|
484
484
|
declare function Card<C extends ElementType = 'div'>({ children, className, variant, padding, textAlign, as, onClick, ...rest }: CardProps<C>): react_jsx_runtime.JSX.Element;
|
|
485
485
|
|
|
486
|
-
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
487
|
-
type GridOwnProps = WithClassName & {
|
|
488
|
-
variant?: GridVariant;
|
|
489
|
-
columns?: number;
|
|
490
|
-
isCentered?: boolean;
|
|
491
|
-
isMasonry?: boolean;
|
|
492
|
-
/**
|
|
493
|
-
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
494
|
-
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
495
|
-
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
496
|
-
* are unaffected.
|
|
497
|
-
*/
|
|
498
|
-
autoSpanMedia?: boolean;
|
|
499
|
-
/**
|
|
500
|
-
* Masonry only. When set (>= 2), each `GridItem` without an explicit
|
|
501
|
-
* `columnSpan` tries to span this many columns; an item at the end of a row
|
|
502
|
-
* is demoted to fill just the remaining columns rather than wrapping and
|
|
503
|
-
* leaving a gap. Requires `isMasonry`; no-op otherwise. Items with an
|
|
504
|
-
* explicit `columnSpan` keep their span.
|
|
505
|
-
*/
|
|
506
|
-
masonryPreferredColumnSpan?: number;
|
|
507
|
-
as?: ElementType;
|
|
508
|
-
};
|
|
509
|
-
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
510
|
-
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
511
|
-
|
|
512
486
|
type GridItemSpanValue = 'full' | 'three-quarters' | 'two-thirds' | 'half' | 'one-third' | 'one-quarter' | 'auto' | number;
|
|
513
487
|
declare const GridItemSpan: {
|
|
514
488
|
readonly full: "full";
|
|
@@ -529,6 +503,36 @@ type GridItemOwnProps = WithClassName & {
|
|
|
529
503
|
type GridItemProps<C extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridItemOwnProps>;
|
|
530
504
|
declare function GridItem<C extends ElementType = 'div'>({ children, className, columnSpan, rowSpan, startColumn, endColumn, as, style, ...rest }: GridItemProps<C>): react_jsx_runtime.JSX.Element;
|
|
531
505
|
|
|
506
|
+
type GridVariant = 'main' | 'page' | 'funnel' | 'custom';
|
|
507
|
+
type GridOwnProps = WithClassName & {
|
|
508
|
+
variant?: GridVariant;
|
|
509
|
+
columns?: number;
|
|
510
|
+
isCentered?: boolean;
|
|
511
|
+
isMasonry?: boolean;
|
|
512
|
+
/**
|
|
513
|
+
* When true, any child `GridItem` without an explicit `columnSpan` resolves
|
|
514
|
+
* to `"auto"` — column span is derived from the intrinsic aspect ratio of
|
|
515
|
+
* the first `<img>`/`<video>` child. Items that set `columnSpan` explicitly
|
|
516
|
+
* are unaffected.
|
|
517
|
+
*/
|
|
518
|
+
autoSpanMedia?: boolean;
|
|
519
|
+
/**
|
|
520
|
+
* Masonry only. When set, each `GridItem` without an explicit `columnSpan`
|
|
521
|
+
* tries to span this value; an item at the end of a row is demoted to fill
|
|
522
|
+
* just the remaining columns rather than wrapping and leaving a gap. Uses
|
|
523
|
+
* the same named span vocabulary as `columnSpan` on `GridItem`, so a value
|
|
524
|
+
* like `"half"` adapts across breakpoints via the foundation's responsive
|
|
525
|
+
* column tokens (4/8/12). A `number` is a literal column count and does
|
|
526
|
+
* **not** adapt — prefer named values unless you're using `variant="custom"`.
|
|
527
|
+
* Requires `isMasonry`; no-op otherwise. Items with an explicit `columnSpan`
|
|
528
|
+
* keep their span.
|
|
529
|
+
*/
|
|
530
|
+
masonryPreferredColumnSpan?: Exclude<GridItemSpanValue, 'auto'>;
|
|
531
|
+
as?: ElementType;
|
|
532
|
+
};
|
|
533
|
+
type GridProps<C extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof GridOwnProps>;
|
|
534
|
+
declare function Grid<C extends ElementType = 'div'>({ children, className, variant, columns, isCentered, isMasonry, autoSpanMedia, masonryPreferredColumnSpan, as, style, ...rest }: GridProps<C>): react_jsx_runtime.JSX.Element;
|
|
535
|
+
|
|
532
536
|
type IntrinsicElement = keyof JSX.IntrinsicElements;
|
|
533
537
|
type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
|
|
534
538
|
title: string;
|