@coorpacademy/components 11.12.5 → 11.13.0

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.
Files changed (84) hide show
  1. package/es/atom/battle-opponent/index.d.ts.map +1 -1
  2. package/es/atom/battle-opponent/index.js +4 -2
  3. package/es/atom/battle-opponent/index.js.map +1 -1
  4. package/es/atom/battle-opponent/style.css +12 -0
  5. package/es/atom/button/index.d.ts +14 -3
  6. package/es/atom/button/index.d.ts.map +1 -1
  7. package/es/atom/button/index.js +60 -27
  8. package/es/atom/button/index.js.map +1 -1
  9. package/es/atom/drag-and-drop/index.d.ts.map +1 -1
  10. package/es/atom/drag-and-drop/index.js +29 -17
  11. package/es/atom/drag-and-drop/index.js.map +1 -1
  12. package/es/atom/drag-and-drop/style.css +4 -3
  13. package/es/atom/image-upload/index.js +1 -1
  14. package/es/atom/image-upload/index.js.map +1 -1
  15. package/es/atom/tooltip/index.d.ts.map +1 -1
  16. package/es/atom/tooltip/index.js +2 -1
  17. package/es/atom/tooltip/index.js.map +1 -1
  18. package/es/molecule/brand-form-group/index.d.ts +14 -3
  19. package/es/molecule/brand-form-group/style.css +11 -7
  20. package/es/molecule/card/customer.js +1 -1
  21. package/es/molecule/card/customer.js.map +1 -1
  22. package/es/molecule/card/favorite.css +15 -35
  23. package/es/molecule/card/favorite.d.ts +1 -0
  24. package/es/molecule/card/favorite.d.ts.map +1 -1
  25. package/es/molecule/card/favorite.js +73 -18
  26. package/es/molecule/card/favorite.js.map +1 -1
  27. package/es/molecule/card/selectable.js +1 -1
  28. package/es/molecule/card/selectable.js.map +1 -1
  29. package/es/molecule/drag-and-drop-wrapper/style.css +1 -1
  30. package/es/organism/brand-form/index.d.ts +14 -3
  31. package/es/organism/mobile-intro-popin/index.native.d.ts +20 -0
  32. package/es/organism/mobile-intro-popin/index.native.d.ts.map +1 -0
  33. package/es/organism/mobile-intro-popin/index.native.js +152 -0
  34. package/es/organism/mobile-intro-popin/index.native.js.map +1 -0
  35. package/es/organism/wizard-contents/index.d.ts +14 -3
  36. package/es/template/back-office/brand-update/index.d.ts +28 -6
  37. package/es/template/common/search-page/index.d.ts +14 -3
  38. package/lib/atom/battle-opponent/index.d.ts.map +1 -1
  39. package/lib/atom/battle-opponent/index.js +4 -2
  40. package/lib/atom/battle-opponent/index.js.map +1 -1
  41. package/lib/atom/battle-opponent/style.css +12 -0
  42. package/lib/atom/button/index.d.ts +14 -3
  43. package/lib/atom/button/index.d.ts.map +1 -1
  44. package/lib/atom/button/index.js +65 -27
  45. package/lib/atom/button/index.js.map +1 -1
  46. package/lib/atom/drag-and-drop/index.d.ts.map +1 -1
  47. package/lib/atom/drag-and-drop/index.js +29 -17
  48. package/lib/atom/drag-and-drop/index.js.map +1 -1
  49. package/lib/atom/drag-and-drop/style.css +4 -3
  50. package/lib/atom/image-upload/index.js +1 -1
  51. package/lib/atom/image-upload/index.js.map +1 -1
  52. package/lib/atom/tooltip/index.d.ts.map +1 -1
  53. package/lib/atom/tooltip/index.js +2 -1
  54. package/lib/atom/tooltip/index.js.map +1 -1
  55. package/lib/molecule/brand-form-group/index.d.ts +14 -3
  56. package/lib/molecule/brand-form-group/style.css +11 -7
  57. package/lib/molecule/card/customer.js +1 -1
  58. package/lib/molecule/card/customer.js.map +1 -1
  59. package/lib/molecule/card/favorite.css +15 -35
  60. package/lib/molecule/card/favorite.d.ts +1 -0
  61. package/lib/molecule/card/favorite.d.ts.map +1 -1
  62. package/lib/molecule/card/favorite.js +75 -16
  63. package/lib/molecule/card/favorite.js.map +1 -1
  64. package/lib/molecule/card/selectable.js +1 -1
  65. package/lib/molecule/card/selectable.js.map +1 -1
  66. package/lib/molecule/drag-and-drop-wrapper/style.css +1 -1
  67. package/lib/organism/brand-form/index.d.ts +14 -3
  68. package/lib/organism/mobile-intro-popin/index.native.d.ts +20 -0
  69. package/lib/organism/mobile-intro-popin/index.native.d.ts.map +1 -0
  70. package/lib/organism/mobile-intro-popin/index.native.js +169 -0
  71. package/lib/organism/mobile-intro-popin/index.native.js.map +1 -0
  72. package/lib/organism/wizard-contents/index.d.ts +14 -3
  73. package/lib/template/back-office/brand-update/index.d.ts +28 -6
  74. package/lib/template/common/search-page/index.d.ts +14 -3
  75. package/locales/.mtslconfig.json +1 -0
  76. package/package.json +2 -2
  77. package/es/organism/podcast-popin-intro/index.native.d.ts +0 -10
  78. package/es/organism/podcast-popin-intro/index.native.d.ts.map +0 -1
  79. package/es/organism/podcast-popin-intro/index.native.js +0 -114
  80. package/es/organism/podcast-popin-intro/index.native.js.map +0 -1
  81. package/lib/organism/podcast-popin-intro/index.native.d.ts +0 -10
  82. package/lib/organism/podcast-popin-intro/index.native.d.ts.map +0 -1
  83. package/lib/organism/podcast-popin-intro/index.native.js +0 -131
  84. package/lib/organism/podcast-popin-intro/index.native.js.map +0 -1
@@ -386,16 +386,27 @@ declare namespace BrandFormGroup {
386
386
  color: any;
387
387
  submitValue: PropTypes.Requireable<string>;
388
388
  disabled: PropTypes.Requireable<boolean>;
389
- isLinkDisabled: PropTypes.Requireable<boolean>;
390
389
  href: PropTypes.Requireable<string>;
391
390
  download: PropTypes.Requireable<boolean>;
392
391
  target: PropTypes.Requireable<string>;
393
- onClick: PropTypes.Requireable<(...args: any[]) => any>;
394
392
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
395
393
  className: PropTypes.Requireable<string>;
396
- buttonContentClassName: PropTypes.Requireable<string>;
397
394
  style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
398
395
  'data-name': PropTypes.Requireable<string>;
396
+ 'aria-label': PropTypes.Requireable<string>;
397
+ 'data-testid': PropTypes.Requireable<string>;
398
+ useButtonTag: PropTypes.Requireable<boolean>;
399
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
400
+ onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
401
+ onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
402
+ onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
403
+ buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
404
+ 'data-for': PropTypes.Requireable<string>;
405
+ 'data-tooltip-place': PropTypes.Requireable<string>;
406
+ 'data-tip': PropTypes.Requireable<boolean>;
407
+ isLinkDisabled: PropTypes.Requireable<boolean>;
408
+ useWrapper: PropTypes.Requireable<boolean>;
409
+ buttonContentClassName: PropTypes.Requireable<string>;
399
410
  }> | PropTypes.InferProps<{
400
411
  buttonType: PropTypes.Requireable<string>;
401
412
  type: PropTypes.Requireable<string>;
@@ -42,10 +42,16 @@
42
42
  justify-content: space-evenly;
43
43
  }
