orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
539 lines (537 loc) • 19.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["variant", "onSelect", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "ariaLabel", "small", "personEntity"];
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, variant } from "styled-system";
import Avatar from "../Avatar";
import Icon from "../Icon";
import Flex from "../Flex";
import Loading from "../Loading";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const TagWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "TagWrapper",
componentId: "sc-1dh2aa8-0"
})(["", " ", " display:flex;align-items:stretch;height:auto;max-height:max-content;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, props => props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault"));
const TagValue = /*#__PURE__*/styled.button.attrs(props => ({
"aria-pressed": props.variant === "selected" || props.variant === "selectedHighlighted",
type: "button"
})).withConfig({
displayName: "TagValue",
componentId: "sc-1dh2aa8-1"
})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1;display:flex;gap:", ";align-items:center;flex-wrap:wrap;user-select:text;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:pointer;border-radius:", ";border-top-right-radius:", ";border-bottom-right-radius:", ";padding:", ";border:1px solid;", ""], props => props.small ? "3px" : "4px", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props), props => themeGet("fontWeights.2")(props), props => themeGet("transition.transitionDefault")(props), themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showEdit || props.showInfo || props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault"), props => variant({
variants: {
default: {
background: themeGet("colors.white")(props),
color: themeGet("colors.primary")(props),
borderColor: themeGet("colors.primary")(props),
"&:hover, &:focus": {
background: themeGet("colors.primaryLightest")(props),
color: themeGet("colors.primaryDark")(props),
borderColor: themeGet("colors.primaryDark")(props),
div: {
color: themeGet("colors.primaryDark")(props)
},
"div[class*='TagType']": {
backgroundColor: themeGet("colors.primary20")(props)
}
}
},
selected: {
background: themeGet("colors.primary")(props),
color: themeGet("colors.white")(props),
borderColor: themeGet("colors.primary")(props),
"&:hover, &:focus": {
background: themeGet("colors.primaryDark")(props),
color: themeGet("colors.white")(props),
borderColor: themeGet("colors.primaryDark")(props),
div: {
color: themeGet("colors.white")(props)
},
"div[class*='TagType']": {
backgroundColor: "rgba(0,0,0,0.30)"
}
}
},
highlighted: {
background: themeGet("colors.white")(props),
color: themeGet("colors.warningDarker")(props),
borderColor: themeGet("colors.warningDark")(props),
"&:hover, &:focus": {
background: themeGet("colors.warningLightest")(props),
color: themeGet("colors.warningDarkest")(props),
borderColor: themeGet("colors.warningDark")(props),
div: {
color: themeGet("colors.warningDarkest")(props)
},
"div[class*='TagType']": {
backgroundColor: themeGet("colors.warning30")(props)
}
}
},
selectedHighlighted: {
background: themeGet("colors.warningLighter")(props),
color: themeGet("colors.black80")(props),
borderColor: themeGet("colors.warningLighter")(props),
"&:hover, &:focus": {
background: themeGet("colors.warningLight")(props),
color: themeGet("colors.black70")(props),
borderColor: themeGet("colors.warningLight")(props),
div: {
color: themeGet("colors.black70")(props)
},
"div[class*='TagType']": {
backgroundColor: "rgba(255,255,255,0.3)"
}
}
},
disabled: {
background: themeGet("colors.greyLighter")(props),
color: themeGet("colors.greyDarker")(props),
borderColor: themeGet("colors.greyLight")(props),
cursor: "default",
"&:hover, &:focus": {
background: themeGet("colors.greyLighter")(props),
color: themeGet("colors.greyDarker")(props),
borderColor: themeGet("colors.greyLight")(props),
div: {
color: themeGet("colors.greyDarker")(props)
},
"div[class*='TagType']": {
backgroundColor: themeGet("colors.grey")(props),
color: themeGet("colors.white")(props)
}
}
}
}
}));
const TagValueText = /*#__PURE__*/styled.div.withConfig({
displayName: "TagValueText",
componentId: "sc-1dh2aa8-2"
})(["text-decoration:", ";white-space:normal;word-break:break-word;max-width:100%;text-align:left;line-height:", ";padding-bottom:1px;"], props => props.showStrikeThrough ? "line-through" : "none", props => props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props));
const TagActionIconWrapper = /*#__PURE__*/styled(TagValue).withConfig({
displayName: "TagActionIconWrapper",
componentId: "sc-1dh2aa8-3"
})(["border-radius:", ";border-top-left-radius:0;border-bottom-left-radius:0;padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], props => props.showRemove ? "0" : themeGet("tagScale.tagBorderRadius"), props => props.showRemove && props.small ? "0 3px 0 4px" : props.showRemove ? "0 5px 0 5px" : props.showInfo && props.small ? "0 8px 0 7px" : props.showInfo ? "0 10px 0 9px" : props.small ? "0 4px 0 3px" : "0 6px 0 5px", props => variant({
variants: {
default: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.primaryLightest")(props),
color: themeGet("colors.primaryDark")(props),
borderLeft: 0
}
},
selected: {
borderLeft: "1px solid ".concat(themeGet("colors.primaryDark")(props)),
"&:hover": {
borderLeftColor: themeGet("colors.primaryDark")(props)
}
},
highlighted: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.warningLightest")(props),
color: themeGet("colors.warningDarkest")(props),
borderLeft: 0
}
},
selectedHighlighted: {
borderLeft: "1px solid ".concat(themeGet("colors.warningDarker")(props)),
"&:hover": {
borderLeftColor: themeGet("colors.warningDarker")(props)
}
},
disabled: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.greyLighter")(props),
color: themeGet("colors.greyDarker")(props),
borderLeft: 0
}
}
}
}));
const TagRemoveIconWrapper = /*#__PURE__*/styled(TagValue).withConfig({
displayName: "TagRemoveIconWrapper",
componentId: "sc-1dh2aa8-4"
})(["border-radius:", ";border-top-left-radius:0;border-bottom-left-radius:0;padding:", ";&:focus{z-index:2;}", ""], themeGet("tagScale.tagBorderRadius"), props => props.small ? "2px 6px 2px 5px" : "2px 8px 2px 7px", props => variant({
variants: {
default: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.primaryLightest")(props),
borderLeft: 0,
color: themeGet("colors.primaryDark")(props)
}
},
selected: {
borderLeft: "1px solid ".concat(themeGet("colors.primaryDark")(props)),
"&:hover": {
borderLeftColor: themeGet("colors.primaryDark")(props)
}
},
highlighted: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.warningLightest")(props),
borderLeft: 0,
color: themeGet("colors.warningDarkest")(props)
}
},
selectedHighlighted: {
borderLeft: "1px solid ".concat(themeGet("colors.warningDarker")(props)),
"&:hover": {
borderLeftColor: themeGet("colors.warningDarker")(props)
}
},
disabled: {
borderLeft: 0,
"&:hover, &:focus": {
backgroundColor: themeGet("colors.greyLighter")(props),
borderLeft: 0,
color: themeGet("colors.greyDarker")(props)
}
}
}
}));
const TagType = /*#__PURE__*/styled.div.withConfig({
displayName: "TagType",
componentId: "sc-1dh2aa8-5"
})(["text-transform:uppercase;padding:", ";line-height:1;white-space:normal;word-break:break-word;text-align:left;border-radius:", ";font-size:", ";", ""], props => props.small ? themeGet("space.2")(props) : themeGet("space.2")(props), props => themeGet("radii.1")(props), props => props.small ? "1rem" : themeGet("fontSizes.0")(props), props => variant({
variants: {
default: {
backgroundColor: themeGet("colors.primaryLightest")(props),
color: themeGet("colors.primaryDark")(props)
},
selected: {
backgroundColor: "rgba(0,0,0,0.25)",
color: themeGet("colors.white")(props)
},
highlighted: {
backgroundColor: themeGet("colors.warning30")(props),
color: themeGet("colors.warningDarkest")(props)
},
selectedHighlighted: {
backgroundColor: themeGet("colors.warningLightest")(props),
color: themeGet("colors.black70")(props)
},
disabled: {
backgroundColor: themeGet("colors.grey")(props),
color: themeGet("colors.white")(props)
}
}
}));
const TagAvatarWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "TagAvatarWrapper",
componentId: "sc-1dh2aa8-6"
})(["margin-left:", ";"], props => props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault"));
const TagAvatar = /*#__PURE__*/styled(Avatar).withConfig({
displayName: "TagAvatar",
componentId: "sc-1dh2aa8-7"
})([""]);
/**
* The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
*
* The bottom row is when you want to show tags that aren't editable.
*/
export default function Tag(_ref) {
let {
variant = "default",
onSelect,
showRemove = false,
onRemove,
theme,
tagType,
showEdit = false,
onEdit,
showInfo = false,
onInfo,
showStrikeThrough = false,
children,
isPending,
ariaLabel,
small = false,
personEntity
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const component = /*#__PURE__*/_jsxs(TagWrapper, _objectSpread(_objectSpread({
small: small
}, props), {}, {
children: [/*#__PURE__*/_jsxs(TagValue, {
variant: variant,
showEdit: showEdit,
showInfo: showInfo,
showRemove: showRemove,
onClick: onSelect,
small: small,
"aria-label": ariaLabel,
children: [/*#__PURE__*/_jsxs(Flex, {
flexWrap: "nowrap",
gap: props.small ? "3px" : "4px",
alignItems: "center",
children: [personEntity && /*#__PURE__*/_jsx(TagAvatarWrapper, {
children: /*#__PURE__*/_jsx(TagAvatar, {
variant: variant,
small: small,
imageAlt: "Avatar for ".concat(children),
image: personEntity.avatarSrc,
initials: personEntity.initials,
customSize: small ? "16px" : "20px"
})
}), /*#__PURE__*/_jsxs(TagValueText, {
showStrikeThrough: showStrikeThrough,
small: small,
children: [showStrikeThrough && /*#__PURE__*/_jsx("span", {
className: "sr-only",
children: "Striked out:"
}), children]
})]
}), tagType && /*#__PURE__*/_jsx(TagType, {
variant: variant,
small: small,
children: tagType
}), isPending && /*#__PURE__*/_jsx(Loading, {})]
}), showEdit && /*#__PURE__*/_jsx(TagActionIconWrapper, {
variant: variant,
showRemove: showRemove,
onClick: onEdit,
small: small,
"aria-label": "Edit",
title: "Edit",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "pen"],
size: "sm"
})
}), showInfo && /*#__PURE__*/_jsx(TagActionIconWrapper, {
variant: variant,
onClick: onInfo,
showInfo: showInfo,
small: small,
"aria-label": "View details",
title: "View details",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "info"],
size: "sm"
})
}), showRemove && /*#__PURE__*/_jsx(TagRemoveIconWrapper, {
variant: variant,
onClick: onRemove,
small: small,
"aria-label": "Remove",
title: "Remove",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "times"],
size: "sm"
})
})]
}));
return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
theme: theme,
children: component
}) : component;
}
Tag.propTypes = {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
/** Specifies tag variant. Controls the visual state of the tag. */
variant: PropTypes.oneOf(["default", "selected", "highlighted", "selectedHighlighted", "disabled"]),
/** On tag selected */
onSelect: PropTypes.func,
/** Shows the remove button */
showRemove: PropTypes.bool,
/** On tag remove button clicked */
onRemove: PropTypes.func,
/** Shows edit button */
showEdit: PropTypes.bool,
/** On tag edit button clicked */
onEdit: PropTypes.func,
/** Shows info button */
showInfo: PropTypes.bool,
/** On tag info button clicked */
onInfo: PropTypes.func,
/** Can add a type to a tag as text */
tagType: PropTypes.string,
/** Adds loading spinner to tag to indicate awaiting an action to complete */
isPending: PropTypes.bool,
/** Specifies the design theme */
theme: PropTypes.object,
/** Add a strikethrough to a tag value text */
showStrikeThrough: PropTypes.bool,
/** Applies the small variant styles */
small: PropTypes.bool,
/** Allows you to set a person avatar image or initials */
personEntity: PropTypes.object,
/** Add ariaLabel text describing to screen readers what this tag button does when pressed. e.g. Apply filter or Navigate to tag. */
ariaLabel: PropTypes.string.isRequired
};
Tag.__docgenInfo = {
"description": "The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.\n\nThe bottom row is when you want to show tags that aren't editable.",
"methods": [],
"displayName": "Tag",
"props": {
"variant": {
"defaultValue": {
"value": "\"default\"",
"computed": false
},
"description": "Specifies tag variant. Controls the visual state of the tag.",
"type": {
"name": "enum",
"value": [{
"value": "\"default\"",
"computed": false
}, {
"value": "\"selected\"",
"computed": false
}, {
"value": "\"highlighted\"",
"computed": false
}, {
"value": "\"selectedHighlighted\"",
"computed": false
}, {
"value": "\"disabled\"",
"computed": false
}]
},
"required": false
},
"showRemove": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Shows the remove button",
"type": {
"name": "bool"
},
"required": false
},
"showEdit": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Shows edit button",
"type": {
"name": "bool"
},
"required": false
},
"showInfo": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Shows info button",
"type": {
"name": "bool"
},
"required": false
},
"showStrikeThrough": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Add a strikethrough to a tag value text",
"type": {
"name": "bool"
},
"required": false
},
"small": {
"defaultValue": {
"value": "false",
"computed": false
},
"description": "Applies the small variant styles",
"type": {
"name": "bool"
},
"required": false
},
"children": {
"description": "",
"type": {
"name": "union",
"value": [{
"name": "node"
}, {
"name": "arrayOf",
"value": {
"name": "node"
}
}]
},
"required": false
},
"onSelect": {
"description": "On tag selected",
"type": {
"name": "func"
},
"required": false
},
"onRemove": {
"description": "On tag remove button clicked",
"type": {
"name": "func"
},
"required": false
},
"onEdit": {
"description": "On tag edit button clicked",
"type": {
"name": "func"
},
"required": false
},
"onInfo": {
"description": "On tag info button clicked",
"type": {
"name": "func"
},
"required": false
},
"tagType": {
"description": "Can add a type to a tag as text",
"type": {
"name": "string"
},
"required": false
},
"isPending": {
"description": "Adds loading spinner to tag to indicate awaiting an action to complete",
"type": {
"name": "bool"
},
"required": false
},
"theme": {
"description": "Specifies the design theme",
"type": {
"name": "object"
},
"required": false
},
"personEntity": {
"description": "Allows you to set a person avatar image or initials",
"type": {
"name": "object"
},
"required": false
},
"ariaLabel": {
"description": "Add ariaLabel text describing to screen readers what this tag button does when pressed. e.g. Apply filter or Navigate to tag.",
"type": {
"name": "string"
},
"required": true
}
}
};