orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
229 lines • 8.16 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["noWrap", "children", "theme", "altStyle"];
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 styled, { ThemeProvider } from "styled-components";
import PropTypes from "prop-types";
import { space, layout, color, compose, variant } from "styled-system";
import { css } from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx } from "react/jsx-runtime";
const BadgeStyles = compose(space, layout, color);
const Item = /*#__PURE__*/styled("span").withConfig({
shouldForwardProp,
displayName: "Item",
componentId: "sc-9r75kj-0"
}).attrs(props => ({
"data-testid": props["data-testid"] ? props["data-testid"] : null
}))(props => css(_objectSpread({
fontSize: themeGet("fontSizes.0")(props),
lineHeight: "1",
fontWeight: themeGet("fontWeights.2")(props),
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
verticalAlign: "middle",
position: "relative",
minHeight: themeGet("tagScale.tagHeightDefault")(props),
py: themeGet("space.xs")(props),
px: themeGet("space.s")(props),
cursor: "default",
borderRadius: 1,
color: themeGet("colors.greyDarkest")(props),
bg: themeGet("colors.greyLighter")(props),
border: "1px solid ".concat(themeGet("colors.greyLighter")(props)),
whiteSpace: props.noWrap ? "nowrap" : "normal",
wordBreak: props.noWrap ? "normal" : "break-word",
"& > *": {
lineHeight: "1",
margin: "0"
}
}, props.altStyle ? {
color: themeGet("colors.greyDarker")(props),
bg: themeGet("colors.white")(props),
border: "1px solid ".concat(themeGet("colors.greyDarker")(props))
} : {})), props => {
if (props.altStyle) {
return variant({
variants: {
default: {},
success: {
color: themeGet("colors.success")(props),
borderColor: themeGet("colors.success")(props)
},
successPending: {
color: themeGet("colors.success")(props),
borderColor: themeGet("colors.success")(props)
},
warning: {
color: themeGet("colors.warningDark")(props),
borderColor: themeGet("colors.warningDark")(props)
},
danger: {
color: themeGet("colors.danger")(props),
borderColor: themeGet("colors.danger")(props)
},
primaryLight: {
color: themeGet("colors.primary")(props),
borderColor: themeGet("colors.primary")(props)
},
primary: {
color: themeGet("colors.primaryDark")(props),
borderColor: themeGet("colors.primaryDark")(props)
},
primaryDark: {
color: themeGet("colors.primaryDarker")(props),
borderColor: themeGet("colors.primaryDarker")(props)
},
secondary: {
color: themeGet("colors.secondary")(props),
borderColor: themeGet("colors.secondary")(props)
}
}
});
} else {
return variant({
variants: {
default: {},
success: {
color: themeGet("colors.successDarkest")(props),
bg: themeGet("colors.successLightest")(props),
borderColor: themeGet("colors.successLightest")(props)
},
successPending: {
color: themeGet("colors.successDark")(props),
bg: themeGet("colors.successEvenLighter")(props),
borderColor: themeGet("colors.successEvenLighter")(props)
},
warning: {
color: themeGet("colors.warningDarkest")(props),
bg: themeGet("colors.warningLightest")(props),
borderColor: themeGet("colors.warningLightest")(props)
},
danger: {
color: themeGet("colors.dangerDarkest")(props),
bg: themeGet("colors.dangerLightest")(props),
borderColor: themeGet("colors.dangerLightest")(props)
},
primaryLight: {
color: themeGet("colors.primaryDarker")(props),
bg: themeGet("colors.primaryLightest")(props),
borderColor: themeGet("colors.primaryLightest")(props)
},
primary: {
color: themeGet("colors.primaryDarkest")(props),
bg: themeGet("colors.primaryLighter")(props),
borderColor: themeGet("colors.primaryLighter")(props)
},
primaryDark: {
color: themeGet("colors.primaryDarkest")(props),
bg: themeGet("colors.primaryLight")(props),
borderColor: themeGet("colors.primaryLight")(props)
},
secondary: {
color: themeGet("colors.secondaryDarkest")(props),
bg: themeGet("colors.secondaryEvenLighter")(props),
borderColor: themeGet("colors.secondaryEvenLighter")(props)
}
}
});
}
}, BadgeStyles);
export default function Badge(_ref) {
let {
noWrap,
children,
theme,
altStyle
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
noWrap: noWrap,
altStyle: altStyle
}, props), {}, {
children: children
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Badge.propTypes = {
/** Specifies badge colour. Colours are taken from the standard design system colours. */
variant: PropTypes.oneOf(["success", "warning", "danger", "primaryLight", "primary", "primaryDark", "secondary"]),
/** Specified whether the badge text should be able to wrap or not */
noWrap: PropTypes.bool,
/** The label text on the badge is passed as a child element. */
children: PropTypes.node,
/** Specifies the system theme. */
theme: PropTypes.object,
/** Specifies use the alternative style */
altStyle: PropTypes.bool
};
Badge.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Badge",
"props": {
"variant": {
"description": "Specifies badge colour. Colours are taken from the standard design system colours.",
"type": {
"name": "enum",
"value": [{
"value": "\"success\"",
"computed": false
}, {
"value": "\"warning\"",
"computed": false
}, {
"value": "\"danger\"",
"computed": false
}, {
"value": "\"primaryLight\"",
"computed": false
}, {
"value": "\"primary\"",
"computed": false
}, {
"value": "\"primaryDark\"",
"computed": false
}, {
"value": "\"secondary\"",
"computed": false
}]
},
"required": false
},
"noWrap": {
"description": "Specified whether the badge text should be able to wrap or not",
"type": {
"name": "bool"
},
"required": false
},
"children": {
"description": "The label text on the badge is passed as a child element.",
"type": {
"name": "node"
},
"required": false
},
"theme": {
"description": "Specifies the system theme.",
"type": {
"name": "object"
},
"required": false
},
"altStyle": {
"description": "Specifies use the alternative style",
"type": {
"name": "bool"
},
"required": false
}
}
};