orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
217 lines • 6.98 kB
JavaScript
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 = styled("span").withConfig({
shouldForwardProp,
displayName: "Badge__Item",
componentId: "sc-9r75kj-0"
}).attrs(props => ({
"data-testid": props["data-testid"] ? props["data-testid"] : null
}))(props => css({
fontSize: themeGet("fontSizes.0")(props),
lineHeight: themeGet("fontSizes.1")(props),
fontWeight: themeGet("fontWeights.2")(props),
display: "inline-block",
position: "relative",
pt: themeGet("space.2")(props),
pb: `calc(${themeGet("space.2")(props)} + 1px)`,
px: themeGet("space.3")(props),
cursor: "default",
borderRadius: 1,
color: themeGet("colors.greyDarkest")(props),
bg: themeGet("colors.greyLighter")(props),
border: `1px solid ${themeGet("colors.greyLighter")(props)}`,
whiteSpace: props.noWrap ? "nowrap" : "normal",
...(props.altStyle ? {
color: themeGet("colors.greyDarker")(props),
bg: themeGet("colors.white")(props),
border: `1px solid ${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,
...props
} = _ref;
const component = /*#__PURE__*/_jsx(Item, {
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
}
}
};