vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
192 lines (191 loc) • 6.18 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Link = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactFela = require("react-fela");
var _useConfig = require("../../config/use-config");
var _useTheme = require("../../styling/use-theme");
var _helpers = require("../../utils/helpers");
var _click = require("../click");
var _inline = require("../inline");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Svg = _ref => {
let {
As = 'svg',
extend,
children,
...props
} = _ref;
const {
css
} = (0, _reactFela.useFela)(props);
return /*#__PURE__*/_react.default.createElement(As, (0, _extends2.default)({
className: css(extend)
}, props), children);
};
const arrows = {
left: 'm9.272 2-4 4 4 4L8 11.271 2.727 6 8 .727l1.272 1.272Z',
right: 'm2.728 10 4-4-4-4L4 .729 9.273 6 4 11.273l-1.272-1.272Z',
up: 'm10 9.272-4-4-4 4L.729 8 6 2.727 11.273 8l-1.272 1.272Z',
down: 'm2 2.728 4 4 4-4L11.271 4 6 9.273.727 4l1.272-1.272Z'
};
const Arrow = _ref2 => {
let {
arrowDirection,
arrowPath,
before
} = _ref2;
return /*#__PURE__*/_react.default.createElement(Svg, {
extend: {
marginInlineStart: '0.3em',
...(before && {
marginInlineEnd: '0.3em',
marginInlineStart: 0
}),
top: 1,
position: 'relative'
},
viewBox: `${arrowDirection === 'up' || arrowDirection === 'down' ? '0 -1' : '0 0'} 12 12`,
width: "0.75em",
height: "0.75em",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/_react.default.createElement("path", {
d: arrowPath,
fill: "currentColor"
}));
};
/**
* @deprecated Use `<a>` element instead, with or without arrows. See [Link](https://developer.volvocars.com/design-system/web/?path=/docs/components-link--docs)
*/
const Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
let {
children,
arrow,
intent = 'primary',
textTransform = 'first-letter-uppercase',
...props
} = _ref3;
const theme = (0, _useTheme.useTheme)();
const {
v3Button
} = (0, _useConfig.useConfig)();
const rel = (0, _helpers.getLinkRel)({
rel: props.rel,
href: props.href,
target: props.target
});
let resolveArrow = arrow;
if (theme.direction === 'rtl') {
if (arrow === 'right') {
resolveArrow = 'left';
}
if (arrow === 'left') {
resolveArrow = 'right';
}
}
const arrowPath = arrows[resolveArrow || 'right'];
const color = intent === 'destructive' ? theme.tokens.linkDestructiveForeground : theme.tokens.linkForeground;
return /*#__PURE__*/_react.default.createElement(_click.Click, (0, _extends2.default)({
ref: ref,
rel: rel,
href: props.href
}, props, {
extend: {
fontSize: '1rem',
fontWeight: 500,
letterSpacing: '0.02em',
padding: '12px 0',
lineHeight: '1.375rem',
fontFamily: theme.fontTypes.NOVUM,
color,
outlineColor: color,
outlineOffset: '0.25em',
extend: [{
condition: v3Button,
style: {
fontSize: '0.875rem',
textTransform: 'uppercase'
}
}, {
condition: props.disabled,
style: {
opacity: 0.3
}
}, {
condition: !props.disabled,
style: {
'@media (hover: hover)': {
':hover:not(:active)': {
textDecorationLine: 'underline'
},
':hover:active': {
textDecorationLine: 'none'
}
},
':active': {
textDecorationLine: 'underline'
}
}
}, ...constrainedText({
textTransform
})]
}
}), arrow && arrow === 'left' && /*#__PURE__*/_react.default.createElement(_inline.Inline, {
extend: {
whiteSpace: 'nowrap'
}
}, /*#__PURE__*/_react.default.createElement(Arrow, {
before: true,
arrowPath: arrowPath,
arrowDirection: arrow
}), "\uFEFF"), children, arrow && arrow !== 'left' && /*#__PURE__*/_react.default.createElement(_inline.Inline, {
extend: {
whiteSpace: 'nowrap'
}
}, "\uFEFF", /*#__PURE__*/_react.default.createElement(Arrow, {
arrowPath: arrowPath,
arrowDirection: arrow
})));
});
const constrainedText = _ref4 => {
let {
textTransform
} = _ref4;
return [{
condition: textTransform === 'capitalize',
style: {
textTransform: 'capitalize'
}
}, {
condition: textTransform === 'none',
style: {
textTransform: 'none'
}
}, {
condition: textTransform === 'first-letter-uppercase',
style: {
'&::first-letter': {
textTransform: 'uppercase'
}
}
}];
};
Link.displayName = 'Link';
Link.propTypes = {
/** A JSX node */
// @ts-ignore
children: _propTypes.default.node,
intent: _propTypes.default.oneOf(['primary', 'destructive']),
href: _propTypes.default.string,
arrow: _propTypes.default.oneOf(['up', 'down', 'right', 'left', null]),
/** Disable link interaction */
disabled: _propTypes.default.bool,
textTransform: _propTypes.default.oneOf(['none', 'capitalize', 'first-letter-uppercase'])
};