@laerdal/life-react-components 1.7.0-dev.8.full → 1.7.0-dev.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Tabs/TabLink.cjs +46 -46
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.js +45 -46
- package/dist/Tabs/TabLink.js.map +1 -1
- package/package.json +1 -1
package/dist/Tabs/TabLink.cjs
CHANGED
|
@@ -31,21 +31,21 @@ var _common = require("../common");
|
|
|
31
31
|
|
|
32
32
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
33
33
|
|
|
34
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
34
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
35
35
|
|
|
36
36
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
37
37
|
|
|
38
38
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
39
39
|
|
|
40
|
-
var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ", ";\n\n background-color: ", ";\n cursor: ", ";\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ", "\n }\n\n &.active {\n z-index: ", ";\n background-color: ", ";\n }\n\n &.active:hover {\n background-color: ", ";\n }\n\n &:hover {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ", ";\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active {\n background-color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n
|
|
40
|
+
var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ", ";\n\n background-color: ", ";\n cursor: ", ";\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ", "\n }\n\n &.active {\n z-index: ", ";\n background-color: ", ";\n }\n\n &.active:hover {\n background-color: ", ";\n }\n\n &:hover {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ", ";\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active {\n background-color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n\n span {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n"])), _styles.COLORS.neutral_600, function (props) {
|
|
41
41
|
return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
|
|
42
42
|
}, function (props) {
|
|
43
43
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
44
|
-
}, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.
|
|
44
|
+
}, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
45
45
|
|
|
46
|
-
var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n"])));
|
|
46
|
+
var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n"])));
|
|
47
47
|
|
|
48
|
-
var TopWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n"])));
|
|
48
|
+
var TopWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n"])));
|
|
49
49
|
|
|
50
50
|
var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin: auto 0 auto 16px !important;\n"])));
|
|
51
51
|
|
|
@@ -53,6 +53,8 @@ var StyledNotification = _styledComponents.default.div(_templateObject5 || (_tem
|
|
|
53
53
|
|
|
54
54
|
var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n"])));
|
|
55
55
|
|
|
56
|
+
var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n }\n"])), StyledTabLink);
|
|
57
|
+
|
|
56
58
|
var TabLink = function TabLink(_ref) {
|
|
57
59
|
var to = _ref.to,
|
|
58
60
|
_ref$disabled = _ref.disabled,
|
|
@@ -72,48 +74,46 @@ var TabLink = function TabLink(_ref) {
|
|
|
72
74
|
variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
|
|
73
75
|
var location = (0, _reactRouterDom.useLocation)();
|
|
74
76
|
var ref = React.useRef(null);
|
|
75
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
children:
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
})
|
|
103
|
-
children:
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
77
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
|
|
78
|
+
className: disabled ? 'disabled' : '',
|
|
79
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabLink, {
|
|
80
|
+
to: to.toString(),
|
|
81
|
+
className: disabled ? 'disabled' : '',
|
|
82
|
+
activeClassName: "active",
|
|
83
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
84
|
+
exact: exact,
|
|
85
|
+
tabIndex: disabled ? -1 : 0,
|
|
86
|
+
role: "tab",
|
|
87
|
+
"aria-selected": to === location.pathname,
|
|
88
|
+
onClick: function onClick() {
|
|
89
|
+
return !disabled && onLinkClick && onLinkClick();
|
|
90
|
+
},
|
|
91
|
+
ref: ref,
|
|
92
|
+
"data-testid": testId,
|
|
93
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
94
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
|
|
95
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
96
|
+
children: requiredLine
|
|
97
|
+
})
|
|
98
|
+
}), optionalLine && OptionalLineIcon ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionalLineWrapperWithIcon, {
|
|
99
|
+
children: [OptionalLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalLineIcon, {
|
|
100
|
+
size: "16px"
|
|
101
|
+
}), !!optionalLine && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
102
|
+
children: optionalLine
|
|
103
|
+
})]
|
|
104
|
+
}) : optionalLine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalLineWrapper, {
|
|
105
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
106
|
+
children: optionalLine
|
|
107
|
+
})
|
|
108
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
|
|
109
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNotification, {
|
|
110
|
+
children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
|
|
111
|
+
testId: "NotificationDot",
|
|
112
|
+
size: size,
|
|
113
|
+
variant: variant
|
|
108
114
|
})
|
|
109
|
-
})
|
|
110
|
-
})
|
|
111
|
-
children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
|
|
112
|
-
testId: "NotificationDot",
|
|
113
|
-
size: size,
|
|
114
|
-
variant: variant
|
|
115
|
-
})
|
|
116
|
-
})]
|
|
115
|
+
})]
|
|
116
|
+
})
|
|
117
117
|
});
|
|
118
118
|
};
|
|
119
119
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","defaultOnMouseDownHandler","pathname"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","defaultOnMouseDownHandler","pathname"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink, NavLinkProps, useLocation} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {NotificationDot} from '../NotificationDot';\nimport {BaseProps} from '../icons';\nimport {Size} from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_300};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.neutral_300};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n &.disabled {\n cursor: not-allowed;\n\n ${StyledTabLink} {\n pointer-events: none;\n }\n }\n`;\n\nconst TabLink = ({\n to,\n disabled = false,\n exact = false,\n requiredLine,\n optionalLine,\n OptionalLineIcon,\n onLinkClick,\n testId,\n showNotificationDot = false,\n size = Size.Small,\n variant = 'critical'\n }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <Wrapper className={disabled ? 'disabled' : ''}>\n <StyledTabLink\n to={to.toString()}\n className={disabled ? 'disabled' : ''}\n activeClassName=\"active\"\n onMouseDown={defaultOnMouseDownHandler}\n exact={exact}\n tabIndex={disabled ? -1 : 0}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => !disabled && onLinkClick && onLinkClick()}\n ref={ref}\n data-testid={testId}>\n <TextContainer>\n <TopWrapper>\n <span>{requiredLine}</span>\n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\"/>}\n {!!optionalLine && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant}/>}\n </StyledNotification>\n </StyledTabLink>\n </Wrapper>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.cjs"}
|
package/dist/Tabs/TabLink.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
import _pt from "prop-types";
|
|
3
3
|
|
|
4
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
4
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
5
5
|
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
@@ -14,16 +14,17 @@ import { defaultOnMouseDownHandler } from '../common';
|
|
|
14
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
15
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
16
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
17
|
-
var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ", ";\n\n background-color: ", ";\n cursor: ", ";\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ", "\n }\n\n &.active {\n z-index: ", ";\n background-color: ", ";\n }\n\n &.active:hover {\n background-color: ", ";\n }\n\n &:hover {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ", ";\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active {\n background-color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n
|
|
17
|
+
var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ", ";\n\n background-color: ", ";\n cursor: ", ";\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ", "\n }\n\n &.active {\n z-index: ", ";\n background-color: ", ";\n }\n\n &.active:hover {\n background-color: ", ";\n }\n\n &:hover {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background-color: ", ";\n color: ", ";\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ", ";\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ", ";\n }\n }\n\n &.active:active {\n background-color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n\n span {\n color: ", ";\n }\n\n &::after {\n background-color: ", ";\n }\n }\n"])), COLORS.neutral_600, function (props) {
|
|
18
18
|
return props.disabled ? COLORS.neutral_100 : 'transparent';
|
|
19
19
|
}, function (props) {
|
|
20
20
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
21
|
-
}, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.
|
|
22
|
-
var OptionalLineWrapperWithIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n"])));
|
|
23
|
-
var TopWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n"])));
|
|
21
|
+
}, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
|
|
22
|
+
var OptionalLineWrapperWithIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n"])));
|
|
23
|
+
var TopWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n"])));
|
|
24
24
|
var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n margin: auto 0 auto 16px !important;\n"])));
|
|
25
25
|
var StyledNotification = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: 0 15px 0 0 !important;\n"])));
|
|
26
26
|
var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 12px;\n"])));
|
|
27
|
+
var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n }\n"])), StyledTabLink);
|
|
27
28
|
|
|
28
29
|
var TabLink = function TabLink(_ref) {
|
|
29
30
|
var to = _ref.to,
|
|
@@ -44,48 +45,46 @@ var TabLink = function TabLink(_ref) {
|
|
|
44
45
|
variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
|
|
45
46
|
var location = useLocation();
|
|
46
47
|
var ref = React.useRef(null);
|
|
47
|
-
return /*#__PURE__*/
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
children:
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
})
|
|
75
|
-
children:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
48
|
+
return /*#__PURE__*/_jsx(Wrapper, {
|
|
49
|
+
className: disabled ? 'disabled' : '',
|
|
50
|
+
children: /*#__PURE__*/_jsxs(StyledTabLink, {
|
|
51
|
+
to: to.toString(),
|
|
52
|
+
className: disabled ? 'disabled' : '',
|
|
53
|
+
activeClassName: "active",
|
|
54
|
+
onMouseDown: defaultOnMouseDownHandler,
|
|
55
|
+
exact: exact,
|
|
56
|
+
tabIndex: disabled ? -1 : 0,
|
|
57
|
+
role: "tab",
|
|
58
|
+
"aria-selected": to === location.pathname,
|
|
59
|
+
onClick: function onClick() {
|
|
60
|
+
return !disabled && onLinkClick && onLinkClick();
|
|
61
|
+
},
|
|
62
|
+
ref: ref,
|
|
63
|
+
"data-testid": testId,
|
|
64
|
+
children: [/*#__PURE__*/_jsxs(TextContainer, {
|
|
65
|
+
children: [/*#__PURE__*/_jsx(TopWrapper, {
|
|
66
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
67
|
+
children: requiredLine
|
|
68
|
+
})
|
|
69
|
+
}), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
|
|
70
|
+
children: [OptionalLineIcon && /*#__PURE__*/_jsx(OptionalLineIcon, {
|
|
71
|
+
size: "16px"
|
|
72
|
+
}), !!optionalLine && /*#__PURE__*/_jsx("span", {
|
|
73
|
+
children: optionalLine
|
|
74
|
+
})]
|
|
75
|
+
}) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
|
|
76
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
77
|
+
children: optionalLine
|
|
78
|
+
})
|
|
79
|
+
}) : /*#__PURE__*/_jsx(_Fragment, {})]
|
|
80
|
+
}), /*#__PURE__*/_jsx(StyledNotification, {
|
|
81
|
+
children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
|
|
82
|
+
testId: "NotificationDot",
|
|
83
|
+
size: size,
|
|
84
|
+
variant: variant
|
|
80
85
|
})
|
|
81
|
-
})
|
|
82
|
-
})
|
|
83
|
-
children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
|
|
84
|
-
testId: "NotificationDot",
|
|
85
|
-
size: size,
|
|
86
|
-
variant: variant
|
|
87
|
-
})
|
|
88
|
-
})]
|
|
86
|
+
})]
|
|
87
|
+
})
|
|
89
88
|
});
|
|
90
89
|
};
|
|
91
90
|
|
package/dist/Tabs/TabLink.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname"
|
|
1
|
+
{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {NavLink, NavLinkProps, useLocation} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {NotificationDot} from '../NotificationDot';\nimport {BaseProps} from '../icons';\nimport {Size} from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n disabled?: boolean;\n requiredLine: string;\n optionalLine?: string;\n OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n onLinkClick?: () => void;\n testId?: string;\n showNotificationDot?: boolean;\n size?: Size.Small | Size.Medium | Size.Large;\n variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n disabled?: boolean;\n exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n font-size: 16px;\n line-height: 120%;\n color: ${COLORS.neutral_600};\n\n background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n border-left: 1px solid transparent;\n text-decoration: none;\n position: relative;\n border-radius: 2px;\n\n &:not(:last-child) {\n margin-bottom: 4px;\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &.active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n }\n\n &.active:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &.active {\n &::after {\n position: absolute;\n content: ' ';\n width: 4px;\n top: 0;\n bottom: 0;\n left: -1px;\n background-color: ${COLORS.primary_500};\n\n border-radius: 2px;\n }\n }\n\n &.active:hover {\n &::after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.active:active {\n background-color: ${COLORS.primary_100};\n\n &::after {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n background-color: ${COLORS.white};\n color: ${COLORS.neutral_300};\n\n span {\n color: ${COLORS.neutral_300};\n }\n\n &::after {\n background-color: ${COLORS.neutral_300};\n }\n }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n display: flex;\n flex-direction: row;\n\n span {\n margin: 0 0 0 4px !important;\n font-size: 12px;\n line-height: 16px;\n }\n`;\n\nconst TopWrapper = styled.div`\n display: flex;\n flex-direction: row;\n\n span:not(:only-child) {\n width: calc(100% - 32px);\n }\n`;\n\nconst TextContainer = styled.div`\n width: 100%;\n margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n &.disabled {\n cursor: not-allowed;\n\n ${StyledTabLink} {\n pointer-events: none;\n }\n }\n`;\n\nconst TabLink = ({\n to,\n disabled = false,\n exact = false,\n requiredLine,\n optionalLine,\n OptionalLineIcon,\n onLinkClick,\n testId,\n showNotificationDot = false,\n size = Size.Small,\n variant = 'critical'\n }: TabLinkProps) => {\n const location = useLocation();\n const ref = React.useRef<any>(null);\n\n return (\n <Wrapper className={disabled ? 'disabled' : ''}>\n <StyledTabLink\n to={to.toString()}\n className={disabled ? 'disabled' : ''}\n activeClassName=\"active\"\n onMouseDown={defaultOnMouseDownHandler}\n exact={exact}\n tabIndex={disabled ? -1 : 0}\n role=\"tab\"\n aria-selected={to === location.pathname}\n onClick={() => !disabled && onLinkClick && onLinkClick()}\n ref={ref}\n data-testid={testId}>\n <TextContainer>\n <TopWrapper>\n <span>{requiredLine}</span>\n </TopWrapper>\n {optionalLine && OptionalLineIcon ? (\n <OptionalLineWrapperWithIcon>\n {OptionalLineIcon && <OptionalLineIcon size=\"16px\"/>}\n {!!optionalLine && <span>{optionalLine}</span>}\n </OptionalLineWrapperWithIcon>\n ) : optionalLine ? (\n <OptionalLineWrapper>\n <span>{optionalLine}</span>\n </OptionalLineWrapper>\n ) : (\n <></>\n )}\n </TextContainer>\n <StyledNotification>\n {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant}/>}\n </StyledNotification>\n </StyledTabLink>\n </Wrapper>\n );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
|