@semcore/button 5.36.0-prerelease.0 → 5.37.0-prerelease.1
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/CHANGELOG.md +6 -0
- package/lib/cjs/component/AbstractButton/AbstractButton.js +182 -0
- package/lib/cjs/component/AbstractButton/AbstractButton.js.map +1 -0
- package/lib/cjs/component/AbstractButton/AbstractButton.type.js +2 -0
- package/lib/cjs/component/AbstractButton/AbstractButton.type.js.map +1 -0
- package/lib/cjs/component/AbstractButton/SpinButton.js.map +1 -0
- package/lib/cjs/component/Button/Button.js +94 -0
- package/lib/cjs/component/Button/Button.js.map +1 -0
- package/lib/cjs/component/Button/Button.type.js +2 -0
- package/lib/cjs/component/Button/Button.type.js.map +1 -0
- package/lib/cjs/{style → component/Button}/button.shadow.css +1 -1
- package/lib/cjs/component/ButtonLink/ButtonLink.js +92 -0
- package/lib/cjs/component/ButtonLink/ButtonLink.js.map +1 -0
- package/lib/cjs/component/ButtonLink/ButtonLink.type.js +2 -0
- package/lib/cjs/component/ButtonLink/ButtonLink.type.js.map +1 -0
- package/lib/cjs/component/ButtonLink/buttonLink.shadow.css +160 -0
- package/lib/cjs/index.js +40 -6
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/component/AbstractButton/AbstractButton.js +175 -0
- package/lib/es6/component/AbstractButton/AbstractButton.js.map +1 -0
- package/lib/es6/component/AbstractButton/AbstractButton.type.js +2 -0
- package/lib/es6/component/AbstractButton/AbstractButton.type.js.map +1 -0
- package/lib/es6/component/AbstractButton/SpinButton.js.map +1 -0
- package/lib/es6/component/Button/Button.js +87 -0
- package/lib/es6/component/Button/Button.js.map +1 -0
- package/lib/es6/component/Button/Button.type.js +2 -0
- package/lib/es6/component/Button/Button.type.js.map +1 -0
- package/lib/es6/{style → component/Button}/button.shadow.css +1 -1
- package/lib/es6/component/ButtonLink/ButtonLink.js +85 -0
- package/lib/es6/component/ButtonLink/ButtonLink.js.map +1 -0
- package/lib/es6/component/ButtonLink/ButtonLink.type.js +2 -0
- package/lib/es6/component/ButtonLink/ButtonLink.type.js.map +1 -0
- package/lib/es6/component/ButtonLink/buttonLink.shadow.css +160 -0
- package/lib/es6/index.js +5 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/types/component/AbstractButton/AbstractButton.d.ts +24 -0
- package/lib/types/component/AbstractButton/AbstractButton.type.d.ts +39 -0
- package/lib/types/component/AbstractButton/SpinButton.d.ts +3 -0
- package/lib/types/component/Button/Button.d.ts +3 -0
- package/lib/types/component/Button/Button.type.d.ts +39 -0
- package/lib/types/component/ButtonLink/ButtonLink.d.ts +2 -0
- package/lib/types/component/ButtonLink/ButtonLink.type.d.ts +25 -0
- package/lib/types/index.d.ts +5 -68
- package/package.json +13 -8
- package/src/{Button.jsx → component/AbstractButton/AbstractButton.tsx} +24 -38
- package/src/component/AbstractButton/AbstractButton.type.ts +46 -0
- package/src/{SpinButton.jsx → component/AbstractButton/SpinButton.tsx} +2 -2
- package/src/component/Button/Button.tsx +45 -0
- package/src/component/Button/Button.type.ts +48 -0
- package/src/{style → component/Button}/button.shadow.css +1 -1
- package/src/component/ButtonLink/ButtonLink.tsx +42 -0
- package/src/component/ButtonLink/ButtonLink.type.ts +41 -0
- package/src/component/ButtonLink/buttonLink.shadow.css +160 -0
- package/src/index.ts +5 -0
- package/lib/cjs/Button.js +0 -237
- package/lib/cjs/Button.js.map +0 -1
- package/lib/cjs/SpinButton.js.map +0 -1
- package/lib/cjs/index.d.js +0 -2
- package/lib/cjs/index.d.js.map +0 -1
- package/lib/es6/Button.js +0 -231
- package/lib/es6/Button.js.map +0 -1
- package/lib/es6/SpinButton.js.map +0 -1
- package/lib/es6/index.d.js +0 -2
- package/lib/es6/index.d.js.map +0 -1
- package/src/index.d.ts +0 -68
- package/src/index.js +0 -2
- /package/lib/cjs/{SpinButton.js → component/AbstractButton/SpinButton.js} +0 -0
- /package/lib/es6/{SpinButton.js → component/AbstractButton/SpinButton.js} +0 -0
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
+
import _createSuper from "@babel/runtime/helpers/createSuper";
|
|
6
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
+
import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
|
|
8
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import createComponent, { sstyled, Root } from '@semcore/core';
|
|
12
|
+
/*__reshadow-styles__:"./buttonLink.shadow.css"*/
|
|
13
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButton_dvl3l_gg_{display:inline-block;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_dvl3l_gg_:active,.___SButton_dvl3l_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_dvl3l_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_dvl3l_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_dvl3l_gg_.__active_dvl3l_gg_,.___SButton_dvl3l_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_dvl3l_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_dvl3l_gg_.__active_dvl3l_gg_ .___SText_dvl3l_gg_,.___SButton_dvl3l_gg_:active .___SText_dvl3l_gg_{border-color:currentColor}@media (hover:hover){.___SButton_dvl3l_gg_:hover .___SText_dvl3l_gg_{border-color:currentColor}}.___SButton_dvl3l_gg_.__enableVisited_dvl3l_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_dvl3l_gg_.__enableVisited_dvl3l_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_dvl3l_gg_ .___SText_dvl3l_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_dvl3l_gg_.__keyboardFocused_dvl3l_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_dvl3l_gg_.__visually-disabled_dvl3l_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_dvl3l_gg_._use_secondary_dvl3l_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_dvl3l_gg_._use_secondary_dvl3l_gg_.__active_dvl3l_gg_,.___SButton_dvl3l_gg_._use_secondary_dvl3l_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_dvl3l_gg_._use_secondary_dvl3l_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_dvl3l_gg_._use_secondary_dvl3l_gg_ .___SText_dvl3l_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_dvl3l_gg_{display:inline-flex;justify-content:center;align-items:center;margin-bottom:var(--intergalactic-spacing-05x, 2px);vertical-align:middle}.___SButton_dvl3l_gg_ .___SAddon_dvl3l_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_dvl3l_gg_ .___SAddon_dvl3l_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_dvl3l_gg_.__text-color_dvl3l_gg_{color:var(--text-color_dvl3l)}.___SButton_dvl3l_gg_.__text-color_dvl3l_gg_.__active_dvl3l_gg_,.___SButton_dvl3l_gg_.__text-color_dvl3l_gg_:active{color:var(--text-color_dvl3l);filter:brightness(.8)}@media (hover:hover){.___SButton_dvl3l_gg_.__text-color_dvl3l_gg_:hover{color:var(--text-color_dvl3l);filter:brightness(.8)}}.___SButton_dvl3l_gg_._size_100_dvl3l_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_dvl3l_gg_._size_200_dvl3l_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_dvl3l_gg_._size_300_dvl3l_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_dvl3l_gg_._size_400_dvl3l_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_dvl3l_gg_._size_500_dvl3l_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_dvl3l_gg_._size_600_dvl3l_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_dvl3l_gg_._size_700_dvl3l_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_dvl3l_gg_._size_800_dvl3l_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_dvl3l_gg_,.___SText_dvl3l_gg_{transition:none}}" /*__inner_css_end__*/, "dvl3l_gg_") /*__reshadow_css_end__*/, {
|
|
14
|
+
"__SButton": "___SButton_dvl3l_gg_",
|
|
15
|
+
"_keyboardFocused": "__keyboardFocused_dvl3l_gg_",
|
|
16
|
+
"_visually-disabled": "__visually-disabled_dvl3l_gg_",
|
|
17
|
+
"__SAddon": "___SAddon_dvl3l_gg_",
|
|
18
|
+
"_size_100": "_size_100_dvl3l_gg_",
|
|
19
|
+
"_size_200": "_size_200_dvl3l_gg_",
|
|
20
|
+
"_size_300": "_size_300_dvl3l_gg_",
|
|
21
|
+
"_size_400": "_size_400_dvl3l_gg_",
|
|
22
|
+
"_size_500": "_size_500_dvl3l_gg_",
|
|
23
|
+
"_size_600": "_size_600_dvl3l_gg_",
|
|
24
|
+
"_size_700": "_size_700_dvl3l_gg_",
|
|
25
|
+
"_size_800": "_size_800_dvl3l_gg_",
|
|
26
|
+
"__SText": "___SText_dvl3l_gg_",
|
|
27
|
+
"_active": "__active_dvl3l_gg_",
|
|
28
|
+
"_enableVisited": "__enableVisited_dvl3l_gg_",
|
|
29
|
+
"_use_secondary": "_use_secondary_dvl3l_gg_",
|
|
30
|
+
"_text-color": "__text-color_dvl3l_gg_",
|
|
31
|
+
"--text-color": "--text-color_dvl3l"
|
|
32
|
+
});
|
|
33
|
+
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
34
|
+
import { Box } from '@semcore/flex-box';
|
|
35
|
+
import { AbstractButton } from '../AbstractButton/AbstractButton';
|
|
36
|
+
import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
|
|
37
|
+
var enhance = {
|
|
38
|
+
keyboardFocused: keyboardFocusEnhance(),
|
|
39
|
+
resolveColor: resolveColorEnhance()
|
|
40
|
+
};
|
|
41
|
+
var RootButtonLink = /*#__PURE__*/function (_AbstractButton) {
|
|
42
|
+
_inherits(RootButtonLink, _AbstractButton);
|
|
43
|
+
var _super = _createSuper(RootButtonLink);
|
|
44
|
+
function RootButtonLink() {
|
|
45
|
+
_classCallCheck(this, RootButtonLink);
|
|
46
|
+
return _super.apply(this, arguments);
|
|
47
|
+
}
|
|
48
|
+
_createClass(RootButtonLink, [{
|
|
49
|
+
key: "getTextColor",
|
|
50
|
+
value: function getTextColor() {
|
|
51
|
+
var _ref5 = this.asProps,
|
|
52
|
+
color = _ref5.color,
|
|
53
|
+
resolveColor = _ref5.resolveColor;
|
|
54
|
+
return resolveColor(color);
|
|
55
|
+
}
|
|
56
|
+
}]);
|
|
57
|
+
return RootButtonLink;
|
|
58
|
+
}(AbstractButton);
|
|
59
|
+
_defineProperty(RootButtonLink, "displayName", 'ButtonLink');
|
|
60
|
+
_defineProperty(RootButtonLink, "enhance", Object.values(enhance));
|
|
61
|
+
_defineProperty(RootButtonLink, "style", style);
|
|
62
|
+
_defineProperty(RootButtonLink, "defaultProps", {
|
|
63
|
+
use: 'primary'
|
|
64
|
+
});
|
|
65
|
+
function Text(props) {
|
|
66
|
+
var _ref = arguments[0],
|
|
67
|
+
_ref3;
|
|
68
|
+
var SText = Box;
|
|
69
|
+
return _ref3 = sstyled(props.styles), /*#__PURE__*/React.createElement(SText, _ref3.cn("SText", _objectSpread({}, _assignProps({
|
|
70
|
+
"tag": 'span'
|
|
71
|
+
}, _ref))));
|
|
72
|
+
}
|
|
73
|
+
function Addon(props) {
|
|
74
|
+
var _ref2 = arguments[0],
|
|
75
|
+
_ref4;
|
|
76
|
+
var SAddon = Box;
|
|
77
|
+
return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, _assignProps2({
|
|
78
|
+
"tag": 'span'
|
|
79
|
+
}, _ref2))));
|
|
80
|
+
}
|
|
81
|
+
export var ButtonLink = createComponent(RootButtonLink, {
|
|
82
|
+
Text: Text,
|
|
83
|
+
Addon: Addon
|
|
84
|
+
});
|
|
85
|
+
//# sourceMappingURL=ButtonLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","names":["React","createComponent","sstyled","Root","style","_sstyled","insert","keyboardFocusEnhance","Box","AbstractButton","resolveColorEnhance","enhance","keyboardFocused","resolveColor","RootButtonLink","_AbstractButton","_inherits","_super","_createSuper","_classCallCheck","apply","arguments","_createClass","key","value","getTextColor","_ref5","asProps","color","_defineProperty","Object","values","use","Text","props","_ref","arguments[0]","_ref3","SText","styles","createElement","cn","_objectSpread","_assignProps","Addon","_ref2","_ref4","SAddon","_assignProps2","ButtonLink"],"sources":["../../../../src/component/ButtonLink/ButtonLink.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { sstyled, Root } from '@semcore/core';\nimport style from './buttonLink.shadow.css';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport { Box } from '@semcore/flex-box';\nimport { AbstractButton } from '../AbstractButton/AbstractButton';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';\n\nconst enhance = {\n keyboardFocused: keyboardFocusEnhance(),\n resolveColor: resolveColorEnhance(),\n};\n\nclass RootButtonLink extends AbstractButton {\n static displayName = 'ButtonLink';\n static enhance = Object.values(enhance);\n static style = style;\n static defaultProps = {\n use: 'primary',\n };\n\n protected getTextColor(): string | undefined {\n const { color, resolveColor } = this.asProps as any;\n return resolveColor(color);\n }\n}\n\nfunction Text(props: ButtonLinkTextProps) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: ButtonLinkAddonProps) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const ButtonLink = createComponent(RootButtonLink, {\n Text,\n Addon,\n}) as ButtonLinkComponent;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,IAAIC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAE/D,OAAOC,oBAAoB,MAAM,kDAAkD;AACnF,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,cAAc,QAAQ,kCAAkC;AACjE,OAAOC,mBAAmB,MAAM,iDAAiD;AAGjF,IAAMC,OAAO,GAAG;EACdC,eAAe,EAAEL,oBAAoB,EAAE;EACvCM,YAAY,EAAEH,mBAAmB;AACnC,CAAC;AAAC,IAEII,cAAc,0BAAAC,eAAA;EAAAC,SAAA,CAAAF,cAAA,EAAAC,eAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,cAAA;EAAA,SAAAA,eAAA;IAAAK,eAAA,OAAAL,cAAA;IAAA,OAAAG,MAAA,CAAAG,KAAA,OAAAC,SAAA;EAAA;EAAAC,YAAA,CAAAR,cAAA;IAAAS,GAAA;IAAAC,KAAA,EAQlB,SAAAC,aAAA,EAA6C;MAC3C,IAAAC,KAAA,GAAgC,IAAI,CAACC,OAAO;QAApCC,KAAK,GAAAF,KAAA,CAALE,KAAK;QAAEf,YAAY,GAAAa,KAAA,CAAZb,YAAY;MAC3B,OAAOA,YAAY,CAACe,KAAK,CAAC;IAC5B;EAAC;EAAA,OAAAd,cAAA;AAAA,EAX0BL,cAAc;AAAAoB,eAAA,CAArCf,cAAc,iBACG,YAAY;AAAAe,eAAA,CAD7Bf,cAAc,aAEDgB,MAAM,CAACC,MAAM,CAACpB,OAAO,CAAC;AAAAkB,eAAA,CAFnCf,cAAc,WAGHV,KAAK;AAAAyB,eAAA,CAHhBf,cAAc,kBAII;EACpBkB,GAAG,EAAE;AACP,CAAC;AAQH,SAASC,IAAIA,CAACC,KAA0B,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACxC,IAAMC,KAAK,GACiC9B,GAAG;EAA/C,OAAA6B,KAAA,GAAOnC,OAAO,CAACgC,KAAK,CAACK,MAAM,CAAC,eAACvC,KAAA,CAAAwC,aAAA,CAACF,KAAK,EAAAD,KAAA,CAAAI,EAAA,UAAAC,aAAA,KAAAC,YAAA;IAAA,OAAkB;EAAM,GAAAR,IAAA,IAAG;AAChE;AAEA,SAASS,KAAKA,CAACV,KAA2B,EAAE;EAAA,IAAAW,KAAA,GAAAT,YAAA;IAAAU,KAAA;EAC1C,IAAMC,MAAM,GACiCvC,GAAG;EAAhD,OAAAsC,KAAA,GAAO5C,OAAO,CAACgC,KAAK,CAACK,MAAM,CAAC,eAACvC,KAAA,CAAAwC,aAAA,CAACO,MAAM,EAAAD,KAAA,CAAAL,EAAA,WAAAC,aAAA,KAAAM,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AACjE;AAEA,OAAO,IAAMI,UAAU,GAAGhD,eAAe,CAACa,cAAc,EAAE;EACxDmB,IAAI,EAAJA,IAAI;EACJW,KAAK,EAALA;AACF,CAAC,CAAwB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonLink.type.js","names":[],"sources":["../../../../src/component/ButtonLink/ButtonLink.type.ts"],"sourcesContent":["import { UnknownProperties, Intergalactic } from '@semcore/core';\n\nimport {\n AbstractButtonAddonProps,\n AbstractButtonContext,\n AbstractButtonTextProps,\n AbstractButtonProps,\n} from '../AbstractButton/AbstractButton.type';\n\n/**\n * Button link size\n * @default m\n */\nexport type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;\n/**\n * Button link type\n * @default primary\n */\ntype Use = 'primary' | 'secondary';\n\nexport type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;\n\nexport type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;\n\nexport type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;\n\nexport type ButtonLinkContext = AbstractButtonContext;\n\nexport type ButtonLinkChildren = {\n Text: Intergalactic.Component<'span', ButtonLinkTextProps>;\n Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;\n};\n\nexport type ButtonLinkComponent = Intergalactic.Component<\n 'button',\n ButtonLinkProps,\n ButtonLinkContext\n> & {\n Text: Intergalactic.Component<'span', ButtonLinkTextProps>;\n Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;\n};\n"],"mappings":""}
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
SButton {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
font-family: inherit;
|
|
4
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
5
|
+
color: var(--intergalactic-text-link, #006dca);
|
|
6
|
+
line-height: normal;
|
|
7
|
+
position: relative;
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
text-decoration: none;
|
|
10
|
+
border: none;
|
|
11
|
+
padding: 0;
|
|
12
|
+
margin: 0;
|
|
13
|
+
box-shadow: none;
|
|
14
|
+
-webkit-tap-highlight-color: transparent;
|
|
15
|
+
outline: 0;
|
|
16
|
+
background: none;
|
|
17
|
+
transition: color 0.15s ease-in-out;
|
|
18
|
+
|
|
19
|
+
&:active,
|
|
20
|
+
&:hover,
|
|
21
|
+
&:focus {
|
|
22
|
+
outline: 0;
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&::-moz-focus-inner {
|
|
27
|
+
border: none;
|
|
28
|
+
padding: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&[active],
|
|
32
|
+
&:hover,
|
|
33
|
+
&:active {
|
|
34
|
+
color: var(--intergalactic-text-link-hover-active, #044792);
|
|
35
|
+
|
|
36
|
+
& SText {
|
|
37
|
+
border-color: currentColor;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&[enableVisited]:visited,
|
|
42
|
+
&[enableVisited]:visited:hover {
|
|
43
|
+
color: var(--intergalactic-text-link-visited, #8649e1);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
SText {
|
|
47
|
+
border-bottom-width: 1px;
|
|
48
|
+
border-bottom-style: solid;
|
|
49
|
+
border-color: transparent;
|
|
50
|
+
transition: border-bottom-color 0.15s ease-in-out;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
SButton[keyboardFocused] {
|
|
55
|
+
outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
|
|
56
|
+
outline-style: solid;
|
|
57
|
+
outline-width: 3px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
SButton[visually-disabled] {
|
|
61
|
+
opacity: var(--intergalactic-disabled-opacity, 0.3);
|
|
62
|
+
cursor: default;
|
|
63
|
+
/* Disable link interactions */
|
|
64
|
+
pointer-events: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
SButton[use='secondary'] {
|
|
68
|
+
color: var(--intergalactic-text-hint, #6c6e79);
|
|
69
|
+
|
|
70
|
+
&[active],
|
|
71
|
+
&:active,
|
|
72
|
+
&:hover {
|
|
73
|
+
color: var(--intergalactic-text-hint-hover-active, #484a54);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
SText {
|
|
77
|
+
border-bottom-width: 1px;
|
|
78
|
+
border-bottom-style: dashed;
|
|
79
|
+
border-color: currentColor;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
SAddon {
|
|
84
|
+
display: inline-flex;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
align-items: center;
|
|
87
|
+
margin-bottom: var(--intergalactic-spacing-05x, 2px);
|
|
88
|
+
vertical-align: middle;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
SButton SAddon {
|
|
92
|
+
&:not(:only-child):first-child {
|
|
93
|
+
margin-right: var(--intergalactic-spacing-1x, 4px);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:not(:only-child):last-child {
|
|
97
|
+
margin-left: var(--intergalactic-spacing-1x, 4px);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
SButton[text-color] {
|
|
102
|
+
color: var(--text-color);
|
|
103
|
+
|
|
104
|
+
&[active],
|
|
105
|
+
&:hover,
|
|
106
|
+
&:active {
|
|
107
|
+
color: var(--text-color);
|
|
108
|
+
filter: brightness(0.8);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
SButton[size='100'] {
|
|
113
|
+
font-size: var(--intergalactic-fs-100, 12px);
|
|
114
|
+
line-height: var(--intergalactic-lh-100, 133%);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
SButton[size='200'] {
|
|
118
|
+
font-size: var(--intergalactic-fs-200, 14px);
|
|
119
|
+
line-height: var(--intergalactic-lh-200, 142%);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
SButton[size='300'] {
|
|
123
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
124
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
SButton[size='400'] {
|
|
128
|
+
font-size: var(--intergalactic-fs-400, 20px);
|
|
129
|
+
line-height: var(--intergalactic-lh-400, 120%);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
SButton[size='500'] {
|
|
133
|
+
font-size: var(--intergalactic-fs-500, 24px);
|
|
134
|
+
line-height: var(--intergalactic-lh-500, 117%);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
SButton[size='600'] {
|
|
138
|
+
font-size: var(--intergalactic-fs-600, 32px);
|
|
139
|
+
line-height: var(--intergalactic-lh-600, 125%);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
SButton[size='700'] {
|
|
143
|
+
font-size: var(--intergalactic-fs-700, 36px);
|
|
144
|
+
line-height: var(--intergalactic-lh-700, 110%);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
SButton[size='800'] {
|
|
148
|
+
font-size: var(--intergalactic-fs-800, 48px);
|
|
149
|
+
line-height: var(--intergalactic-lh-800, 117%);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@media (prefers-reduced-motion) {
|
|
153
|
+
SButton {
|
|
154
|
+
transition: none;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
SText {
|
|
158
|
+
transition: none;
|
|
159
|
+
}
|
|
160
|
+
}
|
package/lib/es6/index.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
export { default } from './Button';
|
|
2
|
-
export * from './Button';
|
|
1
|
+
export { default } from './component/Button/Button';
|
|
2
|
+
export * from './component/Button/Button.type';
|
|
3
|
+
export * from './component/ButtonLink/ButtonLink';
|
|
4
|
+
export * from './component/ButtonLink/ButtonLink.type';
|
|
5
|
+
export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';
|
|
3
6
|
//# sourceMappingURL=index.js.map
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","MAP_USE_DEFAULT_THEME"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './component/Button/Button';\nexport * from './component/Button/Button.type';\nexport * from './component/ButtonLink/ButtonLink';\nexport * from './component/ButtonLink/ButtonLink.type';\nexport { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,2BAA2B;AACnD,cAAc,gCAAgC;AAC9C,cAAc,mCAAmC;AACjD,cAAc,wCAAwC;AACtD,SAASC,qBAAqB,QAAQ,2CAA2C"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AbstractButtonProps } from './AbstractButton.type';
|
|
3
|
+
import { Component } from '@semcore/core';
|
|
4
|
+
export declare const MAP_USE_DEFAULT_THEME: Record<string, string>;
|
|
5
|
+
type Props = AbstractButtonProps<any, any, any>;
|
|
6
|
+
export declare abstract class AbstractButton extends Component<Props, {}, {}> {
|
|
7
|
+
static displayName: string;
|
|
8
|
+
containerRef: React.RefObject<HTMLButtonElement>;
|
|
9
|
+
state: {
|
|
10
|
+
ariaLabelledByContent: null;
|
|
11
|
+
};
|
|
12
|
+
protected abstract getTextColor(): string | undefined;
|
|
13
|
+
getTextProps(): {
|
|
14
|
+
size: any;
|
|
15
|
+
};
|
|
16
|
+
getAddonProps(): {
|
|
17
|
+
size: any;
|
|
18
|
+
};
|
|
19
|
+
componentDidMount(): void;
|
|
20
|
+
renderButton({ buttonProps, children }: any): React.ReactNode;
|
|
21
|
+
renderButtonWithHint({ buttonProps, children, hintProps }: any): React.ReactNode;
|
|
22
|
+
render(): JSX.Element;
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropGetterFn } from '@semcore/core';
|
|
3
|
+
import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
4
|
+
import { BoxProps } from '@semcore/flex-box';
|
|
5
|
+
import { NeighborItemProps } from '@semcore/neighbor-location';
|
|
6
|
+
import { TooltipHintProps } from '@semcore/tooltip';
|
|
7
|
+
export type AbstractButtonProps<S, U, T> = BoxProps & NeighborItemProps & KeyboardFocusProps & {
|
|
8
|
+
/** Button activity state */
|
|
9
|
+
active?: boolean;
|
|
10
|
+
/** Disabled button state */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Loading button state */
|
|
13
|
+
loading?: boolean;
|
|
14
|
+
/** Tag for the left Addon */
|
|
15
|
+
addonLeft?: React.ElementType;
|
|
16
|
+
/** Tag for the right Addon */
|
|
17
|
+
addonRight?: React.ElementType;
|
|
18
|
+
/**
|
|
19
|
+
* Placement for hint
|
|
20
|
+
* @default top
|
|
21
|
+
*/
|
|
22
|
+
hintPlacement?: TooltipHintProps['placement'];
|
|
23
|
+
/** Button type. Defined in Button.type or ButtonLink.type */
|
|
24
|
+
size?: S;
|
|
25
|
+
/** Button usage. Defined in Button.type or ButtonLink.type */
|
|
26
|
+
use?: U;
|
|
27
|
+
/** Button theme. Defined in Button.type or ButtonLink.type */
|
|
28
|
+
theme?: T;
|
|
29
|
+
};
|
|
30
|
+
export type AbstractButtonAddonProps<S> = BoxProps & {
|
|
31
|
+
size?: S;
|
|
32
|
+
};
|
|
33
|
+
export type AbstractButtonTextProps<S> = BoxProps & {
|
|
34
|
+
size?: S;
|
|
35
|
+
};
|
|
36
|
+
export type AbstractButtonContext = {
|
|
37
|
+
getTextProps: PropGetterFn;
|
|
38
|
+
getAddonProps: PropGetterFn;
|
|
39
|
+
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
|
|
3
|
+
/**
|
|
4
|
+
* Button size
|
|
5
|
+
* @default m
|
|
6
|
+
*/
|
|
7
|
+
export type ButtonSize = 'l' | 'm';
|
|
8
|
+
/**
|
|
9
|
+
* Button type
|
|
10
|
+
* @default secondary
|
|
11
|
+
*/
|
|
12
|
+
type Use = 'primary' | 'secondary' | 'tertiary';
|
|
13
|
+
/** Button theme */
|
|
14
|
+
type Theme = 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
|
|
15
|
+
/** @deprecated */
|
|
16
|
+
export interface IButtonProps extends ButtonProps, UnknownProperties {
|
|
17
|
+
}
|
|
18
|
+
export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
|
|
19
|
+
/** @deprecated */
|
|
20
|
+
export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {
|
|
21
|
+
}
|
|
22
|
+
export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
|
|
23
|
+
/** @deprecated */
|
|
24
|
+
export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {
|
|
25
|
+
}
|
|
26
|
+
export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
|
|
27
|
+
/** @deprecated */
|
|
28
|
+
export interface IButtonContext extends ButtonContext, UnknownProperties {
|
|
29
|
+
}
|
|
30
|
+
export type ButtonContext = AbstractButtonContext;
|
|
31
|
+
export type ButtonChildren = {
|
|
32
|
+
Text: Intergalactic.Component<'span', ButtonTextProps>;
|
|
33
|
+
Addon: Intergalactic.Component<'span', ButtonAddonProps>;
|
|
34
|
+
};
|
|
35
|
+
export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
|
|
36
|
+
Text: Intergalactic.Component<'span', ButtonTextProps>;
|
|
37
|
+
Addon: Intergalactic.Component<'span', ButtonAddonProps>;
|
|
38
|
+
};
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Intergalactic } from '@semcore/core';
|
|
2
|
+
import { AbstractButtonAddonProps, AbstractButtonContext, AbstractButtonTextProps, AbstractButtonProps } from '../AbstractButton/AbstractButton.type';
|
|
3
|
+
/**
|
|
4
|
+
* Button link size
|
|
5
|
+
* @default m
|
|
6
|
+
*/
|
|
7
|
+
export type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
|
|
8
|
+
/**
|
|
9
|
+
* Button link type
|
|
10
|
+
* @default primary
|
|
11
|
+
*/
|
|
12
|
+
type Use = 'primary' | 'secondary';
|
|
13
|
+
export type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;
|
|
14
|
+
export type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;
|
|
15
|
+
export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
|
|
16
|
+
export type ButtonLinkContext = AbstractButtonContext;
|
|
17
|
+
export type ButtonLinkChildren = {
|
|
18
|
+
Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
|
|
19
|
+
Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
|
|
20
|
+
};
|
|
21
|
+
export type ButtonLinkComponent = Intergalactic.Component<'button', ButtonLinkProps, ButtonLinkContext> & {
|
|
22
|
+
Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
|
|
23
|
+
Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,68 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
import { TooltipHintProps } from '@semcore/tooltip';
|
|
7
|
-
|
|
8
|
-
export type ButtonSize = 'l' | 'm';
|
|
9
|
-
|
|
10
|
-
/** @deprecated */
|
|
11
|
-
export interface IButtonProps extends ButtonProps, UnknownProperties {}
|
|
12
|
-
export type ButtonProps = BoxProps &
|
|
13
|
-
NeighborItemProps &
|
|
14
|
-
KeyboardFocusProps & {
|
|
15
|
-
/**
|
|
16
|
-
* Button type
|
|
17
|
-
* @default secondary
|
|
18
|
-
*/
|
|
19
|
-
use?: 'primary' | 'secondary' | 'tertiary';
|
|
20
|
-
/** Button theme */
|
|
21
|
-
theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
|
|
22
|
-
/** Button activity state */
|
|
23
|
-
active?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Button size
|
|
26
|
-
* @default m
|
|
27
|
-
*/
|
|
28
|
-
size?: ButtonSize;
|
|
29
|
-
/** Disabled button state */
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
/** Loading button state */
|
|
32
|
-
loading?: boolean;
|
|
33
|
-
/** Tag for the left Addon */
|
|
34
|
-
addonLeft?: React.ElementType;
|
|
35
|
-
/** Tag for the right Addon */
|
|
36
|
-
addonRight?: React.ElementType;
|
|
37
|
-
/**
|
|
38
|
-
* Placement for hint
|
|
39
|
-
* @default top
|
|
40
|
-
*/
|
|
41
|
-
hintPlacement?: TooltipHintProps['placement'];
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
/** @deprecated */
|
|
45
|
-
export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {}
|
|
46
|
-
export type ButtonTextProps = BoxProps & {
|
|
47
|
-
size?: ButtonSize;
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
/** @deprecated */
|
|
51
|
-
export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {}
|
|
52
|
-
export type ButtonAddonProps = BoxProps & {
|
|
53
|
-
size?: ButtonSize;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
/** @deprecated */
|
|
57
|
-
export interface IButtonContext extends ButtonContext, UnknownProperties {}
|
|
58
|
-
export type ButtonContext = {
|
|
59
|
-
getTextProps: PropGetterFn;
|
|
60
|
-
getAddonProps: PropGetterFn;
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
declare const Button: Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
|
|
64
|
-
Text: Intergalactic.Component<'span', ButtonTextProps>;
|
|
65
|
-
Addon: Intergalactic.Component<'span', ButtonAddonProps>;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export default Button;
|
|
1
|
+
export { default } from './component/Button/Button';
|
|
2
|
+
export * from './component/Button/Button.type';
|
|
3
|
+
export * from './component/ButtonLink/ButtonLink';
|
|
4
|
+
export * from './component/ButtonLink/ButtonLink.type';
|
|
5
|
+
export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';
|
package/package.json
CHANGED
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/button",
|
|
3
3
|
"description": "Semrush Button Component",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.37.0-prerelease.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
|
+
"exports": {
|
|
12
|
+
"require": "./lib/cjs/index.js",
|
|
13
|
+
"import": "./lib/es6/index.js",
|
|
14
|
+
"types": "./lib/types/index.d.ts"
|
|
15
|
+
},
|
|
11
16
|
"dependencies": {
|
|
12
|
-
"@semcore/flex-box": "5.
|
|
13
|
-
"@semcore/neighbor-location": "4.
|
|
14
|
-
"@semcore/spin": "5.
|
|
15
|
-
"@semcore/tooltip": "6.
|
|
16
|
-
"@semcore/utils": "4.
|
|
17
|
+
"@semcore/flex-box": "5.33.0-prerelease.1",
|
|
18
|
+
"@semcore/neighbor-location": "4.31.0-prerelease.1",
|
|
19
|
+
"@semcore/spin": "5.33.0-prerelease.1",
|
|
20
|
+
"@semcore/tooltip": "6.42.0-prerelease.1",
|
|
21
|
+
"@semcore/utils": "4.36.0-prerelease.1"
|
|
17
22
|
},
|
|
18
23
|
"peerDependencies": {
|
|
19
|
-
"@semcore/core": "^2.
|
|
24
|
+
"@semcore/core": "^2.31.0-prerelease.1",
|
|
20
25
|
"react": "16.8 - 18",
|
|
21
26
|
"react-dom": "16.8 - 18"
|
|
22
27
|
},
|
|
@@ -31,6 +36,6 @@
|
|
|
31
36
|
"@types/react": "18.0.21"
|
|
32
37
|
},
|
|
33
38
|
"scripts": {
|
|
34
|
-
"build": "pnpm semcore-builder --source=
|
|
39
|
+
"build": "pnpm semcore-builder --source=ts"
|
|
35
40
|
}
|
|
36
41
|
}
|