orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
189 lines • 6.49 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["config", "variant", "showAsIconTooltip"];
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, typography, variant } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import StyledLink from "../StyledLink";
import Popover from "../Popover";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BreadcrumbsWrapper = /*#__PURE__*/styled("nav").attrs({
"aria-label": "breadcrumb"
}).withConfig({
displayName: "BreadcrumbsWrapper",
componentId: "sc-qbw4kn-0"
})(["", " ", ""], space, layout);
const List = /*#__PURE__*/styled("ol").withConfig({
shouldForwardProp: prop => !["variant"].includes(prop)
}).withConfig({
displayName: "List",
componentId: "sc-qbw4kn-1"
})(["display:flex;flex-direction:", ";flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px;", " ", ""], _ref => {
let {
showAsIconTooltip
} = _ref;
return showAsIconTooltip ? "column" : "row";
}, variant({
variants: {
default: {
textShadow: "none"
},
white: {
textShadow: "0 0px 5px rgba(0,0,0,0.2)"
}
}
}), space);
const Item = /*#__PURE__*/styled("li").withConfig({
shouldForwardProp: prop => !["variant", "isLast"].includes(prop)
}).withConfig({
displayName: "Item",
componentId: "sc-qbw4kn-2"
})(["display:flex;gap:5px;align-items:center;font-size:", ";line-height:1.5;font-weight:", ";& > a{color:inherit;text-decoration:none;&:hover{text-decoration:underline;}}", " ", ""], themeGet("fontSizes.0"), _ref2 => {
let {
isLast
} = _ref2;
return isLast ? themeGet("fontWeights.2") : "normal";
}, props => variant({
variants: {
default: {
color: themeGet("colors.greyDarker")(props)
},
white: {
color: themeGet("colors.white")(props)
}
}
}), typography);
const Breadcrumbs = _ref3 => {
let {
config,
variant = "default",
showAsIconTooltip
} = _ref3,
props = _objectWithoutProperties(_ref3, _excluded);
if (showAsIconTooltip) {
return /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsx(List, {
variant: variant,
showAsIconTooltip: showAsIconTooltip,
children: config.map((item, idx) => {
const isLast = idx === config.length - 1;
return /*#__PURE__*/_jsxs(Item, {
variant: variant,
isLast: isLast,
"aria-current": isLast ? "page" : undefined,
children: [isLast ? /*#__PURE__*/_jsx("span", {
children: item.label
}) : /*#__PURE__*/_jsx(StyledLink, {
fontSize: "0",
to: item.to,
white: variant === "white",
children: item.label
}), !isLast && /*#__PURE__*/_jsx("span", {
children: "/"
})]
}, item.id || item.to || idx);
})
}),
width: "fit-content",
direction: "top",
inlineBlock: true,
children: showAsIconTooltip
});
}
return /*#__PURE__*/_jsx(BreadcrumbsWrapper, _objectSpread(_objectSpread({}, props), {}, {
children: /*#__PURE__*/_jsx(List, {
variant: variant,
children: config.map((item, idx) => {
const isLast = idx === config.length - 1;
return /*#__PURE__*/_jsxs(Item, {
variant: variant,
isLast: isLast,
"aria-current": isLast ? "page" : undefined,
children: [isLast ? /*#__PURE__*/_jsx("span", {
children: item.label
}) : /*#__PURE__*/_jsx(StyledLink, {
fontSize: "0",
to: item.to,
white: variant === "white",
children: item.label
}), !isLast && /*#__PURE__*/_jsx("span", {
children: "/"
})]
}, item.id || item.to || idx);
})
})
}));
};
Breadcrumbs.propTypes = {
/** Array of breadcrumb items: { label, to, id } */
config: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.node.isRequired,
to: PropTypes.string,
id: PropTypes.string
})).isRequired,
/** Variant for text color: 'default' (grey) or 'white' */
variant: PropTypes.oneOf(["default", "white"]),
/** If provided, renders the popover-with-icon variant using this icon */
showAsIconTooltip: PropTypes.node
};
Breadcrumbs.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Breadcrumbs",
"props": {
"variant": {
"defaultValue": {
"value": "\"default\"",
"computed": false
},
"description": "Variant for text color: 'default' (grey) or 'white'",
"type": {
"name": "enum",
"value": [{
"value": "\"default\"",
"computed": false
}, {
"value": "\"white\"",
"computed": false
}]
},
"required": false
},
"config": {
"description": "Array of breadcrumb items: { label, to, id }",
"type": {
"name": "arrayOf",
"value": {
"name": "shape",
"value": {
"label": {
"name": "node",
"required": true
},
"to": {
"name": "string",
"required": false
},
"id": {
"name": "string",
"required": false
}
}
}
},
"required": true
},
"showAsIconTooltip": {
"description": "If provided, renders the popover-with-icon variant using this icon",
"type": {
"name": "node"
},
"required": false
}
}
};
export default Breadcrumbs;