@transferwise/components 0.0.0-experimental-76bb7cd → 0.0.0-experimental-54cbbb2

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 (99) hide show
  1. package/build/avatar/Avatar.js +3 -0
  2. package/build/avatar/Avatar.js.map +1 -1
  3. package/build/avatar/Avatar.mjs +3 -0
  4. package/build/avatar/Avatar.mjs.map +1 -1
  5. package/build/avatarView/AvatarView.js +170 -0
  6. package/build/avatarView/AvatarView.js.map +1 -0
  7. package/build/avatarView/AvatarView.mjs +168 -0
  8. package/build/avatarView/AvatarView.mjs.map +1 -0
  9. package/build/avatarView/NotificationDot.js +59 -0
  10. package/build/avatarView/NotificationDot.js.map +1 -0
  11. package/build/avatarView/NotificationDot.mjs +57 -0
  12. package/build/avatarView/NotificationDot.mjs.map +1 -0
  13. package/build/avatarWrapper/AvatarWrapper.js +10 -4
  14. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  15. package/build/avatarWrapper/AvatarWrapper.mjs +10 -4
  16. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  17. package/build/badge/Badge.js +16 -4
  18. package/build/badge/Badge.js.map +1 -1
  19. package/build/badge/Badge.mjs +15 -3
  20. package/build/badge/Badge.mjs.map +1 -1
  21. package/build/badge/BadgeAssets.js +60 -0
  22. package/build/badge/BadgeAssets.js.map +1 -0
  23. package/build/badge/BadgeAssets.mjs +58 -0
  24. package/build/badge/BadgeAssets.mjs.map +1 -0
  25. package/build/common/circle/Circle.js +17 -1
  26. package/build/common/circle/Circle.js.map +1 -1
  27. package/build/common/circle/Circle.mjs +17 -1
  28. package/build/common/circle/Circle.mjs.map +1 -1
  29. package/build/index.js +20 -13
  30. package/build/index.js.map +1 -1
  31. package/build/index.mjs +11 -7
  32. package/build/index.mjs.map +1 -1
  33. package/build/main.css +109 -5
  34. package/build/styles/avatarGroup/AvatarGroup.css +29 -0
  35. package/build/styles/avatarView/AvatarView.css +42 -0
  36. package/build/styles/avatarView/NotificationDot.css +20 -0
  37. package/build/styles/badge/Badge.css +6 -5
  38. package/build/styles/common/circle/Circle.css +32 -0
  39. package/build/styles/main.css +109 -5
  40. package/build/types/avatar/Avatar.d.ts +3 -0
  41. package/build/types/avatar/Avatar.d.ts.map +1 -1
  42. package/build/types/avatarGroup/AvatarGroup.d.ts +18 -0
  43. package/build/types/avatarGroup/AvatarGroup.d.ts.map +1 -0
  44. package/build/types/avatarGroup/index.d.ts +3 -0
  45. package/build/types/avatarGroup/index.d.ts.map +1 -0
  46. package/build/types/avatarView/AvatarView.d.ts +26 -0
  47. package/build/types/avatarView/AvatarView.d.ts.map +1 -0
  48. package/build/types/avatarView/NotificationDot.d.ts +8 -0
  49. package/build/types/avatarView/NotificationDot.d.ts.map +1 -0
  50. package/build/types/avatarView/index.d.ts +3 -0
  51. package/build/types/avatarView/index.d.ts.map +1 -0
  52. package/build/types/avatarWrapper/AvatarWrapper.d.ts +3 -0
  53. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  54. package/build/types/badge/Badge.d.ts +9 -4
  55. package/build/types/badge/Badge.d.ts.map +1 -1
  56. package/build/types/badge/BadgeAssets.d.ts +14 -0
  57. package/build/types/badge/BadgeAssets.d.ts.map +1 -0
  58. package/build/types/badge/index.d.ts +2 -0
  59. package/build/types/badge/index.d.ts.map +1 -1
  60. package/build/types/common/circle/Circle.d.ts +2 -0
  61. package/build/types/common/circle/Circle.d.ts.map +1 -1
  62. package/build/types/index.d.ts +3 -1
  63. package/build/types/index.d.ts.map +1 -1
  64. package/package.json +3 -3
  65. package/src/avatar/Avatar.tsx +3 -0
  66. package/src/avatarGroup/AvatarGroup.css +29 -0
  67. package/src/avatarGroup/AvatarGroup.less +42 -0
  68. package/src/avatarGroup/AvatarGroup.story.tsx +284 -0
  69. package/src/avatarGroup/AvatarGroup.tsx +117 -0
  70. package/src/avatarGroup/index.ts +2 -0
  71. package/src/avatarView/AvatarView.css +42 -0
  72. package/src/avatarView/AvatarView.less +33 -0
  73. package/src/avatarView/AvatarView.story.tsx +482 -0
  74. package/src/avatarView/AvatarView.tsx +169 -0
  75. package/src/avatarView/NotificationDot.css +20 -0
  76. package/src/avatarView/NotificationDot.less +24 -0
  77. package/src/avatarView/NotificationDot.tsx +35 -0
  78. package/src/avatarView/index.ts +2 -0
  79. package/src/avatarWrapper/AvatarWrapper.tsx +3 -0
  80. package/src/badge/Badge.css +6 -5
  81. package/src/badge/Badge.less +4 -3
  82. package/src/badge/Badge.tsx +20 -6
  83. package/src/badge/BadgeAssets.tsx +61 -0
  84. package/src/badge/index.ts +3 -0
  85. package/src/common/circle/Circle.css +32 -0
  86. package/src/common/circle/Circle.less +35 -0
  87. package/src/common/circle/Circle.tsx +22 -1
  88. package/src/decision/Decision.story.tsx +10 -46
  89. package/src/flowNavigation/FlowNavigation.story.tsx +10 -48
  90. package/src/index.ts +4 -0
  91. package/src/listItem/ListItem.story.tsx +5 -43
  92. package/src/main.css +109 -5
  93. package/src/main.less +2 -0
  94. package/src/navigationOption/NavigationOption.story.tsx +14 -65
  95. package/src/overlayHeader/OverlayHeader.story.tsx +5 -10
  96. package/src/radio/Radio.story.tsx +5 -5
  97. package/src/radioGroup/RadioGroup.story.tsx +3 -3
  98. package/src/selectOption/SelectOption.story.tsx +31 -30
  99. package/src/tile/Tile.story.tsx +2 -6
