@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.
@@ -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
  }
@@ -9,6 +9,9 @@ const getDefaultVariant = (layout) => {
9
9
  switch (layout) {
10
10
  case "rich-card-large":
11
11
  return "title-300";
12
+ case "navigation-horizontal-small":
13
+ case "navigation-horizontal-small-centered":
14
+ return "title-100";
12
15
  default:
13
16
  return "title-200";
14
17
  }
@@ -7,6 +7,9 @@ const getDefaultVariant = (layout) => {
7
7
  switch (layout) {
8
8
  case "rich-card-large":
9
9
  return "title-300";
10
+ case "navigation-horizontal-small":
11
+ case "navigation-horizontal-small-centered":
12
+ return "title-100";
10
13
  default:
11
14
  return "title-200";
12
15
  }
@@ -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(components_box_box.Box, { ml: "auto" }),
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(Box, { ml: "auto" }),
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, {}) })
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.4.14",
23
+ "version": "0.4.16",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"