44
44
 
45
+ .grid .field {
46
+ margin-right: 20px;
47
+ }
48
+
45
49
  .field {
46
- display: flex;
47
- margin: 0 32px 64px 0;
48
- flex: 1 0 0;
50
+ margin-bottom: 10px;
51
+ }
52
+
53
+ .field:last-child {
54
+ margin-bottom: 0;
49
55
  }
50
56
 
51
57
 
@@ -71,8 +77,8 @@
71
77
  .imageUploadContainer {
72
78
  display: flex;
73
79
  flex-direction: column;
74
- width: 100%;
75
- min-width: 230px;
80
+ height: 300px;
81
+ width: 360px;
76
82
  }
77
83
 
78
84
  @media desktop {
@@ -81,8 +87,6 @@
81
87
  }
82
88
 
83
89
  .groupGrid .grid {
84
- display: flex;
85
- flex-direction: row;
86
90
  justify-content: flex-start;
87
91
  margin-top: 0;
88
92
  }
@@ -14,7 +14,7 @@ const Customer = props => {
14
14
  type,
15
15
  coorpOriginal,
16
16
  theme,
17
- disabled = false,
17
+ disabled,
18
18
  'aria-label': ariaLabel
19
19
  } = props;
20
20
  const className = classnames(THEMES[theme], style.customer, type === 'chapter' ? style.chapterCustomer : null);
@@ -1 +1 @@
1
- {"version":3,"file":"customer.js","names":["React","PropTypes","classnames","style","THEMES","default","coorpmanager","Customer","props","name","type","coorpOriginal","theme","disabled","ariaLabel","className","customer","chapterCustomer","content","coorp","original","propTypes","oneOf","string","bool","isRequired"],"sources":["../../../src/molecule/card/customer.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n const {name, type, coorpOriginal, theme, disabled = false, 'aria-label': ariaLabel} = props;\n const className = classnames(\n THEMES[theme],\n style.customer,\n type === 'chapter' ? style.chapterCustomer : null\n );\n\n return (\n <div className={className} disabled={disabled} aria-label={ariaLabel}>\n <div className={style.content}>\n {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n {coorpOriginal ? <span className={style.original}>Original </span> : null}\n {!coorpOriginal && name}\n </div>\n </div>\n );\n};\n\nCustomer.propTypes = {\n theme: PropTypes.oneOf(keys(THEMES)),\n type: PropTypes.string,\n name: PropTypes.string,\n coorpOriginal: PropTypes.bool.isRequired,\n disabled: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nexport default Customer;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,gBAAlB;AAEA,OAAO,MAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE,IADW;EAEpBC,YAAY,EAAEH,KAAK,CAACG;AAFA,CAAf;;AAKP,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,IAAD;IAAOC,IAAP;IAAaC,aAAb;IAA4BC,KAA5B;IAAmCC,QAAQ,GAAG,KAA9C;IAAqD,cAAcC;EAAnE,IAAgFN,KAAtF;EACA,MAAMO,SAAS,GAAGb,UAAU,CAC1BE,MAAM,CAACQ,KAAD,CADoB,EAE1BT,KAAK,CAACa,QAFoB,EAG1BN,IAAI,KAAK,SAAT,GAAqBP,KAAK,CAACc,eAA3B,GAA6C,IAHnB,CAA5B;EAMA,oBACE;IAAK,SAAS,EAAEF,SAAhB;IAA2B,QAAQ,EAAEF,QAArC;IAA+C,cAAYC;EAA3D,gBACE;IAAK,SAAS,EAAEX,KAAK,CAACe;EAAtB,GACGP,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACgB;EAAvB,YAAH,GAAiD,IADjE,EAEGR,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACiB;EAAvB,eAAH,GAAuD,IAFvE,EAGG,CAACT,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACc,SAAT,2CAAqB;EACnBT,KAAK,EAAEX,SAAS,CAACqB,KAAV,CAAgB,MAAKlB,MAAL,CAAhB,CADY;EAEnBM,IAAI,EAAET,SAAS,CAACsB,MAFG;EAGnBd,IAAI,EAAER,SAAS,CAACsB,MAHG;EAInBZ,aAAa,EAAEV,SAAS,CAACuB,IAAV,CAAeC,UAJX;EAKnBZ,QAAQ,EAAEZ,SAAS,CAACuB,IALD;EAMnB,cAAcvB,SAAS,CAACsB;AANL,CAArB;AASA,eAAehB,QAAf"}
1
+ {"version":3,"file":"customer.js","names":["React","PropTypes","classnames","style","THEMES","default","coorpmanager","Customer","props","name","type","coorpOriginal","theme","disabled","ariaLabel","className","customer","chapterCustomer","content","coorp","original","propTypes","oneOf","string","bool","isRequired"],"sources":["../../../src/molecule/card/customer.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './customer.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst Customer = props => {\n const {name, type, coorpOriginal, theme, disabled, 'aria-label': ariaLabel} = props;\n const className = classnames(\n THEMES[theme],\n style.customer,\n type === 'chapter' ? style.chapterCustomer : null\n );\n\n return (\n <div className={className} disabled={disabled} aria-label={ariaLabel}>\n <div className={style.content}>\n {coorpOriginal ? <span className={style.coorp}>Coorp </span> : null}\n {coorpOriginal ? <span className={style.original}>Original </span> : null}\n {!coorpOriginal && name}\n </div>\n </div>\n );\n};\n\nCustomer.propTypes = {\n theme: PropTypes.oneOf(keys(THEMES)),\n type: PropTypes.string,\n name: PropTypes.string,\n coorpOriginal: PropTypes.bool.isRequired,\n disabled: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nexport default Customer;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,gBAAlB;AAEA,OAAO,MAAMC,MAAM,GAAG;EACpBC,OAAO,EAAE,IADW;EAEpBC,YAAY,EAAEH,KAAK,CAACG;AAFA,CAAf;;AAKP,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,IAAD;IAAOC,IAAP;IAAaC,aAAb;IAA4BC,KAA5B;IAAmCC,QAAnC;IAA6C,cAAcC;EAA3D,IAAwEN,KAA9E;EACA,MAAMO,SAAS,GAAGb,UAAU,CAC1BE,MAAM,CAACQ,KAAD,CADoB,EAE1BT,KAAK,CAACa,QAFoB,EAG1BN,IAAI,KAAK,SAAT,GAAqBP,KAAK,CAACc,eAA3B,GAA6C,IAHnB,CAA5B;EAMA,oBACE;IAAK,SAAS,EAAEF,SAAhB;IAA2B,QAAQ,EAAEF,QAArC;IAA+C,cAAYC;EAA3D,gBACE;IAAK,SAAS,EAAEX,KAAK,CAACe;EAAtB,GACGP,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACgB;EAAvB,YAAH,GAAiD,IADjE,EAEGR,aAAa,gBAAG;IAAM,SAAS,EAAER,KAAK,CAACiB;EAAvB,eAAH,GAAuD,IAFvE,EAGG,CAACT,aAAD,IAAkBF,IAHrB,CADF,CADF;AASD,CAjBD;;AAmBAF,QAAQ,CAACc,SAAT,2CAAqB;EACnBT,KAAK,EAAEX,SAAS,CAACqB,KAAV,CAAgB,MAAKlB,MAAL,CAAhB,CADY;EAEnBM,IAAI,EAAET,SAAS,CAACsB,MAFG;EAGnBd,IAAI,EAAER,SAAS,CAACsB,MAHG;EAInBZ,aAAa,EAAEV,SAAS,CAACuB,IAAV,CAAeC,UAJX;EAKnBZ,QAAQ,EAAEZ,SAAS,CAACuB,IALD;EAMnB,cAAcvB,SAAS,CAACsB;AANL,CAArB;AASA,eAAehB,QAAf"}
@@ -16,10 +16,12 @@
16
16
  z-index: 1;
17
17
  font-size: 30px;
18
18
  overflow: hidden;
19
- line-height: 20px;
19
+ line-height: 0px;
20
20
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.11);
21
21
  background-color: #ffffff;
22
22
  border-radius: 100%;
23
+ border: none;
24
+ padding: 0;
23
25
  }
