@redocly/theme 0.1.28 → 0.1.29
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.
- package/CopyButton/CopyButtonWrapper.js +1 -1
- package/Profile/Profile.d.ts +8 -0
- package/Profile/Profile.js +60 -0
- package/Profile/index.d.ts +2 -0
- package/Profile/index.js +5 -0
- package/Tooltip/Tooltip.d.ts +5 -4
- package/Tooltip/Tooltip.js +43 -21
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +1 -1
- package/src/CopyButton/CopyButtonWrapper.tsx +1 -1
- package/src/Profile/Profile.tsx +91 -0
- package/src/Profile/index.ts +2 -0
- package/src/Tooltip/Tooltip.tsx +87 -63
- package/src/index.ts +1 -0
- package/src/utils/color.ts +9 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/theme-helpers.ts +3 -1
- package/utils/color.d.ts +2 -0
- package/utils/color.js +12 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/theme-helpers.js +3 -1
|
@@ -44,7 +44,7 @@ function CopyButtonWrapperComponent(_a) {
|
|
|
44
44
|
showTooltip();
|
|
45
45
|
};
|
|
46
46
|
var renderCopyButton = function () {
|
|
47
|
-
return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser',
|
|
47
|
+
return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened },
|
|
48
48
|
react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
|
|
49
49
|
};
|
|
50
50
|
return children({ renderCopyButton: renderCopyButton });
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
|
+
if (k2 === undefined) k2 = k;
|
|
8
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
9
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
10
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
11
|
+
}
|
|
12
|
+
Object.defineProperty(o, k2, desc);
|
|
13
|
+
}) : (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
o[k2] = m[k];
|
|
16
|
+
}));
|
|
17
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
18
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
19
|
+
}) : function(o, v) {
|
|
20
|
+
o["default"] = v;
|
|
21
|
+
});
|
|
22
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
23
|
+
if (mod && mod.__esModule) return mod;
|
|
24
|
+
var result = {};
|
|
25
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
26
|
+
__setModuleDefault(result, mod);
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
+
exports.Profile = void 0;
|
|
31
|
+
var react_1 = __importStar(require("react"));
|
|
32
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
33
|
+
var utils_1 = require("../utils");
|
|
34
|
+
var RANDOM_BG_COLOR = (0, utils_1.getRandomColor)();
|
|
35
|
+
function ProfileComponent(_a) {
|
|
36
|
+
var _b;
|
|
37
|
+
var name = _a.name, imageUrl = _a.imageUrl, onClick = _a.onClick, color = _a.color;
|
|
38
|
+
if (imageUrl) {
|
|
39
|
+
return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
|
|
40
|
+
react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
|
|
41
|
+
imageUrl && (react_1.default.createElement(AvatarWrapper, null,
|
|
42
|
+
react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
|
|
43
|
+
}
|
|
44
|
+
var avatarLetters = "".concat(name.charAt(0).toUpperCase()).concat(((_b = name.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.charAt(0).toUpperCase()) || '');
|
|
45
|
+
return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
|
|
46
|
+
react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
|
|
47
|
+
react_1.default.createElement(AvatarWrapper, { background: RANDOM_BG_COLOR },
|
|
48
|
+
react_1.default.createElement("span", null, avatarLetters))));
|
|
49
|
+
}
|
|
50
|
+
exports.Profile = (0, react_1.memo)(ProfileComponent);
|
|
51
|
+
var ProfileWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n width: auto;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n width: auto;\n"])));
|
|
52
|
+
var StyledUserName = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
53
|
+
var color = _a.color;
|
|
54
|
+
return color || 'var(--color-content)';
|
|
55
|
+
});
|
|
56
|
+
var AvatarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n overflow: hidden;\n position: relative;\n font-size: 1.25rem;\n align-items: center;\n flex-shrink: 0;\n line-height: 1;\n user-select: none;\n border-radius: 50%;\n justify-content: center;\n margin-left: 16px;\n\n ", "\n\n & > img {\n color: transparent;\n width: 100%;\n height: 100%;\n object-fit: cover;\n text-align: center;\n text-indent: 10000px;\n }\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n overflow: hidden;\n position: relative;\n font-size: 1.25rem;\n align-items: center;\n flex-shrink: 0;\n line-height: 1;\n user-select: none;\n border-radius: 50%;\n justify-content: center;\n margin-left: 16px;\n\n ", "\n\n & > img {\n color: transparent;\n width: 100%;\n height: 100%;\n object-fit: cover;\n text-align: center;\n text-indent: 10000px;\n }\n"])), function (_a) {
|
|
57
|
+
var background = _a.background;
|
|
58
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n span {\n color: ", ";\n filter: invert(100%);\n }\n "], ["\n background-color: ", ";\n span {\n color: ", ";\n filter: invert(100%);\n }\n "])), background, background);
|
|
59
|
+
});
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/Profile/index.js
ADDED
package/Tooltip/Tooltip.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import type { PropsWithChildren } from 'react';
|
|
1
|
+
import type { PropsWithChildren, ReactNode } from 'react';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
export interface TooltipProps {
|
|
4
|
-
tip: string;
|
|
5
|
-
|
|
4
|
+
tip: string | ReactNode;
|
|
5
|
+
isOpen?: boolean;
|
|
6
|
+
withArrow?: boolean;
|
|
6
7
|
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
7
8
|
className?: string;
|
|
8
9
|
width?: string;
|
|
9
10
|
dataTestId?: string;
|
|
10
11
|
}
|
|
11
|
-
export declare function TooltipComponent({ children,
|
|
12
|
+
export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, }: PropsWithChildren<TooltipProps>): JSX.Element;
|
|
12
13
|
export declare const Tooltip: React.NamedExoticComponent<PropsWithChildren<TooltipProps>>;
|
package/Tooltip/Tooltip.js
CHANGED
|
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
6
17
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
7
18
|
if (k2 === undefined) k2 = k;
|
|
8
19
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -32,43 +43,54 @@ var react_1 = __importStar(require("react"));
|
|
|
32
43
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
33
44
|
var hooks_1 = require("../hooks");
|
|
34
45
|
function TooltipComponent(_a) {
|
|
35
|
-
var children = _a.children,
|
|
36
|
-
var _e = (0, hooks_1.useControl)(
|
|
37
|
-
var isControlled =
|
|
46
|
+
var children = _a.children, isOpen = _a.isOpen, tip = _a.tip, _b = _a.withArrow, withArrow = _b === void 0 ? true : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, _d = _a.className, className = _d === void 0 ? 'default' : _d, width = _a.width, dataTestId = _a.dataTestId;
|
|
47
|
+
var _e = (0, hooks_1.useControl)(isOpen), isOpened = _e.isOpened, handleOpen = _e.handleOpen, handleClose = _e.handleClose;
|
|
48
|
+
var isControlled = isOpen !== undefined;
|
|
38
49
|
(0, react_1.useEffect)(function () {
|
|
39
50
|
if (isControlled) {
|
|
40
|
-
if (
|
|
51
|
+
if (isOpen) {
|
|
41
52
|
handleOpen();
|
|
42
53
|
}
|
|
43
54
|
else {
|
|
44
55
|
handleClose();
|
|
45
56
|
}
|
|
46
57
|
}
|
|
47
|
-
}, [
|
|
48
|
-
var
|
|
49
|
-
handleOpen
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
},
|
|
54
|
-
return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" },
|
|
58
|
+
}, [isOpen, isControlled, handleOpen, handleClose]);
|
|
59
|
+
var controllers = !isControlled && {
|
|
60
|
+
onMouseEnter: handleOpen,
|
|
61
|
+
onMouseLeave: handleClose,
|
|
62
|
+
onClick: handleClose,
|
|
63
|
+
};
|
|
64
|
+
return (react_1.default.createElement(TooltipWrapper, __assign({}, controllers, { className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" }),
|
|
55
65
|
children,
|
|
56
|
-
isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId, placement: placement, width: width }, tip))));
|
|
66
|
+
isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
|
|
57
67
|
}
|
|
58
68
|
exports.TooltipComponent = TooltipComponent;
|
|
59
69
|
exports.Tooltip = (0, react_1.memo)(TooltipComponent);
|
|
60
70
|
var PLACEMENTS = {
|
|
61
|
-
top: (0, styled_components_1.css)(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
71
|
+
top: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n top: 0;\n left: 50%;\n transform: translate(-50%, -99%);\n margin-top: -10px;\n\n ", "\n "], ["\n top: 0;\n left: 50%;\n transform: translate(-50%, -99%);\n margin-top: -10px;\n\n ", "\n "])), function (_a) {
|
|
72
|
+
var withArrow = _a.withArrow;
|
|
73
|
+
return withArrow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &::after {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top-width: 6px;\n border-top-style: solid;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 99%);\n }\n "], ["\n &::after {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top-width: 6px;\n border-top-style: solid;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 99%);\n }\n "])));
|
|
74
|
+
}),
|
|
75
|
+
bottom: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 99%);\n margin-bottom: -10px;\n\n ", "\n "], ["\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 99%);\n margin-bottom: -10px;\n\n ", "\n "])), function (_a) {
|
|
76
|
+
var withArrow = _a.withArrow;
|
|
77
|
+
return withArrow && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n &::after {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom-width: 6px;\n border-bottom-style: solid;\n top: 0;\n left: 50%;\n transform: translate(-50%, -99%);\n }\n "], ["\n &::after {\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom-width: 6px;\n border-bottom-style: solid;\n top: 0;\n left: 50%;\n transform: translate(-50%, -99%);\n }\n "])));
|
|
78
|
+
}),
|
|
79
|
+
left: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: 50%;\n left: 0;\n transform: translate(-100%, -50%);\n margin-left: -10px;\n\n ", "\n "], ["\n top: 50%;\n left: 0;\n transform: translate(-100%, -50%);\n margin-left: -10px;\n\n ", "\n "])), function (_a) {
|
|
80
|
+
var withArrow = _a.withArrow;
|
|
81
|
+
return withArrow && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n &::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-left-width: 6px;\n border-left-style: solid;\n top: 50%;\n right: 0;\n transform: translate(99%, -50%);\n }\n "], ["\n &::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-left-width: 6px;\n border-left-style: solid;\n top: 50%;\n right: 0;\n transform: translate(99%, -50%);\n }\n "])));
|
|
82
|
+
}),
|
|
83
|
+
right: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n top: 50%;\n right: 0;\n transform: translate(100%, -50%);\n margin-right: -10px;\n\n ", "\n "], ["\n top: 50%;\n right: 0;\n transform: translate(100%, -50%);\n margin-right: -10px;\n\n ", "\n "])), function (_a) {
|
|
84
|
+
var withArrow = _a.withArrow;
|
|
85
|
+
return withArrow && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right-width: 6px;\n border-right-style: solid;\n top: 50%;\n left: 0;\n transform: translate(-99%, -50%);\n }\n "], ["\n &::after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right-width: 6px;\n border-right-style: solid;\n top: 50%;\n left: 0;\n transform: translate(-99%, -50%);\n }\n "])));
|
|
86
|
+
}),
|
|
65
87
|
};
|
|
66
|
-
var TooltipWrapper = styled_components_1.default.div(
|
|
67
|
-
var TooltipBody = styled_components_1.default.span(
|
|
88
|
+
var TooltipWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n"], ["\n position: relative;\n display: inline-block;\n"])));
|
|
89
|
+
var TooltipBody = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-block;\n\n position: absolute;\n text-align: center;\n\n padding: 10px 20px;\n max-width: 250px;\n white-space: normal;\n overflow-wrap: break-word;\n\n border-radius: var(--global-border-radius);\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n\n font-size: 13px;\n\n &::after {\n position: absolute;\n\n content: ' ';\n display: inline-block;\n width: 0;\n height: 0;\n border-color: var(--tooltip-background-color);\n }\n\n background: var(--tooltip-background-color);\n color: var(--tooltip-color);\n box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n width: ", ";\n ", "\n"], ["\n display: inline-block;\n\n position: absolute;\n text-align: center;\n\n padding: 10px 20px;\n max-width: 250px;\n white-space: normal;\n overflow-wrap: break-word;\n\n border-radius: var(--global-border-radius);\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n\n font-size: 13px;\n\n &::after {\n position: absolute;\n\n content: ' ';\n display: inline-block;\n width: 0;\n height: 0;\n border-color: var(--tooltip-background-color);\n }\n\n background: var(--tooltip-background-color);\n color: var(--tooltip-color);\n box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;\n\n width: ", ";\n ", "\n"])), function (_a) {
|
|
68
90
|
var width = _a.width;
|
|
69
91
|
return width || '120px';
|
|
70
92
|
}, function (_a) {
|
|
71
93
|
var placement = _a.placement;
|
|
72
|
-
return
|
|
94
|
+
return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), PLACEMENTS[placement]);
|
|
73
95
|
});
|
|
74
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
96
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -37,7 +37,7 @@ function CopyButtonWrapperComponent({
|
|
|
37
37
|
<Tooltip
|
|
38
38
|
className="copy-button"
|
|
39
39
|
tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
|
|
40
|
-
|
|
40
|
+
isOpen={tooltip.isOpened}
|
|
41
41
|
>
|
|
42
42
|
<SamplesControlButton onClick={copy} data-cy={dataTestId}>
|
|
43
43
|
Copy
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import React, { memo } from 'react';
|
|
2
|
+
import styled, { css } from 'styled-components';
|
|
3
|
+
|
|
4
|
+
import { getRandomColor } from '@theme/utils';
|
|
5
|
+
|
|
6
|
+
export interface ProfileProps {
|
|
7
|
+
name: string;
|
|
8
|
+
imageUrl?: string;
|
|
9
|
+
color?: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const RANDOM_BG_COLOR: string = getRandomColor();
|
|
14
|
+
|
|
15
|
+
function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX.Element {
|
|
16
|
+
if (imageUrl) {
|
|
17
|
+
return (
|
|
18
|
+
<ProfileWrapper onClick={onClick}>
|
|
19
|
+
<StyledUserName data-cy="user-name" color={color}>
|
|
20
|
+
{name}
|
|
21
|
+
</StyledUserName>
|
|
22
|
+
{imageUrl && (
|
|
23
|
+
<AvatarWrapper>
|
|
24
|
+
<img data-cy="user-avatar" src={imageUrl} alt="profile" />
|
|
25
|
+
</AvatarWrapper>
|
|
26
|
+
)}
|
|
27
|
+
</ProfileWrapper>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const avatarLetters = `${name.charAt(0).toUpperCase()}${
|
|
32
|
+
name.split(' ')[1]?.charAt(0).toUpperCase() || ''
|
|
33
|
+
}`;
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<ProfileWrapper onClick={onClick}>
|
|
37
|
+
<StyledUserName data-cy="user-name" color={color}>
|
|
38
|
+
{name}
|
|
39
|
+
</StyledUserName>
|
|
40
|
+
<AvatarWrapper background={RANDOM_BG_COLOR}>
|
|
41
|
+
<span>{avatarLetters}</span>
|
|
42
|
+
</AvatarWrapper>
|
|
43
|
+
</ProfileWrapper>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export const Profile = memo<ProfileProps>(ProfileComponent);
|
|
48
|
+
|
|
49
|
+
const ProfileWrapper = styled.div`
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
width: auto;
|
|
54
|
+
`;
|
|
55
|
+
|
|
56
|
+
const StyledUserName = styled.span`
|
|
57
|
+
color: ${({ color }) => color || 'var(--color-content)'};
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
const AvatarWrapper = styled.div<{ background?: string }>`
|
|
61
|
+
width: 40px;
|
|
62
|
+
height: 40px;
|
|
63
|
+
display: flex;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
position: relative;
|
|
66
|
+
font-size: 1.25rem;
|
|
67
|
+
align-items: center;
|
|
68
|
+
flex-shrink: 0;
|
|
69
|
+
line-height: 1;
|
|
70
|
+
user-select: none;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
margin-left: 16px;
|
|
74
|
+
|
|
75
|
+
${({ background }) => css`
|
|
76
|
+
background-color: ${background};
|
|
77
|
+
span {
|
|
78
|
+
color: ${background};
|
|
79
|
+
filter: invert(100%);
|
|
80
|
+
}
|
|
81
|
+
`}
|
|
82
|
+
|
|
83
|
+
& > img {
|
|
84
|
+
color: transparent;
|
|
85
|
+
width: 100%;
|
|
86
|
+
height: 100%;
|
|
87
|
+
object-fit: cover;
|
|
88
|
+
text-align: center;
|
|
89
|
+
text-indent: 10000px;
|
|
90
|
+
}
|
|
91
|
+
`;
|
package/src/Tooltip/Tooltip.tsx
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import type { PropsWithChildren } from 'react';
|
|
2
|
-
import React, {
|
|
1
|
+
import type { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import React, { useEffect, memo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
|
|
5
5
|
import { useControl } from '@theme/hooks';
|
|
6
6
|
|
|
7
7
|
export interface TooltipProps {
|
|
8
|
-
tip: string;
|
|
9
|
-
|
|
8
|
+
tip: string | ReactNode;
|
|
9
|
+
isOpen?: boolean;
|
|
10
|
+
withArrow?: boolean;
|
|
10
11
|
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
11
12
|
className?: string;
|
|
12
13
|
width?: string;
|
|
@@ -15,46 +16,48 @@ export interface TooltipProps {
|
|
|
15
16
|
|
|
16
17
|
export function TooltipComponent({
|
|
17
18
|
children,
|
|
18
|
-
|
|
19
|
+
isOpen,
|
|
19
20
|
tip,
|
|
21
|
+
withArrow = true,
|
|
20
22
|
placement = 'top',
|
|
21
23
|
className = 'default',
|
|
22
24
|
width,
|
|
23
|
-
dataTestId
|
|
25
|
+
dataTestId,
|
|
24
26
|
}: PropsWithChildren<TooltipProps>): JSX.Element {
|
|
25
|
-
const { isOpened, handleOpen, handleClose } = useControl(
|
|
27
|
+
const { isOpened, handleOpen, handleClose } = useControl(isOpen);
|
|
26
28
|
|
|
27
|
-
const isControlled =
|
|
29
|
+
const isControlled = isOpen !== undefined;
|
|
28
30
|
|
|
29
31
|
useEffect(() => {
|
|
30
32
|
if (isControlled) {
|
|
31
|
-
if (
|
|
33
|
+
if (isOpen) {
|
|
32
34
|
handleOpen();
|
|
33
35
|
} else {
|
|
34
36
|
handleClose();
|
|
35
37
|
}
|
|
36
38
|
}
|
|
37
|
-
}, [
|
|
39
|
+
}, [isOpen, isControlled, handleOpen, handleClose]);
|
|
38
40
|
|
|
39
|
-
const
|
|
40
|
-
handleOpen
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
handleClose();
|
|
45
|
-
}, [handleClose]);
|
|
41
|
+
const controllers = !isControlled && {
|
|
42
|
+
onMouseEnter: handleOpen,
|
|
43
|
+
onMouseLeave: handleClose,
|
|
44
|
+
onClick: handleClose,
|
|
45
|
+
};
|
|
46
46
|
|
|
47
47
|
return (
|
|
48
48
|
<TooltipWrapper
|
|
49
|
-
|
|
50
|
-
onMouseLeave={isControlled ? undefined : handleLeave}
|
|
51
|
-
onClick={isControlled ? undefined : handleLeave}
|
|
49
|
+
{...controllers}
|
|
52
50
|
className={`tooltip-${className}`}
|
|
53
51
|
data-component-name="Tooltip/Tooltip"
|
|
54
52
|
>
|
|
55
53
|
{children}
|
|
56
54
|
{isOpened && (
|
|
57
|
-
<TooltipBody
|
|
55
|
+
<TooltipBody
|
|
56
|
+
data-cy={dataTestId || (typeof tip === 'string' ? tip : '')}
|
|
57
|
+
placement={placement}
|
|
58
|
+
width={width}
|
|
59
|
+
withArrow={withArrow}
|
|
60
|
+
>
|
|
58
61
|
{tip}
|
|
59
62
|
</TooltipBody>
|
|
60
63
|
)}
|
|
@@ -65,69 +68,85 @@ export function TooltipComponent({
|
|
|
65
68
|
export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
|
|
66
69
|
|
|
67
70
|
const PLACEMENTS = {
|
|
68
|
-
top: css
|
|
71
|
+
top: css<Pick<TooltipProps, 'withArrow'>>`
|
|
69
72
|
top: 0;
|
|
70
73
|
left: 50%;
|
|
71
74
|
transform: translate(-50%, -99%);
|
|
72
75
|
margin-top: -10px;
|
|
73
76
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
77
|
+
${({ withArrow }) =>
|
|
78
|
+
withArrow &&
|
|
79
|
+
css`
|
|
80
|
+
&::after {
|
|
81
|
+
border-left: 5px solid transparent;
|
|
82
|
+
border-right: 5px solid transparent;
|
|
83
|
+
border-top-width: 6px;
|
|
84
|
+
border-top-style: solid;
|
|
85
|
+
bottom: 0;
|
|
86
|
+
left: 50%;
|
|
87
|
+
transform: translate(-50%, 99%);
|
|
88
|
+
}
|
|
89
|
+
`}
|
|
83
90
|
`,
|
|
84
|
-
bottom: css
|
|
91
|
+
bottom: css<Pick<TooltipProps, 'withArrow'>>`
|
|
85
92
|
bottom: 0;
|
|
86
93
|
left: 50%;
|
|
87
94
|
transform: translate(-50%, 99%);
|
|
88
95
|
margin-bottom: -10px;
|
|
89
96
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
${({ withArrow }) =>
|
|
98
|
+
withArrow &&
|
|
99
|
+
css`
|
|
100
|
+
&::after {
|
|
101
|
+
border-left: 5px solid transparent;
|
|
102
|
+
border-right: 5px solid transparent;
|
|
103
|
+
border-bottom-width: 6px;
|
|
104
|
+
border-bottom-style: solid;
|
|
105
|
+
top: 0;
|
|
106
|
+
left: 50%;
|
|
107
|
+
transform: translate(-50%, -99%);
|
|
108
|
+
}
|
|
109
|
+
`}
|
|
99
110
|
`,
|
|
100
|
-
left: css
|
|
111
|
+
left: css<Pick<TooltipProps, 'withArrow'>>`
|
|
101
112
|
top: 50%;
|
|
102
113
|
left: 0;
|
|
103
114
|
transform: translate(-100%, -50%);
|
|
104
115
|
margin-left: -10px;
|
|
105
116
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
117
|
+
${({ withArrow }) =>
|
|
118
|
+
withArrow &&
|
|
119
|
+
css`
|
|
120
|
+
&::after {
|
|
121
|
+
border-top: 5px solid transparent;
|
|
122
|
+
border-bottom: 5px solid transparent;
|
|
123
|
+
border-left-width: 6px;
|
|
124
|
+
border-left-style: solid;
|
|
125
|
+
top: 50%;
|
|
126
|
+
right: 0;
|
|
127
|
+
transform: translate(99%, -50%);
|
|
128
|
+
}
|
|
129
|
+
`}
|
|
115
130
|
`,
|
|
116
|
-
right: css
|
|
131
|
+
right: css<Pick<TooltipProps, 'withArrow'>>`
|
|
117
132
|
top: 50%;
|
|
118
133
|
right: 0;
|
|
119
134
|
transform: translate(100%, -50%);
|
|
120
135
|
margin-right: -10px;
|
|
121
136
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
137
|
+
${({ withArrow }) =>
|
|
138
|
+
withArrow &&
|
|
139
|
+
css`
|
|
140
|
+
&::after {
|
|
141
|
+
border-top: 5px solid transparent;
|
|
142
|
+
border-bottom: 5px solid transparent;
|
|
143
|
+
border-right-width: 6px;
|
|
144
|
+
border-right-style: solid;
|
|
145
|
+
top: 50%;
|
|
146
|
+
left: 0;
|
|
147
|
+
transform: translate(-99%, -50%);
|
|
148
|
+
}
|
|
149
|
+
`}
|
|
131
150
|
`,
|
|
132
151
|
};
|
|
133
152
|
|
|
@@ -136,7 +155,9 @@ const TooltipWrapper = styled.div`
|
|
|
136
155
|
display: inline-block;
|
|
137
156
|
`;
|
|
138
157
|
|
|
139
|
-
const TooltipBody = styled.span<
|
|
158
|
+
const TooltipBody = styled.span<
|
|
159
|
+
Pick<Required<TooltipProps>, 'placement' | 'withArrow'> & { width?: string }
|
|
160
|
+
>`
|
|
140
161
|
display: inline-block;
|
|
141
162
|
|
|
142
163
|
position: absolute;
|
|
@@ -168,5 +189,8 @@ const TooltipBody = styled.span<Pick<Required<TooltipProps>, 'placement'> & { wi
|
|
|
168
189
|
box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
|
|
169
190
|
|
|
170
191
|
width: ${({ width }) => width || '120px'};
|
|
171
|
-
${({ placement }) =>
|
|
192
|
+
${({ placement }) =>
|
|
193
|
+
css`
|
|
194
|
+
${PLACEMENTS[placement]};
|
|
195
|
+
`}
|
|
172
196
|
`;
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export const getRandomNumber = (limit: number): number => Math.floor(Math.random() * limit);
|
|
2
|
+
|
|
3
|
+
export function getRandomColor(): string {
|
|
4
|
+
const h = getRandomNumber(360);
|
|
5
|
+
const s = getRandomNumber(100);
|
|
6
|
+
const l = getRandomNumber(100);
|
|
7
|
+
|
|
8
|
+
return `hsl(${h}deg, ${s}%, ${l}%)`;
|
|
9
|
+
}
|
package/src/utils/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ enum Token {
|
|
|
7
7
|
Doctype = 'doctype',
|
|
8
8
|
Cdata = 'cdata',
|
|
9
9
|
Punctuation = 'punctuation',
|
|
10
|
-
|
|
10
|
+
Property = 'property',
|
|
11
11
|
Tag = 'tag',
|
|
12
12
|
Number = 'number',
|
|
13
13
|
Constant = 'constant',
|
|
@@ -23,6 +23,8 @@ enum Token {
|
|
|
23
23
|
Url = 'url',
|
|
24
24
|
Variable = 'variable',
|
|
25
25
|
Atrule = 'atrule',
|
|
26
|
+
AttrValue = 'attr-value',
|
|
27
|
+
AttrName = 'attr-name',
|
|
26
28
|
Keyword = 'keyword',
|
|
27
29
|
Regex = 'regex',
|
|
28
30
|
Important = 'important',
|
package/utils/color.d.ts
ADDED
package/utils/color.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getRandomColor = exports.getRandomNumber = void 0;
|
|
4
|
+
var getRandomNumber = function (limit) { return Math.floor(Math.random() * limit); };
|
|
5
|
+
exports.getRandomNumber = getRandomNumber;
|
|
6
|
+
function getRandomColor() {
|
|
7
|
+
var h = (0, exports.getRandomNumber)(360);
|
|
8
|
+
var s = (0, exports.getRandomNumber)(100);
|
|
9
|
+
var l = (0, exports.getRandomNumber)(100);
|
|
10
|
+
return "hsl(".concat(h, "deg, ").concat(s, "%, ").concat(l, "%)");
|
|
11
|
+
}
|
|
12
|
+
exports.getRandomColor = getRandomColor;
|
package/utils/index.d.ts
CHANGED
package/utils/index.js
CHANGED
package/utils/theme-helpers.js
CHANGED
|
@@ -40,7 +40,7 @@ var Token;
|
|
|
40
40
|
Token["Doctype"] = "doctype";
|
|
41
41
|
Token["Cdata"] = "cdata";
|
|
42
42
|
Token["Punctuation"] = "punctuation";
|
|
43
|
-
Token["
|
|
43
|
+
Token["Property"] = "property";
|
|
44
44
|
Token["Tag"] = "tag";
|
|
45
45
|
Token["Number"] = "number";
|
|
46
46
|
Token["Constant"] = "constant";
|
|
@@ -56,6 +56,8 @@ var Token;
|
|
|
56
56
|
Token["Url"] = "url";
|
|
57
57
|
Token["Variable"] = "variable";
|
|
58
58
|
Token["Atrule"] = "atrule";
|
|
59
|
+
Token["AttrValue"] = "attr-value";
|
|
60
|
+
Token["AttrName"] = "attr-name";
|
|
59
61
|
Token["Keyword"] = "keyword";
|
|
60
62
|
Token["Regex"] = "regex";
|
|
61
63
|
Token["Important"] = "important";
|