@geneui/components 3.0.0-next-54bef25-11102024 → 3.0.0-next-524bb85-15102024
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/Charts/index.js +1 -0
- package/Counter/index.js +1 -0
- package/GeneUIProvider/index.js +1 -1
- package/Info/index.js +41 -0
- package/InfoOutline-dd2e89d9.js +29 -0
- package/Label/index.js +2 -26
- package/TextLink/index.js +16 -18
- package/index.d.ts +1 -0
- package/index.js +3 -1
- package/lib/atoms/Info/Info.d.ts +35 -0
- package/lib/atoms/Info/index.d.ts +1 -0
- package/lib/atoms/TextLink/TextLink.d.ts +70 -0
- package/lib/atoms/TextLink/index.d.ts +1 -0
- package/package.json +1 -1
package/Charts/index.js
CHANGED
|
@@ -18,6 +18,7 @@ import '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
|
18
18
|
import '../configs-00612ce0.js';
|
|
19
19
|
import '../hooks/useWindowSize.js';
|
|
20
20
|
import '../hooks/useDebounce.js';
|
|
21
|
+
import '../InfoOutline-dd2e89d9.js';
|
|
21
22
|
import '../ArrowLeft-b88e2ba8.js';
|
|
22
23
|
import '../index-a1b8ec78.js';
|
|
23
24
|
import '../GeneUIProvider/index.js';
|
package/Counter/index.js
CHANGED
|
@@ -16,6 +16,7 @@ import 'react-dom';
|
|
|
16
16
|
import '../tslib.es6-f211516f.js';
|
|
17
17
|
import '../Icon/index.js';
|
|
18
18
|
import '../_rollupPluginBabelHelpers-a83240e1.js';
|
|
19
|
+
import '../InfoOutline-dd2e89d9.js';
|
|
19
20
|
import '../ArrowLeft-b88e2ba8.js';
|
|
20
21
|
import '../useEllipsisDetection-c1c9ad94.js';
|
|
21
22
|
import '../hooks/useDebounce.js';
|
package/GeneUIProvider/index.js
CHANGED
|
@@ -1451,7 +1451,7 @@ var pgk = {
|
|
|
1451
1451
|
license: license
|
|
1452
1452
|
};
|
|
1453
1453
|
|
|
1454
|
-
var css_248z$1 = "@import \"https://fonts.googleapis.com/
|
|
1454
|
+
var css_248z$1 = "@import \"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap\";:root{--font-family:\"Open Sans\",\"Arial\",\"Helvetica Neue\",sans-serif;--hero:#1473e6;--confirm:#2bc784;--warning:#e6af57;--danger:#e64e48;--note:#fdc625;--message:#8bd779;--background:#fff;--foreground:#3d3d5f;--hero-hover:#1267cf;--hero-sc:#fff;--hero-rgb:20,115,230;--hero-sc-rgb:255,255,255;--confirm-hover:#26b276;--confirm-sc:#fff;--confirm-rgb:43,199,132;--confirm-sc-rgb:255,255,255;--warning-hover:#e3a441;--warning-sc:#fff;--warning-rgb:230,175,87;--warning-sc-rgb:255,255,255;--danger-hover:#e33832;--danger-sc:#fff;--danger-rgb:230,78,72;--danger-sc-rgb:255,255,255;--note-hover:#fdbf0c;--note-sc:#000;--note-rgb:253,198,37;--note-sc-rgb:0,0,0;--message-hover:#7ad165;--message-sc:#000;--message-rgb:139,215,121;--message-sc-rgb:0,0,0;--background-hover:#f2f2f2;--background-sc:#000;--background-rgb:255,255,255;--background-sc-rgb:0,0,0;--foreground-hover:#33334f;--foreground-sc:#fff;--foreground-rgb:61,61,95;--foreground-sc-rgb:255,255,255}.invert-colors{--background:var(--foreground);--background-hover:var(--foreground-hover);--background-sc:var(--foreground-sc);--background-rgb:var(--foreground-rgb);--background-sc-rgb:var(--foreground-sc-rgb)}*{-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:transparent;background:none;border:0;border-radius:0;margin:0;outline:0;padding:0;vertical-align:top}*,:after,:before{box-sizing:border-box}@media screen and (min-width:1024px){:not(main)::-webkit-scrollbar{height:var(--scrollbar-size,16px);width:var(--scrollbar-size,16px)}:not(main)::-webkit-scrollbar-button,:not(main)::-webkit-scrollbar-corner{display:none}:not(main)::-webkit-scrollbar-thumb{background:rgba(var(--background-sc-rgb),.05) content-box;border:var(--scrollbar-space,4px) solid #0000;border-radius:var(--scrollbar-size,16px)}:not(main)::-webkit-scrollbar-thumb:active,:not(main)::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--background-sc-rgb),.1)}:not(main)::-webkit-scrollbar-track{background:#0000}}a{color:inherit;text-decoration:none;transition:color .3s,background .3s}table{border-collapse:collapse;border-spacing:0;width:100%}img,svg{display:block;max-width:100%}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;color:inherit;display:block;font:inherit}button::input-placeholder,input::input-placeholder,optgroup::input-placeholder,select::input-placeholder,textarea::input-placeholder{font-family:inherit;opacity:1}button:placeholder,input:placeholder,optgroup:placeholder,select:placeholder,textarea:placeholder{font-family:inherit;opacity:1}button::placeholder,input::placeholder,optgroup::placeholder,select::placeholder,textarea::placeholder{font-family:inherit;opacity:1}button:input-placeholder,input:input-placeholder,optgroup:input-placeholder,select:input-placeholder,textarea:input-placeholder{font-family:inherit;opacity:1}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:var(--page-background,#f0f2f5);color:rgba(var(--background-sc-rgb),.75);font:10px/1.15 var(--font-family);height:100%;max-width:100vw}html.view-small{font-size:8.12px}html.view-normal{font-size:9.12px}html #root,html body{width:100%}body{font-size:1.4rem}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:normal}h1{font-size:3.2rem}h1.large{font-size:3.8rem}h2{font-size:2.8rem}h3{font-size:1.8rem}h4{font-size:1.6rem}h5{font-size:1.4rem}h6{font-size:1.2rem}li{display:block}.capitalize-text{text-transform:capitalize}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input::-ms-clear{display:none}.pointer-events-none{pointer-events:none}.cursor-pointer,[data-react-beautiful-dnd-drag-handle=\"0\"]{cursor:pointer}.color-danger{color:var(--danger)!important}.color-confirm{color:var(--confirm)!important}.color-hero{color:var(--hero)!important}::selection{background:rgba(var(--hero-rgb),.15);color:var(--hero)}.vertical-resizing-cursor *{cursor:col-resize!important}.vertical-resizing-cursor :not(:active){pointer-events:none}.cursor-grab{cursor:grab}.cursor-grab:active{cursor:grabbing}.m-rl-2{margin:0 .2rem}.m-tb-2{margin:.2rem 0}.m-t-2{margin-top:.2rem}.m-r-2{margin-inline-end:.2rem}.m-l-2{margin-inline-start:.2rem}.m-b-2{margin-bottom:.2rem}.m-rl-4{margin:0 .4rem}.m-tb-4{margin:.4rem 0}.m-t-4{margin-top:.4rem}.m-r-4{margin-inline-end:.4rem}.m-l-4{margin-inline-start:.4rem}.m-b-4{margin-bottom:.4rem}.m-rl-6{margin:0 .6rem}.m-tb-6{margin:.6rem 0}.m-t-6{margin-top:.6rem}.m-r-6{margin-inline-end:.6rem}.m-l-6{margin-inline-start:.6rem}.m-b-6{margin-bottom:.6rem}.m-rl-8{margin:0 .8rem}.m-tb-8{margin:.8rem 0}.m-t-8{margin-top:.8rem}.m-r-8{margin-inline-end:.8rem}.m-l-8{margin-inline-start:.8rem}.m-b-8{margin-bottom:.8rem}.m-rl-10{margin:0 1rem}.m-tb-10{margin:1rem 0}.m-t-10{margin-top:1rem}.m-r-10{margin-inline-end:1rem}.m-l-10{margin-inline-start:1rem}.m-b-10{margin-bottom:1rem}.m-rl-12{margin:0 1.2rem}.m-tb-12{margin:1.2rem 0}.m-t-12{margin-top:1.2rem}.m-r-12{margin-inline-end:1.2rem}.m-l-12{margin-inline-start:1.2rem}.m-b-12{margin-bottom:1.2rem}.m-rl-14{margin:0 1.4rem}.m-tb-14{margin:1.4rem 0}.m-t-14{margin-top:1.4rem}.m-r-14{margin-inline-end:1.4rem}.m-l-14{margin-inline-start:1.4rem}.m-b-14{margin-bottom:1.4rem}.m-rl-16{margin:0 1.6rem}.m-tb-16{margin:1.6rem 0}.m-t-16{margin-top:1.6rem}.m-r-16{margin-inline-end:1.6rem}.m-l-16{margin-inline-start:1.6rem}.m-b-16{margin-bottom:1.6rem}.m-rl-18{margin:0 1.8rem}.m-tb-18{margin:1.8rem 0}.m-t-18{margin-top:1.8rem}.m-r-18{margin-inline-end:1.8rem}.m-l-18{margin-inline-start:1.8rem}.m-b-18{margin-bottom:1.8rem}.m-rl-20{margin:0 2rem}.m-tb-20{margin:2rem 0}.m-t-20{margin-top:2rem}.m-r-20{margin-inline-end:2rem}.m-l-20{margin-inline-start:2rem}.m-b-20{margin-bottom:2rem}.m-rl-22{margin:0 2.2rem}.m-tb-22{margin:2.2rem 0}.m-t-22{margin-top:2.2rem}.m-r-22{margin-inline-end:2.2rem}.m-l-22{margin-inline-start:2.2rem}.m-b-22{margin-bottom:2.2rem}.m-rl-24{margin:0 2.4rem}.m-tb-24{margin:2.4rem 0}.m-t-24{margin-top:2.4rem}.m-r-24{margin-inline-end:2.4rem}.m-l-24{margin-inline-start:2.4rem}.m-b-24{margin-bottom:2.4rem}.m-rl-26{margin:0 2.6rem}.m-tb-26{margin:2.6rem 0}.m-t-26{margin-top:2.6rem}.m-r-26{margin-inline-end:2.6rem}.m-l-26{margin-inline-start:2.6rem}.m-b-26{margin-bottom:2.6rem}.m-rl-28{margin:0 2.8rem}.m-tb-28{margin:2.8rem 0}.m-t-28{margin-top:2.8rem}.m-r-28{margin-inline-end:2.8rem}.m-l-28{margin-inline-start:2.8rem}.m-b-28{margin-bottom:2.8rem}.m-rl-30{margin:0 3rem}.m-tb-30{margin:3rem 0}.m-t-30{margin-top:3rem}.m-r-30{margin-inline-end:3rem}.m-l-30{margin-inline-start:3rem}.m-b-30{margin-bottom:3rem}.m-rl-32{margin:0 3.2rem}.m-tb-32{margin:3.2rem 0}.m-t-32{margin-top:3.2rem}.m-r-32{margin-inline-end:3.2rem}.m-l-32{margin-inline-start:3.2rem}.m-b-32{margin-bottom:3.2rem}.m-rl-34{margin:0 3.4rem}.m-tb-34{margin:3.4rem 0}.m-t-34{margin-top:3.4rem}.m-r-34{margin-inline-end:3.4rem}.m-l-34{margin-inline-start:3.4rem}.m-b-34{margin-bottom:3.4rem}.m-rl-36{margin:0 3.6rem}.m-tb-36{margin:3.6rem 0}.m-t-36{margin-top:3.6rem}.m-r-36{margin-inline-end:3.6rem}.m-l-36{margin-inline-start:3.6rem}.m-b-36{margin-bottom:3.6rem}.m-rl-38{margin:0 3.8rem}.m-tb-38{margin:3.8rem 0}.m-t-38{margin-top:3.8rem}.m-r-38{margin-inline-end:3.8rem}.m-l-38{margin-inline-start:3.8rem}.m-b-38{margin-bottom:3.8rem}.m-rl-40{margin:0 4rem}.m-tb-40{margin:4rem 0}.m-t-40{margin-top:4rem}.m-r-40{margin-inline-end:4rem}.m-l-40{margin-inline-start:4rem}.m-b-40{margin-bottom:4rem}.m-rl-42{margin:0 4.2rem}.m-tb-42{margin:4.2rem 0}.m-t-42{margin-top:4.2rem}.m-r-42{margin-inline-end:4.2rem}.m-l-42{margin-inline-start:4.2rem}.m-b-42{margin-bottom:4.2rem}.m-rl-44{margin:0 4.4rem}.m-tb-44{margin:4.4rem 0}.m-t-44{margin-top:4.4rem}.m-r-44{margin-inline-end:4.4rem}.m-l-44{margin-inline-start:4.4rem}.m-b-44{margin-bottom:4.4rem}.m-rl-46{margin:0 4.6rem}.m-tb-46{margin:4.6rem 0}.m-t-46{margin-top:4.6rem}.m-r-46{margin-inline-end:4.6rem}.m-l-46{margin-inline-start:4.6rem}.m-b-46{margin-bottom:4.6rem}";
|
|
1455
1455
|
styleInject(css_248z$1);
|
|
1456
1456
|
|
|
1457
1457
|
var css_248z = ".ellipsis-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:focus-visible{outline:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-focus);outline-offset:var(--guit-ref-border-width-thin)}";
|
package/Info/index.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React__default, { useState, useMemo } from 'react';
|
|
2
|
+
import { c as classnames } from '../index-031ff73c.js';
|
|
3
|
+
import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
|
|
4
|
+
import { T as Tooltip } from '../index-a1b8ec78.js';
|
|
5
|
+
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
6
|
+
import '../ArrowLeft-b88e2ba8.js';
|
|
7
|
+
import '../tslib.es6-f211516f.js';
|
|
8
|
+
import 'react-dom';
|
|
9
|
+
import '../GeneUIProvider/index.js';
|
|
10
|
+
|
|
11
|
+
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .info{border-radius:var(--guit-ref-radius-3xsmall);line-height:0}[data-gene-ui-version=\"2.16.1\"] .info_appearance_default{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .info_appearance_brand{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.1\"] .info_appearance_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.1\"] .info_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
|
|
12
|
+
styleInject(css_248z);
|
|
13
|
+
|
|
14
|
+
const iconSizes = {
|
|
15
|
+
small: 24,
|
|
16
|
+
smallNudge: 20,
|
|
17
|
+
XSmall: 16
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
|
|
21
|
+
*/
|
|
22
|
+
const Info = ({ infoText, disabled, size = 'smallNudge', appearance = 'default', className }) => {
|
|
23
|
+
const [alwaysShow, setAlwaysShow] = useState(false);
|
|
24
|
+
const keyDownHandler = (event) => {
|
|
25
|
+
if (disabled)
|
|
26
|
+
return;
|
|
27
|
+
if (event.key === 'Enter') {
|
|
28
|
+
setAlwaysShow((prev) => !prev);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const handleBlur = () => !disabled && alwaysShow && setAlwaysShow(false);
|
|
32
|
+
const buttonClassNames = useMemo(() => classnames('info', className, {
|
|
33
|
+
[`info_appearance_${appearance}`]: appearance,
|
|
34
|
+
info_disabled: disabled
|
|
35
|
+
}), [appearance, className, disabled]);
|
|
36
|
+
return (React__default.createElement(Tooltip, { text: infoText, alwaysShow: alwaysShow, appearance: appearance === 'inverse' ? 'inverse' : 'default' },
|
|
37
|
+
React__default.createElement("button", { disabled: disabled, "aria-pressed": alwaysShow, className: buttonClassNames, onKeyDown: keyDownHandler, onBlur: handleBlur },
|
|
38
|
+
React__default.createElement(SvgInfoOutline, { className: "info__icon", size: iconSizes[size] }))));
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { Info as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
|
|
4
|
+
var _excluded = ["size", "color"];
|
|
5
|
+
var SvgInfoOutline = function SvgInfoOutline(_ref) {
|
|
6
|
+
var _ref$size = _ref.size,
|
|
7
|
+
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
8
|
+
_ref$color = _ref.color,
|
|
9
|
+
color = _ref$color === void 0 ? "currentColor" : _ref$color,
|
|
10
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
11
|
+
return /*#__PURE__*/React__default.createElement("svg", _extends({
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
viewBox: "0 0 24 24",
|
|
15
|
+
fill: color,
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
17
|
+
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
18
|
+
d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
|
|
19
|
+
fill: color
|
|
20
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
21
|
+
d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
|
|
22
|
+
fill: color
|
|
23
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
24
|
+
d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
|
|
25
|
+
fill: color
|
|
26
|
+
}));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { SvgInfoOutline as S };
|
package/Label/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default, { useRef } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
|
|
3
3
|
import { c as classnames } from '../index-031ff73c.js';
|
|
4
4
|
import { T as Tooltip } from '../index-a1b8ec78.js';
|
|
5
5
|
import 'prop-types';
|
|
@@ -8,36 +8,12 @@ import 'react-dom';
|
|
|
8
8
|
import '../configs-00612ce0.js';
|
|
9
9
|
import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
|
|
10
10
|
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
11
|
+
import '../ArrowLeft-b88e2ba8.js';
|
|
11
12
|
import '../tslib.es6-f211516f.js';
|
|
12
13
|
import '../GeneUIProvider/index.js';
|
|
13
14
|
import '../_commonjsHelpers-24198af3.js';
|
|
14
15
|
import '../hooks/useDebounce.js';
|
|
15
16
|
|
|
16
|
-
var _excluded = ["size", "color"];
|
|
17
|
-
var SvgInfoOutline = function SvgInfoOutline(_ref) {
|
|
18
|
-
var _ref$size = _ref.size,
|
|
19
|
-
size = _ref$size === void 0 ? 24 : _ref$size,
|
|
20
|
-
_ref$color = _ref.color,
|
|
21
|
-
color = _ref$color === void 0 ? "currentColor" : _ref$color,
|
|
22
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
return /*#__PURE__*/React__default.createElement("svg", _extends({
|
|
24
|
-
width: size,
|
|
25
|
-
height: size,
|
|
26
|
-
viewBox: "0 0 24 24",
|
|
27
|
-
fill: color,
|
|
28
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
29
|
-
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
30
|
-
d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
|
|
31
|
-
fill: color
|
|
32
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
33
|
-
d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
|
|
34
|
-
fill: color
|
|
35
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
36
|
-
d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
|
|
37
|
-
fill: color
|
|
38
|
-
}));
|
|
39
|
-
};
|
|
40
|
-
|
|
41
17
|
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .label{align-items:center;display:inline-flex;max-width:100%;min-width:0}[data-gene-ui-version=\"2.16.1\"] .label__container{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);min-width:0;width:100%}[data-gene-ui-version=\"2.16.1\"] .label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk,[data-gene-ui-version=\"2.16.1\"] .label__text{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_size_medium,[data-gene-ui-version=\"2.16.1\"] .label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_size_small,[data-gene-ui-version=\"2.16.1\"] .label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}[data-gene-ui-version=\"2.16.1\"] .label__asterisk_disabled,[data-gene-ui-version=\"2.16.1\"] .label__text_disabled{color:var(--guit-sem-color-foreground-disabled)}[data-gene-ui-version=\"2.16.1\"] .label__icon{color:var(--guit-sem-color-foreground-neutral-2);flex:0 0 auto}[data-gene-ui-version=\"2.16.1\"] .label__icon_disabled{color:var(--guit-sem-color-foreground-disabled)}";
|
|
42
18
|
styleInject(css_248z);
|
|
43
19
|
|
package/TextLink/index.js
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { c as classnames } from '../index-031ff73c.js';
|
|
3
|
+
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
*/
|
|
19
|
-
className: PropTypes.string
|
|
20
|
-
};
|
|
5
|
+
var css_248z = "[data-gene-ui-version=\"2.16.1\"] .textLink{align-items:center;border-radius:var(--guit-ref-radius-4xsmall);cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--guit-ref-spacing-3xsmall);-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.1\"] .textLink_underline .textLink__text{font-family:var(--guit-sem-font-body-medium-underline-medium-font-family);font-size:var(--guit-sem-font-body-medium-underline-medium-font-size);font-weight:var(--guit-sem-font-body-medium-underline-medium-font-weight);line-height:var(--guit-sem-font-body-medium-underline-medium-line-height);-webkit-text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration);text-decoration:var(--guit-sem-font-body-medium-underline-medium-text-decoration)}[data-gene-ui-version=\"2.16.1\"] .textLink:not(.textLink_underline) .textLink__text{font-family:var(--guit-sem-font-body-medium-default-medium-font-family);font-size:var(--guit-sem-font-body-medium-default-medium-font-size);font-weight:var(--guit-sem-font-body-medium-default-medium-font-weight);line-height:var(--guit-sem-font-body-medium-default-medium-line-height)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_primary{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_primary:hover{color:var(--guit-sem-color-foreground-brand-hover)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_primary:active{color:var(--guit-sem-color-foreground-brand-pressed)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_secondary{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_secondary:hover{color:var(--guit-sem-color-foreground-neutral-2-hover)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_secondary:active{color:var(--guit-sem-color-foreground-neutral-2-pressed)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_inverse:hover{color:var(--guit-sem-color-foreground-inverse-hover)}[data-gene-ui-version=\"2.16.1\"] .textLink_color_inverse:active{color:var(--guit-sem-color-foreground-inverse-pressed)}[data-gene-ui-version=\"2.16.1\"] .textLink_disabled{pointer-events:none}[data-gene-ui-version=\"2.16.1\"] .textLink_disabled:not(.textLink_color_inverse){color:var(--guit-sem-color-foreground-disabled)}[data-gene-ui-version=\"2.16.1\"] .textLink_disabled.textLink_color_inverse{color:var(--guit-sem-color-foreground-inverse-disabled)}[data-gene-ui-version=\"2.16.1\"] .textLink_iconBefore{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.1\"] .textLink__text{color:inherit;text-transform:capitalize}[data-gene-ui-version=\"2.16.1\"] .textLink__icon{align-items:center;display:flex;flex:0 0 auto;height:var(--guit-sem-dimension-height-small-nudge);justify-content:center;width:var(--guit-sem-dimension-width-small-nudge)}";
|
|
6
|
+
styleInject(css_248z);
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
|
|
10
|
+
*/
|
|
11
|
+
const TextLink = ({ text, href, iconBefore, rel, target = 'self', underline, appearance = 'primary', disabled, onClick, isLoading, Icon, className }) => (React__default.createElement(React__default.Fragment, null, isLoading ? (React__default.createElement("span", null, "skeleton")) : (React__default.createElement("a", Object.assign({ target: `_${target}`, rel: rel, className: classnames(`textLink textLink_color_${appearance}`, className, {
|
|
12
|
+
textLink_underline: underline,
|
|
13
|
+
textLink_disabled: disabled,
|
|
14
|
+
textLink_iconBefore: iconBefore
|
|
15
|
+
}), href: href, onClick: onClick }, (disabled && { tabIndex: -1 })),
|
|
16
|
+
React__default.createElement("span", { className: "textLink__text" }, text),
|
|
17
|
+
Icon && (React__default.createElement("span", { className: "textLink__icon" },
|
|
18
|
+
React__default.createElement(Icon, { size: 20 })))))));
|
|
21
19
|
|
|
22
20
|
export { TextLink as default };
|
package/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ export { default as LinkButton } from './lib/atoms/LinkButton/index';
|
|
|
27
27
|
export { default as HelperText } from './lib/atoms/HelperText';
|
|
28
28
|
export { default as Loader } from './lib/atoms/Loader';
|
|
29
29
|
export { default as Pill } from './lib/atoms/Pill';
|
|
30
|
+
export { default as Info } from './lib/atoms/Info';
|
|
30
31
|
export { Row, Col } from './lib/molecules/Grid';
|
|
31
32
|
export { Tab, Tabs } from './lib/molecules/Tabs';
|
|
32
33
|
export { Step, Steps } from './lib/molecules/Steps';
|
package/index.js
CHANGED
|
@@ -27,6 +27,7 @@ export { default as LinkButton } from './LinkButton/index.js';
|
|
|
27
27
|
export { default as HelperText } from './HelperText/index.js';
|
|
28
28
|
export { default as Loader } from './Loader/index.js';
|
|
29
29
|
export { default as Pill } from './Pill/index.js';
|
|
30
|
+
export { default as Info } from './Info/index.js';
|
|
30
31
|
export { Col, Row } from './Grid/index.js';
|
|
31
32
|
export { Tab, Tabs } from './Tabs/index.js';
|
|
32
33
|
export { Step, Steps } from './Steps/index.js';
|
|
@@ -128,9 +129,10 @@ export { default as useDidMount } from './hooks/useDidMount.js';
|
|
|
128
129
|
export { default as useBodyScroll } from './hooks/useBodyScroll.js';
|
|
129
130
|
export { default as useImgDownload } from './hooks/useImgDownload.js';
|
|
130
131
|
export { u as useEllipsisDetection } from './useEllipsisDetection-c1c9ad94.js';
|
|
131
|
-
import './tslib.es6-f211516f.js';
|
|
132
132
|
import './index-031ff73c.js';
|
|
133
133
|
import './style-inject.es-746bb8ed.js';
|
|
134
|
+
import './tslib.es6-f211516f.js';
|
|
135
|
+
import './InfoOutline-dd2e89d9.js';
|
|
134
136
|
import './ArrowLeft-b88e2ba8.js';
|
|
135
137
|
import './dateValidation-67caec66.js';
|
|
136
138
|
import './_commonjsHelpers-24198af3.js';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { IconProps } from '@geneui/icons';
|
|
3
|
+
import './Info.scss';
|
|
4
|
+
declare const iconSizes: Record<'small' | 'smallNudge' | 'XSmall', IconProps['size']>;
|
|
5
|
+
interface IInfoProps {
|
|
6
|
+
/**
|
|
7
|
+
* The text that will be displayed inside the tooltip when the user interacts with the info icon.
|
|
8
|
+
*/
|
|
9
|
+
infoText: string;
|
|
10
|
+
/**
|
|
11
|
+
* Disables the info icon button, preventing any interaction (click, key down, or focus).<br>
|
|
12
|
+
* When `disabled` is true, the button becomes non-interactive, and the tooltip won't be shown.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Defines the size of the info icon.<br>
|
|
17
|
+
* Possible values: `small | smallNudge | XSmall`
|
|
18
|
+
*/
|
|
19
|
+
size?: keyof typeof iconSizes;
|
|
20
|
+
/**
|
|
21
|
+
* Determines the visual appearance of the info icon.<br>
|
|
22
|
+
* Possible values: `default | brand | inverse`
|
|
23
|
+
*/
|
|
24
|
+
appearance?: 'default' | 'brand' | 'inverse';
|
|
25
|
+
/**
|
|
26
|
+
* Additional class for the parent element.<br>
|
|
27
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
|
|
33
|
+
*/
|
|
34
|
+
declare const Info: FC<IInfoProps>;
|
|
35
|
+
export { IInfoProps, Info as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { IInfoProps, default as default } from './Info';
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import './TextLink.scss';
|
|
3
|
+
interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
4
|
+
size?: 16 | 20 | 24 | 28 | 32 | 48;
|
|
5
|
+
color?: string;
|
|
6
|
+
}
|
|
7
|
+
interface ITextLinkProps {
|
|
8
|
+
/**
|
|
9
|
+
* Main visible content in the link.
|
|
10
|
+
*/
|
|
11
|
+
text: string;
|
|
12
|
+
/**
|
|
13
|
+
* The URL address where will be redirected a user.
|
|
14
|
+
*/
|
|
15
|
+
href: string;
|
|
16
|
+
/**
|
|
17
|
+
* if `Icon` provided, it will be visible after the text by default.
|
|
18
|
+
* When `true`, the icon appears before the text.
|
|
19
|
+
*/
|
|
20
|
+
iconBefore?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Specifies the relationship between the current document and the linked resource.<br>
|
|
23
|
+
* Possible values: <code> none | nofollow </code>
|
|
24
|
+
*/
|
|
25
|
+
rel?: 'none' | 'nofollow';
|
|
26
|
+
/**
|
|
27
|
+
* Specifies where to open the linked document.<br>
|
|
28
|
+
* Default is <code> self </code> <br>
|
|
29
|
+
* Possible values: <code> self | blank </code>
|
|
30
|
+
*/
|
|
31
|
+
target?: 'self' | 'blank';
|
|
32
|
+
/**
|
|
33
|
+
* Determines whether to underline the link text.
|
|
34
|
+
* When `true`, the text will be underlined.
|
|
35
|
+
*/
|
|
36
|
+
underline?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Specifies the appearance of the link. <br>
|
|
39
|
+
* Possible values: <code>primary | secondary | inverse </code>
|
|
40
|
+
*/
|
|
41
|
+
appearance?: 'primary' | 'secondary' | 'inverse';
|
|
42
|
+
/**
|
|
43
|
+
* When `true`, the link is disabled and not clickable.
|
|
44
|
+
*/
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Function that will called after user click or press enter button.
|
|
48
|
+
* Receives the event as an argument.
|
|
49
|
+
*/
|
|
50
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
51
|
+
/**
|
|
52
|
+
* Indicates whether the component is in a loading state.
|
|
53
|
+
* When set to `true` a skeleton indicator will be shown instead of the component.
|
|
54
|
+
*/
|
|
55
|
+
isLoading?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* An optional icon to display alongside the link text.
|
|
58
|
+
*/
|
|
59
|
+
Icon?: React.FC<IconProps>;
|
|
60
|
+
/**
|
|
61
|
+
* Additional class for the parent element.
|
|
62
|
+
* This prop should be used to set placement properties for the element relative to its parent using BEM conventions.
|
|
63
|
+
*/
|
|
64
|
+
className?: string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* A link is styled text that navigates users to another location, either within the current experience or to a different app or website.
|
|
68
|
+
*/
|
|
69
|
+
declare const TextLink: FC<ITextLinkProps>;
|
|
70
|
+
export { ITextLinkProps, TextLink as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ITextLinkProps, default as default } from './TextLink';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geneui/components",
|
|
3
3
|
"description": "The Gene UI components library designed for BI tools",
|
|
4
|
-
"version": "3.0.0-next-
|
|
4
|
+
"version": "3.0.0-next-524bb85-15102024",
|
|
5
5
|
"author": "SoftConstruct",
|
|
6
6
|
"homepage": "https://github.com/softconstruct/gene-ui-components#readme",
|
|
7
7
|
"repository": {
|