24
26
 
25
27
  .favorite:hover .moreIcon {
@@ -29,10 +31,6 @@
29
31
  .favorite .moreIcon {
30
32
  color: color(black a(63%));
31
33
  transition: color 0.25s ease-in-out;
32
- margin: 6px;
33
- }
34
- .favorite .checkIcon {
35
- margin: 6px;
36
34
  }
37
35
 
38
36
  .favorite.selected .moreIcon {
@@ -47,48 +45,30 @@
47
45
  color: inherit;
48
46
  }
49
47
 
50
- .showToolTip {
51
- visibility: hidden;
52
- background-color: color(black a(80%));
53
- color: #fff;
54
- text-align: center;
55
- border-radius: 3px;
56
- z-index: 1;
57
- opacity: 0;
58
- transition: opacity 0.8s;
48
+ .favoriteWrapper {
59
49
  position: absolute;
60
- max-width: 104px;
61
- right: 45px;
62
- top: 8px;
50
+ width: 100%;
63
51
  }
64
52
 
65
- .showToolTip::after {
66
- content: "";
67
- position: absolute;
68
- top: 8px;
69
- left: 100%;
70
- border: solid 5px ;
71
- border-color: transparent transparent transparent color(black a(80%));
53
+ .favoriteWrapper .favorite + [class*="__react_component_tooltip"]:not([class*="toolTipReact"]) {
54
+ position: sticky;
55
+ top: unset !important;
56
+ left: unset !important;
57
+ transform: translateX(25%);
72
58
  }
73
59
 
74
- .blocFavorite:hover .showToolTip {
75
- visibility: visible;
76
- opacity: 1;
60
+ .favoriteWrapper .favorite + [class*="__react_component_tooltip"] {
61
+ opacity: 0.95!important;
77
62
  }
78
63
 
79
- .showToolTip span {
80
- display: block;
81
- word-wrap: break-word;
82
- padding: 3px 10px 5px;
83
- font-family: "Gilroy";
84
- font-size: 12px;
85
- font-weight: bold;
86
- }
87
64
 
88
65
  @media mobile {
89
66
  .favorite {
90
67
  font-size: 33px;
91
68
  }
69
+ .favoriteWrapper .favorite + [class*="__react_component_tooltip"]:not([class*="toolTipReact"]) {
70
+ transform: translateX(10%);
71
+ }
92
72
  }
93
73
 
94
74
  @media (hover: none) {
@@ -44,6 +44,7 @@ declare namespace Favorite {
44
44
  [x: string]: any;
45
45
  }>;
46
46
  }>>;
47
+ const translate: PropTypes.Requireable<(...args: any[]) => any>;
47
48
  }
48
49
  }
49
50
  import PropTypes from "prop-types";
@@ -1 +1 @@
1
- {"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAWA;;;;;;;;oCAoEC"}
1
+ {"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;oCA0IC"}
@@ -1,11 +1,15 @@
1
1
  import _noop from "lodash/fp/noop";
2
2
  import _isEmpty from "lodash/fp/isEmpty";
3
+ import _has from "lodash/fp/has";
3
4
  import _get from "lodash/fp/get";
4
- import React, { useCallback, useMemo } from 'react';
5
+ import React, { useCallback, useMemo, useRef, useState } from 'react';
5
6
  import PropTypes from 'prop-types';
6
7
  import classnames from 'classnames';
8
+ import { v5 as uuidV5 } from 'uuid';
7
9
  import { NovaCompositionNavigationMore as MoreIcon, NovaCompositionCoorpacademyCheck as CheckIcon } from '@coorpacademy/nova-icons';
8
- import Provider, { GetSkinFromContext } from '../../atom/provider';
10
+ import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
11
+ import ToolTip, { toggleStateOnKeyPress } from '../../atom/tooltip';
12
+ import Button from '../../atom/button';
9
13
  import style from './favorite.css';
10
14
 
11
15
  const Favorite = ({
@@ -18,6 +22,7 @@ const Favorite = ({
18
22
  disabled
19
23
  }, legacyContext) => {
20
24
  const skin = GetSkinFromContext(legacyContext);
25
+ const translate = GetTranslateFromContext(legacyContext);
21
26
  const handleFavoriteClick = useCallback(e => {
22
27
  e.stopPropagation();
23
28
  e.preventDefault();
@@ -30,26 +35,43 @@ const Favorite = ({
30
35
 
31
36
  const brandColor = _get('common.brand', skin);
32
37
 
33
- const toolTipView = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip) ? /*#__PURE__*/React.createElement("div", {
34
- className: style.showToolTip
35
- }, /*#__PURE__*/React.createElement("span", null, favorite ? removeFavoriteToolTip : addFavoriteToolTip)) : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip]);
36
- return /*#__PURE__*/React.createElement("div", {
37
- className: style.blocFavorite
38
- }, toolTipView, /*#__PURE__*/React.createElement("div", {
39
- "data-name": "favorite",
40
- "aria-label": ariaLabel.favorite,
41
- className: classnames(style.favorite, className, favorite && style.selected),
42
- onClick: handleFavoriteClick,
43
- style: {
44
- color: primaryColor
45
- }
46
- }, favorite ? /*#__PURE__*/React.createElement(CheckIcon, {
38
+ const buttonRef = useRef(null);
39
+ const allowToolTip = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip), [addFavoriteToolTip, removeFavoriteToolTip]); // to be replaced by useId when React17 is bumped to React18
40
+
41
+ const [favoriteButtonAnchorId] = useState(allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined);
42
+ const toolTipContent = useMemo( // eslint-disable-next-line no-nested-ternary
43
+ () => allowToolTip ? favorite ? removeFavoriteToolTip : addFavoriteToolTip : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]);
44
+ const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
45
+ const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
46
+ const handleMouseOver = useCallback(() => {
47
+ mouseLeaveTimer && clearTimeout(mouseLeaveTimer);
48
+ /* istanbul ignore next */
49
+
50
+ _has(['current', 'focus'], buttonRef) && buttonRef.current.focus();
51
+ setToolTipIsVisible(true);
52
+ }, [mouseLeaveTimer]);
53
+ const handleMouseLeave = useCallback(() => {
54
+ setMouseLeaveTimer(setTimeout(() => {
55
+ setToolTipIsVisible(false); // @ts-expect-error (error: blur does not exists on type never)
56
+
57
+ /* istanbul ignore next */
58
+
59
+ _has(['current', 'blur'], buttonRef) && buttonRef.current.blur();
60
+ }, 500));
61
+ }, []);
62
+ const handleKeyPress = useCallback(event => {
63
+ toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);
64
+ }, [toolTipIsVisible]);
65
+ const iconWrapperClassName = useMemo(() => classnames(style.favorite, className, favorite && style.selected), [className, favorite]);
66
+ const icon = useMemo(() => favorite ? /*#__PURE__*/React.createElement(CheckIcon // eslint-disable-next-line css-modules/no-undef-class
67
+ , {
47
68
  className: style.checkIcon,
48
69
  style: {
49
70
  color: brandColor
50
71
  },
51
72
  width: 13,
52
73
  height: 13,
74
+ "data-testid": "favorite-check-icon",
53
75
  "aria-label": ariaLabel.removeFromFavorite
54
76
  }) : /*#__PURE__*/React.createElement(MoreIcon, {
55
77
  className: style.moreIcon,
@@ -58,8 +80,40 @@ const Favorite = ({
58
80
  },
59
81
  width: 13,
60
82
  height: 13,
83
+ "data-testid": "favorite-add-icon",
61
84
  "aria-label": ariaLabel.addToFavorite
62
- })));
85
+ }), [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]);
86
+ return /*#__PURE__*/React.createElement("div", {
87
+ className: style.favoriteWrapper,
88
+ "data-testid": "favorite-wrapper"
89
+ }, /*#__PURE__*/React.createElement(Button, {
90
+ buttonRef: buttonRef,
91
+ type: "button",
92
+ "data-for": favoriteButtonAnchorId,
93
+ "data-tooltip-place": "left",
94
+ "data-tip": allowToolTip,
95
+ "data-name": "favorite",
96
+ "data-testid": "favorite-button",
97
+ "aria-label": ariaLabel.favorite,
98
+ buttonContentClassName: iconWrapperClassName,
99
+ onClick: handleFavoriteClick,
100
+ style: {
101
+ color: primaryColor
102
+ },
103
+ onKeyDown: handleKeyPress,
104
+ onMouseLeave: handleMouseLeave,
105
+ onMouseOver: handleMouseOver,
106
+ tabIndex: 0,
107
+ useButtonTag: true,
108
+ useWrapper: false
109
+ }, icon), /*#__PURE__*/React.createElement(ToolTip, {
110
+ fontSize: 12,
111
+ anchorId: favoriteButtonAnchorId,
112
+ toolTipIsVisible: toolTipIsVisible,
113
+ TooltipContent: toolTipContent,
114
+ closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
115
+ stickyOnKeyboardNavigation: true
116
+ }));
63
117
  };
64
118
 
65
119
  Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -76,7 +130,8 @@ Favorite.propTypes = process.env.NODE_ENV !== "production" ? {
76
130
  })
77
131
  } : {};
