UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

192 lines (191 loc) 6.18 kB
"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']) };