@wireapp/react-ui-kit 9.4.3 → 9.5.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 (7) hide show
  1. package/lib/Form/Tooltip.d.ts +3 -7
  2. package/lib/Form/Tooltip.d.ts.map +1 -1
  3. package/lib/Form/Tooltip.js +92 -35
  4. package/lib/Theme/Theme.d.ts +4 -0
  5. package/lib/Theme/Theme.d.ts.map +1 -1
  6. package/lib/Theme/Theme.js +12 -0
  7. package/package.json +3 -2
package/lib/Form/Tooltip.d.ts CHANGED
@@ -1,12 +1,8 @@
1
1
  import * as React from 'react';
2
2
  interface ToolTipProps<T = HTMLDivElement> extends React.HTMLProps<T> {
3
- bottom?: boolean;
4
- disabled?: boolean;
5
- left?: boolean;
6
- light?: boolean;
7
- right?: boolean;
8
- text?: string;
3
+ position?: 'top' | 'right' | 'left' | 'bottom';
4
+ body: React.ReactNode;
9
5
  }
10
- export declare const Tooltip: ({ text, ...props }: ToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
6
+ export declare const Tooltip: ({ children, ...props }: ToolTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
11
7
  export {};
12
8
  //# sourceMappingURL=Tooltip.d.ts.map
package/lib/Form/Tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAgDD,eAAO,MAAM,OAAO,uBAA2B,YAAY,qDAE1D,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Form/Tooltip.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,YAAY,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAiGD,eAAO,MAAM,OAAO,2BAA0B,YAAY,qDAkBzD,CAAC"}
package/lib/Form/Tooltip.js CHANGED
@@ -13,47 +13,104 @@ var __rest = (this && this.__rest) || function (s, e) {
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  exports.Tooltip = void 0;
15
15
  const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
16
- const Identity_1 = require("../Identity");
17
16
  const util_1 = require("../util");
18
- const tooltipStyle = ({ disabled = false, bottom = false, left = false, right = false, light = false, }) => ({
19
- '&::after': {
20
- backgroundColor: light ? Identity_1.COLOR.WHITE : Identity_1.COLOR.TEXT,
21
- borderRadius: '4px',
22
- bottom: bottom || left || right ? 'auto' : 'calc(100% + 8px)',
23
- boxShadow: '0 2px 16px 0 rgba(0, 0, 0, 0.12)',
24
- color: light ? Identity_1.COLOR.TEXT : Identity_1.COLOR.WHITE,
25
- content: 'attr(data-text)',
26
- display: 'block',
27
- fontSize: '0.75rem',
28
- fontWeight: light ? 400 : 600,
29
- left: right ? 'calc(100% + 8px)' : 'auto',
30
- lineHeight: '0.875rem',
31
- maxWidth: '200px',
32
- minWidth: '120px',
17
+ const tooltipStyle = theme => ({
18
+ position: 'relative',
19
+ width: 'fit-content',
20
+ '&:hover .tooltip-content': { visibility: 'visible', opacity: 1 },
21
+ '.tooltip-content': {
22
+ textAlign: 'center',
23
+ visibility: 'hidden',
33
24
  opacity: 0,
34
- padding: '12px',
35
- pointerEvents: 'none',
25
+ width: 'max-content',
26
+ height: 'max-content',
36
27
  position: 'absolute',
37
- right: left ? 'calc(100% + 8px)' : 'auto',
38
- textAlign: 'center',
39
- top: bottom ? 'calc(100% + 8px)' : 'auto',
40
- transform: left || right ? `translateX(${left ? -16 : 16}px)` : `translateY(${bottom ? -16 : 16}px)`,
41
- transition: 'all 0.15s ease-in-out',
28
+ boxSizing: 'border-box',
29
+ display: 'block',
30
+ margin: '0 auto',
31
+ padding: '4px 8px',
32
+ backgroundColor: theme.Tooltip.backgroundColor,
33
+ color: theme.Tooltip.color,
34
+ borderRadius: 4,
35
+ fontSize: theme.fontSizes.small,
36
+ fontWeight: 500,
37
+ whiteSpace: 'nowrap',
38
+ transition: 'opacity ease-out 150ms, bottom ease-out 150ms',
39
+ boxShadow: '1px 2px 6px rgba(0, 0, 0, 0.3)',
42
40
  },
43
- '&:hover::after': disabled || {
44
- opacity: 1,
45
- transform: 'translateY(0) translateX(0)',
46
- transition: 'all 0.25s ease-in-out',
41
+ '& .tooltip-content .tooltip-arrow': {
42
+ position: 'absolute',
43
+ width: 0,
44
+ height: 0,
45
+ },
46
+ "&[data-position='top'] .tooltip-content": {
47
+ bottom: '100%',
48
+ marginBottom: 10,
49
+ left: '50%',
50
+ transform: 'translateX(-50%)',
51
+ '& .tooltip-arrow': {
52
+ filter: 'drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.1))',
53
+ borderLeft: '12px solid transparent',
54
+ borderRight: '12px solid transparent',
55
+ borderTop: `12px solid ${theme.Tooltip.backgroundColor}`,
56
+ top: '90%',
57
+ left: '50%',
58
+ transform: 'translateX(-50%)',
59
+ },
60
+ },
61
+ "&[data-position='right'] .tooltip-content": {
62
+ left: '100%',
63
+ marginLeft: '8px !important',
64
+ top: 0,
65
+ bottom: 0,
66
+ margin: 'auto 0',
67
+ '& .tooltip-arrow': {
68
+ filter: 'drop-shadow(-2px 0px 1px rgba(0, 0, 0, 0.1))',
69
+ borderTop: '8px solid transparent',
70
+ borderBottom: '8px solid transparent',
71
+ borderRight: `8px solid ${theme.Tooltip.backgroundColor}`,
72
+ top: '50%',
73
+ transform: 'translateY(-50%)',
74
+ left: -7,
75
+ },
76
+ },
77
+ "&[data-position='bottom'] .tooltip-content": {
78
+ top: '100%',
79
+ marginTop: 10,
80
+ left: '50%',
81
+ transform: 'translateX(-50%)',
82
+ '& .tooltip-arrow': {
83
+ filter: 'drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1))',
84
+ borderLeft: '12px solid transparent',
85
+ borderRight: '12px solid transparent',
86
+ borderBottom: `12px solid ${theme.Tooltip.backgroundColor}`,
87
+ bottom: '90%',
88
+ left: '50%',
89
+ transform: 'translateX(-50%)',
90
+ },
91
+ },
92
+ "&[data-position='left'] .tooltip-content": {
93
+ right: '100%',
94
+ marginRight: '8px !important',
95
+ top: 0,
96
+ bottom: 0,
97
+ margin: 'auto 0',
98
+ '& .tooltip-arrow': {
99
+ filter: 'drop-shadow(2px 0px 1px rgba(0, 0, 0, 0.1))',
100
+ borderTop: '8px solid transparent',
101
+ borderBottom: '8px solid transparent',
102
+ borderLeft: `8px solid ${theme.Tooltip.backgroundColor}`,
103
+ top: '50%',
104
+ transform: 'translateY(-50%)',
105
+ right: -7,
106
+ },
47
107
  },
48
- alignItems: 'center',
49
- display: 'flex',
50
- flexDirection: 'column',
51
- justifyContent: 'center',
52
- position: 'relative',
53
108
  });
54
- const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['bottom', 'disabled', 'left', 'light', 'right']);
109
+ const filterTooltipProps = (props) => (0, util_1.filterProps)(props, ['position', 'body']);
55
110
  const Tooltip = (_a) => {
56
- var { text = '' } = _a, props = __rest(_a, ["text"]);
57
- return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: tooltipStyle(props), "data-text": text }, filterTooltipProps(props))));
111
+ var { children } = _a, props = __rest(_a, ["children"]);
112
+ const filteredProps = filterTooltipProps(props);
113
+ const { body, position = 'top' } = props;
114
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => tooltipStyle(theme), "data-position": position }, filteredProps, { "data-testid": "tooltip-wrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "tooltip-content", "data-testid": "tooltip-content" }, { children: [body, (0, jsx_runtime_1.jsx)("div", { className: "tooltip-arrow" })] })), children] })));
58
115
  };
59
116
  exports.Tooltip = Tooltip;
package/lib/Theme/Theme.d.ts CHANGED
@@ -66,6 +66,10 @@ export interface Theme extends ETheme {
66
66
  thumb: string;
67
67
  trackBg: string;
68
68
  };
69
+ Tooltip: {
70
+ backgroundColor: string;
71
+ color: string;
72
+ };
69
73
  Input: {
70
74
  backgroundColor: string;
71
75
  backgroundColorDisabled: string;
package/lib/Theme/Theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAwC,KAAK,IAAI,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAOtF,oBAAY,QAAQ;IAClB,IAAI,eAAe;IACnB,KAAK,gBAAgB;IACrB,OAAO,kBAAkB;CAC1B;AAED,MAAM,WAAW,KAAM,SAAQ,MAAM;IACnC,SAAS,EAAE;QACT,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,mBAAmB,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,oBAAoB,EAAE,MAAM,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,EAAE;QACV,oBAAoB,EAAE,MAAM,CAAC;QAC7B,gBAAgB,EAAE,MAAM,CAAC;QACzB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,0BAA0B,EAAE,MAAM,CAAC;QACnC,uBAAuB,EAAE,MAAM,CAAC;QAChC,0BAA0B,EAAE,MAAM,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,mBAAmB,EAAE;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE;QACL,eAAe,EAAE,MAAM,CAAC;QACxB,uBAAuB,EAAE,MAAM,CAAC;QAChC,gBAAgB,EAAE,MAAM,CAAC;QACzB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,MAAM,EAAE;QACN,aAAa,EAAE,MAAM,CAAC;QACtB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,WAAW,EAAE,MAAM,CAAC;QACpB,uBAAuB,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,MAAM,CAAC;QACtB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH;AAED,eAAO,MAAM,MAAM,EAAE;KAAE,OAAO,IAAI,QAAQ,GAAG,KAAK;CAmNjD,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,cAAc,CAAE,SAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,UAAW,UAAU,qDAA4D,CAAC"}
1
+ {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"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"}
package/lib/Theme/Theme.js CHANGED
@@ -74,6 +74,10 @@ exports.themes = {
74
74
  optionHoverBg: 'var(--accent-color-highlight)',
75
75
  selectedActiveBg: 'var(--button-primary-hover)',
76
76
  },
77
+ Tooltip: {
78
+ backgroundColor: 'var(--button-tertiary-bg)',
79
+ color: 'var(--main-color)',
80
+ },
77
81
  general: {
78
82
  backgroundColor: 'var(--app-bg)',
79
83
  color: 'var(--main-color)',
@@ -144,6 +148,10 @@ exports.themes = {
144
148
  optionHoverBg: 'var(--accent-color-highlight)',
145
149
  selectedActiveBg: 'var(--button-primary-hover)',
146
150
  },
151
+ Tooltip: {
152
+ backgroundColor: colors_1.COLOR.WHITE,
153
+ color: colors_1.COLOR.TEXT,
154
+ },
147
155
  general: {
148
156
  backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
149
157
  color: colors_1.COLOR.TEXT,
@@ -214,6 +222,10 @@ exports.themes = {
214
222
  optionHoverBg: 'var(--accent-color-highlight)',
215
223
  selectedActiveBg: 'var(--button-primary-active)',
216
224
  },
225
+ Tooltip: {
226
+ backgroundColor: colors_1.COLOR.TEXT,
227
+ color: colors_1.COLOR.WHITE,
228
+ },
217
229
  general: {
218
230
  backgroundColor: colors_1.COLOR.BLACK,
219
231
  color: colors_1.COLOR.WHITE,
package/package.json CHANGED
@@ -28,6 +28,7 @@
28
28
  "@swc/jest": "^0.2.23",
29
29
  "@testing-library/jest-dom": "5.16.5",
30
30
  "@testing-library/react": "14.0.0",
31
+ "@testing-library/user-event": "14.4.3",
31
32
  "@types/jest": "^29.2.0",
32
33
  "@types/node": "^18.11.5",
33
34
  "@types/react": "^18.0.25",
@@ -69,6 +70,6 @@
69
70
  "test:watch": "jest --watch",
70
71
  "test:update": "jest --updateSnapshot"
71
72
  },
72
- "version": "9.4.3",
73
- "gitHead": "425f6665134c206cfbc6414802cd0eb84e3fe36c"
73
+ "version": "9.5.0",
74
+ "gitHead": "d92eced953aebaf09ced14e52461ba3af7df3ba3"
74
75
  }