@laerdal/life-react-components 1.3.0 → 1.3.1-dev.3
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/AuthPage/AuthPage.js +1 -1
- package/dist/esm/AuthPage/AuthPage.js.map +1 -1
- package/dist/esm/AuthPage/Information.js +1 -1
- package/dist/esm/AuthPage/Information.js.map +1 -1
- package/dist/esm/Banners/Banner.js +16 -16
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Button/Button.js +8 -53
- package/dist/esm/Button/Button.js.map +1 -1
- package/dist/esm/styles/typography.js +66 -66
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/js/AuthPage/AuthPage.js +1 -1
- package/dist/js/AuthPage/AuthPage.js.map +1 -1
- package/dist/js/AuthPage/Information.d.ts +1 -1
- package/dist/js/AuthPage/Information.js +1 -1
- package/dist/js/AuthPage/Information.js.map +1 -1
- package/dist/js/Banners/Banner.js +16 -19
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Button/Button.js +6 -12
- package/dist/js/Button/Button.js.map +1 -1
- package/dist/js/styles/typography.d.ts +6 -6
- package/dist/js/styles/typography.js +66 -66
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/umd/AuthPage/AuthPage.js +1 -1
- package/dist/umd/AuthPage/AuthPage.js.map +1 -1
- package/dist/umd/AuthPage/Information.js +1 -1
- package/dist/umd/AuthPage/Information.js.map +1 -1
- package/dist/umd/Banners/Banner.js +16 -16
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Button/Button.js +8 -53
- package/dist/umd/Button/Button.js.map +1 -1
- package/dist/umd/styles/typography.js +66 -66
- package/dist/umd/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -23,7 +23,7 @@ const AuthPage = ({
|
|
|
23
23
|
screenSetsContainerId
|
|
24
24
|
}) => {
|
|
25
25
|
return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(InformationContainer, {
|
|
26
|
-
color: signUp ? COLORS.accent1_20 : COLORS.primary_20
|
|
26
|
+
$color: signUp ? COLORS.accent1_20 : COLORS.primary_20
|
|
27
27
|
}, /*#__PURE__*/React.createElement(InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(InformationImage, {
|
|
28
28
|
src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
|
|
29
29
|
alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;AA4BA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,sBADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,sBAHgB;AAIhBC,EAAAA,sBAJgB;AAKhBC,EAAAA,yBALgB;AAMhBC,EAAAA,yBANgB;AAOhBC,EAAAA,uBAPgB;AAQhBC,EAAAA,uBARgB;AAShBC,EAAAA,qBATgB;AAUhBC,EAAAA,qBAVgB;AAWhBC,EAAAA;AAXgB,CAAD,KAYI;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,oBAAD;AAAsB,IAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;AA4BA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,sBADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,sBAHgB;AAIhBC,EAAAA,sBAJgB;AAKhBC,EAAAA,yBALgB;AAMhBC,EAAAA,yBANgB;AAOhBC,EAAAA,uBAPgB;AAQhBC,EAAAA,uBARgB;AAShBC,EAAAA,qBATgB;AAUhBC,EAAAA,qBAVgB;AAWhBC,EAAAA;AAXgB,CAAD,KAYI;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,oBAAD;AAAsB,IAAA,MAAM,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB;AAAlE,kBACE,oBAAC,kBAAD,QACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,oBAAC,gBAAD;AAAkB,IAAA,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;AAAiF,IAAA,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;AAA3H,IAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,oBAAC,iBAAD,QAAoBN,MAAM,GAAGK,uBAAH,GAA6BC,uBAAvD,CAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,oBAAC,eAAD,QAAkBR,MAAM,GAAGO,qBAAH,GAA2BC,qBAAnD,CALvD,CADF,CAFJ,eAYE,oBAAC,mBAAD;AAAqB,IAAA,EAAE,EAAEC,qBAAzB;AAAgD,IAAA,cAAc,EAAE,CAACV;AAAjE,IAZF,CADF;AAgBD,CA7BD;;;AA7BEA,EAAAA,sB;AAGAC,EAAAA,M;AAEAC,EAAAA,sB;AAEAC,EAAAA,sB;AAEAC,EAAAA,yB;AAEAC,EAAAA,yB;AAEAC,EAAAA,uB;AAEAC,EAAAA,uB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;;AAuCF,eAAeX,QAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n /** set this to 'false' to hide the left side illustration/information section */\n showInformationSection: boolean;\n /** true if 'sign-up' screen-set is showing, otherwise false.\n * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n signUp: boolean;\n /** img src string for 'sign-up' placeholder image */\n signUpPlaceholderImage?: string;\n /** img src string for 'sign-in' placeholder image */\n signInPlaceholderImage?: string;\n /** img alt text string for 'sign-up' placeholder image */\n signUpPlaceholderImageAlt?: string;\n /** img alt text string for 'sign-in' placeholder image */\n signInPlaceholderImageAlt?: string;\n /** information header text string below 'sign-up' placeholder image */\n signUpInformationHeader?: string;\n /** information header text string below 'sign-in' placeholder image */\n signInInformationHeader?: string;\n /** information text string below 'sign-up' header text */\n signUpInformationText?: string;\n /** information text string below 'sign-in' header text */\n signInInformationText?: string;\n /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n showInformationSection,\n signUp,\n signUpPlaceholderImage,\n signInPlaceholderImage,\n signUpPlaceholderImageAlt,\n signInPlaceholderImageAlt,\n signUpInformationHeader,\n signInInformationHeader,\n signUpInformationText,\n signInInformationText,\n screenSetsContainerId,\n}: AuthPageProps) => {\n return (\n <>\n {showInformationSection && (\n <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n <InformationContent>\n {(signUpPlaceholderImage || signInPlaceholderImage) && (\n <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n )}\n {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n </InformationContent>\n </InformationContainer>\n )}\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n </>\n );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.js"}
|
|
@@ -4,7 +4,7 @@ import { BREAKPOINTS, COLORS, ParagraphTextStyle } from '../styles';
|
|
|
4
4
|
import { HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';
|
|
5
5
|
export const InformationContainer = styled(AuthPageSection)`
|
|
6
6
|
display: none;
|
|
7
|
-
background: ${props => props
|
|
7
|
+
background: ${props => props.$color};
|
|
8
8
|
|
|
9
9
|
${BREAKPOINTS.MEDIUM} {
|
|
10
10
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","$color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAsC;AAChF;AACA,gBAAiBO,KAAD,IAAWA,KAAK,CAACC,MAAO;AACxC;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA,CARO;AAUP,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACW,KAAM;AACtB;AACA;AACA;AACA,CAZO;AAcP,OAAO,MAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAG;AAC3C,IAAIV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CAAe;AACpC;AACA;AACA,CAJO;AAMP,OAAO,MAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAE;AACxC,IAAIZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CAAiD;AACtE;AACA,CAHO;AAKP,OAAO,MAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAI;AAC3C;AACA;AACA,CAHO","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n display: none;\n background: ${(props) => props.$color};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n padding-top: 56px;\n }\n`;\n\nexport const InformationContent = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: center;\n text-align: center;\n max-width: 100%;\n\n ${BREAKPOINTS.LARGE} {\n align-self: flex-end;\n margin-right: 48px;\n }\n`;\n\nexport const InformationHeader = styled.h2`\n ${HeadlineXLStyling(COLORS.black)}\n font-weight: 300;\n margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n height: 275px;\n max-width: 100%;\n`;\n"],"file":"Information.js"}
|
|
@@ -12,7 +12,7 @@ import { HyperLink } from '../HyperLink';
|
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
14
|
const BannerContainer = styled.div`
|
|
15
|
-
background: ${props => props
|
|
15
|
+
background: ${props => props.$type ? props.$type : COLORS.correct_100};
|
|
16
16
|
min-height: 48px;
|
|
17
17
|
display: flex;
|
|
18
18
|
color: ${COLORS.black};
|
|
@@ -43,8 +43,8 @@ const BannerContainer = styled.div`
|
|
|
43
43
|
}
|
|
44
44
|
`;
|
|
45
45
|
const BannerCenter = styled.div`
|
|
46
|
-
${props => ComponentMStyling(ComponentTextStyle.Regular, props
|
|
47
|
-
|
|
46
|
+
${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}
|
|
47
|
+
|
|
48
48
|
display: flex;
|
|
49
49
|
width: 100%;
|
|
50
50
|
margin: 0 0 0 16px;
|
|
@@ -74,7 +74,7 @@ const ButtonWrapper = styled.div`
|
|
|
74
74
|
`;
|
|
75
75
|
const ButtonContainer = styled.div`
|
|
76
76
|
display: contents;
|
|
77
|
-
${props => props
|
|
77
|
+
${props => props.$type ? getButtonStyle(props.$type) : null};
|
|
78
78
|
`;
|
|
79
79
|
const BannerContentWrapper = styled.div`
|
|
80
80
|
display: flex;
|
|
@@ -111,12 +111,12 @@ const Banner = ({
|
|
|
111
111
|
case 'warning':
|
|
112
112
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
113
113
|
"data-testid": testId,
|
|
114
|
-
type: COLORS.warning_100,
|
|
114
|
+
$type: COLORS.warning_100,
|
|
115
115
|
link: COLORS.warning_700,
|
|
116
116
|
hover: COLORS.warning_20,
|
|
117
117
|
bottom: bottom
|
|
118
118
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
119
|
-
color: COLORS.warning_700,
|
|
119
|
+
$color: COLORS.warning_700,
|
|
120
120
|
className: size
|
|
121
121
|
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
|
|
122
122
|
color: COLORS.warning_700,
|
|
@@ -130,7 +130,7 @@ const Banner = ({
|
|
|
130
130
|
href: link,
|
|
131
131
|
variant: "default"
|
|
132
132
|
}, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
|
|
133
|
-
type: formatTypeToLowerCase
|
|
133
|
+
$type: formatTypeToLowerCase
|
|
134
134
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
135
135
|
variant: "secondary",
|
|
136
136
|
shape: "circular",
|
|
@@ -145,13 +145,13 @@ const Banner = ({
|
|
|
145
145
|
case 'critical':
|
|
146
146
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
147
147
|
"data-testid": testId,
|
|
148
|
-
type: COLORS.critical_100,
|
|
148
|
+
$type: COLORS.critical_100,
|
|
149
149
|
link: COLORS.critical_700,
|
|
150
150
|
hover: COLORS.critical_20,
|
|
151
151
|
bottom: bottom,
|
|
152
152
|
className: size
|
|
153
153
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
154
|
-
color: COLORS.critical_700,
|
|
154
|
+
$color: COLORS.critical_700,
|
|
155
155
|
className: size
|
|
156
156
|
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(TechnicalWarning, {
|
|
157
157
|
color: COLORS.critical_700,
|
|
@@ -165,7 +165,7 @@ const Banner = ({
|
|
|
165
165
|
href: link,
|
|
166
166
|
variant: "default"
|
|
167
167
|
}, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
|
|
168
|
-
type: formatTypeToLowerCase
|
|
168
|
+
$type: formatTypeToLowerCase
|
|
169
169
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
170
170
|
variant: "secondary",
|
|
171
171
|
shape: "circular",
|
|
@@ -180,13 +180,13 @@ const Banner = ({
|
|
|
180
180
|
case 'positive':
|
|
181
181
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
182
182
|
"data-testid": testId,
|
|
183
|
-
type: COLORS.correct_100,
|
|
183
|
+
$type: COLORS.correct_100,
|
|
184
184
|
link: COLORS.correct_700,
|
|
185
185
|
hover: COLORS.correct_20,
|
|
186
186
|
bottom: bottom,
|
|
187
187
|
className: size
|
|
188
188
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
189
|
-
color: COLORS.correct_700,
|
|
189
|
+
$color: COLORS.correct_700,
|
|
190
190
|
className: size
|
|
191
191
|
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
|
|
192
192
|
color: COLORS.correct_700,
|
|
@@ -200,7 +200,7 @@ const Banner = ({
|
|
|
200
200
|
href: link,
|
|
201
201
|
variant: "default"
|
|
202
202
|
}, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
|
|
203
|
-
type: formatTypeToLowerCase
|
|
203
|
+
$type: formatTypeToLowerCase
|
|
204
204
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
205
205
|
variant: "secondary",
|
|
206
206
|
shape: "circular",
|
|
@@ -215,13 +215,13 @@ const Banner = ({
|
|
|
215
215
|
default:
|
|
216
216
|
return /*#__PURE__*/React.createElement(BannerContainer, {
|
|
217
217
|
"data-testid": testId,
|
|
218
|
-
type: COLORS.primary_100,
|
|
218
|
+
$type: COLORS.primary_100,
|
|
219
219
|
link: COLORS.primary_700,
|
|
220
220
|
hover: COLORS.primary_20,
|
|
221
221
|
bottom: bottom,
|
|
222
222
|
className: size
|
|
223
223
|
}, /*#__PURE__*/React.createElement(BannerCenter, {
|
|
224
|
-
color: COLORS.primary_700,
|
|
224
|
+
$color: COLORS.primary_700,
|
|
225
225
|
className: size
|
|
226
226
|
}, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
|
|
227
227
|
color: COLORS.primary_700,
|
|
@@ -235,7 +235,7 @@ const Banner = ({
|
|
|
235
235
|
href: link,
|
|
236
236
|
variant: "default"
|
|
237
237
|
}, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
|
|
238
|
-
type: "neutral"
|
|
238
|
+
$type: "neutral"
|
|
239
239
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
240
240
|
variant: "secondary",
|
|
241
241
|
shape: "circular",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {Size} from '../types';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n \n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ type?: string }>`\n display: contents;\n ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} $type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter $color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} $type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter $color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} $type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter $color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} $type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter $color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children} \n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
|
|
@@ -171,16 +171,10 @@ const Primary = styled.button`
|
|
|
171
171
|
}
|
|
172
172
|
&:disabled > div.button-content,
|
|
173
173
|
&.disabled-state > div.button-content {
|
|
174
|
+
pointer-events: none;
|
|
174
175
|
background-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
|
|
175
176
|
color: ${props => props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300};
|
|
176
177
|
border-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
|
|
177
|
-
cursor: not-allowed;
|
|
178
|
-
&:hover,
|
|
179
|
-
&:active {
|
|
180
|
-
background-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
|
|
181
|
-
color: ${props => props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300};
|
|
182
|
-
border-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
|
|
183
|
-
}
|
|
184
178
|
}
|
|
185
179
|
`;
|
|
186
180
|
const Secondary = styled(Primary)`
|
|
@@ -196,9 +190,9 @@ const Secondary = styled(Primary)`
|
|
|
196
190
|
&:focus:not(:focus-visible),
|
|
197
191
|
&:focus:not(:focus-visible) > div.button-content {
|
|
198
192
|
outline: none !important;
|
|
199
|
-
background-color: white;
|
|
200
193
|
}
|
|
201
194
|
|
|
195
|
+
|
|
202
196
|
&:hover > div.button-content,
|
|
203
197
|
&.hover-state > div.button-content {
|
|
204
198
|
color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
|
|
@@ -214,7 +208,6 @@ const Secondary = styled(Primary)`
|
|
|
214
208
|
}
|
|
215
209
|
&:active > div.button-content,
|
|
216
210
|
&.active-state > div.button-content {
|
|
217
|
-
background-color: white;
|
|
218
211
|
color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
|
|
219
212
|
border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
|
|
220
213
|
background-color: transparent;
|
|
@@ -226,21 +219,18 @@ const Secondary = styled(Primary)`
|
|
|
226
219
|
}
|
|
227
220
|
}
|
|
228
221
|
}
|
|
229
|
-
|
|
230
|
-
&.disabled-state {
|
|
231
|
-
cursor: not-allowed;
|
|
232
|
-
}
|
|
222
|
+
|
|
233
223
|
&:disabled > div.button-content,
|
|
234
224
|
&.disabled-state > div.button-content {
|
|
235
225
|
background-color: transparent;
|
|
236
226
|
color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300};
|
|
237
227
|
border-color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
|
|
238
|
-
cursor: not-allowed;
|
|
239
228
|
}
|
|
240
229
|
${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
|
|
230
|
+
|
|
231
|
+
&:focus,
|
|
241
232
|
&.focus-state {
|
|
242
233
|
${props => tabbedHereStyle('secondary', props?.colorTheme)};
|
|
243
|
-
|
|
244
234
|
}
|
|
245
235
|
`;
|
|
246
236
|
const Tertiary = styled(Primary)`
|
|
@@ -279,27 +269,12 @@ const Tertiary = styled(Primary)`
|
|
|
279
269
|
}
|
|
280
270
|
}
|
|
281
271
|
}
|
|
282
|
-
|
|
283
|
-
&.disabled-state {
|
|
284
|
-
cursor: not-allowed;
|
|
285
|
-
}
|
|
286
|
-
&:disabled > div.button-content,
|
|
287
|
-
&.disabled-state > div.button-content {
|
|
288
|
-
background-color: white !important;
|
|
289
|
-
color: ${COLORS.neutral_300};
|
|
290
|
-
border-color: transparent;
|
|
291
|
-
cursor: not-allowed;
|
|
292
|
-
}
|
|
293
|
-
&:disabled,
|
|
294
|
-
&.disabled-state {
|
|
295
|
-
cursor: not-allowed;
|
|
296
|
-
}
|
|
272
|
+
|
|
297
273
|
&:disabled > div.button-content,
|
|
298
274
|
&.disabled-state > div.button-content {
|
|
299
275
|
background-color: white !important;
|
|
300
276
|
color: ${COLORS.neutral_300};
|
|
301
277
|
border-color: transparent !important;
|
|
302
|
-
cursor: not-allowed;
|
|
303
278
|
}
|
|
304
279
|
${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
|
|
305
280
|
&.focus-state {
|
|
@@ -327,22 +302,12 @@ const Correct = styled(Primary)`
|
|
|
327
302
|
border-color: ${COLORS.correct_800};
|
|
328
303
|
background-color: ${COLORS.correct_800};
|
|
329
304
|
}
|
|
330
|
-
|
|
331
|
-
&.disabled-state {
|
|
332
|
-
cursor: not-allowed;
|
|
333
|
-
}
|
|
305
|
+
|
|
334
306
|
&:disabled > div.button-content,
|
|
335
307
|
&.disabled-state > div.button-content {
|
|
336
308
|
background-color: ${COLORS.neutral_100};
|
|
337
309
|
color: ${COLORS.neutral_300};
|
|
338
310
|
border-color: ${COLORS.neutral_100};
|
|
339
|
-
cursor: not-allowed;
|
|
340
|
-
&:hover,
|
|
341
|
-
&:active {
|
|
342
|
-
background-color: ${COLORS.neutral_100};
|
|
343
|
-
color: ${COLORS.neutral_300};
|
|
344
|
-
border-color: ${COLORS.neutral_100};
|
|
345
|
-
}
|
|
346
311
|
}
|
|
347
312
|
`;
|
|
348
313
|
const Critical = styled(Primary)`
|
|
@@ -366,22 +331,12 @@ const Critical = styled(Primary)`
|
|
|
366
331
|
border-color: ${COLORS.critical_800};
|
|
367
332
|
background-color: ${COLORS.critical_800};
|
|
368
333
|
}
|
|
369
|
-
|
|
370
|
-
&.disabled-state {
|
|
371
|
-
cursor: not-allowed;
|
|
372
|
-
}
|
|
334
|
+
|
|
373
335
|
&:disabled > div.button-content,
|
|
374
336
|
&.disabled-state > div.button-content {
|
|
375
337
|
background-color: ${COLORS.neutral_100};
|
|
376
338
|
color: ${COLORS.neutral_300};
|
|
377
339
|
border-color: ${COLORS.neutral_100};
|
|
378
|
-
cursor: not-allowed;
|
|
379
|
-
&:hover,
|
|
380
|
-
&:active {
|
|
381
|
-
background-color: ${COLORS.neutral_100};
|
|
382
|
-
color: ${COLORS.neutral_300};
|
|
383
|
-
border-color: ${COLORS.neutral_100};
|
|
384
|
-
}
|
|
385
340
|
}
|
|
386
341
|
`;
|
|
387
342
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["React","styled","css","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Size","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","button","props","size","Large","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","useRef","setTabbedHere","useState","renderContent","className","e","current","role","title"],"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 min-width: ${props => props.minWidth};\n\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: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\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: 4px;\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\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n background-color: white;\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`;\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\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\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={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <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 iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n minWidth={minWidth}\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 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\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":["React","styled","css","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","Size","getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","button","props","size","Large","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","useRef","setTabbedHere","useState","renderContent","className","e","current","role","title"],"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 min-width: ${props => props.minWidth};\n\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: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\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: 4px;\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 pointer-events: none;\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\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\n &:focus:not(:focus-visible),\n &:focus:not(:focus-visible) > div.button-content {\n outline: none !important;\n }\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 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\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 }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\n\n &:focus,\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\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 }\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\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 }\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\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 }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n tabbedHere?: boolean;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button: React.FunctionComponent<ButtonProps> = ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\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={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <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 iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n minWidth={minWidth}\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 'correct':\n return (\n <Correct\n {...renderProps}\n disabled={disabled}\n type={type}\n size={size}\n iconOnly={!children}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\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 iconOnly={!children}\n type={type}\n size={size}\n width={width}\n minWidth={minWidth}\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"}
|