@telia/teddy 0.0.74 → 0.0.75

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.
@@ -6,8 +6,19 @@ const clsx = require("clsx");
6
6
  const components_card_card = require("./card.cjs");
7
7
  const components_carousel_carouselRoot = require("../carousel/carousel-root.cjs");
8
8
  const components_colorDot_index = require("../color-dot/index.cjs");
9
+ const utils_breakpointToNumber = require("../../utils/breakpointToNumber.cjs");
10
+ const tokens_breakpoint_variables = require("../../tokens/breakpoint/variables.cjs");
9
11
  const ImageSlider = React.forwardRef(
10
- ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
12
+ ({
13
+ settings,
14
+ variants,
15
+ className,
16
+ children,
17
+ onClick = () => void 0,
18
+ onClickNext,
19
+ onClickPrev,
20
+ onChangeVariant = () => void 0
21
+ }, forwardRef) => {
11
22
  const [selectedSlide, setSelectedSlide] = React.useState(0);
12
23
  const rootCarouselClass = `${components_card_card.rootClassName}__carousel`;
13
24
  const classes = clsx([components_card_card.styles[rootCarouselClass]], className);
@@ -17,6 +28,7 @@ const ImageSlider = React.forwardRef(
17
28
  size: "sm",
18
29
  onClickNext,
19
30
  onClickPrev,
31
+ onClick,
20
32
  settings: {
21
33
  beforeChange: (_currentSlide, nextSlide) => {
22
34
  setSelectedSlide(nextSlide);
@@ -25,7 +37,17 @@ const ImageSlider = React.forwardRef(
25
37
  customPaging: (index) => {
26
38
  const variant = variants[index];
27
39
  return /* @__PURE__ */ jsxRuntime.jsx(components_colorDot_index.ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
28
- }
40
+ },
41
+ swipe: false,
42
+ responsive: [
43
+ {
44
+ breakpoint: utils_breakpointToNumber.breakpointToNumber(tokens_breakpoint_variables.teddyBreakpointMd),
45
+ settings: {
46
+ swipe: true
47
+ }
48
+ }
49
+ ],
50
+ ...settings
29
51
  },
30
52
  children
31
53
  }
@@ -1,4 +1,5 @@
1
1
  import { default as React } from 'react';
2
+ import { Settings } from 'react-slick';
2
3
 
3
4
  export type ImageSliderVariant = {
4
5
  color: string;
@@ -8,6 +9,8 @@ export interface ImageSliderProps {
8
9
  variants: ImageSliderVariant[];
9
10
  children: React.ReactNode;
10
11
  className?: string;
12
+ settings?: Settings;
13
+ onClick?: () => void;
11
14
  onClickNext?: () => void;
12
15
  onClickPrev?: () => void;
13
16
  onChangeVariant?: (variant: ImageSliderVariant) => void;
@@ -4,8 +4,19 @@ import clsx from "clsx";
4
4
  import { s as styles, rootClassName } from "./card.js";
5
5
  import { Carousel } from "../carousel/carousel-root.js";
6
6
  import { ColorDot } from "../color-dot/index.js";
7
+ import { breakpointToNumber } from "../../utils/breakpointToNumber.js";
8
+ import { teddyBreakpointMd } from "../../tokens/breakpoint/variables.js";
7
9
  const ImageSlider = React__default.forwardRef(
8
- ({ variants, className, children, onClickNext, onClickPrev, onChangeVariant = () => void 0 }, forwardRef) => {
10
+ ({
11
+ settings,
12
+ variants,
13
+ className,
14
+ children,
15
+ onClick = () => void 0,
16
+ onClickNext,
17
+ onClickPrev,
18
+ onChangeVariant = () => void 0
19
+ }, forwardRef) => {
9
20
  const [selectedSlide, setSelectedSlide] = useState(0);
10
21
  const rootCarouselClass = `${rootClassName}__carousel`;
11
22
  const classes = clsx([styles[rootCarouselClass]], className);
@@ -15,6 +26,7 @@ const ImageSlider = React__default.forwardRef(
15
26
  size: "sm",
16
27
  onClickNext,
17
28
  onClickPrev,
29
+ onClick,
18
30
  settings: {
19
31
  beforeChange: (_currentSlide, nextSlide) => {
20
32
  setSelectedSlide(nextSlide);
@@ -23,7 +35,17 @@ const ImageSlider = React__default.forwardRef(
23
35
  customPaging: (index) => {
24
36
  const variant = variants[index];
25
37
  return /* @__PURE__ */ jsx(ColorDot, { color: variant.color, size: "xs", bordered: true, wide: index === selectedSlide });
26
- }
38
+ },
39
+ swipe: false,
40
+ responsive: [
41
+ {
42
+ breakpoint: breakpointToNumber(teddyBreakpointMd),
43
+ settings: {
44
+ swipe: true
45
+ }
46
+ }
47
+ ],
48
+ ...settings
27
49
  },
28
50
  children
29
51
  }
@@ -39,6 +39,7 @@ const Carousel = ({
39
39
  className = "",
40
40
  onClickNext,
41
41
  onClickPrev,
42
+ onClick = () => void 0,
42
43
  navigationIcon,
43
44
  settings,
44
45
  size = "lg"
@@ -55,20 +56,6 @@ const Carousel = ({
55
56
  lazyLoad: "ondemand",
56
57
  ...settings
57
58
  };
58
- const [swiped, setSwiped] = React.useState(false);
59
- const handleSwiped = React.useCallback(() => {
60
- setSwiped(true);
61
- }, [setSwiped]);
62
- const handleOnItemClick = React.useCallback(
63
- (e) => {
64
- if (swiped) {
65
- e.stopPropagation();
66
- e.preventDefault();
67
- setSwiped(false);
68
- }
69
- },
70
- [swiped]
71
- );
72
59
  const filteredChildren = React.Children.toArray(children).filter((child) => !!child);
73
60
  const SliderComponent = Slider.default ? Slider.default : Slider;
74
61
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -78,19 +65,8 @@ const Carousel = ({
78
65
  [styles[`${rootClassName}--${size}`]]: size,
79
66
  [className]: className
80
67
  }),
81
- children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, onSwipe: handleSwiped, children: React.Children.map(filteredChildren, (child) => {
82
- return /* @__PURE__ */ jsxRuntime.jsx(
83
- "div",
84
- {
85
- onClick: (e) => {
86
- e.stopPropagation();
87
- e.preventDefault();
88
- },
89
- onClickCapture: handleOnItemClick,
90
- className: clsx(styles[`${rootClassName}__item`]),
91
- children: child
92
- }
93
- );
68
+ children: /* @__PURE__ */ jsxRuntime.jsx(SliderComponent, { ...computedSettings, children: React.Children.map(filteredChildren, (child) => {
69
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
94
70
  }) })
95
71
  }
96
72
  );
@@ -10,6 +10,7 @@ export type CarouselProps = {
10
10
  size?: 'sm' | 'lg';
11
11
  onClickNext?: () => void;
12
12
  onClickPrev?: () => void;
13
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
13
14
  };
14
15
  /** Carousel to show images in. Can be fully customized by utlizing underlying 'settings' props mapped with react-slick */
15
16
  export declare const Carousel: React.FC<CarouselProps>;
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import React__default, { useState, useCallback } from "react";
2
+ import React__default from "react";
3
3
  import clsx from "clsx";
4
4
  import Slider from "react-slick";
5
5
  import "../../assets/sprite.269ba410-teddy.svg";
@@ -37,6 +37,7 @@ const Carousel = ({
37
37
  className = "",
38
38
  onClickNext,
39
39
  onClickPrev,
40
+ onClick = () => void 0,
40
41
  navigationIcon,
41
42
  settings,
42
43
  size = "lg"
@@ -53,20 +54,6 @@ const Carousel = ({
53
54
  lazyLoad: "ondemand",
54
55
  ...settings
55
56
  };
56
- const [swiped, setSwiped] = useState(false);
57
- const handleSwiped = useCallback(() => {
58
- setSwiped(true);
59
- }, [setSwiped]);
60
- const handleOnItemClick = useCallback(
61
- (e) => {
62
- if (swiped) {
63
- e.stopPropagation();
64
- e.preventDefault();
65
- setSwiped(false);
66
- }
67
- },
68
- [swiped]
69
- );
70
57
  const filteredChildren = React__default.Children.toArray(children).filter((child) => !!child);
71
58
  const SliderComponent = Slider.default ? Slider.default : Slider;
72
59
  return /* @__PURE__ */ jsx(
@@ -76,19 +63,8 @@ const Carousel = ({
76
63
  [styles[`${rootClassName}--${size}`]]: size,
77
64
  [className]: className
78
65
  }),
79
- children: /* @__PURE__ */ jsx(SliderComponent, { ...computedSettings, onSwipe: handleSwiped, children: React__default.Children.map(filteredChildren, (child) => {
80
- return /* @__PURE__ */ jsx(
81
- "div",
82
- {
83
- onClick: (e) => {
84
- e.stopPropagation();
85
- e.preventDefault();
86
- },
87
- onClickCapture: handleOnItemClick,
88
- className: clsx(styles[`${rootClassName}__item`]),
89
- children: child
90
- }
91
- );
66
+ children: /* @__PURE__ */ jsx(SliderComponent, { ...computedSettings, children: React__default.Children.map(filteredChildren, (child) => {
67
+ return /* @__PURE__ */ jsx("div", { onClick, className: clsx(styles[`${rootClassName}__item`]), children: child });
92
68
  }) })
93
69
  }
94
70
  );
@@ -209,6 +209,33 @@ const PRIVATE_LINKS = {
209
209
  }
210
210
  ]
211
211
  },
212
+ {
213
+ name: "Trygghet",
214
+ link: "/trygghet/",
215
+ appKey: APP_KEYS["open-pages"],
216
+ links: [
217
+ {
218
+ name: "Tjenester",
219
+ link: "/trygghet/tjenester/",
220
+ appKey: APP_KEYS["open-pages"]
221
+ },
222
+ {
223
+ name: "Svindel",
224
+ link: "/trygghet/svindel/",
225
+ appKey: APP_KEYS["open-pages"]
226
+ },
227
+ {
228
+ name: "Aktuelt",
229
+ link: "/trygghet/aktuelt/",
230
+ appKey: APP_KEYS["open-pages"]
231
+ },
232
+ {
233
+ name: "Hjelp Trygghet",
234
+ link: "/trygghet/hjelp/",
235
+ appKey: APP_KEYS["open-pages"]
236
+ }
237
+ ]
238
+ },
212
239
  {
213
240
  name: "Hjelp",
214
241
  link: "/hjelp/",
@@ -229,6 +256,11 @@ const PRIVATE_LINKS = {
229
256
  link: "/internett/hjelp/",
230
257
  appKey: APP_KEYS["open-pages"]
231
258
  },
259
+ {
260
+ name: "Hjelp Trygghet",
261
+ link: "/trygghet/hjelp/",
262
+ appKey: APP_KEYS["open-pages"]
263
+ },
232
264
  {
233
265
  name: "Faktura",
234
266
  link: "/hjelp/faktura/",
@@ -285,12 +317,12 @@ const BUSINESS_LINKS = {
285
317
  {
286
318
  name: "Nettbutikk",
287
319
  link: "/bedrift/mobilabonnement/",
288
- appKey: APP_KEYS["web-shop"],
320
+ appKey: APP_KEYS["open-pages"],
289
321
  links: [
290
322
  {
291
323
  name: "Mobilabonnement",
292
324
  link: "/bedrift/mobilabonnement/",
293
- appKey: APP_KEYS["web-shop"]
325
+ appKey: APP_KEYS["open-pages"]
294
326
  },
295
327
  {
296
328
  name: "Mobiltelefoner",
@@ -231,6 +231,27 @@ export declare const PRIVATE_LINKS: {
231
231
  readonly link: "/internett/hjelp/";
232
232
  readonly appKey: "open-pages";
233
233
  }];
234
+ }, {
235
+ readonly name: "Trygghet";
236
+ readonly link: "/trygghet/";
237
+ readonly appKey: "open-pages";
238
+ readonly links: [{
239
+ readonly name: "Tjenester";
240
+ readonly link: "/trygghet/tjenester/";
241
+ readonly appKey: "open-pages";
242
+ }, {
243
+ readonly name: "Svindel";
244
+ readonly link: "/trygghet/svindel/";
245
+ readonly appKey: "open-pages";
246
+ }, {
247
+ readonly name: "Aktuelt";
248
+ readonly link: "/trygghet/aktuelt/";
249
+ readonly appKey: "open-pages";
250
+ }, {
251
+ readonly name: "Hjelp Trygghet";
252
+ readonly link: "/trygghet/hjelp/";
253
+ readonly appKey: "open-pages";
254
+ }];
234
255
  }, {
235
256
  readonly name: "Hjelp";
236
257
  readonly link: "/hjelp/";
@@ -247,6 +268,10 @@ export declare const PRIVATE_LINKS: {
247
268
  readonly name: "Hjelp Internett";
248
269
  readonly link: "/internett/hjelp/";
249
270
  readonly appKey: "open-pages";
271
+ }, {
272
+ readonly name: "Hjelp Trygghet";
273
+ readonly link: "/trygghet/hjelp/";
274
+ readonly appKey: "open-pages";
250
275
  }, {
251
276
  readonly name: "Faktura";
252
277
  readonly link: "/hjelp/faktura/";
@@ -289,11 +314,11 @@ export declare const BUSINESS_LINKS: {
289
314
  }, {
290
315
  readonly name: "Nettbutikk";
291
316
  readonly link: "/bedrift/mobilabonnement/";
292
- readonly appKey: "web-shop";
317
+ readonly appKey: "open-pages";
293
318
  readonly links: [{
294
319
  readonly name: "Mobilabonnement";
295
320
  readonly link: "/bedrift/mobilabonnement/";
296
- readonly appKey: "web-shop";
321
+ readonly appKey: "open-pages";
297
322
  }, {
298
323
  readonly name: "Mobiltelefoner";
299
324
  readonly link: "/bedrift/mobiltelefoner/";
@@ -440,6 +465,27 @@ export declare const LINKS: [{
440
465
  readonly link: "/internett/hjelp/";
441
466
  readonly appKey: "open-pages";
442
467
  }];
468
+ }, {
469
+ readonly name: "Trygghet";
470
+ readonly link: "/trygghet/";
471
+ readonly appKey: "open-pages";
472
+ readonly links: [{
473
+ readonly name: "Tjenester";
474
+ readonly link: "/trygghet/tjenester/";
475
+ readonly appKey: "open-pages";
476
+ }, {
477
+ readonly name: "Svindel";
478
+ readonly link: "/trygghet/svindel/";
479
+ readonly appKey: "open-pages";
480
+ }, {
481
+ readonly name: "Aktuelt";
482
+ readonly link: "/trygghet/aktuelt/";
483
+ readonly appKey: "open-pages";
484
+ }, {
485
+ readonly name: "Hjelp Trygghet";
486
+ readonly link: "/trygghet/hjelp/";
487
+ readonly appKey: "open-pages";
488
+ }];
443
489
  }, {
444
490
  readonly name: "Hjelp";
445
491
  readonly link: "/hjelp/";
@@ -456,6 +502,10 @@ export declare const LINKS: [{
456
502
  readonly name: "Hjelp Internett";
457
503
  readonly link: "/internett/hjelp/";
458
504
  readonly appKey: "open-pages";
505
+ }, {
506
+ readonly name: "Hjelp Trygghet";
507
+ readonly link: "/trygghet/hjelp/";
508
+ readonly appKey: "open-pages";
459
509
  }, {
460
510
  readonly name: "Faktura";
461
511
  readonly link: "/hjelp/faktura/";
@@ -497,11 +547,11 @@ export declare const LINKS: [{
497
547
  }, {
498
548
  readonly name: "Nettbutikk";
499
549
  readonly link: "/bedrift/mobilabonnement/";
500
- readonly appKey: "web-shop";
550
+ readonly appKey: "open-pages";
501
551
  readonly links: [{
502
552
  readonly name: "Mobilabonnement";
503
553
  readonly link: "/bedrift/mobilabonnement/";
504
- readonly appKey: "web-shop";
554
+ readonly appKey: "open-pages";
505
555
  }, {
506
556
  readonly name: "Mobiltelefoner";
507
557
  readonly link: "/bedrift/mobiltelefoner/";
@@ -207,6 +207,33 @@ const PRIVATE_LINKS = {
207
207
  }
208
208
  ]
209
209
  },
210
+ {
211
+ name: "Trygghet",
212
+ link: "/trygghet/",
213
+ appKey: APP_KEYS["open-pages"],
214
+ links: [
215
+ {
216
+ name: "Tjenester",
217
+ link: "/trygghet/tjenester/",
218
+ appKey: APP_KEYS["open-pages"]
219
+ },
220
+ {
221
+ name: "Svindel",
222
+ link: "/trygghet/svindel/",
223
+ appKey: APP_KEYS["open-pages"]
224
+ },
225
+ {
226
+ name: "Aktuelt",
227
+ link: "/trygghet/aktuelt/",
228
+ appKey: APP_KEYS["open-pages"]
229
+ },
230
+ {
231
+ name: "Hjelp Trygghet",
232
+ link: "/trygghet/hjelp/",
233
+ appKey: APP_KEYS["open-pages"]
234
+ }
235
+ ]
236
+ },
210
237
  {
211
238
  name: "Hjelp",
212
239
  link: "/hjelp/",
@@ -227,6 +254,11 @@ const PRIVATE_LINKS = {
227
254
  link: "/internett/hjelp/",
228
255
  appKey: APP_KEYS["open-pages"]
229
256
  },
257
+ {
258
+ name: "Hjelp Trygghet",
259
+ link: "/trygghet/hjelp/",
260
+ appKey: APP_KEYS["open-pages"]
261
+ },
230
262
  {
231
263
  name: "Faktura",
232
264
  link: "/hjelp/faktura/",
@@ -283,12 +315,12 @@ const BUSINESS_LINKS = {
283
315
  {
284
316
  name: "Nettbutikk",
285
317
  link: "/bedrift/mobilabonnement/",
286
- appKey: APP_KEYS["web-shop"],
318
+ appKey: APP_KEYS["open-pages"],
287
319
  links: [
288
320
  {
289
321
  name: "Mobilabonnement",
290
322
  link: "/bedrift/mobilabonnement/",
291
- appKey: APP_KEYS["web-shop"]
323
+ appKey: APP_KEYS["open-pages"]
292
324
  },
293
325
  {
294
326
  name: "Mobiltelefoner",
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const breakpointToNumber = (breakpoint) => {
4
+ return parseInt((breakpoint || "").replace("px", ""));
5
+ };
6
+ exports.breakpointToNumber = breakpointToNumber;
@@ -0,0 +1 @@
1
+ export declare const breakpointToNumber: (breakpoint: string) => number;
@@ -0,0 +1,6 @@
1
+ const breakpointToNumber = (breakpoint) => {
2
+ return parseInt((breakpoint || "").replace("px", ""));
3
+ };
4
+ export {
5
+ breakpointToNumber
6
+ };
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=8"
21
21
  },
22
22
  "private": false,
23
- "version": "0.0.74",
23
+ "version": "0.0.75",
24
24
  "sideEffects": [
25
25
  "**/*.css"
26
26
  ],