@caseparts-org/caseblocks 0.0.57 → 0.0.58
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/CarouselArrowButtons-DMKru3f7.js +48 -0
- package/dist/assets/BannerCard.css +1 -0
- package/dist/assets/CarouselArrowButtons.css +1 -0
- package/dist/assets/buttonClassName.css +1 -1
- package/dist/atoms/Button/Button.stories.js +3 -2
- package/dist/atoms/Button/buttonClassName.d.ts +1 -1
- package/dist/atoms/Button/buttonClassName.js +30 -29
- package/dist/main-client.d.ts +4 -0
- package/dist/main-client.js +33 -29
- package/dist/molecules/BannerCard/BannerCard.d.ts +13 -0
- package/dist/molecules/BannerCard/BannerCard.js +51 -0
- package/dist/molecules/BannerCard/BannerCard.stories.d.ts +19 -0
- package/dist/molecules/BannerCard/BannerCard.stories.js +181 -0
- package/dist/organisms/Carousel/Carousel.d.ts +11 -0
- package/dist/organisms/Carousel/Carousel.js +1436 -0
- package/dist/organisms/Carousel/Carousel.stories.d.ts +17 -0
- package/dist/organisms/Carousel/Carousel.stories.js +171 -0
- package/dist/organisms/Carousel/CarouselArrowButtons.d.ts +3 -0
- package/dist/organisms/Carousel/CarouselArrowButtons.js +8 -0
- package/dist/organisms/Carousel/CarouselDotButton.d.ts +12 -0
- package/dist/organisms/Carousel/CarouselDotButton.js +25 -0
- package/dist/organisms/Carousel/usePrevNextButtons.d.ts +8 -0
- package/dist/organisms/Carousel/usePrevNextButtons.js +21 -0
- package/package.json +6 -2
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsxs as e, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as c } from "./atoms/Icon/Icon.js";
|
|
3
|
+
import { c as r } from "./clsx-OuTLNxxd.js";
|
|
4
|
+
import './assets/CarouselArrowButtons.css';const _ = "_main_wngg9_1", u = "_viewport_wngg9_4", a = "_track_wngg9_8", g = "_slide_wngg9_12", i = "_button_wngg9_17", d = "_prevButton_wngg9_32", l = "_nextButton_wngg9_35", m = "_carouselDots_wngg9_38", p = "_dot_wngg9_46", w = "_dotSelected_wngg9_54", t = {
|
|
5
|
+
main: _,
|
|
6
|
+
viewport: u,
|
|
7
|
+
track: a,
|
|
8
|
+
slide: g,
|
|
9
|
+
button: i,
|
|
10
|
+
prevButton: d,
|
|
11
|
+
nextButton: l,
|
|
12
|
+
carouselDots: m,
|
|
13
|
+
dot: p,
|
|
14
|
+
dotSelected: w
|
|
15
|
+
}, x = ({
|
|
16
|
+
children: o,
|
|
17
|
+
...n
|
|
18
|
+
}) => /* @__PURE__ */ e(
|
|
19
|
+
"button",
|
|
20
|
+
{
|
|
21
|
+
className: r(t.button, t.prevButton),
|
|
22
|
+
type: "button",
|
|
23
|
+
...n,
|
|
24
|
+
children: [
|
|
25
|
+
/* @__PURE__ */ s(c, { iconKey: "fa-solid fa-chevron-left", size: "md" }),
|
|
26
|
+
o
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
), f = ({
|
|
30
|
+
children: o,
|
|
31
|
+
...n
|
|
32
|
+
}) => /* @__PURE__ */ e(
|
|
33
|
+
"button",
|
|
34
|
+
{
|
|
35
|
+
className: r(t.button, t.nextButton),
|
|
36
|
+
type: "button",
|
|
37
|
+
...n,
|
|
38
|
+
children: [
|
|
39
|
+
/* @__PURE__ */ s(c, { iconKey: "fa-solid fa-chevron-right", size: "md" }),
|
|
40
|
+
o
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
export {
|
|
45
|
+
f as N,
|
|
46
|
+
x as P,
|
|
47
|
+
t as s
|
|
48
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._root_1x7t0_2{position:relative;display:grid;grid-template-columns:1fr 1fr;background-size:cover;background-position:center;overflow:hidden;box-sizing:border-box}._content_1x7t0_12{box-sizing:border-box;width:100%;padding:var(--spacing-spacing-default, 16px);display:flex;flex-direction:column;gap:var(--spacing-spacing-default, 16px)}@media (max-width: 980px){._content_1x7t0_12{grid-column:1 / -1}}._align_left_1x7t0_24 ._content_1x7t0_12{align-items:flex-start;grid-column:1 / span 1;text-align:left}@media (max-width: 980px){._align_left_1x7t0_24 ._content_1x7t0_12{grid-column:1 / -1}}._align_right_1x7t0_32 ._content_1x7t0_12{align-items:flex-end;grid-column:2 / span 1;text-align:right}@media (max-width: 980px){._align_right_1x7t0_32 ._content_1x7t0_12{grid-column:1 / -1}}._content_1x7t0_12>*{position:relative;z-index:1}._overlay_dark_1x7t0_47 ._header_1x7t0_47,._overlay_dark_1x7t0_47 ._description_1x7t0_48,._overlay_none_1x7t0_49 ._header_1x7t0_47,._overlay_none_1x7t0_49 ._description_1x7t0_48{color:var(--color-neutrals-neutral-1)}._overlay_light_1x7t0_55 ._header_1x7t0_47,._overlay_light_1x7t0_55 ._description_1x7t0_48{color:#000}._overlay_dark_1x7t0_47:before,._overlay_light_1x7t0_55:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}._overlay_dark_1x7t0_47:before{background:#137fb13a}._overlay_light_1x7t0_55:before{background:#ffffff73}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._main_wngg9_1{position:relative}._viewport_wngg9_4{overflow:hidden;width:100%}._track_wngg9_8{display:flex;touch-action:pan-y}._slide_wngg9_12{flex:0 0 100%;min-width:0}._button_wngg9_17{position:absolute;top:50%;transform:translateY(-50%);background-color:transparent;padding:0;margin:0;border:none}._button_wngg9_17 path{fill:var(--color-neutrals-neutral-1)}._button_wngg9_17:disabled path{opacity:.4}._prevButton_wngg9_32{left:var(--spacing-spacing-default)}._nextButton_wngg9_35{right:var(--spacing-spacing-default)}._carouselDots_wngg9_38{position:absolute;bottom:var(--spacing-spacing-default);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-spacing-2xs)}._dot_wngg9_46{width:40px;height:2px;background:var(--color-neutrals-neutral-1);border:none;cursor:pointer;opacity:.5}._dotSelected_wngg9_54{opacity:1;width:80px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_khsww_1{--inset-shadow-color: var(--surface-surface-primary-btn);--inset-shadow-style: 0 0 0, inset 0 0 0 var(--spacing-0-125) var(--inset-shadow-color);transition-property:background-color,border-width,box-shadow,color;transition-duration:.1s;transition-timing-function:ease-in;padding:var(--spacing-1);border:none;cursor:pointer;text-decoration:none;text-align:center;width:max-content;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._button_khsww_1:hover{box-shadow:var(--color-neutrals-neutral-2) var(--spacing-0-125) var(--spacing-0-25) var(--spacing-0-5)}._button_khsww_1:active{box-shadow:none}._button_khsww_1:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert);transition:none;cursor:default}._button_khsww_1:disabled:hover{box-shadow:none}._button-primary_khsww_43{background-color:var(--surface-surface-primary-btn);color:var(--surface-surface-primary)}._button-primary_khsww_43:active{background-color:var(--color-brand-secondary-dark-teal-blue)}._button-primary_khsww_43:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_khsww_57{background-color:var(--surface-surface-secondary-btn);border:1px solid var(--border-border-secondary-btn);color:var(--text-text-links)}._button-secondary_khsww_57:active{--inset-shadow-color: var(--surface-surface-secondary);box-shadow:var(--inset-shadow-style)}._button-secondary_khsww_57:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_khsww_57:disabled:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_khsww_79{background-color:transparent;border:1px solid var(--color-neutrals-neutral-1);color:var(--color-neutrals-neutral-1)}._button-secondary-transparent_khsww_79:disabled{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);border:1px solid var(--border-border-primary)}._button-secondary-transparent_khsww_79:disabled:hover{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus);box-shadow:none}._button-secondary-transparent_khsww_79:hover{background-color:var(--color-neutrals-neutral-1);border:1px solid var(--border-border-primary);color:#000;box-shadow:none}._button-cta-primary_khsww_104{background-color:var(--surface-surface-call-to-action-btn);color:var(--surface-surface-primary)}._button-cta-primary_khsww_104:active{background-color:var(--surface-surface-call-to-action-btn-focus)}._button-cta-primary_khsww_104:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-tertiary_khsww_118{background-color:var(--surface-surface-tertiary-btn);color:var(--surface-surface-tertiary-btn-focus)}._button-tertiary_khsww_118:active{color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-tertiary_khsww_118:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-destructive_khsww_136{background-color:var(--surface-surface-error-warning-btn);color:var(--surface-surface-primary)}._button-destructive_khsww_136:active{color:var(--surface-surface-error-warning-btn);background-color:var(--surface-surface-tertiary-btn-focus);--inset-shadow-color: var(--border-border-error-warning);box-shadow:var(--inset-shadow-style)}._button-destructive_khsww_136:active:disabled{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-size-xxs_khsww_154{border-radius:var(--border-radius-xs);padding:var(--spacing-spacing-4xs) var(--spacing-spacing-4xs)}._button-size-xs_khsww_158{border-radius:var(--border-radius-xs);padding:calc(var(--spacing-spacing-4xs) - 1px) var(--spacing-spacing-2xs)}._button-size-sm_khsww_162{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-3xs) - 1px) var(--spacing-0-75)}._button-size-md_khsww_166,._button-size-lg_khsww_170{border-radius:var(--border-radius-sm);padding:calc(var(--spacing-spacing-2xs) - 1px) var(--spacing-spacing-default)}._button-size-xl_khsww_174{border-radius:var(--border-radius-sm);padding:var(--spacing-0-75) var(--spacing-spacing-default)}._button-primary_khsww_43._button-disabled_khsww_179{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}._button-secondary_khsww_57._button-disabled_khsww_179{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style)}._button-secondary_khsww_57._button-disabled_khsww_179:hover{box-shadow:var(--inset-shadow-style)}._button-secondary-transparent_khsww_79._button-disabled_khsww_179{background-color:var(--surface-surface-disabled-btn-focus);color:var(--surface-surface-disabled-btn);--inset-shadow-color: var(--surface-surface-disabled-btn);box-shadow:var(--inset-shadow-style);border:1px solid var(--border-border-primary)}._button-secondary-transparent_khsww_79._button-disabled_khsww_179:hover{box-shadow:var(--inset-shadow-style);color:var(--surface-surface-disabled-btn);background-color:var(--surface-surface-disabled-btn-focus)}._button-cta-primary_khsww_104._button-disabled_khsww_179,._button-tertiary_khsww_118._button-disabled_khsww_179,._button-destructive_khsww_136._button-disabled_khsww_179{background-color:var(--surface-surface-disabled-btn);color:var(--text-text-invert)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r, jsxs as s } from "react/jsx-runtime";
|
|
2
2
|
import { Button as e } from "./Button.js";
|
|
3
|
-
const
|
|
3
|
+
const i = {
|
|
4
4
|
title: "Case Parts/Atoms/Button",
|
|
5
5
|
component: e,
|
|
6
6
|
parameters: {
|
|
@@ -18,6 +18,7 @@ const n = {
|
|
|
18
18
|
}, a = [
|
|
19
19
|
"primary",
|
|
20
20
|
"secondary",
|
|
21
|
+
"secondary-transparent",
|
|
21
22
|
"tertiary",
|
|
22
23
|
"cta-primary",
|
|
23
24
|
"destructive"
|
|
@@ -42,5 +43,5 @@ export {
|
|
|
42
43
|
p as AllProps,
|
|
43
44
|
m as Sizes,
|
|
44
45
|
l as Variants,
|
|
45
|
-
|
|
46
|
+
i as default
|
|
46
47
|
};
|
|
@@ -2,7 +2,7 @@ import { HideAtProps } from '../HideAt';
|
|
|
2
2
|
export interface ButtonStyleProps {
|
|
3
3
|
disabled?: boolean;
|
|
4
4
|
size: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
5
|
-
variant: "primary" | "secondary" | "cta-primary" | "tertiary" | "destructive";
|
|
5
|
+
variant: "primary" | "secondary" | "secondary-transparent" | "cta-primary" | "tertiary" | "destructive";
|
|
6
6
|
}
|
|
7
7
|
export declare function buttonClassNames({ size, variant, hideAt, className, disabled, }: ButtonStyleProps & {
|
|
8
8
|
hideAt?: HideAtProps["hideAt"];
|
|
@@ -1,38 +1,39 @@
|
|
|
1
|
-
import { t as
|
|
1
|
+
import { t as s } from "../../Text.module-smM1g1J4.js";
|
|
2
2
|
import { c as u } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import { getHideAtStyles as
|
|
4
|
-
import '../../assets/buttonClassName.css';const
|
|
5
|
-
button:
|
|
6
|
-
"button-primary": "_button-
|
|
7
|
-
"button-secondary": "_button-
|
|
8
|
-
"button-
|
|
9
|
-
"button-
|
|
10
|
-
"button-
|
|
11
|
-
"button-
|
|
12
|
-
"button-size-
|
|
13
|
-
"button-size-
|
|
14
|
-
"button-size-
|
|
15
|
-
"button-size-
|
|
16
|
-
"button-size-
|
|
17
|
-
"button-
|
|
3
|
+
import { getHideAtStyles as r } from "../HideAt.js";
|
|
4
|
+
import '../../assets/buttonClassName.css';const i = "_button_khsww_1", t = {
|
|
5
|
+
button: i,
|
|
6
|
+
"button-primary": "_button-primary_khsww_43",
|
|
7
|
+
"button-secondary": "_button-secondary_khsww_57",
|
|
8
|
+
"button-secondary-transparent": "_button-secondary-transparent_khsww_79",
|
|
9
|
+
"button-cta-primary": "_button-cta-primary_khsww_104",
|
|
10
|
+
"button-tertiary": "_button-tertiary_khsww_118",
|
|
11
|
+
"button-destructive": "_button-destructive_khsww_136",
|
|
12
|
+
"button-size-xxs": "_button-size-xxs_khsww_154",
|
|
13
|
+
"button-size-xs": "_button-size-xs_khsww_158",
|
|
14
|
+
"button-size-sm": "_button-size-sm_khsww_162",
|
|
15
|
+
"button-size-md": "_button-size-md_khsww_166",
|
|
16
|
+
"button-size-lg": "_button-size-lg_khsww_170",
|
|
17
|
+
"button-size-xl": "_button-size-xl_khsww_174",
|
|
18
|
+
"button-disabled": "_button-disabled_khsww_179"
|
|
18
19
|
};
|
|
19
20
|
function m({
|
|
20
|
-
size:
|
|
21
|
-
variant:
|
|
22
|
-
hideAt:
|
|
23
|
-
className:
|
|
24
|
-
disabled:
|
|
21
|
+
size: o,
|
|
22
|
+
variant: n,
|
|
23
|
+
hideAt: _,
|
|
24
|
+
className: e,
|
|
25
|
+
disabled: b
|
|
25
26
|
}) {
|
|
26
27
|
return u(
|
|
27
28
|
t.button,
|
|
28
|
-
t[`button-${
|
|
29
|
-
t[`button-size-${
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
t[`button-${n}`],
|
|
30
|
+
t[`button-size-${o}`],
|
|
31
|
+
s.text,
|
|
32
|
+
s[`text-${o}`],
|
|
33
|
+
s["text-semibold"],
|
|
34
|
+
r(_),
|
|
35
|
+
b && t["button-disabled"],
|
|
36
|
+
e
|
|
36
37
|
);
|
|
37
38
|
}
|
|
38
39
|
export {
|
package/dist/main-client.d.ts
CHANGED
|
@@ -23,6 +23,8 @@ export type { AddToCartProps } from './molecules/AddToCart/AddToCart';
|
|
|
23
23
|
export { AddToCart } from './molecules/AddToCart/AddToCart';
|
|
24
24
|
export { Availability } from './molecules/Availability/Availability';
|
|
25
25
|
export type { AvailabilityProps, ContactUsLinkBehavior } from './molecules/Availability/Availability';
|
|
26
|
+
export { BannerCard } from './molecules/BannerCard/BannerCard';
|
|
27
|
+
export type { BannerCardProps } from './molecules/BannerCard/BannerCard';
|
|
26
28
|
export { MainNav } from './organisms/MainNav/MainNav';
|
|
27
29
|
export type { MainCategory, MainNavProps, Category } from './organisms/MainNav/MainNav';
|
|
28
30
|
export { ChipSelector } from './organisms/ChipSelector/ChipSelector';
|
|
@@ -31,3 +33,5 @@ export { Product } from './organisms/Product/Product';
|
|
|
31
33
|
export type { ProductProps, ProductView } from './organisms/Product/Product';
|
|
32
34
|
export { NotFound } from './organisms/NotFound/NotFound';
|
|
33
35
|
export type { NotFoundProps } from './organisms/NotFound/NotFound';
|
|
36
|
+
export { Carousel } from './organisms/Carousel/Carousel';
|
|
37
|
+
export type { CarouselProps } from './organisms/Carousel/Carousel';
|
package/dist/main-client.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { Button as t } from "./atoms/Button/Button.js";
|
|
2
2
|
import { Flex as p } from "./atoms/Flex/Flex.js";
|
|
3
3
|
import { Column as x, Grid as f } from "./atoms/Grid/Grid.js";
|
|
4
|
-
import { Head as
|
|
4
|
+
import { Head as i } from "./atoms/Root/Head.js";
|
|
5
5
|
import { Icon as u } from "./atoms/Icon/Icon.js";
|
|
6
|
-
import { Root as
|
|
7
|
-
import { Separator as
|
|
8
|
-
import { Text as
|
|
9
|
-
import { Input as
|
|
10
|
-
import { Logo as
|
|
6
|
+
import { Root as l } from "./atoms/Root/Root.js";
|
|
7
|
+
import { Separator as C } from "./atoms/Separator/Separator.js";
|
|
8
|
+
import { Text as k } from "./atoms/Text/Text.js";
|
|
9
|
+
import { Input as A } from "./atoms/Input/Input.js";
|
|
10
|
+
import { Logo as I } from "./molecules/Logo/Logo.js";
|
|
11
11
|
import { SearchBox as L } from "./molecules/SearchBox/SearchBox.js";
|
|
12
12
|
import { QuantityInput as S } from "./molecules/QuantityInput/QuantityInput.js";
|
|
13
13
|
import { Pricing as y } from "./molecules/Pricing/Pricing.js";
|
|
14
14
|
import { Link as M, LinkProvider as N } from "./atoms/Link/Link.js";
|
|
15
|
-
import { LinkButton as
|
|
16
|
-
import { Image as
|
|
17
|
-
import { Tooltip as
|
|
18
|
-
import { Account as
|
|
15
|
+
import { LinkButton as s } from "./atoms/LinkButton/LinkButton.js";
|
|
16
|
+
import { Image as G, ImageProvider as H } from "./atoms/Image/Image.js";
|
|
17
|
+
import { Tooltip as R } from "./molecules/Tooltip/Tooltip.js";
|
|
18
|
+
import { Account as j } from "./molecules/Account/Account.js";
|
|
19
19
|
import { Avatar as z } from "./molecules/Avatar/Avatar.js";
|
|
20
20
|
import { Chip as E } from "./molecules/Chip/Chip.js";
|
|
21
21
|
import { ToggleView as K } from "./molecules/ToggleView/ToggleView.js";
|
|
@@ -23,41 +23,45 @@ import { StatefulButton as U } from "./molecules/StatefulButton/StatefulButton.j
|
|
|
23
23
|
import { AnimatedCheckMark as X } from "./molecules/StatefulButton/AnimatedCheckmark.js";
|
|
24
24
|
import { AddToCart as Z } from "./molecules/AddToCart/AddToCart.js";
|
|
25
25
|
import { Availability as $ } from "./molecules/Availability/Availability.js";
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
26
|
+
import { BannerCard as ro } from "./molecules/BannerCard/BannerCard.js";
|
|
27
|
+
import { MainNav as eo } from "./organisms/MainNav/MainNav.js";
|
|
28
|
+
import { ChipSelector as mo } from "./organisms/ChipSelector/ChipSelector.js";
|
|
29
|
+
import { Product as fo } from "./organisms/Product/Product.js";
|
|
30
|
+
import { NotFound as io } from "./organisms/NotFound/NotFound.js";
|
|
31
|
+
import { Carousel as uo } from "./organisms/Carousel/Carousel.js";
|
|
30
32
|
export {
|
|
31
|
-
|
|
33
|
+
j as Account,
|
|
32
34
|
Z as AddToCart,
|
|
33
35
|
X as AnimatedCheckMark,
|
|
34
36
|
$ as Availability,
|
|
35
37
|
z as Avatar,
|
|
38
|
+
ro as BannerCard,
|
|
36
39
|
t as Button,
|
|
40
|
+
uo as Carousel,
|
|
37
41
|
E as Chip,
|
|
38
|
-
|
|
42
|
+
mo as ChipSelector,
|
|
39
43
|
x as Column,
|
|
40
44
|
p as Flex,
|
|
41
45
|
f as Grid,
|
|
42
|
-
|
|
46
|
+
i as Head,
|
|
43
47
|
u as Icon,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
G as Image,
|
|
49
|
+
H as ImageProvider,
|
|
50
|
+
A as Input,
|
|
47
51
|
M as Link,
|
|
48
|
-
|
|
52
|
+
s as LinkButton,
|
|
49
53
|
N as LinkProvider,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
54
|
+
I as Logo,
|
|
55
|
+
eo as MainNav,
|
|
56
|
+
io as NotFound,
|
|
53
57
|
y as Pricing,
|
|
54
|
-
|
|
58
|
+
fo as Product,
|
|
55
59
|
S as QuantityInput,
|
|
56
|
-
|
|
60
|
+
l as Root,
|
|
57
61
|
L as SearchBox,
|
|
58
|
-
|
|
62
|
+
C as Separator,
|
|
59
63
|
U as StatefulButton,
|
|
60
|
-
|
|
64
|
+
k as Text,
|
|
61
65
|
K as ToggleView,
|
|
62
|
-
|
|
66
|
+
R as Tooltip
|
|
63
67
|
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HideAtProps } from '../../atoms/HideAt';
|
|
3
|
+
export interface BannerCardProps extends HideAtProps {
|
|
4
|
+
variant?: 'hero' | 'promo';
|
|
5
|
+
overlayTheme?: 'none' | 'dark' | 'light';
|
|
6
|
+
title: string;
|
|
7
|
+
description: string;
|
|
8
|
+
backgroundImage?: string;
|
|
9
|
+
align?: 'left' | 'right';
|
|
10
|
+
cta?: React.ReactNode;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare function BannerCard({ variant, overlayTheme, title, description, backgroundImage, align, cta, className, hideAt }: BannerCardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as e, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import { getHideAtStyles as f } from "../../atoms/HideAt.js";
|
|
3
|
+
import { Text as _ } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { c as p } from "../../clsx-OuTLNxxd.js";
|
|
5
|
+
import '../../assets/BannerCard.css';const k = "_root_1x7t0_2", N = "_content_1x7t0_12", u = "_align_left_1x7t0_24", z = "_align_right_1x7t0_32", S = "_overlay_dark_1x7t0_47", $ = "_header_1x7t0_47", b = "_description_1x7t0_48", j = "_overlay_none_1x7t0_49", C = "_overlay_light_1x7t0_55", t = {
|
|
6
|
+
root: k,
|
|
7
|
+
content: N,
|
|
8
|
+
align_left: u,
|
|
9
|
+
align_right: z,
|
|
10
|
+
overlay_dark: S,
|
|
11
|
+
header: $,
|
|
12
|
+
description: b,
|
|
13
|
+
overlay_none: j,
|
|
14
|
+
overlay_light: C
|
|
15
|
+
};
|
|
16
|
+
function I({
|
|
17
|
+
variant: o = "hero",
|
|
18
|
+
overlayTheme: n = "none",
|
|
19
|
+
title: i,
|
|
20
|
+
description: r,
|
|
21
|
+
backgroundImage: a,
|
|
22
|
+
align: c = "left",
|
|
23
|
+
cta: l,
|
|
24
|
+
className: d,
|
|
25
|
+
hideAt: x
|
|
26
|
+
}) {
|
|
27
|
+
const g = a ? { backgroundImage: `url(${a})` } : void 0, s = o === "hero", h = s ? "6xl" : "xl", m = s ? "md" : "sm", y = n === "dark" ? t.textLight : t.textDark;
|
|
28
|
+
return /* @__PURE__ */ e(
|
|
29
|
+
"article",
|
|
30
|
+
{
|
|
31
|
+
className: p(
|
|
32
|
+
t.root,
|
|
33
|
+
t[`variant_${o}`],
|
|
34
|
+
t[`align_${c}`],
|
|
35
|
+
t[`overlay_${n}`],
|
|
36
|
+
y,
|
|
37
|
+
f(x),
|
|
38
|
+
d
|
|
39
|
+
),
|
|
40
|
+
style: { ...g },
|
|
41
|
+
children: /* @__PURE__ */ v("div", { className: t.content, children: [
|
|
42
|
+
/* @__PURE__ */ e(_, { variant: "display", size: h, className: t.header, children: i }),
|
|
43
|
+
r && /* @__PURE__ */ e(_, { size: m, className: t.description, children: r }),
|
|
44
|
+
l && /* @__PURE__ */ e("div", { className: t.cta, children: l })
|
|
45
|
+
] })
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
I as BannerCard
|
|
51
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { BannerCardProps } from './BannerCard';
|
|
3
|
+
type ExtraArgs = {
|
|
4
|
+
showCta: boolean;
|
|
5
|
+
customCtaLabel?: string;
|
|
6
|
+
backgroundImageUrl?: string;
|
|
7
|
+
};
|
|
8
|
+
type AllArgs = BannerCardProps & ExtraArgs;
|
|
9
|
+
declare const meta: Meta<AllArgs>;
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<AllArgs>;
|
|
12
|
+
export declare const Playground: Story;
|
|
13
|
+
export declare const Hero: Story;
|
|
14
|
+
export declare const HeroLightOverlay: Story;
|
|
15
|
+
export declare const HeroNoOverlay: Story;
|
|
16
|
+
export declare const PromoLight: Story;
|
|
17
|
+
export declare const PromoWithDarkOverlay: Story;
|
|
18
|
+
export declare const WithoutCTA: Story;
|
|
19
|
+
export declare const RightAlignedPromo: Story;
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import { jsxs as c, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { BannerCard as t } from "./BannerCard.js";
|
|
3
|
+
import { LinkButton as m } from "../../atoms/LinkButton/LinkButton.js";
|
|
4
|
+
import { Icon as d } from "../../atoms/Icon/Icon.js";
|
|
5
|
+
const v = {
|
|
6
|
+
title: "Case Parts/Molecules/BannerCard",
|
|
7
|
+
component: t,
|
|
8
|
+
tags: ["autodocs"],
|
|
9
|
+
render: (e) => {
|
|
10
|
+
const {
|
|
11
|
+
showCta: r,
|
|
12
|
+
customCtaLabel: a,
|
|
13
|
+
backgroundImageUrl: i,
|
|
14
|
+
cta: n,
|
|
15
|
+
...s
|
|
16
|
+
} = e, l = r ? n ?? /* @__PURE__ */ c(
|
|
17
|
+
m,
|
|
18
|
+
{
|
|
19
|
+
variant: e.overlayTheme === "light" ? "primary" : "secondary-transparent",
|
|
20
|
+
size: "md",
|
|
21
|
+
href: "#",
|
|
22
|
+
children: [
|
|
23
|
+
a || "Learn More",
|
|
24
|
+
/* @__PURE__ */ o(d, { iconKey: "fa-solid fa-arrow-right", size: "sm" })
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
) : void 0;
|
|
28
|
+
return /* @__PURE__ */ o("div", { style: { maxWidth: e.variant === "hero" ? 1200 : 640 }, children: /* @__PURE__ */ o(
|
|
29
|
+
t,
|
|
30
|
+
{
|
|
31
|
+
...s,
|
|
32
|
+
cta: l,
|
|
33
|
+
backgroundImage: i
|
|
34
|
+
}
|
|
35
|
+
) });
|
|
36
|
+
},
|
|
37
|
+
args: {
|
|
38
|
+
variant: "hero",
|
|
39
|
+
overlayTheme: "none",
|
|
40
|
+
title: "Made-to-Spec Custom Parts",
|
|
41
|
+
description: "We specialize in made-to-spec parts—including cutting boards, walk-in doors, wire shelving, heaters, warmer wires, gaskets and more!",
|
|
42
|
+
align: "left",
|
|
43
|
+
showCta: !0,
|
|
44
|
+
customCtaLabel: "Shop Now",
|
|
45
|
+
backgroundImageUrl: "https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1400&q=60"
|
|
46
|
+
},
|
|
47
|
+
argTypes: {
|
|
48
|
+
variant: {
|
|
49
|
+
control: { type: "inline-radio" },
|
|
50
|
+
options: ["hero", "promo"],
|
|
51
|
+
description: "Size / typography preset."
|
|
52
|
+
},
|
|
53
|
+
overlayTheme: {
|
|
54
|
+
control: { type: "inline-radio" },
|
|
55
|
+
options: ["none", "dark", "light"],
|
|
56
|
+
description: "Applies optional contrast overlay + text color."
|
|
57
|
+
},
|
|
58
|
+
title: {
|
|
59
|
+
control: "text"
|
|
60
|
+
},
|
|
61
|
+
description: {
|
|
62
|
+
control: "text"
|
|
63
|
+
},
|
|
64
|
+
align: {
|
|
65
|
+
control: { type: "inline-radio" },
|
|
66
|
+
options: ["left", "right"]
|
|
67
|
+
},
|
|
68
|
+
backgroundImageUrl: {
|
|
69
|
+
name: "backgroundImage",
|
|
70
|
+
control: "text",
|
|
71
|
+
description: "Image URL. Leave empty for no background image."
|
|
72
|
+
},
|
|
73
|
+
showCta: {
|
|
74
|
+
control: "boolean",
|
|
75
|
+
description: "Toggle the CTA rendering."
|
|
76
|
+
},
|
|
77
|
+
customCtaLabel: {
|
|
78
|
+
control: "text",
|
|
79
|
+
if: { arg: "showCta" },
|
|
80
|
+
description: "Text for generated CTA link."
|
|
81
|
+
},
|
|
82
|
+
cta: {
|
|
83
|
+
table: { disable: !0 },
|
|
84
|
+
description: "Custom CTA node overrides generated link."
|
|
85
|
+
},
|
|
86
|
+
hideAt: {
|
|
87
|
+
control: "object",
|
|
88
|
+
description: "Responsive visibility props (HideAtProps)."
|
|
89
|
+
},
|
|
90
|
+
className: { control: "text" }
|
|
91
|
+
},
|
|
92
|
+
parameters: {
|
|
93
|
+
docs: {
|
|
94
|
+
description: {
|
|
95
|
+
component: `Structure helper for promotional / hero banners.
|
|
96
|
+
Responsibilities:
|
|
97
|
+
- variant: only size / typography (hero vs promo)
|
|
98
|
+
- overlayTheme: controls contrast + optional semi‑transparent overlay (dark/light/none)
|
|
99
|
+
- backgroundImage: applied as CSS background-image
|
|
100
|
+
- align: which grid column & text alignment
|
|
101
|
+
Layout (width/height) is consumer-controlled.`
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}, y = { name: "Playground" }, f = {
|
|
106
|
+
args: {
|
|
107
|
+
variant: "hero",
|
|
108
|
+
overlayTheme: "dark",
|
|
109
|
+
title: "Elevate Your Workflow",
|
|
110
|
+
description: "Tools engineered for performance in every scenario.",
|
|
111
|
+
backgroundImageUrl: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1400&q=60",
|
|
112
|
+
align: "left"
|
|
113
|
+
}
|
|
114
|
+
}, b = {
|
|
115
|
+
name: "Hero (Light Overlay)",
|
|
116
|
+
args: {
|
|
117
|
+
variant: "hero",
|
|
118
|
+
overlayTheme: "light",
|
|
119
|
+
title: "Bright Hero",
|
|
120
|
+
description: "Light overlay for darker images.",
|
|
121
|
+
backgroundImageUrl: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1400&q=60",
|
|
122
|
+
customCtaLabel: "Get Started"
|
|
123
|
+
}
|
|
124
|
+
}, k = {
|
|
125
|
+
name: "Hero (No Overlay)",
|
|
126
|
+
args: {
|
|
127
|
+
variant: "hero",
|
|
128
|
+
overlayTheme: "none",
|
|
129
|
+
title: "Raw Image Hero",
|
|
130
|
+
description: "No overlay applied—ensure image has built-in contrast.",
|
|
131
|
+
backgroundImageUrl: "https://images.unsplash.com/photo-1522199710521-72d69614c702?auto=format&fit=crop&w=1400&q=60"
|
|
132
|
+
}
|
|
133
|
+
}, C = {
|
|
134
|
+
args: {
|
|
135
|
+
variant: "promo",
|
|
136
|
+
overlayTheme: "light",
|
|
137
|
+
title: "Free Shipping",
|
|
138
|
+
description: "Orders over $50 ship free in the continental US.",
|
|
139
|
+
backgroundImageUrl: "",
|
|
140
|
+
customCtaLabel: "Details"
|
|
141
|
+
}
|
|
142
|
+
}, w = {
|
|
143
|
+
name: "Promo (Dark Overlay)",
|
|
144
|
+
args: {
|
|
145
|
+
variant: "promo",
|
|
146
|
+
overlayTheme: "dark",
|
|
147
|
+
title: "Night Promo",
|
|
148
|
+
description: "Promo banner with dark overlay.",
|
|
149
|
+
backgroundImageUrl: "https://images.unsplash.com/photo-1553456558-aff63285bdd1?auto=format&fit=crop&w=1200&q=60",
|
|
150
|
+
customCtaLabel: "Browse"
|
|
151
|
+
}
|
|
152
|
+
}, T = {
|
|
153
|
+
args: {
|
|
154
|
+
showCta: !1,
|
|
155
|
+
title: "Informational Banner",
|
|
156
|
+
description: "No actionable CTA needed here.",
|
|
157
|
+
variant: "promo",
|
|
158
|
+
overlayTheme: "light",
|
|
159
|
+
backgroundImageUrl: ""
|
|
160
|
+
}
|
|
161
|
+
}, L = {
|
|
162
|
+
args: {
|
|
163
|
+
variant: "promo",
|
|
164
|
+
overlayTheme: "dark",
|
|
165
|
+
align: "right",
|
|
166
|
+
title: "Limited Offer",
|
|
167
|
+
description: "Ends this Friday — don’t miss out!",
|
|
168
|
+
customCtaLabel: "Redeem"
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
export {
|
|
172
|
+
f as Hero,
|
|
173
|
+
b as HeroLightOverlay,
|
|
174
|
+
k as HeroNoOverlay,
|
|
175
|
+
y as Playground,
|
|
176
|
+
C as PromoLight,
|
|
177
|
+
w as PromoWithDarkOverlay,
|
|
178
|
+
L as RightAlignedPromo,
|
|
179
|
+
T as WithoutCTA,
|
|
180
|
+
v as default
|
|
181
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { HideAtProps } from '../../atoms/HideAt';
|
|
3
|
+
export interface CarouselProps extends HideAtProps {
|
|
4
|
+
slides: React.ReactNode[];
|
|
5
|
+
loop?: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
autoplayDelay?: number;
|
|
8
|
+
autoplay?: boolean;
|
|
9
|
+
autoplayStopOnInteraction?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare function Carousel({ slides, className, hideAt, loop, autoplay, autoplayDelay, autoplayStopOnInteraction, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
|