@bbl-digital/snorre 4.1.47 → 4.1.49

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/esm/v2/Memberbenefits/MemberbenefitsCard/index.js +33 -10
  2. package/lib/v2/Memberbenefits/MemberbenefitsCard/index.d.ts.map +1 -1
  3. package/lib/v2/Memberbenefits/MemberbenefitsCard/index.js +33 -10
  4. package/lib/v2/Memberbenefits/MemberbenefitsCard/model.d.ts +7 -0
  5. package/lib/v2/Memberbenefits/MemberbenefitsCard/model.d.ts.map +1 -1
  6. package/package.json +1 -1
package/esm/v2/Memberbenefits/MemberbenefitsCard/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
+ import { useEffect, useRef } from 'react';
2
3
  import Header from '../../../core/Header';
3
4
  import Html from '../../../core/Html';
4
5
  import Text from '../../../core/Text';
@@ -8,26 +9,48 @@ import { ContentWrapper, DiscountAndBonus, ImageRepresentation, ImageWithOverlay
8
9
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
9
10
  export const MemberBenefitsCard = ({
10
11
  benefit,
12
+ altText,
13
+ altTextLogo,
14
+ scrollTo,
11
15
  onReadMoreClick,
16
+ afterScroll,
12
17
  ...props
13
18
  }) => {
14
- const hasDiscountText = !!benefit?.discountText?.trim();
15
- const hasBonusRate = !!benefit?.bonusRate;
19
+ const ref = useRef(null);
20
+ const discountText = benefit?.discountText?.trim();
21
+ const bonusText = benefit?.bonusText?.trim();
16
22
  const hasSituationImage = !!benefit?.urlSituationImage;
17
23
  const hasLogo = !!benefit?.urlLogo;
24
+ const situationImgAltText = altText || `${benefit.name} situasjonsbilde`;
25
+ const logoAltText = altTextLogo || `${benefit.name} logo`;
26
+ const scrollToRef = ref => {
27
+ if (ref.current) {
28
+ ref.current.scrollIntoView({
29
+ behavior: 'smooth',
30
+ block: 'end'
31
+ });
32
+ }
33
+ };
34
+ useEffect(() => {
35
+ if (scrollTo) {
36
+ scrollToRef(ref);
37
+ afterScroll && afterScroll();
38
+ }
39
+ }, [ref, scrollTo, afterScroll]);
18
40
  return _jsxs("button", {
19
41
  css: () => [styles.default(), props.css && props.css],
42
+ ref: ref,
20
43
  onClick: onReadMoreClick,
21
44
  "aria-label": `Les mer om denne medlemsfordelen: ${benefit.name}`,
22
45
  children: [_jsxs(ImageWithOverlay, {
23
46
  children: [hasSituationImage && _jsx(ImageRepresentation, {
24
47
  src: benefit.urlSituationImage,
25
- alt: benefit.name
48
+ alt: situationImgAltText
26
49
  }), _jsx(LogoOverlay, {
27
50
  children: hasLogo && _jsx(LogoFlexContainer, {
28
51
  children: _jsx(SupplierLogo, {
29
52
  src: benefit.urlLogo,
30
- alt: benefit.name
53
+ alt: logoAltText
31
54
  })
32
55
  })
33
56
  })]
@@ -40,20 +63,20 @@ export const MemberBenefitsCard = ({
40
63
  }), benefit?.teaser && _jsx(Html, {
41
64
  text: benefit.teaser
42
65
  })]
43
- }), (hasDiscountText || hasBonusRate) && _jsxs(DiscountAndBonus, {
44
- children: [benefit?.bonusRate && _jsxs(Row, {
66
+ }), (Boolean(bonusText?.length) || Boolean(discountText?.length)) && _jsxs(DiscountAndBonus, {
67
+ children: [!!bonusText && _jsxs(Row, {
45
68
  children: [_jsx(IconMedal, {
46
69
  backgrounded: true
47
- }), _jsxs(Text, {
70
+ }), _jsx(Text, {
48
71
  semibold: true,
49
- children: [benefit.bonusRate, "% bonus"]
72
+ children: bonusText
50
73
  })]
51
- }), benefit?.discountText?.trim() && _jsxs(Row, {
74
+ }), !!discountText && _jsxs(Row, {
52
75
  children: [_jsx(IconPercent, {
53
76
  backgrounded: true
54
77
  }), _jsx(Text, {
55
78
  semibold: true,
56
- children: benefit.discountText
79
+ children: discountText
57
80
  })]
58
81
  })]
59
82
  })]
package/lib/v2/Memberbenefits/MemberbenefitsCard/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/Memberbenefits/MemberbenefitsCard/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAcjD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyDhE,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/Memberbenefits/MemberbenefitsCard/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAcjD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+EhE,CAAA"}
package/lib/v2/Memberbenefits/MemberbenefitsCard/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
+ import { useEffect, useRef } from 'react';
2
3
  import Header from '../../../core/Header';
3
4
  import Html from '../../../core/Html';
4
5
  import Text from '../../../core/Text';
@@ -8,26 +9,48 @@ import { ContentWrapper, DiscountAndBonus, ImageRepresentation, ImageWithOverlay
8
9
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
9
10
  export const MemberBenefitsCard = ({
10
11
  benefit,
12
+ altText,
13
+ altTextLogo,
14
+ scrollTo,
11
15
  onReadMoreClick,
16
+ afterScroll,
12
17
  ...props
13
18
  }) => {
14
- const hasDiscountText = !!benefit?.discountText?.trim();
15
- const hasBonusRate = !!benefit?.bonusRate;
19
+ const ref = useRef(null);
20
+ const discountText = benefit?.discountText?.trim();
21
+ const bonusText = benefit?.bonusText?.trim();
16
22
  const hasSituationImage = !!benefit?.urlSituationImage;
17
23
  const hasLogo = !!benefit?.urlLogo;
24
+ const situationImgAltText = altText || `${benefit.name} situasjonsbilde`;
25
+ const logoAltText = altTextLogo || `${benefit.name} logo`;
26
+ const scrollToRef = ref => {
27
+ if (ref.current) {
28
+ ref.current.scrollIntoView({
29
+ behavior: 'smooth',
30
+ block: 'end'
31
+ });
32
+ }
33
+ };
34
+ useEffect(() => {
35
+ if (scrollTo) {
36
+ scrollToRef(ref);
37
+ afterScroll && afterScroll();
38
+ }
39
+ }, [ref, scrollTo, afterScroll]);
18
40
  return _jsxs("button", {
19
41
  css: () => [styles.default(), props.css && props.css],
42
+ ref: ref,
20
43
  onClick: onReadMoreClick,
21
44
  "aria-label": `Les mer om denne medlemsfordelen: ${benefit.name}`,
22
45
  children: [_jsxs(ImageWithOverlay, {
23
46
  children: [hasSituationImage && _jsx(ImageRepresentation, {
24
47
  src: benefit.urlSituationImage,
25
- alt: benefit.name
48
+ alt: situationImgAltText
26
49
  }), _jsx(LogoOverlay, {
27
50
  children: hasLogo && _jsx(LogoFlexContainer, {
28
51
  children: _jsx(SupplierLogo, {
29
52
  src: benefit.urlLogo,
30
- alt: benefit.name
53
+ alt: logoAltText
31
54
  })
32
55
  })
33
56
  })]
@@ -40,20 +63,20 @@ export const MemberBenefitsCard = ({
40
63
  }), benefit?.teaser && _jsx(Html, {
41
64
  text: benefit.teaser
42
65
  })]
43
- }), (hasDiscountText || hasBonusRate) && _jsxs(DiscountAndBonus, {
44
- children: [benefit?.bonusRate && _jsxs(Row, {
66
+ }), (Boolean(bonusText?.length) || Boolean(discountText?.length)) && _jsxs(DiscountAndBonus, {
67
+ children: [!!bonusText && _jsxs(Row, {
45
68
  children: [_jsx(IconMedal, {
46
69
  backgrounded: true
47
- }), _jsxs(Text, {
70
+ }), _jsx(Text, {
48
71
  semibold: true,
49
- children: [benefit.bonusRate, "% bonus"]
72
+ children: bonusText
50
73
  })]
51
- }), benefit?.discountText?.trim() && _jsxs(Row, {
74
+ }), !!discountText && _jsxs(Row, {
52
75
  children: [_jsx(IconPercent, {
53
76
  backgrounded: true
54
77
  }), _jsx(Text, {
55
78
  semibold: true,
56
- children: benefit.discountText
79
+ children: discountText
57
80
  })]
58
81
  })]
59
82
  })]
package/lib/v2/Memberbenefits/MemberbenefitsCard/model.d.ts CHANGED
@@ -36,9 +36,16 @@ export interface IBeneftisResponse {
36
36
  contracts: IBenefit[];
37
37
  }
38
38
  export interface IMemberBenefitCardProps {
39
+ /** Benefit */
39
40
  benefit: IBenefit;
41
+ /** Alt text for missing situation image */
42
+ altText?: string;
43
+ /** Alt text for missing logo */
44
+ altTextLogo?: string;
40
45
  /** Custom css */
41
46
  css?: SerializedStyles;
47
+ /** Scroll to */
48
+ scrollTo?: boolean;
42
49
  /** Callback function for read more button */
43
50
  onReadMoreClick?: () => void;
44
51
  /** Handle after scroll */
package/lib/v2/Memberbenefits/MemberbenefitsCard/model.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/Memberbenefits/MemberbenefitsCard/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,SAAS,CAAC,EAAE,GAAG,EAAE,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,oBAAY,eAAe;IACzB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB;AACD,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,QAAQ,CAAA;IACjB,iBAAiB;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB"}
1
+ {"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../../src/packages/v2/Memberbenefits/MemberbenefitsCard/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,SAAS,CAAC,EAAE,GAAG,EAAE,CAAA;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,oBAAY,eAAe;IACzB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,QAAQ,EAAE,CAAA;CACtB;AACD,MAAM,WAAW,uBAAuB;IACtC,cAAc;IACd,OAAO,EAAE,QAAQ,CAAA;IACjB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbl-digital/snorre",
3
- "version": "4.1.47",
3
+ "version": "4.1.49",
4
4
  "description": "Design library for BBL Digital",
5
5
  "license": "MIT",
6
6
  "main": "./lib/index.js",