@@ -0,0 +1,8 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import { Props as AvatarViewProps } from './AvatarView';
3
+ type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
4
+ avatarSize?: AvatarViewProps['size'];
5
+ };
6
+ export default function NotificationDot({ children, avatarSize }: Props): import("react").JSX.Element;
7
+ export {};
8
+ //# sourceMappingURL=NotificationDot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationDot.d.ts","sourceRoot":"","sources":["../../../src/avatarView/NotificationDot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAExD,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9D,UAAU,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAeF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,KAAK,+BAc3E"}
@@ -0,0 +1,3 @@
1
+ export type { Props as AvatarViewProps } from './AvatarView';
2
+ export { default } from './AvatarView';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarView/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
@@ -22,6 +22,9 @@ export type AvatarWrapperProps = {
22
22
  badgeAltText?: never;
23
23
  badgeStatusIcon?: never;
24
24
  });
25
+ /**
26
+ * @deprecated Use `AvatarView` component instead
27
+ */
25
28
  declare const AvatarWrapper: ({ url, "aria-label": ariaLabel, profileType, profileId, badgeUrl, badgeAltText, badgeStatusIcon, name, avatarProps, badgeProps, }: AvatarWrapperProps) => import("react").JSX.Element;
26
29
  export default AvatarWrapper;
