@carbon/ibm-products
Version:
Carbon for IBM Products
186 lines (179 loc) • 7.02 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../../_virtual/index.js');
var cx = require('classnames');
var settings = require('../../../settings.js');
var useId = require('../../../global/js/utils/useId.js');
var _stop, _stop2, _stop3, _stop4, _stop5, _stop6, _path, _path2, _path3, _path4, _path5, _stop7, _stop8, _stop9, _stop10, _stop11, _stop12, _stop13, _stop14, _path6, _path7, _path8;
// The block part of our conventional BEM class names (blockClass__E--M).
const blockClass = `${settings.pkg.prefix}--empty-state`;
const NoDataIllustration = _ref => {
let {
theme,
size,
alt,
...rest
} = _ref;
const svgId = useId.useId();
return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, rest, {
xmlns: "http://www.w3.org/2000/svg",
width: 80,
height: 80,
viewBox: "0 0 80 80",
className: cx([`${blockClass}__illustration`, `${blockClass}__illustration-noData`, `${blockClass}__illustration--${size}`]),
role: "img",
"aria-hidden": "true"
}), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__a_dark_${svgId}`,
x1: 11.12,
y1: 43.34,
x2: 40,
y2: 43.34,
gradientUnits: "userSpaceOnUse"
}, _stop || (_stop = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#393939"
})), _stop2 || (_stop2 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#262626"
}))), /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__b_dark_${svgId}`,
x1: 40,
y1: 43.34,
x2: 68.88,
y2: 43.34,
gradientUnits: "userSpaceOnUse"
}, _stop3 || (_stop3 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#161616"
})), _stop4 || (_stop4 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#262626"
}))), /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__c_dark_${svgId}`,
x1: 32.78,
y1: 30.83,
x2: 47.22,
y2: 5.83,
gradientUnits: "userSpaceOnUse"
}, _stop5 || (_stop5 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#525252"
})), _stop6 || (_stop6 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#393939"
})))), _path || (_path = /*#__PURE__*/React.createElement("path", {
fill: "none",
d: "M0 0h80v80H0z"
})), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
opacity: 0.25,
d: "M40 78.34L11.13 61.67 40 45.01l28.86 16.66L40 78.34z"
})), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__a_dark_${svgId})`,
d: "M40 68.35L11.12 51.68l.01-33.35L40 34.99v33.36z"
}), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__b_dark_${svgId})`,
d: "M68.88 51.68L40 68.35V34.99l28.87-16.66.01 33.35z"
}), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__c_dark_${svgId})`,
d: "M40 34.99L11.13 18.33 40 1.66l28.87 16.67L40 34.99z"
}), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
fill: "#262626",
d: "M25.97 26.67l28.67-16.55-.42-.24-28.68 16.56.43.23z"
})), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
fill: "#6f6f6f",
d: "M40 35.24L11.13 18.57v-.24l.21-.12 28.87 16.67-.21.11v.25z"
})), _path5 || (_path5 = /*#__PURE__*/React.createElement("path", {
fill: "#525252",
d: "M21.49 33.33l-8.2-4.73.01-5.69 8.19 4.74v5.68z"
}))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__a_${svgId}`,
x1: 18.35,
y1: 74.17,
x2: 61.65,
y2: 49.17,
gradientUnits: "userSpaceOnUse"
}, _stop7 || (_stop7 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#525252",
stopOpacity: 0.05
})), _stop8 || (_stop8 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopOpacity: 0.1
}))), /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__b_${svgId}`,
x1: 15.16,
y1: 43.34,
x2: 40.31,
y2: 43.34,
gradientUnits: "userSpaceOnUse"
}, _stop9 || (_stop9 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#e0e0e0"
})), _stop10 || (_stop10 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#c6c6c6"
}))), /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__c_${svgId}`,
x1: 40,
y1: 43.34,
x2: 68.88,
y2: 43.34,
gradientUnits: "userSpaceOnUse"
}, _stop11 || (_stop11 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#a8a8a8"
})), _stop12 || (_stop12 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#c6c6c6"
}))), /*#__PURE__*/React.createElement("linearGradient", {
id: `prefix__d_${svgId}`,
x1: 18.35,
y1: 30.83,
x2: 61.65,
y2: 5.83,
gradientUnits: "userSpaceOnUse"
}, _stop13 || (_stop13 = /*#__PURE__*/React.createElement("stop", {
offset: 0,
stopColor: "#f4f4f4"
})), _stop14 || (_stop14 = /*#__PURE__*/React.createElement("stop", {
offset: 1,
stopColor: "#e0e0e0"
})))), _path6 || (_path6 = /*#__PURE__*/React.createElement("path", {
fill: "none",
d: "M0 0h80v80H0z"
})), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__a_${svgId})`,
d: "M40 78.34L11.13 61.67 40 45.01l28.86 16.66L40 78.34z"
}), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__b_${svgId})`,
d: "M40 68.35L11.12 51.68l.01-33.35L40 34.99v33.36z"
}), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__c_${svgId})`,
d: "M68.88 51.68L40 68.35V34.99l28.87-16.66.01 33.35z"
}), /*#__PURE__*/React.createElement("path", {
fill: `url(#prefix__d_${svgId})`,
d: "M40 34.99L11.13 18.33 40 1.66l28.87 16.67L40 34.99z"
}), _path7 || (_path7 = /*#__PURE__*/React.createElement("path", {
fill: "#c6c6c6",
d: "M25.97 26.67l28.67-16.55-.42-.24-28.68 16.56.43.23z"
})), _path8 || (_path8 = /*#__PURE__*/React.createElement("path", {
fill: "#fff",
d: "M40 35.24L11.13 18.57v-.24l.21-.12 28.87 16.67-.21.11v.25zM21.49 33.33l-8.2-4.73.01-5.69 8.19 4.74v5.68z"
}))));
};
NoDataIllustration.propTypes = {
alt: index.default.string.isRequired,
size: index.default.oneOf(['lg', 'sm']),
theme: index.default.oneOf(['light', 'dark'])
};
exports.NoDataIllustration = NoDataIllustration;
exports.default = NoDataIllustration;