78
132
  Favorite.contextTypes = {
79
- skin: Provider.childContextTypes.skin
133
+ skin: Provider.childContextTypes.skin,
134
+ translate: Provider.childContextTypes.translate
80
135
  };
81
136
  export default Favorite;
82
137
  //# sourceMappingURL=favorite.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","PropTypes","classnames","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","disabled","legacyContext","skin","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","darkColor","brandColor","toolTipView","showToolTip","blocFavorite","selected","color","checkIcon","removeFromFavorite","moreIcon","addToFavorite","propTypes","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, noop} from 'lodash/fp';\nimport {\n NovaCompositionNavigationMore as MoreIcon,\n NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './favorite.css';\n\nconst Favorite = (\n {\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n className,\n 'aria-label': ariaLabel = {},\n onFavoriteClick = noop,\n disabled\n },\n legacyContext\n) => {\n const skin = GetSkinFromContext(legacyContext);\n const handleFavoriteClick = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (!disabled) onFavoriteClick(e);\n },\n [disabled, onFavoriteClick]\n );\n\n const primaryColor = get('common.primary', skin);\n const darkColor = get('common.dark', skin);\n const brandColor = get('common.brand', skin);\n\n const toolTipView = useMemo(\n () =>\n !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip) ? (\n <div className={style.showToolTip}>\n <span>{favorite ? removeFavoriteToolTip : addFavoriteToolTip}</span>\n </div>\n ) : null,\n [addFavoriteToolTip, favorite, removeFavoriteToolTip]\n );\n\n return (\n <div className={style.blocFavorite}>\n {toolTipView}\n <div\n data-name=\"favorite\"\n aria-label={ariaLabel.favorite}\n className={classnames(style.favorite, className, favorite && style.selected)}\n onClick={handleFavoriteClick}\n style={{\n color: primaryColor\n }}\n >\n {favorite ? (\n <CheckIcon\n className={style.checkIcon}\n style={{color: brandColor}}\n width={13}\n height={13}\n aria-label={ariaLabel.removeFromFavorite}\n />\n ) : (\n <MoreIcon\n className={style.moreIcon}\n style={{color: darkColor}}\n width={13}\n height={13}\n aria-label={ariaLabel.addToFavorite}\n />\n )}\n </div>\n </div>\n );\n};\n\nFavorite.propTypes = {\n className: PropTypes.string,\n favorite: PropTypes.bool,\n disabled: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onFavoriteClick: PropTypes.func,\n 'aria-label': PropTypes.shape({\n favorite: PropTypes.string,\n addToFavorite: PropTypes.string,\n removeFromFavorite: PropTypes.string\n })\n};\n\nFavorite.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport default Favorite;\n"],"mappings":"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"}