27
30
  //# sourceMappingURL=AvatarWrapper.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../src/avatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAGA,OAAe,EAAE,WAAW,EAAc,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EAEnB,SAAS,EAEV,MAAM,WAAW,CAAC;AAuCnB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,EAAE,SAAS,CAAC;CAC5B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,CACJ,CAAC;AAEF,QAAA,MAAM,aAAa,sIAWhB,kBAAkB,gCAoDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"AvatarWrapper.d.ts","sourceRoot":"","sources":["../../../src/avatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAGA,OAAe,EAAE,WAAW,EAAc,MAAM,WAAW,CAAC;AAC5D,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAEL,mBAAmB,EACnB,mBAAmB,EAEnB,SAAS,EAEV,MAAM,WAAW,CAAC;AAuCnB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,EAAE,SAAS,CAAC;CAC5B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB,CACJ,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,aAAa,sIAWhB,kBAAkB,gCAoDpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,19 +1,24 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { SizeSmall, SizeMedium, SizeLarge, ThemeDark, ThemeLight, CommonProps } from '../common';
3
+ import { BadgeAssetsProps } from '.';
3
4
  /**
4
- * @deprecated Use `SizeSmall` or `SizeLarge` instead.
5
+ * @deprecated Use `16` or `24` instead.
5
6
  */
6
- type DeprecatedSizes = SizeMedium;
7
+ type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
7
8
  export type BadgeProps = {
8
9
  badge: ReactNode;
9
10
  children: ReactNode;
10
11
  /**
11
12
  * `md` is deprecated, it will fallback to `sm` instead.
12
13
  */
13
- size?: SizeSmall | DeprecatedSizes | SizeLarge;
14
+ size?: DeprecatedSizes | BadgeAssetsProps['size'];
14
15
  border?: ThemeDark | ThemeLight;
15
16
  'aria-label'?: string;
17
+ style?: React.CSSProperties;
16
18
  } & CommonProps;
17
- declare const Badge: ({ badge, className, size: sizeProp, border, "aria-label": ariaLabel, children, }: BadgeProps) => import("react").JSX.Element;
19
+ /**
20
+ * @deprecated Use `<AvatarView badge={..} />` instead.
21
+ */
22
+ declare const Badge: ({ badge, className, size: sizeProp, border, "aria-label": ariaLabel, children, style, }: BadgeProps) => import("react").JSX.Element;
18
23
  export default Badge;
19
24
  //# sourceMappingURL=Badge.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,KAAK,eAAe,GAAG,UAAU,CAAC;AAElC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,WAAW,CAAC;AAEhB,QAAA,MAAM,KAAK,qFAOR,UAAU,gCAkBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { StatusIconProps } from '../statusIcon';
2
+ export type Props = {
3
+ status?: StatusIconProps['sentiment'];
4
+ flagCode?: string;
5
+ imgSrc?: string;
6
+ icon?: React.ReactNode;
7
+ type?: 'action' | 'reference';
8
+ size?: 16 | 24;
9
+ };
10
+ /**
11
+ * Common pre-built badge variants.
12
+ */
13
+ export default function BadgeAssets({ status, flagCode, imgSrc, icon, type, size, }: Props): import("react").JSX.Element | null;
14
+ //# sourceMappingURL=BadgeAssets.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAAA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAM5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,GACL,EAAE,KAAK,sCAmCP"}
@@ -1,3 +1,5 @@
1
1
  export { default } from './Badge';
2
2
  export type { BadgeProps } from './Badge';
3
+ export { default as BadgeAssets } from './BadgeAssets';
4
+ export type { Props as BadgeAssetsProps } from './BadgeAssets';
3
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
@@ -14,6 +14,7 @@ export type Props = {
14
14
  * as those can be dynamic a at certain viewport sizes
15
15
  */
16
16
  fixedSize?: boolean;
17
+ enableBorder?: boolean;
17
18
  } & HTMLAttributes<HTMLDivElement>;
18
19
  declare const Circle: import("react").ForwardRefExoticComponent<{
19
20
  /**
@@ -29,6 +30,7 @@ declare const Circle: import("react").ForwardRefExoticComponent<{
29
30
  * as those can be dynamic a at certain viewport sizes
30
31
  */
31
32
  fixedSize?: boolean;
33
+ enableBorder?: boolean;
32
34
  } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<unknown>>;
33
35
  export default Circle;
