orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
169 lines • 5.73 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["icon", "children", "data-testId"],
_excluded2 = ["data-testid"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { space, layout, color, compose, variant } from "styled-system";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx } from "react/jsx-runtime";
const StatusDotStyles = compose(space, layout, color);
const StatusDotItem = /*#__PURE__*/styled("div").withConfig({
displayName: "StatusDotItem",
componentId: "sc-1esxq7c-0"
})(props => css({
width: props.icon ? "18px" : "10px",
height: props.icon ? "18px" : "10px",
borderRadius: "50%",
bg: themeGet("colors.primary")(props),
fontSize: themeGet("fontSizes.0")(props),
display: "flex",
alignItems: "center",
justifyContent: "center",
lineHeight: "0",
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
}
}), props => variant({
prop: "variant",
variants: {
default: {
bg: themeGet("colors.primary")(props)
},
secondary: {
bg: themeGet("colors.secondary")(props),
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
}
},
success: {
bg: themeGet("colors.success")(props),
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.5))" : "none"
}
},
warning: {
bg: themeGet("colors.warning")(props),
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(147,101,0,0.9))" : "none"
}
},
danger: {
bg: themeGet("colors.danger")(props),
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
}
},
disabled: {
bg: themeGet("colors.greyDark")(props),
svg: {
filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.8))" : "none"
}
}
}
}), StatusDotStyles);
export default function StatusDot(_ref) {
var _props$dataTestid;
let {
icon,
children,
"data-testId": dataTestIdCamel
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const dataTestid = (_props$dataTestid = props["data-testid"]) !== null && _props$dataTestid !== void 0 ? _props$dataTestid : dataTestIdCamel;
const {
"data-testid": stripDataTestid
} = props,
rest = _objectWithoutProperties(props, _excluded2);
void stripDataTestid;
return /*#__PURE__*/_jsx(StatusDotItem, _objectSpread(_objectSpread({}, rest), {}, {
"data-testid": dataTestid,
icon: icon,
children: children
}));
}
StatusDot.propTypes = {
/** Specifies StatusDot colour. Colours are taken from the standard design system colours. */
variant: PropTypes.oneOf(["default", "secondary", "success", "warning", "danger", "disabled"]),
/** Specifies that this StatusDot contains an icon */
icon: PropTypes.bool,
/** Can specify an Icon componet as a child item */
children: PropTypes.node,
/** Specifies the system design theme. */
theme: PropTypes.object,
/** data-testid for testing (accepts data-testid or data-testId; only data-testid is forwarded to DOM) */
"data-testid": PropTypes.string,
"data-testId": PropTypes.string
};
StatusDot.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "StatusDot",
"props": {
"variant": {
"description": "Specifies StatusDot colour. Colours are taken from the standard design system colours.",
"type": {
"name": "enum",
"value": [{
"value": "\"default\"",
"computed": false
}, {
"value": "\"secondary\"",
"computed": false
}, {
"value": "\"success\"",
"computed": false
}, {
"value": "\"warning\"",
"computed": false
}, {
"value": "\"danger\"",
"computed": false
}, {
"value": "\"disabled\"",
"computed": false
}]
},
"required": false
},
"icon": {
"description": "Specifies that this StatusDot contains an icon",
"type": {
"name": "bool"
},
"required": false
},
"children": {
"description": "Can specify an Icon componet as a child item",
"type": {
"name": "node"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
},
"data-testid": {
"description": "data-testid for testing (accepts data-testid or data-testId; only data-testid is forwarded to DOM)",
"type": {
"name": "string"
},
"required": false
},
"data-testId": {
"description": "",
"type": {
"name": "string"
},
"required": false
}
}
};