1
+ {"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","useRef","useState","PropTypes","classnames","v5","uuidV5","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","GetTranslateFromContext","ToolTip","toggleStateOnKeyPress","Button","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","disabled","legacyContext","skin","translate","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","darkColor","brandColor","buttonRef","allowToolTip","favoriteButtonAnchorId","URL","undefined","toolTipContent","mouseLeaveTimer","setMouseLeaveTimer","toolTipIsVisible","setToolTipIsVisible","handleMouseOver","clearTimeout","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","iconWrapperClassName","selected","icon","checkIcon","color","removeFromFavorite","moreIcon","addToFavorite","favoriteWrapper","propTypes","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport {get, has, isEmpty, noop} from 'lodash/fp';\nimport {\n NovaCompositionNavigationMore as MoreIcon,\n NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip, {toggleStateOnKeyPress} from '../../atom/tooltip';\nimport Button from '../../atom/button';\nimport style from './favorite.css';\n\nconst Favorite = (\n {\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n className,\n 'aria-label': ariaLabel = {},\n onFavoriteClick = noop,\n disabled\n },\n legacyContext\n) => {\n const skin = GetSkinFromContext(legacyContext);\n const translate = GetTranslateFromContext(legacyContext);\n const handleFavoriteClick = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (!disabled) onFavoriteClick(e);\n },\n [disabled, onFavoriteClick]\n );\n\n const primaryColor = get('common.primary', skin);\n const darkColor = get('common.dark', skin);\n const brandColor = get('common.brand', skin);\n\n const buttonRef = useRef(null);\n\n const allowToolTip = useMemo(\n () => !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip),\n [addFavoriteToolTip, removeFavoriteToolTip]\n );\n\n // to be replaced by useId when React17 is bumped to React18\n const [favoriteButtonAnchorId] = useState(\n allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n );\n\n const toolTipContent = useMemo(\n // eslint-disable-next-line no-nested-ternary\n () => (allowToolTip ? (favorite ? removeFavoriteToolTip : addFavoriteToolTip) : null),\n [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]\n );\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(\n setTimeout(() => {\n setToolTipIsVisible(false);\n // @ts-expect-error (error: blur does not exists on type never)\n /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n }, 500)\n );\n }, []);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n },\n [toolTipIsVisible]\n );\n\n const iconWrapperClassName = useMemo(\n () => classnames(style.favorite, className, favorite && style.selected),\n [className, favorite]\n );\n const icon = useMemo(\n () =>\n favorite ? (\n <CheckIcon\n // eslint-disable-next-line css-modules/no-undef-class\n className={style.checkIcon}\n style={{color: brandColor}}\n width={13}\n height={13}\n data-testid=\"favorite-check-icon\"\n aria-label={ariaLabel.removeFromFavorite}\n />\n ) : (\n <MoreIcon\n className={style.moreIcon}\n style={{color: darkColor}}\n width={13}\n height={13}\n data-testid=\"favorite-add-icon\"\n aria-label={ariaLabel.addToFavorite}\n />\n ),\n [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]\n );\n\n return (\n <div className={style.favoriteWrapper} data-testid=\"favorite-wrapper\">\n <Button\n buttonRef={buttonRef}\n type=\"button\"\n data-for={favoriteButtonAnchorId}\n data-tooltip-place=\"left\"\n data-tip={allowToolTip}\n data-name=\"favorite\"\n data-testid=\"favorite-button\"\n aria-label={ariaLabel.favorite}\n buttonContentClassName={iconWrapperClassName}\n onClick={handleFavoriteClick}\n style={{\n color: primaryColor\n }}\n onKeyDown={handleKeyPress}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n tabIndex={0}\n useButtonTag\n useWrapper={false}\n >\n {icon}\n </Button>\n <ToolTip\n fontSize={12}\n anchorId={favoriteButtonAnchorId}\n toolTipIsVisible={toolTipIsVisible}\n TooltipContent={toolTipContent}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n stickyOnKeyboardNavigation\n />\n </div>\n );\n};\n\nFavorite.propTypes = {\n className: PropTypes.string,\n favorite: PropTypes.bool,\n disabled: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onFavoriteClick: PropTypes.func,\n 'aria-label': PropTypes.shape({\n favorite: PropTypes.string,\n addToFavorite: PropTypes.string,\n removeFromFavorite: PropTypes.string\n })\n};\n\nFavorite.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default Favorite;\n"],"mappings":"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"}
@@ -8,7 +8,7 @@ import style from './selectable.css';
8
8
  const Selectable = props => {
9
9
  const {
10
10
  isSelected,
11
- hidden = false,
11
+ hidden,
12
12
  'aria-label': ariaLabel = {}
13
13
  } = props;
14
14
  if (_isUndefined(isSelected)) return null;
@@ -1 +1 @@
1
- {"version":3,"file":"selectable.js","names":["React","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidRemoveAddAddCircle1","AddIcon","NovaLineContentEditionHide","HideIcon","NovaCompositionCoorpacademyEye","ShowIcon","style","Selectable","props","isSelected","hidden","ariaLabel","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","hideIcon","hide","showIcon","show","propTypes","bool","shape","string"],"sources":["../../../src/molecule/card/selectable.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isUndefined} from 'lodash/fp';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidRemoveAddAddCircle1 as AddIcon,\n NovaLineContentEditionHide as HideIcon,\n NovaCompositionCoorpacademyEye as ShowIcon\n} from '@coorpacademy/nova-icons';\nimport style from './selectable.css';\n\nconst Selectable = props => {\n const {isSelected, hidden = false, 'aria-label': ariaLabel = {}} = props;\n\n if (isUndefined(isSelected)) return null;\n\n return (\n <div\n className={classnames(style.selectable, isSelected && style.selected, hidden && style.hidden)}\n >\n <div className={style.circle} />\n <div className={style.iconWrapper}>\n <AddIcon className={style.addIcon} aria-label={ariaLabel.select} />\n <CheckIcon className={style.checkIcon} aria-label={ariaLabel.unSelect} />\n <HideIcon className={style.hideIcon} aria-label={ariaLabel.hide} />\n <ShowIcon className={style.showIcon} aria-label={ariaLabel.show} />\n </div>\n </div>\n );\n};\n\nSelectable.propTypes = {\n isSelected: PropTypes.bool,\n hidden: PropTypes.bool,\n 'aria-label': PropTypes.shape({\n select: PropTypes.string,\n unSelect: PropTypes.string\n })\n};\n\nexport default Selectable;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,2BAA2B,IAAIC,SADjC,EAEEC,4BAA4B,IAAIC,OAFlC,EAGEC,0BAA0B,IAAIC,QAHhC,EAIEC,8BAA8B,IAAIC,QAJpC,QAKO,0BALP;AAMA,OAAOC,KAAP,MAAkB,kBAAlB;;AAEA,MAAMC,UAAU,GAAGC,KAAK,IAAI;EAC1B,MAAM;IAACC,UAAD;IAAaC,MAAM,GAAG,KAAtB;IAA6B,cAAcC,SAAS,GAAG;EAAvD,IAA6DH,KAAnE;EAEA,IAAI,aAAYC,UAAZ,CAAJ,EAA6B,OAAO,IAAP;EAE7B,oBACE;IACE,SAAS,EAAEZ,UAAU,CAACS,KAAK,CAACM,UAAP,EAAmBH,UAAU,IAAIH,KAAK,CAACO,QAAvC,EAAiDH,MAAM,IAAIJ,KAAK,CAACI,MAAjE;EADvB,gBAGE;IAAK,SAAS,EAAEJ,KAAK,CAACQ;EAAtB,EAHF,eAIE;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,OAAD;IAAS,SAAS,EAAET,KAAK,CAACU,OAA1B;IAAmC,cAAYL,SAAS,CAACM;EAAzD,EADF,eAEE,oBAAC,SAAD;IAAW,SAAS,EAAEX,KAAK,CAACY,SAA5B;IAAuC,cAAYP,SAAS,CAACQ;EAA7D,EAFF,eAGE,oBAAC,QAAD;IAAU,SAAS,EAAEb,KAAK,CAACc,QAA3B;IAAqC,cAAYT,SAAS,CAACU;EAA3D,EAHF,eAIE,oBAAC,QAAD;IAAU,SAAS,EAAEf,KAAK,CAACgB,QAA3B;IAAqC,cAAYX,SAAS,CAACY;EAA3D,EAJF,CAJF,CADF;AAaD,CAlBD;;AAoBAhB,UAAU,CAACiB,SAAX,2CAAuB;EACrBf,UAAU,EAAEb,SAAS,CAAC6B,IADD;EAErBf,MAAM,EAAEd,SAAS,CAAC6B,IAFG;EAGrB,cAAc7B,SAAS,CAAC8B,KAAV,CAAgB;IAC5BT,MAAM,EAAErB,SAAS,CAAC+B,MADU;IAE5BR,QAAQ,EAAEvB,SAAS,CAAC+B;EAFQ,CAAhB;AAHO,CAAvB;AASA,eAAepB,UAAf"}
1
+ {"version":3,"file":"selectable.js","names":["React","PropTypes","classnames","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidRemoveAddAddCircle1","AddIcon","NovaLineContentEditionHide","HideIcon","NovaCompositionCoorpacademyEye","ShowIcon","style","Selectable","props","isSelected","hidden","ariaLabel","selectable","selected","circle","iconWrapper","addIcon","select","checkIcon","unSelect","hideIcon","hide","showIcon","show","propTypes","bool","shape","string"],"sources":["../../../src/molecule/card/selectable.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isUndefined} from 'lodash/fp';\nimport {\n NovaSolidStatusCheckCircle2 as CheckIcon,\n NovaSolidRemoveAddAddCircle1 as AddIcon,\n NovaLineContentEditionHide as HideIcon,\n NovaCompositionCoorpacademyEye as ShowIcon\n} from '@coorpacademy/nova-icons';\nimport style from './selectable.css';\n\nconst Selectable = props => {\n const {isSelected, hidden, 'aria-label': ariaLabel = {}} = props;\n\n if (isUndefined(isSelected)) return null;\n\n return (\n <div\n className={classnames(style.selectable, isSelected && style.selected, hidden && style.hidden)}\n >\n <div className={style.circle} />\n <div className={style.iconWrapper}>\n <AddIcon className={style.addIcon} aria-label={ariaLabel.select} />\n <CheckIcon className={style.checkIcon} aria-label={ariaLabel.unSelect} />\n <HideIcon className={style.hideIcon} aria-label={ariaLabel.hide} />\n <ShowIcon className={style.showIcon} aria-label={ariaLabel.show} />\n </div>\n </div>\n );\n};\n\nSelectable.propTypes = {\n isSelected: PropTypes.bool,\n hidden: PropTypes.bool,\n 'aria-label': PropTypes.shape({\n select: PropTypes.string,\n unSelect: PropTypes.string\n })\n};\n\nexport default Selectable;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,2BAA2B,IAAIC,SADjC,EAEEC,4BAA4B,IAAIC,OAFlC,EAGEC,0BAA0B,IAAIC,QAHhC,EAIEC,8BAA8B,IAAIC,QAJpC,QAKO,0BALP;AAMA,OAAOC,KAAP,MAAkB,kBAAlB;;AAEA,MAAMC,UAAU,GAAGC,KAAK,IAAI;EAC1B,MAAM;IAACC,UAAD;IAAaC,MAAb;IAAqB,cAAcC,SAAS,GAAG;EAA/C,IAAqDH,KAA3D;EAEA,IAAI,aAAYC,UAAZ,CAAJ,EAA6B,OAAO,IAAP;EAE7B,oBACE;IACE,SAAS,EAAEZ,UAAU,CAACS,KAAK,CAACM,UAAP,EAAmBH,UAAU,IAAIH,KAAK,CAACO,QAAvC,EAAiDH,MAAM,IAAIJ,KAAK,CAACI,MAAjE;EADvB,gBAGE;IAAK,SAAS,EAAEJ,KAAK,CAACQ;EAAtB,EAHF,eAIE;IAAK,SAAS,EAAER,KAAK,CAACS;EAAtB,gBACE,oBAAC,OAAD;IAAS,SAAS,EAAET,KAAK,CAACU,OAA1B;IAAmC,cAAYL,SAAS,CAACM;EAAzD,EADF,eAEE,oBAAC,SAAD;IAAW,SAAS,EAAEX,KAAK,CAACY,SAA5B;IAAuC,cAAYP,SAAS,CAACQ;EAA7D,EAFF,eAGE,oBAAC,QAAD;IAAU,SAAS,EAAEb,KAAK,CAACc,QAA3B;IAAqC,cAAYT,SAAS,CAACU;EAA3D,EAHF,eAIE,oBAAC,QAAD;IAAU,SAAS,EAAEf,KAAK,CAACgB,QAA3B;IAAqC,cAAYX,SAAS,CAACY;EAA3D,EAJF,CAJF,CADF;AAaD,CAlBD;;AAoBAhB,UAAU,CAACiB,SAAX,2CAAuB;EACrBf,UAAU,EAAEb,SAAS,CAAC6B,IADD;EAErBf,MAAM,EAAEd,SAAS,CAAC6B,IAFG;EAGrB,cAAc7B,SAAS,CAAC8B,KAAV,CAAgB;IAC5BT,MAAM,EAAErB,SAAS,CAAC+B,MADU;IAE5BR,QAAQ,EAAEvB,SAAS,CAAC+B;EAFQ,CAAhB;AAHO,CAAvB;AASA,eAAepB,UAAf"}
@@ -10,5 +10,5 @@
10
10
  .dragAndDrop {
11
11
  margin-right: 16px;
12
12
  width: 202px;
13
- min-height: 183px;
13
+ height: 183px;
14
14
  }
@@ -416,16 +416,27 @@ declare namespace BrandForm {
416
416
  color: any;
417
417
  submitValue: PropTypes.Requireable<string>;
418
418
  disabled: PropTypes.Requireable<boolean>;
419
- isLinkDisabled: PropTypes.Requireable<boolean>;
420
419
  href: PropTypes.Requireable<string>;
421
420
  download: PropTypes.Requireable<boolean>;
422
421
  target: PropTypes.Requireable<string>;
423
- onClick: PropTypes.Requireable<(...args: any[]) => any>;
424
422
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
425
423
  className: PropTypes.Requireable<string>;
426
- buttonContentClassName: PropTypes.Requireable<string>;
427
424
  style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
428
425
  'data-name': PropTypes.Requireable<string>;
426
+ 'aria-label': PropTypes.Requireable<string>;
427
+ 'data-testid': PropTypes.Requireable<string>;
428
+ useButtonTag: PropTypes.Requireable<boolean>;
429
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
430
+ onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
431
+ onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
432
+ onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
433
+ buttonRef: PropTypes.Requireable<PropTypes.InferProps<{}>>;
434
+ 'data-for': PropTypes.Requireable<string>;
435
+ 'data-tooltip-place': PropTypes.Requireable<string>;
436
+ 'data-tip': PropTypes.Requireable<boolean>;
437
+ isLinkDisabled: PropTypes.Requireable<boolean>;
438
+ useWrapper: PropTypes.Requireable<boolean>;
439
+ buttonContentClassName: PropTypes.Requireable<string>;
429
440
  }> | PropTypes.InferProps<{
430
441
  buttonType: PropTypes.Requireable<string>;
431
442
  type: PropTypes.Requireable<string>;
@@ -0,0 +1,20 @@
1
+ import { FC } from 'react';
2
+ import { ViewStyle, GestureResponderEvent } from 'react-native';
3
+ export declare type Props = {
4
+ isVisible: boolean;
5
+ locales: {
6
+ title: string;
7
+ description1: string;
8
+ description2: string;
9
+ cta: string;
10
+ };
11
+ Icon?: FC<{
12
+ style: ViewStyle;
13
+ }>;
14
+ onValidate: (event: GestureResponderEvent) => void;
15
+ onCancel: (event: GestureResponderEvent) => void;
16
+ };
17
+ declare const PopinIntro: (props: Props) => JSX.Element | null;
18
+ export declare type PopinIntroProps = Props;
19
+ export default PopinIntro;
20
+ //# sourceMappingURL=index.native.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/mobile-intro-popin/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAa,SAAS,EAAyB,qBAAqB,EAAC,MAAM,cAAc,CAAC;AAUjG,oBAAY,KAAK,GAAG;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,IAAI,CAAC,EAAE,EAAE,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAC,CAAC,CAAC;IAC9B,UAAU,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD,CAAC;AAyGF,QAAA,MAAM,UAAU,UAAW,KAAK,uBA2C/B,CAAC;AAEF,oBAAY,eAAe,GAAG,KAAK,CAAC;AACpC,eAAe,UAAU,CAAC"}
@@ -0,0 +1,152 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import { StyleSheet, Text, View } from 'react-native';
3
+ import Modal from 'react-native-modal';
4
+ import { NovaSolidStatusClose as CloseIcon } from '@coorpacademy/nova-icons';
5
+ import { useTemplateContext } from '../../template/app-review/template-context';
6
+ import Touchable from '../../hoc/touchable/index.native';
7
+
8
+ const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
9
+ popin: {
10
+ position: 'absolute',
11
+ top: 0,
12
+ bottom: 0,
13
+ justifyContent: 'center',
14
+ alignItems: 'center'
15
+ },
16
+ content: {
17
+ backgroundColor: '#fff',
18
+ justifyContent: 'space-between',
19
+ alignItems: 'center',
20
+ borderRadius: 8,
21
+ paddingVertical: 24
22
+ },
23
+ iconWrapper: {
24
+ width: 100,
25
+ height: 100,
26
+ backgroundColor: '#FFEFEB',
27
+ justifyContent: 'center',
28
+ borderRadius: 60,
29
+ marginBottom: 12
30
+ },
31
+ icon: {
32
+ alignSelf: 'center',
33
+ width: 60,
34
+ height: 60,
35
+ fill: brandTheme.colors?.primary
36
+ },
37
+ title: {
38
+ textAlign: 'center',
39
+ lineHeight: 24,
40
+ fontWeight: '700',
41
+ fontSize: 20,
42
+ marginHorizontal: 24,
43
+ marginVertical: 12
44
+ },
45
+ description1: {
46
+ textAlign: 'center',
47
+ lineHeight: 19,
48
+ fontWeight: '300',
49
+ fontSize: 14,
50
+ marginHorizontal: 24,
51
+ marginVertical: 12
52
+ },
53
+ description2: {
54
+ textAlign: 'center',
55
+ lineHeight: 19,
56
+ fontWeight: '700',
57
+ fontSize: 16,
58
+ paddingHorizontal: 48,
59
+ marginVertical: 12
60
+ },
61
+ button: {
62
+ height: 44,
63
+ backgroundColor: brandTheme.colors?.primary,
64
+ borderRadius: 7,
65
+ justifyContent: 'center',
66
+ padding: 12,
67
+ paddingVertical: 12,
68
+ marginTop: 12
69
+ },
70
+ buttonText: {
71
+ alignSelf: 'center',
72
+ color: '#FFFFFF',
73
+ fontWeight: theme.fontWeight.bold,
74
+ fontFamily: 'System',
75
+ fontSize: 14,
76
+ lineHeight: 20
77
+ },
78
+ closeButton: {
79
+ position: 'absolute',
80
+ top: 0,
81
+ right: 0,
82
+ width: 45,
83
+ height: 45,
84
+ padding: 10,
85
+ flex: 1,
86
+ justifyContent: 'center',
87
+ alignItems: 'center'
88
+ },
89
+ closeIcon: {
90
+ width: '100%',
91
+ height: '100%',
92
+ fill: '#aeaeae'
93
+ }
94
+ });
95
+
96
+ const PopinIntro = props => {
97
+ const templateContext = useTemplateContext();
98
+ const [styleSheet, setStylesheet] = useState(null);
99
+ const {
100
+ brandTheme,
101
+ theme
102
+ } = templateContext;
103
+ const {
104
+ isVisible,
105
+ onValidate,
106
+ onCancel,
107
+ locales,
108
+ Icon
109
+ } = props;
110
+ useEffect(() => {
111
+ const _stylesheet = createStyleSheet(brandTheme, theme);
112
+
113
+ setStylesheet(_stylesheet);
114
+ }, [brandTheme, theme]);
115
+
116
+ if (!styleSheet) {
117
+ return null;
118
+ }
119
+
120
+ return /*#__PURE__*/React.createElement(Modal, {
121
+ isVisible: isVisible,
122
+ style: styleSheet.popin,
123
+ testID: "intro-popin"
124
+ }, /*#__PURE__*/React.createElement(View, {
125
+ style: styleSheet.content
126
+ }, Icon ? /*#__PURE__*/React.createElement(View, {
127
+ style: styleSheet.iconWrapper
128
+ }, /*#__PURE__*/React.createElement(Icon, {
129
+ style: styleSheet.icon
130
+ })) : null, /*#__PURE__*/React.createElement(Text, {
131
+ style: styleSheet.title
132
+ }, locales.title), /*#__PURE__*/React.createElement(Text, {
133
+ style: styleSheet.description1
134
+ }, locales.description1), /*#__PURE__*/React.createElement(Text, {
135
+ style: styleSheet.description2
136
+ }, locales.description2), /*#__PURE__*/React.createElement(Touchable, {
137
+ style: styleSheet.button,
138
+ onPress: onValidate,
139
+ testID: "intro-popin-validate-button"
140
+ }, /*#__PURE__*/React.createElement(Text, {
141
+ style: styleSheet.buttonText
142
+ }, locales.cta)), /*#__PURE__*/React.createElement(Touchable, {
143
+ style: styleSheet.closeButton,
144
+ onPress: onCancel,
145
+ testID: "intro-popin-cancel-button"
146
+ }, /*#__PURE__*/React.createElement(CloseIcon, {
147
+ style: styleSheet.closeIcon
148
+ }))));
149
+ };
150
+
151
+ export default PopinIntro;
152
+ //# sourceMappingURL=index.native.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.native.js","names":["React","useState","useEffect","StyleSheet","Text","View","Modal","NovaSolidStatusClose","CloseIcon","useTemplateContext","Touchable","createStyleSheet","brandTheme","theme","create","popin","position","top","bottom","justifyContent","alignItems","content","backgroundColor","borderRadius","paddingVertical","iconWrapper","width","height","marginBottom","icon","alignSelf","fill","colors","primary","title","textAlign","lineHeight","fontWeight","fontSize","marginHorizontal","marginVertical","description1","description2","paddingHorizontal","button","padding","marginTop","buttonText","color","bold","fontFamily","closeButton","right","flex","closeIcon","PopinIntro","props","templateContext","styleSheet","setStylesheet","isVisible","onValidate","onCancel","locales","Icon","_stylesheet","cta"],"sources":["../../../src/organism/mobile-intro-popin/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, FC} from 'react';\nimport {StyleSheet, ViewStyle, Text, TextStyle, View, GestureResponderEvent} from 'react-native';\nimport Modal from 'react-native-modal';\nimport {NovaSolidStatusClose as CloseIcon} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\n\nimport type {Theme} from '../../variables/theme.native';\nimport type {Brand} from '../../variables/brand.native';\n\nexport type Props = {\n isVisible: boolean;\n locales: {\n title: string;\n description1: string;\n description2: string;\n cta: string;\n };\n Icon?: FC<{style: ViewStyle}>;\n onValidate: (event: GestureResponderEvent) => void;\n onCancel: (event: GestureResponderEvent) => void;\n};\n\ntype StyleSheetType = {\n popin: ViewStyle;\n content: ViewStyle;\n icon: ViewStyle;\n iconWrapper: ViewStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n closeButton: ViewStyle;\n closeIcon: ViewStyle;\n title: TextStyle;\n description1: TextStyle;\n description2: TextStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme) =>\n StyleSheet.create({\n popin: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n justifyContent: 'center',\n alignItems: 'center'\n },\n content: {\n backgroundColor: '#fff',\n justifyContent: 'space-between',\n alignItems: 'center',\n borderRadius: 8,\n paddingVertical: 24\n },\n iconWrapper: {\n width: 100,\n height: 100,\n backgroundColor: '#FFEFEB',\n justifyContent: 'center',\n borderRadius: 60,\n marginBottom: 12\n },\n icon: {\n alignSelf: 'center',\n width: 60,\n height: 60,\n fill: brandTheme.colors?.primary\n },\n title: {\n textAlign: 'center',\n lineHeight: 24,\n fontWeight: '700',\n fontSize: 20,\n marginHorizontal: 24,\n marginVertical: 12\n },\n description1: {\n textAlign: 'center',\n lineHeight: 19,\n fontWeight: '300',\n fontSize: 14,\n marginHorizontal: 24,\n marginVertical: 12\n },\n description2: {\n textAlign: 'center',\n lineHeight: 19,\n fontWeight: '700',\n fontSize: 16,\n paddingHorizontal: 48,\n marginVertical: 12\n },\n button: {\n height: 44,\n backgroundColor: brandTheme.colors?.primary,\n borderRadius: 7,\n justifyContent: 'center',\n padding: 12,\n paddingVertical: 12,\n marginTop: 12\n },\n buttonText: {\n alignSelf: 'center',\n color: '#FFFFFF',\n fontWeight: theme.fontWeight.bold,\n fontFamily: 'System',\n fontSize: 14,\n lineHeight: 20\n },\n closeButton: {\n position: 'absolute',\n top: 0,\n right: 0,\n width: 45,\n height: 45,\n padding: 10,\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center'\n },\n closeIcon: {\n width: '100%',\n height: '100%',\n fill: '#aeaeae'\n }\n });\n\nconst PopinIntro = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {brandTheme, theme} = templateContext;\n const {isVisible, onValidate, onCancel, locales, Icon} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(brandTheme, theme);\n setStylesheet(_stylesheet);\n }, [brandTheme, theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <Modal isVisible={isVisible} style={styleSheet.popin} testID=\"intro-popin\">\n <View style={styleSheet.content}>\n {Icon ? (\n <View style={styleSheet.iconWrapper}>\n <Icon style={styleSheet.icon} />\n </View>\n ) : null}\n <Text style={styleSheet.title}>{locales.title}</Text>\n <Text style={styleSheet.description1}>{locales.description1}</Text>\n <Text style={styleSheet.description2}>{locales.description2}</Text>\n <Touchable\n style={styleSheet.button}\n onPress={onValidate}\n testID=\"intro-popin-validate-button\"\n >\n <Text style={styleSheet.buttonText}>{locales.cta}</Text>\n </Touchable>\n <Touchable\n style={styleSheet.closeButton}\n onPress={onCancel}\n testID=\"intro-popin-cancel-button\"\n >\n <CloseIcon style={styleSheet.closeIcon} />\n </Touchable>\n </View>\n </Modal>\n );\n};\n\nexport type PopinIntroProps = Props;\nexport default PopinIntro;\n"],"mappings":"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"}