@laerdal/life-react-components 1.0.1-dev.28.full → 1.0.1-dev.29.full
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/esm/Button/Anchor.js +76 -0
- package/dist/esm/Button/Anchor.js.map +1 -0
- package/dist/esm/Button/BackButton.js +1 -1
- package/dist/esm/Button/BackButton.js.map +1 -1
- package/dist/esm/Button/Button.js +2 -2
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/Button/index.js +1 -0
- package/dist/esm/Button/index.js.map +1 -1
- package/dist/esm/InputFields/QuickSearch.js +22 -12
- package/dist/esm/InputFields/QuickSearch.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/Button/Anchor.d.ts +7 -0
- package/dist/js/Button/Anchor.js +66 -0
- package/dist/js/Button/Anchor.js.map +1 -0
- package/dist/js/Button/BackButton.js +1 -1
- package/dist/js/Button/BackButton.js.map +1 -1
- package/dist/js/Button/Button.js +2 -2
- package/dist/js/Button/Button.js.map +1 -1
- package/dist/js/Button/index.d.ts +1 -0
- package/dist/js/Button/index.js +8 -0
- package/dist/js/Button/index.js.map +1 -1
- package/dist/js/InputFields/QuickSearch.js +24 -6
- package/dist/js/InputFields/QuickSearch.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js +1 -1
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/Button/Anchor.js +201 -0
- package/dist/umd/Button/Anchor.js.map +1 -0
- package/dist/umd/Button/BackButton.js +1 -1
- package/dist/umd/Button/BackButton.js.map +1 -1
- package/dist/umd/Button/Button.js +2 -2
- package/dist/umd/Button/Button.js.map +1 -1
- package/dist/umd/Button/index.js +10 -4
- package/dist/umd/Button/index.js.map +1 -1
- package/dist/umd/InputFields/QuickSearch.js +22 -12
- package/dist/umd/InputFields/QuickSearch.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components", "../styles"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"));
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles);
|
|
11
|
+
global.undefined = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents, _styles) {
|
|
14
|
+
"use strict";
|
|
15
|
+
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
21
|
+
|
|
22
|
+
var React = _interopRequireWildcard(_react);
|
|
23
|
+
|
|
24
|
+
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) {
|
|
27
|
+
if (typeof WeakMap !== "function") return null;
|
|
28
|
+
var cacheBabelInterop = new WeakMap();
|
|
29
|
+
var cacheNodeInterop = new WeakMap();
|
|
30
|
+
return (_getRequireWildcardCache = function (nodeInterop) {
|
|
31
|
+
return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
|
|
32
|
+
})(nodeInterop);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function _interopRequireWildcard(obj, nodeInterop) {
|
|
36
|
+
if (!nodeInterop && obj && obj.__esModule) {
|
|
37
|
+
return obj;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
|
41
|
+
return {
|
|
42
|
+
default: obj
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
var cache = _getRequireWildcardCache(nodeInterop);
|
|
47
|
+
|
|
48
|
+
if (cache && cache.has(obj)) {
|
|
49
|
+
return cache.get(obj);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
var newObj = {};
|
|
53
|
+
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
|
54
|
+
|
|
55
|
+
for (var key in obj) {
|
|
56
|
+
if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
57
|
+
var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
|
|
58
|
+
|
|
59
|
+
if (desc && (desc.get || desc.set)) {
|
|
60
|
+
Object.defineProperty(newObj, key, desc);
|
|
61
|
+
} else {
|
|
62
|
+
newObj[key] = obj[key];
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
newObj.default = obj;
|
|
68
|
+
|
|
69
|
+
if (cache) {
|
|
70
|
+
cache.set(obj, newObj);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return newObj;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function _interopRequireDefault(obj) {
|
|
77
|
+
return obj && obj.__esModule ? obj : {
|
|
78
|
+
default: obj
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const _excluded = ["children", "size", "href", "target"];
|
|
83
|
+
|
|
84
|
+
function _extends() {
|
|
85
|
+
_extends = Object.assign || function (target) {
|
|
86
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
87
|
+
var source = arguments[i];
|
|
88
|
+
|
|
89
|
+
for (var key in source) {
|
|
90
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
91
|
+
target[key] = source[key];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return target;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
return _extends.apply(this, arguments);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function _objectWithoutProperties(source, excluded) {
|
|
103
|
+
if (source == null) return {};
|
|
104
|
+
|
|
105
|
+
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
106
|
+
|
|
107
|
+
var key, i;
|
|
108
|
+
|
|
109
|
+
if (Object.getOwnPropertySymbols) {
|
|
110
|
+
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
111
|
+
|
|
112
|
+
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
113
|
+
key = sourceSymbolKeys[i];
|
|
114
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
115
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
116
|
+
target[key] = source[key];
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
return target;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
124
|
+
if (source == null) return {};
|
|
125
|
+
var target = {};
|
|
126
|
+
var sourceKeys = Object.keys(source);
|
|
127
|
+
var key, i;
|
|
128
|
+
|
|
129
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
130
|
+
key = sourceKeys[i];
|
|
131
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
132
|
+
target[key] = source[key];
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
return target;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const Anchor = _ref => {
|
|
139
|
+
let {
|
|
140
|
+
children,
|
|
141
|
+
size = 'small',
|
|
142
|
+
href = '#',
|
|
143
|
+
target = '_blank'
|
|
144
|
+
} = _ref,
|
|
145
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
146
|
+
|
|
147
|
+
return /*#__PURE__*/React.createElement(AnchorTag, _extends({
|
|
148
|
+
size: size,
|
|
149
|
+
href: href,
|
|
150
|
+
target: target
|
|
151
|
+
}, props), children);
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
Anchor.propTypes = {
|
|
155
|
+
size: _propTypes2.default.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
|
|
156
|
+
href: _propTypes2.default.string
|
|
157
|
+
};
|
|
158
|
+
const AnchorTag = _styledComponents2.default.a`
|
|
159
|
+
color: ${_styles.COLORS.primary_500};
|
|
160
|
+
background-color: transparent;
|
|
161
|
+
padding: 0;
|
|
162
|
+
border: none;
|
|
163
|
+
max-width:max-content;
|
|
164
|
+
text-decoration: none;
|
|
165
|
+
font-size: ${props => props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px'};
|
|
166
|
+
line-height: ${props => props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px'};
|
|
167
|
+
font-weight: bold;
|
|
168
|
+
font-family: inherit;
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
outline:none;
|
|
171
|
+
&:visited,
|
|
172
|
+
&.vistied-state {
|
|
173
|
+
color: ${_styles.COLORS.accent1_500};
|
|
174
|
+
background: transparent;
|
|
175
|
+
text-decoration: none;
|
|
176
|
+
}
|
|
177
|
+
&:hover,
|
|
178
|
+
&.hover-state {
|
|
179
|
+
color: ${_styles.COLORS.primary_600};
|
|
180
|
+
text-decoration: underline;
|
|
181
|
+
}
|
|
182
|
+
&:focus,
|
|
183
|
+
&.focus-state {
|
|
184
|
+
background-color: ${_styles.COLORS.white};
|
|
185
|
+
text-decoration: underline;
|
|
186
|
+
box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
|
|
187
|
+
outline:none;
|
|
188
|
+
color: ${_styles.COLORS.primary_500};
|
|
189
|
+
}
|
|
190
|
+
&:active,
|
|
191
|
+
&.active-state {
|
|
192
|
+
color: ${_styles.COLORS.primary_700};
|
|
193
|
+
background: transparent;
|
|
194
|
+
text-decoration: underline;
|
|
195
|
+
background-color:unset !important;
|
|
196
|
+
box-shadow: unset !important;
|
|
197
|
+
}
|
|
198
|
+
`;
|
|
199
|
+
exports.default = Anchor;
|
|
200
|
+
});
|
|
201
|
+
//# sourceMappingURL=Anchor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["size","href","Anchor","target","props","AnchorTag","styled","a","COLORS","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,QAAME,MAA4C,GAAG,IAAA,IAAuE;AAAA,QAAtE;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAhB,OAAA;AAA4BC,MAAAA,IAAI,GAAhC,GAAA;AAAsCE,MAAAA,MAAM,GAAC;AAA7C,QAAsE,IAAA;AAAA,QAAXC,KAAW,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AAC1H,WAAA,aACI,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,QAAA,CAAA;AAAW,MAAA,IAAI,EAAf,IAAA;AAAuB,MAAA,IAAI,EAA3B,IAAA;AAAmC,MAAA,MAAM,EAAED;AAA3C,KAAA,EAAA,KAAA,CAAA,EADJ,QACI,CADJ;AADF,GAAA;;;AAJIH,IAAAA,I,6BAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,IAAAA,I;;AAWJ,QAAMI,SAAS,GAAGC,2BAAOC,CAAe;AACxC,WAAWC,eAAOC,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA,eAAeL,KAAK,IAAKA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC3K,iBAAiBA,KAAK,IAAKA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,OAAAA,GAAAA,MAAAA,GAAkCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmCA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAAAA,MAAAA,GAAmC,MAAQ;AAC7K;AACA;AACA;AACA;AACA;AACA;AACA,aAAcI,eAAOE,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,KAAM;AACrC;AACA,+BAA+BJ,eAAOK,QAAS,iBAAgBL,eAAOM,KAAM;AAC5E;AACA,aAAaN,eAAOC,WAAY;AAChC;AACA;AACA;AACA,aAAcD,eAAOO,WAAa;AAClC;AACA;AACA;AACA;AACA;AAvCA,CAAA;oBA0CA,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\n href?: string;\n}\n\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\n return (\n <AnchorTag size={size} href={href} target={target} {...props}>\n {children}\n </AnchorTag>\n )\n}\n\nconst AnchorTag = styled.a<AnchorProps>`\n color: ${COLORS.primary_500};\n background-color: transparent;\n padding: 0;\n border: none;\n max-width:max-content; \n text-decoration: none;\n font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\n line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\n font-weight: bold;\n font-family: inherit;\n cursor: pointer;\n outline:none;\n &:visited,\n &.vistied-state {\n color: ${ COLORS.accent1_500 };\n background: transparent;\n text-decoration: none;\n }\n &:hover, \n &.hover-state {\n color: ${COLORS.primary_600};\n text-decoration: underline;\n }\n &:focus,\n &.focus-state {\n background-color: ${COLORS.white};\n text-decoration: underline;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline:none;\n color: ${COLORS.primary_500};\n }\n &:active,\n &.active-state {\n color: ${ COLORS.primary_700 };\n background: transparent;\n text-decoration: underline;\n background-color:unset !important;\n box-shadow: unset !important;\n } \n`;\n\nexport default Anchor;"],"file":"Anchor.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","size","disabled","BackButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAA0BC,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAtEH,WAA0BC,CAA1BD,GAA4FI,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;AAC5K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AAzDA,CAAA;;AAgEA,QAAMG,UAAoD,GAAG,IAAA,IAA4C;AAAA,QAA3C;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAG;AAAnB,QAA2C,IAAA;AAAA,QAAZV,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AACvG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEU;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAJA,QAAAA,GAAAA,IAAAA,GAA2B;AAAhD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAHEA,IAAAA,I,6BAAM,O,EAAU,Q;AAChBC,IAAAA,Q;;oBAeF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n box-sizing: border-box;\n min-height: 48px;\n padding: 0;\n margin: 0;\n
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["Button","styled","button","props","ComponentXSStyling","ComponentTextStyle","COLORS","ComponentSStyling","primary_20","primary_700","primary_100","primary_800","neutral_300","size","disabled","BackButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,MAAM,GAAGC,2BAAOC,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAALA,IAAAA,KAAAA,QAAAA,GAA0BC,oCAAmBC,+BAAD,IAAlBD,EAA4CE,eAAtEH,WAA0BC,CAA1BD,GAA4FI,mCAAkBF,+BAAD,IAAjBE,EAA2CD,eAA1B,WAAjBC,CAAgE;AAC5K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,eAAOE,UAAW;AAC1C,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,WAAY;AAC3C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC;AACA;AAzDA,CAAA;;AAgEA,QAAMG,UAAoD,GAAG,IAAA,IAA4C;AAAA,QAA3C;AAAA,MAAA,QAAA;AAAYF,MAAAA,IAAI,GAAG;AAAnB,QAA2C,IAAA;AAAA,QAAZV,KAAY,GAAA,wBAAA,CAAA,IAAA,EAAA,SAAA,CAAA;;AACvG,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,KAAA,EAAA;AAAmB,MAAA,IAAI,EAAEU;AAAzB,KAAA,CAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE;AAAhB,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAEA,IAAI,KAAJA,QAAAA,GAAAA,IAAAA,GAA2B;AAAhD,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EANN,QAMM,CAJF,CADF,CADF;AADF,GAAA;;;AAHEA,IAAAA,I,6BAAM,O,EAAU,Q;AAChBC,IAAAA,Q;;oBAeF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n box-sizing: border-box;\n min-height: 48px;\n padding: 0;\n margin: 0;\n outline:none;\n max-width: max-content;\n display: flex;\n align-items: center;\n border: none;\n background-color: transparent;\n cursor: pointer;\n\n ${(props) => (props.size === 'XSmall' ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n font-feature-settings: 'liga' off;\n\n & > .button-content {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: max-content;\n padding: 4px 4px 4px 0;\n border-radius: 4px;\n cursor: inherit;\n }\n\n & > .button-content > span {\n display: flex;\n cursor: inherit;\n }\n & > .button-content > label {\n display: flex;\n cursor: inherit;\n }\n\n &:hover > .button-content,\n &.hover-state > .button-content {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n &:focus > .button-content,\n &.focus-state > .button-content {\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n }\n &:active > .button-content,\n &.active-state > .button-content {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: unset;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:disabled > .button-content {\n color: ${COLORS.neutral_300} !important;\n background-color: transparent !important;\n }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n size: 'Small' | 'XSmall';\n disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = 'Small', ...props }) => {\n return (\n <Button {...props} size={size}>\n <div className={'button-content'}>\n <span>\n <ArrowLineLeft size={size === 'XSmall' ? '20' : '24'} />\n </span>\n <label>{children}</label>\n </div>\n </Button>\n );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
|
|
161
161
|
background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
|
|
162
162
|
border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
|
|
163
|
-
color: ${colorTheme === 'dark' ? _styles.COLORS.
|
|
163
|
+
color: ${colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white};
|
|
164
164
|
}
|
|
165
165
|
`;
|
|
166
166
|
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
}
|
|
216
216
|
&:focus:not(:focus-visible),
|
|
217
217
|
&:focus:not(:focus-visible) > div.button-content {
|
|
218
|
-
outline:
|
|
218
|
+
outline: none !important;
|
|
219
219
|
}
|
|
220
220
|
div.button-content {
|
|
221
221
|
${props => props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","radius","tabbedHereStyle","css","COLORS","focus_25","focus","colorTheme","primary_700","white","primary","primary_500","Primary","styled","button","props","Size","ComponentLStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","width","primary_800","neutral_100","neutral_300","Secondary","Tertiary","primary_20","primary_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","variant","role","title","imageExtraMargin","loading","testId","tabbedHere","icon","Button","children","type","size","renderProps","supressFocusRef","React","renderContent","e","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: 0 !important;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin-left: -4px;\n margin-top: -2px;\n margin-bottom: -2px;\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 9px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Text = styled.button<ButtonProps>`\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n background-color: transparent;\n padding: 0;\n border: none;\n cursor: pointer;\n\n text-decoration: underline;\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n &:hover,\n &:focus,\n &.hover-state,\n &.focus-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n background: transparent;\n }\n &:active,\n &.active-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n background: transparent;\n }\n &:disabled,\n &.disabled-state {\n color: ${COLORS.neutral_500};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n imageExtraMargin?: boolean;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n imageExtraMargin,\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n <span className={loading ? 'label loading' : 'label'}>{children}</span>\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n flatEdge={flatEdge}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'text':\n return (\n <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} data-testid={testId}>\n {children}\n </Text>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n flatEdge={flatEdge}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n flatEdge={flatEdge}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","radius","tabbedHereStyle","css","COLORS","focus_25","focus","colorTheme","primary_700","white","primary","primary_500","Primary","styled","button","props","Size","ComponentLStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","width","primary_800","neutral_100","neutral_300","Secondary","Tertiary","primary_20","primary_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Text","neutral_500","variant","role","title","imageExtraMargin","loading","testId","tabbedHere","icon","Button","children","type","size","renderProps","supressFocusRef","React","renderContent","e","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, TYPOGRAPHY } from '../styles';\nimport { Size } from '../types';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\n\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\n switch (variant) {\n case 'primary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\n }\n `;\n case 'secondary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\n color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\n }\n `;\n case 'tertiary':\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${COLORS.white};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\n color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\n }\n `;\n\n default:\n return css`\n outline: none;\n div {\n outline: none;\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\n color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\n }\n `;\n }\n};\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin-left: -4px;\n margin-top: -2px;\n margin-bottom: -2px;\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 9px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n box-shadow: none !important;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: white;\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent;\n cursor: not-allowed;\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n cursor: not-allowed;\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\n &.focus-state {\n ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\n }\n`;\n\nconst Correct = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:focus > div.button-content,\n &.focus-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n cursor: not-allowed;\n &:hover,\n &:active {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n }\n`;\n\nconst Text = styled.button<ButtonProps>`\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n background-color: transparent;\n padding: 0;\n border: none;\n cursor: pointer;\n\n text-decoration: underline;\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)\n : ComponentMStyling(ComponentTextStyle.Bold, props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n\n &:hover,\n &:focus,\n &.hover-state,\n &.focus-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n background: transparent;\n }\n &:active,\n &.active-state {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n background: transparent;\n }\n &:disabled,\n &.disabled-state {\n color: ${COLORS.neutral_500};\n background: transparent;\n cursor: not-allowed;\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n imageExtraMargin?: boolean;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = 'Primary Button',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n imageExtraMargin,\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const renderContent = () => (\n <>\n {icon && <span className={(imageExtraMargin ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n <span className={loading ? 'label loading' : 'label'}>{children}</span>\n {loading && <LoadingIndicator></LoadingIndicator>}\n </>\n );\n\n // Let's render button\n switch (variant) {\n case 'primary':\n return (\n <Primary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n case 'secondary':\n return (\n <Secondary\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Secondary>\n );\n case 'tertiary':\n return (\n <Tertiary\n {...renderProps}\n disabled={disabled}\n type={type}\n flatEdge={flatEdge}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Tertiary>\n );\n case 'text':\n return (\n <Text {...renderProps} disabled={disabled} type={type} size={size} width={width} data-testid={testId}>\n {children}\n </Text>\n );\n case 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Correct>\n );\n case 'critical':\n return (\n <Critical\n {...renderProps}\n disabled={disabled}\n flatEdge={flatEdge}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Critical>\n );\n default:\n return (\n <Primary\n {...renderProps}\n flatEdge={flatEdge}\n disabled={disabled}\n type={type}\n size={size}\n width={width}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}>\n <div className=\"button-content\">{renderContent()}</div>\n </Primary>\n );\n }\n};\n\nexport default Button;\n"],"file":"Button.js"}
|
package/dist/umd/Button/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "./Iconbutton", "./Button", "./BackButton"], factory);
|
|
3
|
+
define(["exports", "./Iconbutton", "./Button", "./BackButton", "./Anchor"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("./Iconbutton"), require("./Button"), require("./BackButton"));
|
|
5
|
+
factory(exports, require("./Iconbutton"), require("./Button"), require("./BackButton"), require("./Anchor"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.Iconbutton, global.Button, global.BackButton);
|
|
10
|
+
factory(mod.exports, global.Iconbutton, global.Button, global.BackButton, global.Anchor);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _Iconbutton, _Button, _BackButton) {
|
|
13
|
+
})(this, function (exports, _Iconbutton, _Button, _BackButton, _Anchor) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -34,6 +34,12 @@
|
|
|
34
34
|
return _interopRequireDefault(_BackButton).default;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
Object.defineProperty(exports, "Anchor", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _interopRequireDefault(_Anchor).default;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
37
43
|
|
|
38
44
|
function _interopRequireDefault(obj) {
|
|
39
45
|
return obj && obj.__esModule ? obj : {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;iDAAA,O;;;;;;6CACA,O;;;;;;iDACA,O","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;iDAAA,O;;;;;;6CACA,O;;;;;;iDACA,O;;;;;;6CACA,O","sourcesContent":["export { default as IconButton } from './Iconbutton';\nexport { default as Button } from './Button';\nexport { default as BackButton } from './BackButton';\nexport { default as Anchor } from './Anchor';\n"],"file":"index.js"}
|
|
@@ -84,10 +84,8 @@
|
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
const QuickSearchField = (0, _styledComponents2.default)(_SearchField.StyledSearchField)`
|
|
87
|
-
|
|
88
|
-
width: 48px;
|
|
87
|
+
width: ${props => props.expanded ? '100%' : '48px'};
|
|
89
88
|
${props => props.margin ? `margin: ${props.margin};` : ''}
|
|
90
|
-
|
|
91
89
|
-webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
|
|
92
90
|
transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
|
|
93
91
|
|
|
@@ -98,10 +96,8 @@
|
|
|
98
96
|
}
|
|
99
97
|
}
|
|
100
98
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
width: 100%;
|
|
104
|
-
}
|
|
99
|
+
box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${_.COLORS.primary_800}` : 'none !important'};
|
|
100
|
+
|
|
105
101
|
&:hover {
|
|
106
102
|
box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${_.COLORS.primary_700}` : 'none !important'};
|
|
107
103
|
}
|
|
@@ -128,12 +124,17 @@
|
|
|
128
124
|
|
|
129
125
|
const handleClickOutside = e => {
|
|
130
126
|
if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {
|
|
131
|
-
if (searchFieldVisible) {
|
|
127
|
+
if (searchFieldVisible && !searchTerm?.length) {
|
|
132
128
|
setSearchFieldVisible(false);
|
|
133
129
|
}
|
|
134
130
|
}
|
|
135
131
|
};
|
|
136
132
|
|
|
133
|
+
React.useEffect(() => {
|
|
134
|
+
if (searchTerm?.length) {
|
|
135
|
+
setSearchFieldVisible(true);
|
|
136
|
+
}
|
|
137
|
+
}, [searchTerm]);
|
|
137
138
|
React.useEffect(() => {
|
|
138
139
|
document.addEventListener('click', handleClickOutside);
|
|
139
140
|
return () => {
|
|
@@ -152,7 +153,7 @@
|
|
|
152
153
|
}
|
|
153
154
|
|
|
154
155
|
if (e.key === 'Escape') {
|
|
155
|
-
if (searchFieldVisible) {
|
|
156
|
+
if (searchFieldVisible && !searchTerm?.length) {
|
|
156
157
|
setSearchFieldVisible(false);
|
|
157
158
|
}
|
|
158
159
|
}
|
|
@@ -162,6 +163,11 @@
|
|
|
162
163
|
ref: searchFieldRef,
|
|
163
164
|
expanded: searchFieldVisible,
|
|
164
165
|
id: `${id}_main`,
|
|
166
|
+
onBlur: event => {
|
|
167
|
+
if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
|
|
168
|
+
setSearchFieldVisible(false);
|
|
169
|
+
}
|
|
170
|
+
},
|
|
165
171
|
"data-testid": `${id}_main`,
|
|
166
172
|
className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
|
|
167
173
|
tabbedHere: tabbedHere,
|
|
@@ -187,7 +193,8 @@
|
|
|
187
193
|
id: `${id}_Searchbutton`,
|
|
188
194
|
variant: "secondary",
|
|
189
195
|
shape: "circular",
|
|
190
|
-
|
|
196
|
+
tabIndex: searchFieldVisible ? -1 : 0,
|
|
197
|
+
action: e => searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true)
|
|
191
198
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Search, {
|
|
192
199
|
size: "24px",
|
|
193
200
|
color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
|
|
@@ -195,12 +202,15 @@
|
|
|
195
202
|
className: size ? size : '',
|
|
196
203
|
role: "button",
|
|
197
204
|
tabIndex: -1,
|
|
198
|
-
hidden: searchTerm === '' || searchTerm === undefined
|
|
205
|
+
hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
|
|
199
206
|
}, /*#__PURE__*/React.createElement(_Iconbutton2.default, {
|
|
200
207
|
id: `${id}_Clearicon`,
|
|
201
208
|
variant: "secondary",
|
|
202
209
|
shape: "circular",
|
|
203
|
-
action:
|
|
210
|
+
action: e => {
|
|
211
|
+
removeSearch(e);
|
|
212
|
+
searchFieldInputRef?.current?.focus();
|
|
213
|
+
}
|
|
204
214
|
}, /*#__PURE__*/React.createElement(_SystemIcons.Clear, {
|
|
205
215
|
size: "24px",
|
|
206
216
|
color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
|