34
36
  //# sourceMappingURL=Circle.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAenC,QAAA,MAAM,MAAM;IA5BV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;4EA8CnB,CAAC;AAEH,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../../../src/common/circle/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzD,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AA4BnC,QAAA,MAAM,MAAM;IA1CV;;OAEG;SACE,KAAK,CAAC,WAAW;IACtB;;OAEG;WACI,SAAS;IAChB;;;OAGG;gBACS,OAAO;mBACJ,OAAO;4EAkEtB,CAAC;AAEH,eAAe,MAAM,CAAC"}
@@ -6,6 +6,7 @@ export type { ActionOptionProps } from './actionOption';
6
6
  export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
7
7
  export type { AlertAction, AlertProps, AlertType } from './alert';
8
8
  export type { AvatarProps } from './avatar';
9
+ export type { AvatarViewProps } from './avatarView';
9
10
  export type { BadgeProps } from './badge';
10
11
  export type { CardProps } from './card';
11
12
  export type { CarouselProps } from './carousel';
@@ -75,6 +76,7 @@ export { default as ActionOption } from './actionOption';
75
76
  export { default as SelectOption } from './selectOption';
76
77
  export { default as Alert } from './alert';
77
78
  export { default as Avatar } from './avatar';
79
+ export { default as AvatarView } from './avatarView';
78
80
  export { default as AvatarWrapper } from './avatarWrapper';
79
81
  export { default as Badge } from './badge';
80
82
  export { default as Body } from './body';
@@ -177,7 +179,7 @@ export { UploadStep } from './upload';
177
179
  /**
178
180
  * Utils
179
181
  */
180
- export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, } from './common';
182
+ export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, getInitials, getBrandColorFromSeed, } from './common';
181
183
  /**
182
184
  * Translations
183
185
  */
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-76bb7cd",
3
+ "version": "0.0.0-experimental-54cbbb2",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -93,8 +93,8 @@
93
93
  "rollup-preserve-directives": "^1.1.1",
94
94
  "storybook": "^8.2.2",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@wise/components-theming": "1.6.1",
97
- "@transferwise/neptune-css": "14.20.0"
96
+ "@transferwise/neptune-css": "14.20.0",
97
+ "@wise/components-theming": "1.6.1"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.13.1",
@@ -43,6 +43,9 @@ const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
43
43
  }
44
44
  };
45
45
 
