orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
190 lines (189 loc) • 7.58 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "to", "button"];
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 shouldForwardProp from "@styled-system/should-forward-prop";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { space, layout, typography } from "styled-system";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { ButtonLink } from "../Button";
import { jsx as _jsx } from "react/jsx-runtime";
const styleLink = LinkComponent => styled(LinkComponent).withConfig({
shouldForwardProp,
displayName: "styleLink",
componentId: "sc-1beg6q3-0"
}).attrs(props => ({
className: "StyledLink",
to: props.to,
target: props.target,
"data-testid": props.dataTestId ? props.dataTestId : props["data-testid"] ? props["data-testid"] : null
}))(props => css({
display: props.block ? "block" : "inline-block",
fontSize: props.small ? themeGet("fontSizes.1")(props) : props.large && props.iconOnly ? themeGet("fontSizes.5")(props) : props.large ? themeGet("fontSizes.3")(props) : themeGet("fontSizes.2")(props),
fontWeight: props.bold ? themeGet("fontWeights.2")(props) : "inherit",
color: props.active ? themeGet("colors.primaryLight")(props) : props.white ? themeGet("colors.white")(props) : themeGet("colors.primary")(props),
position: "relative",
textDecoration: "none",
cursor: "pointer",
transition: themeGet("transition.transitionDefault")(props),
"&:hover": {
outline: "0",
textDecoration: "underline"
},
"&:focus": {
outline: "0",
textDecoration: "underline"
}
}), space, layout, typography);
const Hyperlink = styleLink(styled.a.withConfig({
displayName: "Hyperlink",
componentId: "sc-1beg6q3-1"
})([""]));
const ReactLink = styleLink(Link);
/**
* This `StyledLink` component supports both standard html hyperlinks and react Link components (if using react router for example).
*
* The way to use this as a hyperlink is shown below in the examples and is quite straightforward.
*
* To wrap a react router Link component in these styles, you need to do the following:
*
* Ensure you have imported both the react router link, and the design system link, like so:
*
* import { Link } from 'react-router-dom';
* import { StyledLink } from 'orchestrated-design-system';
*
* At the top of your file give a name to the link, for example, lets say we are putting these links in a header component, so we'll call it HeaderLink:
*
* ```const HeaderLink = styleLink(Link);```
*
* Then you can use in your code like so:
*
* <HeaderLink to={PATHS.DASHBOARD}>
* Dashboard
* </HeaderLink>
*/
const StyledLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
children,
to,
button
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
if (button) {
return /*#__PURE__*/_jsx(ButtonLink, _objectSpread(_objectSpread({}, props), {}, {
ref: ref,
children: children
}));
}
const LinkComponent = to ? ReactLink : Hyperlink;
return /*#__PURE__*/_jsx(LinkComponent, _objectSpread(_objectSpread({}, props), {}, {
to: to,
ref: ref,
children: children
}));
});
StyledLink.propTypes = {
/** The content wrapped by the link component */
children: PropTypes.node,
/** Designates the active link, eg if in a navigation menu, it is the current screen */
active: PropTypes.bool,
/** Specifies if link is rendered as display:block */
block: PropTypes.bool,
/** Renders a white link (useful for dark backgrounds) */
white: PropTypes.bool,
/** Styles the link text in bold */
bold: PropTypes.bool,
/** Specifies the destination of react-router-dom `Link` */
to: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.node]),
/** Specifies the link target */
target: PropTypes.string,
/** Specifies if the `StyledLink` should be visually styled to resemble a button */
button: PropTypes.bool,
/** Specifies the system design theme. */
theme: PropTypes.object
};
export { styleLink };
/** @component */
StyledLink.__docgenInfo = {
"description": "This `StyledLink` component supports both standard html hyperlinks and react Link components (if using react router for example).\n\nThe way to use this as a hyperlink is shown below in the examples and is quite straightforward.\n\nTo wrap a react router Link component in these styles, you need to do the following:\n\nEnsure you have imported both the react router link, and the design system link, like so:\n\n import { Link } from 'react-router-dom';\n import { StyledLink } from 'orchestrated-design-system';\n\nAt the top of your file give a name to the link, for example, lets say we are putting these links in a header component, so we'll call it HeaderLink:\n\n```const HeaderLink = styleLink(Link);```\n\nThen you can use in your code like so:\n\n <HeaderLink to={PATHS.DASHBOARD}>\n Dashboard\n </HeaderLink>",
"methods": [],
"displayName": "StyledLink",
"props": {
"children": {
"description": "The content wrapped by the link component",
"type": {
"name": "node"
},
"required": false
},
"active": {
"description": "Designates the active link, eg if in a navigation menu, it is the current screen",
"type": {
"name": "bool"
},
"required": false
},
"block": {
"description": "Specifies if link is rendered as display:block",
"type": {
"name": "bool"
},
"required": false
},
"white": {
"description": "Renders a white link (useful for dark backgrounds)",
"type": {
"name": "bool"
},
"required": false
},
"bold": {
"description": "Styles the link text in bold",
"type": {
"name": "bool"
},
"required": false
},
"to": {
"description": "Specifies the destination of react-router-dom `Link`",
"type": {
"name": "union",
"value": [{
"name": "element"
}, {
"name": "string"
}, {
"name": "node"
}]
},
"required": false
},
"target": {
"description": "Specifies the link target",
"type": {
"name": "string"
},
"required": false
},
"button": {
"description": "Specifies if the `StyledLink` should be visually styled to resemble a button",
"type": {
"name": "bool"
},
"required": false
},
"theme": {
"description": "Specifies the system design theme.",
"type": {
"name": "object"
},
"required": false
}
}
};
export default StyledLink;