@telia/teddy 0.4.14 → 0.4.16
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/components/card/card-button.cjs +12 -0
- package/dist/components/card/card-button.js +12 -0
- package/dist/components/card/card-heading.cjs +3 -0
- package/dist/components/card/card-heading.js +3 -0
- package/dist/components/card/card-line.cjs +1 -1
- package/dist/components/card/card-line.js +1 -1
- package/dist/components/card/card-price.cjs +1 -2
- package/dist/components/card/card-price.js +1 -2
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +1 -2
- package/dist/components/radio-card-group/radio-card-group-item-title.js +1 -2
- package/package.json +1 -1
|
@@ -16,6 +16,17 @@ function getButtonVariant(variant) {
|
|
|
16
16
|
return "primary";
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
+
const getButtonSize = (layout) => {
|
|
20
|
+
switch (layout) {
|
|
21
|
+
case "navigation-vertical":
|
|
22
|
+
case "navigation-horizontal-small":
|
|
23
|
+
case "navigation-horizontal-small-centered":
|
|
24
|
+
case "navigation-horizontal-large":
|
|
25
|
+
return "sm";
|
|
26
|
+
default:
|
|
27
|
+
return "md";
|
|
28
|
+
}
|
|
29
|
+
};
|
|
19
30
|
const Button = React.forwardRef(
|
|
20
31
|
({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
|
|
21
32
|
const context = React.useContext(components_card_card.RootContext);
|
|
@@ -37,6 +48,7 @@ const Button = React.forwardRef(
|
|
|
37
48
|
ref,
|
|
38
49
|
...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
|
|
39
50
|
variant: getButtonVariant(context == null ? void 0 : context.variant),
|
|
51
|
+
size: getButtonSize(context == null ? void 0 : context.layout),
|
|
40
52
|
...props,
|
|
41
53
|
className: classes
|
|
42
54
|
}
|
|
@@ -14,6 +14,17 @@ function getButtonVariant(variant) {
|
|
|
14
14
|
return "primary";
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
const getButtonSize = (layout) => {
|
|
18
|
+
switch (layout) {
|
|
19
|
+
case "navigation-vertical":
|
|
20
|
+
case "navigation-horizontal-small":
|
|
21
|
+
case "navigation-horizontal-small-centered":
|
|
22
|
+
case "navigation-horizontal-large":
|
|
23
|
+
return "sm";
|
|
24
|
+
default:
|
|
25
|
+
return "md";
|
|
26
|
+
}
|
|
27
|
+
};
|
|
17
28
|
const Button = React__default.forwardRef(
|
|
18
29
|
({ className, iconOnly, disclaimer, ...props }, forwardRef) => {
|
|
19
30
|
const context = React__default.useContext(RootContext);
|
|
@@ -35,6 +46,7 @@ const Button = React__default.forwardRef(
|
|
|
35
46
|
ref,
|
|
36
47
|
...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
|
|
37
48
|
variant: getButtonVariant(context == null ? void 0 : context.variant),
|
|
49
|
+
size: getButtonSize(context == null ? void 0 : context.layout),
|
|
38
50
|
...props,
|
|
39
51
|
className: classes
|
|
40
52
|
}
|
|
@@ -17,7 +17,7 @@ const Line = React.forwardRef(({ className, ...props }, forwardRef) => {
|
|
|
17
17
|
},
|
|
18
18
|
className
|
|
19
19
|
);
|
|
20
|
-
const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250)" : "100%";
|
|
20
|
+
const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250))" : "100%";
|
|
21
21
|
return /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { width, mt: "50", mb: "50", p: "0", ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("hr", {}) });
|
|
22
22
|
});
|
|
23
23
|
exports.Line = Line;
|
|
@@ -15,7 +15,7 @@ const Line = React__default.forwardRef(({ className, ...props }, forwardRef) =>
|
|
|
15
15
|
},
|
|
16
16
|
className
|
|
17
17
|
);
|
|
18
|
-
const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250)" : "100%";
|
|
18
|
+
const width = layout === "product" ? "calc(100% + 2*var(--teddy-spacing-250))" : "100%";
|
|
19
19
|
return /* @__PURE__ */ jsx(Box, { width, mt: "50", mb: "50", p: "0", ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
|
|
20
20
|
});
|
|
21
21
|
export {
|
|
@@ -14,13 +14,12 @@ const Price = React.forwardRef(
|
|
|
14
14
|
return /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
|
|
15
15
|
textAbovePrice ? /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
|
|
16
16
|
/* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
|
|
17
|
-
pricePrefix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix }),
|
|
17
|
+
pricePrefix && /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { variant: "paragraph-200", as: "p", faded: true, mr: "100", children: pricePrefix }),
|
|
18
18
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
19
19
|
components_text_text.Text,
|
|
20
20
|
{
|
|
21
21
|
variant: "paragraph-100-bold",
|
|
22
22
|
as: "span",
|
|
23
|
-
ml: "100",
|
|
24
23
|
mr: "100",
|
|
25
24
|
color: variant === "purple" ? tokens_color_variables.teddyColorBrandCorePurple : void 0,
|
|
26
25
|
className: components_card_card.styles[`${rootColorDotsClass}--big`],
|
|
@@ -12,13 +12,12 @@ const Price = React__default.forwardRef(
|
|
|
12
12
|
return /* @__PURE__ */ jsxs(Flex, { flexGrow: "1", mt: "auto", mb: "100", ref: forwardRef, className: classes, direction: "column", gap: "10", children: [
|
|
13
13
|
textAbovePrice ? /* @__PURE__ */ jsx(Text, { variant: "additional-100", as: "p", faded: true, children: textAbovePrice }) : null,
|
|
14
14
|
/* @__PURE__ */ jsxs(Flex, { direction: "row", align: "baseline", flexGrow: "1", wrap: "nowrap", children: [
|
|
15
|
-
pricePrefix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, children: pricePrefix }),
|
|
15
|
+
pricePrefix && /* @__PURE__ */ jsx(Text, { variant: "paragraph-200", as: "p", faded: true, mr: "100", children: pricePrefix }),
|
|
16
16
|
/* @__PURE__ */ jsx(
|
|
17
17
|
Text,
|
|
18
18
|
{
|
|
19
19
|
variant: "paragraph-100-bold",
|
|
20
20
|
as: "span",
|
|
21
|
-
ml: "100",
|
|
22
21
|
mr: "100",
|
|
23
22
|
color: variant === "purple" ? teddyColorBrandCorePurple : void 0,
|
|
24
23
|
className: styles[`${rootColorDotsClass}--big`],
|
|
@@ -357,7 +357,6 @@ const TopMenuTrigger = React.forwardRef(
|
|
|
357
357
|
isOpen && /* @__PURE__ */ jsxRuntime.jsx(
|
|
358
358
|
components_visuallyHidden_visuallyHidden.VisuallyHidden,
|
|
359
359
|
{
|
|
360
|
-
"aria-hidden": true,
|
|
361
360
|
tabIndex: 0,
|
|
362
361
|
ref: context.focusProxyRef,
|
|
363
362
|
onFocus: (event) => {
|
|
@@ -822,7 +821,7 @@ const Desktop = React.forwardRef(() => {
|
|
|
822
821
|
children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: link.link, children: link.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.link, children: link.name })
|
|
823
822
|
}
|
|
824
823
|
) }, link.name)),
|
|
825
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
824
|
+
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
|
|
826
825
|
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
|
|
827
826
|
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Search, {}) }),
|
|
828
827
|
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
|
|
@@ -336,7 +336,6 @@ const TopMenuTrigger = React__default.forwardRef(
|
|
|
336
336
|
isOpen && /* @__PURE__ */ jsx(
|
|
337
337
|
VisuallyHidden,
|
|
338
338
|
{
|
|
339
|
-
"aria-hidden": true,
|
|
340
339
|
tabIndex: 0,
|
|
341
340
|
ref: context.focusProxyRef,
|
|
342
341
|
onFocus: (event) => {
|
|
@@ -801,7 +800,7 @@ const Desktop = React__default.forwardRef(() => {
|
|
|
801
800
|
children: link.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) : /* @__PURE__ */ jsx("a", { href: link.link, children: link.name })
|
|
802
801
|
}
|
|
803
802
|
) }, link.name)),
|
|
804
|
-
/* @__PURE__ */ jsx(
|
|
803
|
+
/* @__PURE__ */ jsx(NavigationMenu.Item, { style: { marginLeft: "auto" } }),
|
|
805
804
|
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
|
|
806
805
|
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
|
|
807
806
|
/* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
|