@octopusdeploy/design-system-components
Version:
The design systems component library.
33 lines (32 loc) • 4.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoEntitiesIllustration = NoEntitiesIllustration;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Theme_1 = require("../../Theme");
function NoEntitiesIllustration() {
const illustrationTheme = (0, Theme_1.useIllustrationThemeName)();
const colours = illustrationTheme === "dark" ? darkIllustrationColours : lightIllustrationColours;
return ((0, jsx_runtime_1.jsxs)("svg", { className: illustrationStyles, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 120 136", children: [(0, jsx_runtime_1.jsx)("path", { name: "blob", fillRule: "evenodd", clipRule: "evenodd", d: "M53.1682 0.98731C72.0491 -4.87735 88.0903 16.6326 100.277 32.5819C112.323 48.3464 124.178 67.3708 118.566 86.5721C113.193 104.952 93.1234 112.907 75.2178 118.311C61.21 122.539 47.3587 118.218 34.0337 112.086C20.0092 105.632 0.577128 99.4906 0.00955996 83.6992C-0.54978 68.1369 23.5896 66.7998 31.939 53.8083C42.6859 37.0868 34.5113 6.78236 53.1682 0.98731Z", fill: colours.blob }), (0, jsx_runtime_1.jsxs)("g", { id: "rectangles", children: [(0, jsx_runtime_1.jsx)("path", { d: "M25.043 80.8685C25.043 79.4277 26.2109 78.2598 27.6517 78.2598H92.3473C93.7881 78.2598 94.956 79.4277 94.956 80.8685V88.1728C94.956 89.6135 93.7881 90.7815 92.3473 90.7815H27.6517C26.2109 90.7815 25.043 89.6135 25.043 88.1728V80.8685Z", fill: colours.rectangle.container }), (0, jsx_runtime_1.jsx)("path", { d: "M28.1734 82.4337C28.1734 81.8574 28.6406 81.3902 29.2169 81.3902H59.4778C60.054 81.3902 60.5212 81.8574 60.5212 82.4337V86.6076C60.5212 87.1839 60.054 87.6511 59.4778 87.6511H29.2169C28.6406 87.6511 28.1734 87.1839 28.1734 86.6076V82.4337Z", fill: colours.rectangle.bar }), (0, jsx_runtime_1.jsx)("path", { d: "M25.043 62.0872C25.043 60.6465 26.2109 59.4785 27.6517 59.4785H92.3473C93.7881 59.4785 94.956 60.6465 94.956 62.0872V69.3916C94.956 70.8323 93.7881 72.0003 92.3473 72.0003H27.6517C26.2109 72.0003 25.043 70.8323 25.043 69.3916V62.0872Z", fill: colours.rectangle.container }), (0, jsx_runtime_1.jsx)("path", { d: "M28.1734 63.6524C28.1734 63.0761 28.6406 62.609 29.2169 62.609H67.8256C68.4019 62.609 68.8691 63.0761 68.8691 63.6524V67.8263C68.8691 68.4026 68.4019 68.8698 67.8256 68.8698H29.2169C28.6406 68.8698 28.1734 68.4026 28.1734 67.8263V63.6524Z", fill: colours.rectangle.bar }), (0, jsx_runtime_1.jsx)("path", { d: "M25.043 43.304C25.043 41.8633 26.2109 40.6953 27.6517 40.6953H92.3473C93.7881 40.6953 94.956 41.8633 94.956 43.304V50.6084C94.956 52.0491 93.7881 53.2171 92.3473 53.2171H27.6517C26.2109 53.2171 25.043 52.0491 25.043 50.6084V43.304Z", fill: colours.rectangle.container }), (0, jsx_runtime_1.jsx)("path", { d: "M28.1734 44.8692C28.1734 44.2929 28.6406 43.8257 29.2169 43.8257H52.1734C52.7497 43.8257 53.2169 44.2929 53.2169 44.8692V49.0431C53.2169 49.6194 52.7497 50.0866 52.1734 50.0866H29.2169C28.6406 50.0866 28.1734 49.6194 28.1734 49.0431V44.8692Z", fill: colours.rectangle.bar })] }), (0, jsx_runtime_1.jsxs)("g", { id: "plus", children: [(0, jsx_runtime_1.jsx)("path", { d: "M109.565 93.9133C109.565 99.6763 104.893 104.348 99.1301 104.348C93.3671 104.348 88.6953 99.6763 88.6953 93.9133C88.6953 88.1503 93.3671 83.4785 99.1301 83.4785C104.893 83.4785 109.565 88.1503 109.565 93.9133Z", fill: colours.plus }), (0, jsx_runtime_1.jsx)("path", { d: "M100.174 87.6524H98.0866V92.8698H92.8692V94.9568H98.0866V100.174H100.174V94.9568H105.391V92.8698H100.174V87.6524Z", fill: design_system_tokens_1.colorScales.white })] })] }));
}
const lightIllustrationColours = {
blob: design_system_tokens_1.colorScales.blue[100],
rectangle: {
container: design_system_tokens_1.colorScales.blue[200],
bar: design_system_tokens_1.colorScales.white,
},
plus: design_system_tokens_1.colorScales.blue[400],
};
const darkIllustrationColours = {
blob: `rgba(218, 226, 233, 0.50)`,
rectangle: {
container: design_system_tokens_1.colorScales.navy[300],
bar: design_system_tokens_1.colorScales.navy[200],
},
plus: design_system_tokens_1.colorScales.blue[400],
};
const illustrationStyles = (0, css_1.css)({
width: 120,
height: 120,
});