46
+ /**
47
+ * @deprecated Use `AvatarView` component instead
48
+ */
46
49
  const Avatar: React.FC<AvatarProps> = ({
47
50
  backgroundColor = null,
48
51
  backgroundColorSeed = null,
@@ -0,0 +1,29 @@
1
+ .np-avatar-group {
2
+ display: inline-flex;
3
+ position: relative;
4
+ }
5
+ .np-avatar-group-diagonal {
6
+ width: var(--np-avatar-group-size);
7
+ height: var(--np-avatar-group-size);
8
+ }
9
+ .np-avatar-group-diagonal-mask {
10
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
11
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
12
+ }
13
+ .np-avatar-group-diagonal-child {
14
+ position: absolute;
15
+ top: var(--np-avatar-group-diagonal-child-position);
16
+ right: 0;
17
+ }
18
+ .np-avatar-group-horizontal {
19
+ height: var(--np-avatar-group-size);
20
+ }
21
+ .np-avatar-group-horizontal-mask {
22
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
23
+ mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
24
+ -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
25
+ mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
26
+ }
27
+ .np-avatar-group-horizontal-child {
28
+ margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
29
+ }
@@ -0,0 +1,42 @@
1
+ .np-avatar-group {
2
+ display: inline-flex;
3
+ position: relative;
4
+
5
+ &-diagonal {
6
+ width: var(--np-avatar-group-size);
7
+ height: var(--np-avatar-group-size);
8
+
9
+ &-mask {
10
+ mask-image: radial-gradient(
11
+ circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5)
12
+ right calc(100% - var(--np-avatar-group-size) / 1.5),
13
+ transparent 0,
14
+ transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px),
15
+ black 0
16
+ );
17
+ }
18
+
19
+ &-child {
20
+ position: absolute;
21
+ top: var(--np-avatar-group-diagonal-child-position);
22
+ right: 0;
23
+ }
24
+ }
25
+
26
+ &-horizontal {
27
+ height: var(--np-avatar-group-size);
28
+
29
+ &-mask {
30
+ mask-image: radial-gradient(
31
+ circle at top calc(100% - var(--np-avatar-group-single-size) / 2)
32
+ right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1),
33
+ transparent 0,
34
+ transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)),
35
+ black 0);
36
+ }
37
+
38
+ &-child {
39
+ margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
40
+ }
41
+ }
42
+ }
@@ -0,0 +1,284 @@
1
+ import { Meta, StoryObj } from '@storybook/react';
2
+ import AvatarGroup, { AvatarGroupProps } from '.';
3
+ import { Bank, Briefcase } from '@transferwise/icons';
4
+ import Title from '../title';
5
+ import { Flag } from '@wise/art';
6
+ import { storyConfig } from '../test-utils';
7
+ import RadioOption from '../radioOption';
8
+
9
+ export default {
10
+ title: 'Content/AvatarGroup',
11
+ } satisfies Meta<typeof AvatarGroup>;
12
+
13
+ type Story = StoryObj<typeof AvatarGroup>;
14
+
15
+ const sizes: AvatarGroupProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
16
+
17
+ export const Diagonal: Story = storyConfig(
18
+ {
19
+ render: () => (
20
+ <div
21
+ style={{
22
+ gap: '1em',
23
+ display: 'grid',
24
+ justifyContent: 'space-between',
25
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
26
+ }}
27
+ >
28
+ {sizes.map((size) => (
29
+ <div key={size}>{size}</div>
30
+ ))}
31
+
32
+ {sizes.map((size) => (
33
+ <AvatarGroup
34
+ key={size}
35
+ size={size}
36
+ orientation="diagonal"
37
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
38
+ />
39
+ ))}
40
+
41
+ {sizes.map((size) => (
42
+ <AvatarGroup
43
+ key={size}
44
+ size={size}
45
+ orientation="diagonal"
46
+ interactive
47
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
48
+ />
49
+ ))}
50
+
51
+ {sizes.map((size) => (
52
+ <AvatarGroup
53
+ key={size}
54
+ size={size}
55
+ orientation="diagonal"
56
+ avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
57
+ />
58
+ ))}
59
+
60
+ {sizes.map((size) => (
61
+ <AvatarGroup
62
+ key={size}
63
+ size={size}
64
+ orientation="diagonal"
65
+ interactive
66
+ avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
67
+ />
68
+ ))}
69
+
70
+ {sizes.map((size) => (
71
+ <AvatarGroup
72
+ key={size}
73
+ size={size}
74
+ orientation="diagonal"
75
+ avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
76
+ />
77
+ ))}
78
+
79
+ {sizes.map((size) => (
80
+ <AvatarGroup
81
+ key={size}
82
+ size={size}
83
+ orientation="diagonal"
84
+ interactive
85
+ avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
86
+ />
87
+ ))}
88
+
89
+ {sizes.map((size) => (
90
+ <AvatarGroup
91
+ key={size}
92
+ size={size}
93
+ orientation="diagonal"
94
+ avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
95
+ />
96
+ ))}
97
+
98
+ {sizes.map((size) => (
99
+ <AvatarGroup
100
+ key={size}
101
+ size={size}
102
+ orientation="diagonal"
103
+ interactive
104
+ avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
105
+ />
106
+ ))}
107
+ </div>
108
+ ),
109
+ },
110
+ { variants: ['light', 'dark'] },
111
+ );
112
+
113
+ export const Horizontal: Story = storyConfig(
114
+ {
115
+ render: () => (
116
+ <div
117
+ style={{
118
+ gap: '1em',
119
+ display: 'grid',
120
+ justifyContent: 'space-between',
121
+ gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
122
+ }}
123
+ >
124
+ {sizes.map((size) => (
125
+ <div key={size}>{size}</div>
126
+ ))}
127
+
128
+ {sizes.map((size) => (
129
+ <AvatarGroup
130
+ key={size}
131
+ size={size}
132
+ orientation="horizontal"
133
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
134
+ />
135
+ ))}
136
+
137
+ {sizes.map((size) => (
138
+ <AvatarGroup
139
+ key={size}
140
+ size={size}
141
+ orientation="horizontal"
142
+ interactive
143
+ avatars={[{ profileName: 'Jay Jay' }, { profileName: 'Amy Amy' }]}
144
+ />
145
+ ))}
146
+
147
+ {sizes.map((size) => (
148
+ <AvatarGroup
149
+ key={size}
150
+ size={size}
151
+ orientation="horizontal"
152
+ avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
153
+ />
154
+ ))}
155
+
156
+ {sizes.map((size) => (
157
+ <AvatarGroup
158
+ key={size}
159
+ size={size}
160
+ orientation="horizontal"
161
+ interactive
162
+ avatars={[{ asset: <Briefcase size="16" /> }, { asset: <Bank size="16" /> }]}
163
+ />
164
+ ))}
165
+
166
+ {sizes.map((size) => (
167
+ <AvatarGroup
168
+ key={size}
169
+ size={size}
170
+ orientation="horizontal"
171
+ avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
172
+ />
173
+ ))}
174
+
175
+ {sizes.map((size) => (
176
+ <AvatarGroup
177
+ key={size}
178
+ size={size}
179
+ orientation="horizontal"
180
+ interactive
181
+ avatars={[{ asset: <Flag code="EU" /> }, { asset: <Flag code="GB" /> }]}
182
+ />
183
+ ))}
184
+
185
+ {sizes.map((size) => (
186
+ <AvatarGroup
187
+ key={size}
188
+ size={size}
189
+ orientation="horizontal"
190
+ avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
191
+ />
192
+ ))}
193
+
194
+ {sizes.map((size) => (
195
+ <AvatarGroup
196
+ key={size}
197
+ size={size}
198
+ orientation="horizontal"
199
+ interactive
200
+ avatars={[{ imgSrc: './avatar-square-dude.webp' }, { imgSrc: './tapestry-01.png' }]}
201
+ />
202
+ ))}
203
+ </div>
204
+ ),
205
+ },
206
+ { variants: ['light', 'dark'] },
207
+ );
208
+
209
+ export const Option: Story = storyConfig(
210
+ {
211
+ render: () => (
212
+ <RadioOption
213
+ id="test"
214
+ name="foo"
215
+ title="Personal account"
216
+ showMediaCircle={false}
217
+ media={
218
+ <AvatarGroup
219
+ size={48}
220
+ orientation="diagonal"
221
+ avatars={[{ asset: 'AA' }, { asset: 'BB' }]}
222
+ />
223
+ }
224
+ onChange={() => {}}
225
+ />
226
+ ),
227
+ },
228
+ { variants: ['light', 'dark'] },
229
+ );
230
+
231
+ export const EdgeInstances: Story = storyConfig(
232
+ {
233
+ render: () => (
234
+ <>
235
+ <AvatarGroup
236
+ size={72}
237
+ orientation="horizontal"
238
+ avatars={[
239
+ { asset: <Flag code="br" /> },
240
+ { asset: <Flag code="eu" /> },
241
+ { asset: <Flag code="us" /> },
242
+ { asset: '5+' },
243
+ ]}
244
+ />
245
+
246
+ <br />
247
+
248
+ <AvatarGroup
249
+ size={72}
250
+ orientation="horizontal"
251
+ avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="jp" /> }, { asset: '9+' }]}
252
+ />
253
+
254
+ <br />
255
+
256
+ <AvatarGroup
257
+ orientation="horizontal"
258
+ interactive
259
+ avatars={[
260
+ { asset: <Flag code="eu" /> },
261
+ { asset: '9+', style: { border: '1px dashed var(--color-border-neutral)' } },
262
+ ]}
263
+ />
264
+
265
+ <br />
266
+
267
+ <AvatarGroup
268
+ orientation="horizontal"
269
+ interactive
270
+ avatars={[
271
+ { imgSrc: '../avatar-squere-dude.webp' },
272
+ { asset: null, style: { border: '1px dashed var(--color-border-neutral)' } },
273
+ ]}
274
+ />
275
+ </>
276
+ ),
277
+ },
278
+ {
279
+ variants: [
280
+ 'light',
281
+ // 'dark'
282
+ ],
283
+ },
284
+ );