@semcore/icon 3.1.1 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/LookerStudio/l/index.d.ts +7 -0
- package/LookerStudio/l/index.js +60 -0
- package/LookerStudio/l/index.mjs +40 -0
- package/LookerStudio/m/index.d.ts +7 -0
- package/LookerStudio/m/index.js +60 -0
- package/LookerStudio/m/index.mjs +40 -0
- package/lib/cjs/Icon.js +24 -12
- package/lib/cjs/Icon.js.map +1 -1
- package/lib/es6/Icon.js +21 -12
- package/lib/es6/Icon.js.map +1 -1
- package/package.json +2 -2
- package/svg-new/icon/LookerStudio/l.svg +1 -0
- package/svg-new/icon/LookerStudio/m.svg +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.2.0] - 2022-11-04
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Added `LookerStudio` icon.
|
|
10
|
+
|
|
11
|
+
## [3.1.2] - 2022-10-26
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Lazy checks for necessity of `aria-label` in non production environment.
|
|
16
|
+
|
|
5
17
|
## [3.1.1] - 2022-10-24
|
|
6
18
|
|
|
7
19
|
### Changed
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Merge } from '@semcore/core';
|
|
4
|
+
import { IIconProps } from '@semcore/icon';
|
|
5
|
+
declare const _default: import("@semcore/core").ComponentType<Merge<IIconProps, React.SVGAttributes<SVGElement>>, {}, {}>;
|
|
6
|
+
export default _default;
|
|
7
|
+
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
|
|
18
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
19
|
+
|
|
20
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
21
|
+
|
|
22
|
+
function LookerStudio(_ref, ref) {
|
|
23
|
+
var _ref$width = _ref.width,
|
|
24
|
+
width = _ref$width === void 0 ? '24' : _ref$width,
|
|
25
|
+
_ref$height = _ref.height,
|
|
26
|
+
height = _ref$height === void 0 ? '24' : _ref$height,
|
|
27
|
+
_ref$viewBox = _ref.viewBox,
|
|
28
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
|
|
29
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
31
|
+
ref: ref,
|
|
32
|
+
"data-name": "LookerStudio",
|
|
33
|
+
"data-group": "l",
|
|
34
|
+
width: width,
|
|
35
|
+
height: height,
|
|
36
|
+
viewBox: viewBox
|
|
37
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
38
|
+
d: "M12.6 1.04a1.926 1.926 0 0 0-1.597 3l.823-.821a.812.812 0 1 1 .519.517l-.822.822A1.925 1.925 0 1 0 12.6 1.04Z",
|
|
39
|
+
fill: "#34A853",
|
|
40
|
+
shapeRendering: "geometricPrecision"
|
|
41
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
42
|
+
d: "M11.259 6.972a2.992 2.992 0 0 0-.6-1.803L9.59 6.236A1.53 1.53 0 0 1 9.3 8.083L9.88 9.5a3.008 3.008 0 0 0 1.38-2.528Z",
|
|
43
|
+
fill: "#FBBC04",
|
|
44
|
+
shapeRendering: "geometricPrecision"
|
|
45
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
|
+
d: "M8.204 8.333h-.028a1.531 1.531 0 1 1 .841-2.81l1.057-1.058a3.01 3.01 0 1 0-1.29 5.287l-.58-1.419Z",
|
|
47
|
+
fill: "#EA4335",
|
|
48
|
+
shapeRendering: "geometricPrecision"
|
|
49
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
50
|
+
d: "M11.994 9.3a6.83 6.83 0 0 0-1.972.29l.846 2.066a4.607 4.607 0 1 1-1.035.4l-.837-2.06A6.83 6.83 0 1 0 12 9.298l-.006.001Z",
|
|
51
|
+
fill: "#4285F4",
|
|
52
|
+
shapeRendering: "geometricPrecision"
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
LookerStudio.displayName = 'LookerStudio';
|
|
57
|
+
|
|
58
|
+
var _default = (0, _core.createBaseComponent)(LookerStudio);
|
|
59
|
+
|
|
60
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { createBaseComponent } from '@semcore/core';
|
|
5
|
+
import Icon from '@semcore/icon';
|
|
6
|
+
|
|
7
|
+
function LookerStudio({
|
|
8
|
+
width = '24',
|
|
9
|
+
height = '24',
|
|
10
|
+
viewBox = '0 0 24 24',
|
|
11
|
+
...props
|
|
12
|
+
}, ref) {
|
|
13
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
14
|
+
ref: ref,
|
|
15
|
+
"data-name": "LookerStudio",
|
|
16
|
+
"data-group": "l",
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
viewBox: viewBox
|
|
20
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
21
|
+
d: "M12.6 1.04a1.926 1.926 0 0 0-1.597 3l.823-.821a.812.812 0 1 1 .519.517l-.822.822A1.925 1.925 0 1 0 12.6 1.04Z",
|
|
22
|
+
fill: "#34A853",
|
|
23
|
+
shapeRendering: "geometricPrecision"
|
|
24
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M11.259 6.972a2.992 2.992 0 0 0-.6-1.803L9.59 6.236A1.53 1.53 0 0 1 9.3 8.083L9.88 9.5a3.008 3.008 0 0 0 1.38-2.528Z",
|
|
26
|
+
fill: "#FBBC04",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
d: "M8.204 8.333h-.028a1.531 1.531 0 1 1 .841-2.81l1.057-1.058a3.01 3.01 0 1 0-1.29 5.287l-.58-1.419Z",
|
|
30
|
+
fill: "#EA4335",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
33
|
+
d: "M11.994 9.3a6.83 6.83 0 0 0-1.972.29l.846 2.066a4.607 4.607 0 1 1-1.035.4l-.837-2.06A6.83 6.83 0 1 0 12 9.298l-.006.001Z",
|
|
34
|
+
fill: "#4285F4",
|
|
35
|
+
shapeRendering: "geometricPrecision"
|
|
36
|
+
}));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
LookerStudio.displayName = 'LookerStudio';
|
|
40
|
+
export default createBaseComponent(LookerStudio);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Merge } from '@semcore/core';
|
|
4
|
+
import { IIconProps } from '@semcore/icon';
|
|
5
|
+
declare const _default: import("@semcore/core").ComponentType<Merge<IIconProps, React.SVGAttributes<SVGElement>>, {}, {}>;
|
|
6
|
+
export default _default;
|
|
7
|
+
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _core = require("@semcore/core");
|
|
17
|
+
|
|
18
|
+
var _icon = _interopRequireDefault(require("@semcore/icon"));
|
|
19
|
+
|
|
20
|
+
var _excluded = ["width", "height", "viewBox"];
|
|
21
|
+
|
|
22
|
+
function LookerStudio(_ref, ref) {
|
|
23
|
+
var _ref$width = _ref.width,
|
|
24
|
+
width = _ref$width === void 0 ? '16' : _ref$width,
|
|
25
|
+
_ref$height = _ref.height,
|
|
26
|
+
height = _ref$height === void 0 ? '16' : _ref$height,
|
|
27
|
+
_ref$viewBox = _ref.viewBox,
|
|
28
|
+
viewBox = _ref$viewBox === void 0 ? '0 0 16 16' : _ref$viewBox,
|
|
29
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
30
|
+
return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
|
|
31
|
+
ref: ref,
|
|
32
|
+
"data-name": "LookerStudio",
|
|
33
|
+
"data-group": "m",
|
|
34
|
+
width: width,
|
|
35
|
+
height: height,
|
|
36
|
+
viewBox: viewBox
|
|
37
|
+
}, props), /*#__PURE__*/_react["default"].createElement("path", {
|
|
38
|
+
d: "M8.936.038a1.399 1.399 0 0 0-1.16 2.18l.597-.597a.59.59 0 1 1 .377.376l-.597.596A1.398 1.398 0 1 0 8.936.038Z",
|
|
39
|
+
fill: "#34A853",
|
|
40
|
+
shapeRendering: "geometricPrecision"
|
|
41
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
42
|
+
d: "M7.961 4.348c.001-.473-.152-.932-.435-1.31l-.776.775c.243.443.156.994-.212 1.341l.421 1.03a2.185 2.185 0 0 0 1.002-1.836Z",
|
|
43
|
+
fill: "#FBBC04",
|
|
44
|
+
shapeRendering: "geometricPrecision"
|
|
45
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
46
|
+
d: "M5.742 5.336h-.02a1.112 1.112 0 1 1 .611-2.042l.768-.768a2.186 2.186 0 1 0-.937 3.84l-.422-1.03Z",
|
|
47
|
+
fill: "#EA4335",
|
|
48
|
+
shapeRendering: "geometricPrecision"
|
|
49
|
+
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
50
|
+
d: "M8.496 6.039c-.485 0-.968.07-1.433.21l.614 1.5a3.347 3.347 0 1 1-.752.29l-.607-1.495A4.961 4.961 0 1 0 8.5 6.038h-.004Z",
|
|
51
|
+
fill: "#4285F4",
|
|
52
|
+
shapeRendering: "geometricPrecision"
|
|
53
|
+
}));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
LookerStudio.displayName = 'LookerStudio';
|
|
57
|
+
|
|
58
|
+
var _default = (0, _core.createBaseComponent)(LookerStudio);
|
|
59
|
+
|
|
60
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { createBaseComponent } from '@semcore/core';
|
|
5
|
+
import Icon from '@semcore/icon';
|
|
6
|
+
|
|
7
|
+
function LookerStudio({
|
|
8
|
+
width = '16',
|
|
9
|
+
height = '16',
|
|
10
|
+
viewBox = '0 0 16 16',
|
|
11
|
+
...props
|
|
12
|
+
}, ref) {
|
|
13
|
+
return /*#__PURE__*/React.createElement(Icon, _extends({
|
|
14
|
+
ref: ref,
|
|
15
|
+
"data-name": "LookerStudio",
|
|
16
|
+
"data-group": "m",
|
|
17
|
+
width: width,
|
|
18
|
+
height: height,
|
|
19
|
+
viewBox: viewBox
|
|
20
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
21
|
+
d: "M8.936.038a1.399 1.399 0 0 0-1.16 2.18l.597-.597a.59.59 0 1 1 .377.376l-.597.596A1.398 1.398 0 1 0 8.936.038Z",
|
|
22
|
+
fill: "#34A853",
|
|
23
|
+
shapeRendering: "geometricPrecision"
|
|
24
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M7.961 4.348c.001-.473-.152-.932-.435-1.31l-.776.775c.243.443.156.994-.212 1.341l.421 1.03a2.185 2.185 0 0 0 1.002-1.836Z",
|
|
26
|
+
fill: "#FBBC04",
|
|
27
|
+
shapeRendering: "geometricPrecision"
|
|
28
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
29
|
+
d: "M5.742 5.336h-.02a1.112 1.112 0 1 1 .611-2.042l.768-.768a2.186 2.186 0 1 0-.937 3.84l-.422-1.03Z",
|
|
30
|
+
fill: "#EA4335",
|
|
31
|
+
shapeRendering: "geometricPrecision"
|
|
32
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
33
|
+
d: "M8.496 6.039c-.485 0-.968.07-1.433.21l.614 1.5a3.347 3.347 0 1 1-.752.29l-.607-1.495A4.961 4.961 0 1 0 8.5 6.038h-.004Z",
|
|
34
|
+
fill: "#4285F4",
|
|
35
|
+
shapeRendering: "geometricPrecision"
|
|
36
|
+
}));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
LookerStudio.displayName = 'LookerStudio';
|
|
40
|
+
export default createBaseComponent(LookerStudio);
|
package/lib/cjs/Icon.js
CHANGED
|
@@ -33,6 +33,10 @@ var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsF
|
|
|
33
33
|
|
|
34
34
|
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
35
35
|
|
|
36
|
+
var _ref = require("@semcore/utils/lib/ref");
|
|
37
|
+
|
|
38
|
+
var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
|
|
39
|
+
|
|
36
40
|
var _excluded = ["keyboardFocused"];
|
|
37
41
|
|
|
38
42
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -48,16 +52,16 @@ var styles = (
|
|
|
48
52
|
/*__reshadow_css_start__*/
|
|
49
53
|
_core.sstyled.insert(
|
|
50
54
|
/*__inner_css_start__*/
|
|
51
|
-
"
|
|
55
|
+
".___SIcon_fuhr6_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_fuhr6)}.___SIcon_fuhr6_gg_.__keyboardFocused_fuhr6_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_fuhr6_gg_.__interactive_fuhr6_gg_{cursor:pointer}.___SIcon_fuhr6_gg_.__interactive_fuhr6_gg_:hover{color:var(--color-interactive_fuhr6)}"
|
|
52
56
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
57
|
+
, "fuhr6_gg_")
|
|
54
58
|
/*__reshadow_css_end__*/
|
|
55
59
|
, {
|
|
56
|
-
"__SIcon": "
|
|
57
|
-
"--color": "--
|
|
58
|
-
"_keyboardFocused": "
|
|
59
|
-
"_interactive": "
|
|
60
|
-
"--color-interactive": "--color-
|
|
60
|
+
"__SIcon": "___SIcon_fuhr6_gg_",
|
|
61
|
+
"--color": "--color_fuhr6",
|
|
62
|
+
"_keyboardFocused": "__keyboardFocused_fuhr6_gg_",
|
|
63
|
+
"_interactive": "__interactive_fuhr6_gg_",
|
|
64
|
+
"--color-interactive": "--color-interactive_fuhr6"
|
|
61
65
|
});
|
|
62
66
|
|
|
63
67
|
function Icon(props, ref) {
|
|
@@ -75,9 +79,7 @@ function Icon(props, ref) {
|
|
|
75
79
|
other = _useBox2[1];
|
|
76
80
|
|
|
77
81
|
var interactive = props.interactive,
|
|
78
|
-
colorProps = props.color
|
|
79
|
-
ariaLabel = props['aria-label'],
|
|
80
|
-
ariaLabelledby = props['aria-labelledby'];
|
|
82
|
+
colorProps = props.color;
|
|
81
83
|
var color = (0, _color["default"])(colorProps);
|
|
82
84
|
|
|
83
85
|
var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()(_objectSpread({
|
|
@@ -107,14 +109,24 @@ function Icon(props, ref) {
|
|
|
107
109
|
}
|
|
108
110
|
}
|
|
109
111
|
|
|
110
|
-
|
|
112
|
+
var labelCheckRef = _react["default"].useRef();
|
|
113
|
+
|
|
114
|
+
_react["default"].useEffect(function () {
|
|
115
|
+
if (!interactive) return;
|
|
116
|
+
|
|
117
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
118
|
+
_logger["default"].warn(!(0, _hasLabels["default"])(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
|
|
119
|
+
}
|
|
120
|
+
}, [interactive]);
|
|
111
121
|
|
|
122
|
+
var forkedRef = (0, _ref.useForkRef)(ref, labelCheckRef);
|
|
112
123
|
return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
|
|
113
124
|
style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
|
|
114
125
|
className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined,
|
|
115
126
|
onKeyDown: onKeyDown,
|
|
116
127
|
role: interactive ? 'button' : undefined,
|
|
117
|
-
"aria-hidden": interactive ? undefined : 'true'
|
|
128
|
+
"aria-hidden": interactive ? undefined : 'true',
|
|
129
|
+
ref: forkedRef
|
|
118
130
|
}));
|
|
119
131
|
}
|
|
120
132
|
|
package/lib/cjs/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","hasLabels","current","displayName","forkedRef","useForkRef","propsForElement","Object","assign","undefined","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n const [SIcon, other] = useBox(\n {\n tag: 'svg',\n 'data-ui-name': 'Icon',\n width: 16,\n height: 16,\n viewBox: '0 0 16 16',\n 'aria-hidden': true,\n focusable: props.interactive,\n ...props,\n },\n ref,\n );\n\n const { interactive, color: colorProps } = props;\n const color = resolveColor(colorProps);\n const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n disabled: !interactive,\n ...other,\n });\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'color-interactive': shade(color, -0.12),\n 'use:color': color,\n interactive: interactive,\n keyboardFocused: keyboardFocused,\n });\n\n function onKeyDown(event) {\n if (props.onKeyDown) {\n return props.onKeyDown(event);\n }\n\n if (interactive && event.code === 'Enter') {\n props.onClick && props.onClick(event);\n }\n }\n\n const labelCheckRef = React.useRef();\n React.useEffect(() => {\n if (!interactive) return;\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(labelCheckRef.current),\n `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n props['data-ui-name'] || Icon.displayName,\n );\n }\n }, [interactive]);\n const forkedRef = useForkRef(ref, labelCheckRef);\n\n return (\n <SIcon\n {...propsForElement(propsWithKeyboardEnhance)}\n style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n onKeyDown={onKeyDown}\n role={interactive ? 'button' : undefined}\n aria-hidden={interactive ? undefined : 'true'}\n ref={forkedRef}\n />\n );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}
|
package/lib/es6/Icon.js
CHANGED
|
@@ -17,22 +17,24 @@ import resolveColor, { shade } from '@semcore/utils/lib/color';
|
|
|
17
17
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
18
18
|
import propsForElement from '@semcore/utils/lib/propsForElement';
|
|
19
19
|
import logger from '@semcore/utils/lib/logger';
|
|
20
|
+
import { useForkRef } from '@semcore/utils/lib/ref';
|
|
21
|
+
import hasLabels from '@semcore/utils/lib/hasLabels';
|
|
20
22
|
|
|
21
23
|
/*__reshadow-styles__:"./style/icon.shadow.css"*/
|
|
22
24
|
var styles = (
|
|
23
25
|
/*__reshadow_css_start__*/
|
|
24
26
|
_sstyled.insert(
|
|
25
27
|
/*__inner_css_start__*/
|
|
26
|
-
"
|
|
28
|
+
".___SIcon_fuhr6_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_fuhr6)}.___SIcon_fuhr6_gg_.__keyboardFocused_fuhr6_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_fuhr6_gg_.__interactive_fuhr6_gg_{cursor:pointer}.___SIcon_fuhr6_gg_.__interactive_fuhr6_gg_:hover{color:var(--color-interactive_fuhr6)}"
|
|
27
29
|
/*__inner_css_end__*/
|
|
28
|
-
, "
|
|
30
|
+
, "fuhr6_gg_")
|
|
29
31
|
/*__reshadow_css_end__*/
|
|
30
32
|
, {
|
|
31
|
-
"__SIcon": "
|
|
32
|
-
"--color": "--
|
|
33
|
-
"_keyboardFocused": "
|
|
34
|
-
"_interactive": "
|
|
35
|
-
"--color-interactive": "--color-
|
|
33
|
+
"__SIcon": "___SIcon_fuhr6_gg_",
|
|
34
|
+
"--color": "--color_fuhr6",
|
|
35
|
+
"_keyboardFocused": "__keyboardFocused_fuhr6_gg_",
|
|
36
|
+
"_interactive": "__interactive_fuhr6_gg_",
|
|
37
|
+
"--color-interactive": "--color-interactive_fuhr6"
|
|
36
38
|
});
|
|
37
39
|
|
|
38
40
|
function Icon(props, ref) {
|
|
@@ -50,9 +52,7 @@ function Icon(props, ref) {
|
|
|
50
52
|
other = _useBox2[1];
|
|
51
53
|
|
|
52
54
|
var interactive = props.interactive,
|
|
53
|
-
colorProps = props.color
|
|
54
|
-
ariaLabel = props['aria-label'],
|
|
55
|
-
ariaLabelledby = props['aria-labelledby'];
|
|
55
|
+
colorProps = props.color;
|
|
56
56
|
var color = resolveColor(colorProps);
|
|
57
57
|
|
|
58
58
|
var _keyboardFocusEnhance = keyboardFocusEnhance()(_objectSpread({
|
|
@@ -82,13 +82,22 @@ function Icon(props, ref) {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
var labelCheckRef = React.useRef();
|
|
86
|
+
React.useEffect(function () {
|
|
87
|
+
if (!interactive) return;
|
|
88
|
+
|
|
89
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
90
|
+
logger.warn(!hasLabels(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
|
|
91
|
+
}
|
|
92
|
+
}, [interactive]);
|
|
93
|
+
var forkedRef = useForkRef(ref, labelCheckRef);
|
|
86
94
|
return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
|
|
87
95
|
style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
|
|
88
96
|
className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined,
|
|
89
97
|
onKeyDown: onKeyDown,
|
|
90
98
|
role: interactive ? 'button' : undefined,
|
|
91
|
-
"aria-hidden": interactive ? undefined : 'true'
|
|
99
|
+
"aria-hidden": interactive ? undefined : 'true',
|
|
100
|
+
ref: forkedRef
|
|
92
101
|
}));
|
|
93
102
|
}
|
|
94
103
|
|
package/lib/es6/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","Object","assign","undefined"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n const [SIcon, other] = useBox(\n {\n tag: 'svg',\n 'data-ui-name': 'Icon',\n width: 16,\n height: 16,\n viewBox: '0 0 16 16',\n 'aria-hidden': true,\n focusable: props.interactive,\n ...props,\n },\n ref,\n );\n\n const { interactive, color: colorProps } = props;\n const color = resolveColor(colorProps);\n const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n disabled: !interactive,\n ...other,\n });\n const sstyles = sstyled(styles);\n const { className, style } = sstyles.cn('SIcon', {\n 'color-interactive': shade(color, -0.12),\n 'use:color': color,\n interactive: interactive,\n keyboardFocused: keyboardFocused,\n });\n\n function onKeyDown(event) {\n if (props.onKeyDown) {\n return props.onKeyDown(event);\n }\n\n if (interactive && event.code === 'Enter') {\n props.onClick && props.onClick(event);\n }\n }\n\n const labelCheckRef = React.useRef();\n React.useEffect(() => {\n if (!interactive) return;\n if (process.env.NODE_ENV !== 'production') {\n logger.warn(\n !hasLabels(labelCheckRef.current),\n `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n props['data-ui-name'] || Icon.displayName,\n );\n }\n }, [interactive]);\n const forkedRef = useForkRef(ref, labelCheckRef);\n\n return (\n <SIcon\n {...propsForElement(propsWithKeyboardEnhance)}\n style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n onKeyDown={onKeyDown}\n role={interactive ? 'button' : undefined}\n aria-hidden={interactive ? undefined : 'true'}\n ref={forkedRef}\n />\n );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/icon",
|
|
3
3
|
"description": "Semrush Icon Component",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.2.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/utils": "^3.
|
|
12
|
+
"@semcore/utils": "^3.40.0",
|
|
13
13
|
"@semcore/flex-box": "^4",
|
|
14
14
|
"classnames": "2.2.6"
|
|
15
15
|
},
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.6 1.04a1.926 1.926 0 0 0-1.597 3l.823-.821a.812.812 0 1 1 .519.517l-.822.822A1.925 1.925 0 1 0 12.6 1.04Z" fill="#34A853"/><path d="M11.259 6.972a2.992 2.992 0 0 0-.6-1.803L9.59 6.236A1.53 1.53 0 0 1 9.3 8.083L9.88 9.5a3.008 3.008 0 0 0 1.38-2.528Z" fill="#FBBC04"/><path d="M8.204 8.333h-.028a1.531 1.531 0 1 1 .841-2.81l1.057-1.058a3.01 3.01 0 1 0-1.29 5.287l-.58-1.419Z" fill="#EA4335"/><path d="M11.994 9.3a6.83 6.83 0 0 0-1.972.29l.846 2.066a4.607 4.607 0 1 1-1.035.4l-.837-2.06A6.83 6.83 0 1 0 12 9.298l-.006.001Z" fill="#4285F4"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.936.038a1.399 1.399 0 0 0-1.16 2.18l.597-.597a.59.59 0 1 1 .377.376l-.597.596A1.398 1.398 0 1 0 8.936.038Z" fill="#34A853"/><path d="M7.961 4.348c.001-.473-.152-.932-.435-1.31l-.776.775c.243.443.156.994-.212 1.341l.421 1.03a2.185 2.185 0 0 0 1.002-1.836Z" fill="#FBBC04"/><path d="M5.742 5.336h-.02a1.112 1.112 0 1 1 .611-2.042l.768-.768a2.186 2.186 0 1 0-.937 3.84l-.422-1.03Z" fill="#EA4335"/><path d="M8.496 6.039c-.485 0-.968.07-1.433.21l.614 1.5a3.347 3.347 0 1 1-.752.29l-.607-1.495A4.961 4.961 0 1 0 8.5 6.038h-.004Z" fill="#4285F4"/></svg>
|