pds-dev-kit-web 2.2.131 → 2.2.132
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/src/desktop/components/MainButton/MainButton.d.ts +1 -1
- package/dist/src/desktop/components/MainButton/MainButton.js +20 -6
- package/dist/src/desktop/components/UploadMainButton/UploadMainButton.d.ts +1 -1
- package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js +21 -7
- package/dist/src/mobile/components/MainButton/MainButton.d.ts +1 -1
- package/dist/src/mobile/components/MainButton/MainButton.js +24 -7
- package/dist/src/mobile/components/UploadMainButton/UploadMainButton.d.ts +1 -1
- package/dist/src/mobile/components/UploadMainButton/UploadMainButton.js +20 -6
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -11,7 +11,7 @@ export type MainButtonProps = {
|
|
|
11
11
|
iconMode?: 'none' | 'left' | 'right';
|
|
12
12
|
iconFillType?: 'fill' | 'line';
|
|
13
13
|
iconName?: PDSIconType;
|
|
14
|
-
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
|
|
14
|
+
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
|
|
15
15
|
type?: 'button' | 'submit';
|
|
16
16
|
state?: 'normal' | 'disabled';
|
|
17
17
|
isLoading?: boolean;
|
|
@@ -352,14 +352,21 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
|
|
|
352
352
|
var theme = _a.theme;
|
|
353
353
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
354
354
|
});
|
|
355
|
-
var
|
|
355
|
+
var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
356
|
+
var theme = _a.theme;
|
|
357
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
358
|
+
});
|
|
359
|
+
var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
356
360
|
var theme = _a.theme;
|
|
357
361
|
return theme.ui_cpnt_button_line_base_hover;
|
|
358
362
|
}, function (_a) {
|
|
359
363
|
var colorTheme = _a.colorTheme;
|
|
360
364
|
return colorTheme === 'secondary1' && secondary1Disabled;
|
|
365
|
+
}, function (_a) {
|
|
366
|
+
var colorTheme = _a.colorTheme;
|
|
367
|
+
return colorTheme === 'secondary2' && secondary2Disabled;
|
|
361
368
|
});
|
|
362
|
-
var secondary1 = (0, styled_components_1.css)(
|
|
369
|
+
var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"], ["\n background-color: ", ";\n\n &:hover:enabled {\n background-color: ", ";\n }\n\n &:active:enabled {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"])), function (_a) {
|
|
363
370
|
var theme = _a.theme;
|
|
364
371
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
365
372
|
}, function (_a) {
|
|
@@ -369,7 +376,11 @@ var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObje
|
|
|
369
376
|
var theme = _a.theme;
|
|
370
377
|
return theme.ui_cpnt_button_secondary_variation_base_pressed;
|
|
371
378
|
}, transitionStyle_1.ButtonTransition);
|
|
372
|
-
var
|
|
379
|
+
var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
380
|
+
var theme = _a.theme;
|
|
381
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
382
|
+
});
|
|
383
|
+
var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:enabled::before {\n background-color: ", ";\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
373
384
|
var theme = _a.theme;
|
|
374
385
|
return theme.ui_cpnt_button_line_base_hover;
|
|
375
386
|
}, transitionStyle_1.ButtonTransition, function (_a) {
|
|
@@ -381,11 +392,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
|
|
|
381
392
|
}, function (_a) {
|
|
382
393
|
var colorTheme = _a.colorTheme;
|
|
383
394
|
return colorTheme === 'secondary1' && secondary1;
|
|
395
|
+
}, function (_a) {
|
|
396
|
+
var colorTheme = _a.colorTheme;
|
|
397
|
+
return colorTheme === 'secondary2' && secondary2;
|
|
384
398
|
}, function (_a) {
|
|
385
399
|
var state = _a.state;
|
|
386
400
|
return state === 'disabled' && secondaryDisabled;
|
|
387
401
|
});
|
|
388
|
-
var S_MainButton = styled_components_1.default.button(
|
|
402
|
+
var S_MainButton = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
|
|
389
403
|
var state = _a.state;
|
|
390
404
|
return (state === 'normal' ? 'pointer' : 'default');
|
|
391
405
|
}, function (_a) {
|
|
@@ -408,6 +422,6 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
|
|
|
408
422
|
regular: "font-weight: ".concat(theme.fontWeight.normal)
|
|
409
423
|
}[fontWeight];
|
|
410
424
|
});
|
|
411
|
-
var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(
|
|
425
|
+
var S_SubmittingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n cursor: default;\n"], ["\n cursor: default;\n"])));
|
|
412
426
|
exports.default = MainButton;
|
|
413
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
427
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
@@ -11,7 +11,7 @@ type UploadMainButtonProps = {
|
|
|
11
11
|
iconMode?: 'none' | 'left' | 'right';
|
|
12
12
|
iconFillType?: 'fill' | 'line';
|
|
13
13
|
iconName?: PDSIconType;
|
|
14
|
-
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
|
|
14
|
+
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
|
|
15
15
|
state?: 'normal' | 'disabled';
|
|
16
16
|
accept?: string;
|
|
17
17
|
multipleMode?: 'none' | 'use';
|
|
@@ -322,14 +322,21 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
|
|
|
322
322
|
var theme = _a.theme;
|
|
323
323
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
324
324
|
});
|
|
325
|
-
var
|
|
325
|
+
var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
326
|
+
var theme = _a.theme;
|
|
327
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
328
|
+
});
|
|
329
|
+
var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
326
330
|
var theme = _a.theme;
|
|
327
331
|
return theme.ui_cpnt_button_line_base_hover;
|
|
328
332
|
}, function (_a) {
|
|
329
333
|
var colorTheme = _a.colorTheme;
|
|
330
334
|
return colorTheme === 'secondary1' && secondary1Disabled;
|
|
335
|
+
}, function (_a) {
|
|
336
|
+
var colorTheme = _a.colorTheme;
|
|
337
|
+
return colorTheme === 'secondary2' && secondary2Disabled;
|
|
331
338
|
});
|
|
332
|
-
var secondary1 = (0, styled_components_1.css)(
|
|
339
|
+
var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"], ["\n background-color: ", ";\n\n &:hover:not([disabled]) {\n background-color: ", ";\n }\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"])), function (_a) {
|
|
333
340
|
var theme = _a.theme;
|
|
334
341
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
335
342
|
}, function (_a) {
|
|
@@ -339,7 +346,11 @@ var secondary1 = (0, styled_components_1.css)(templateObject_18 || (templateObje
|
|
|
339
346
|
var theme = _a.theme;
|
|
340
347
|
return theme.ui_cpnt_button_secondary_variation_base_pressed;
|
|
341
348
|
}, transitionStyle_1.ButtonTransition);
|
|
342
|
-
var
|
|
349
|
+
var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
350
|
+
var theme = _a.theme;
|
|
351
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
352
|
+
});
|
|
353
|
+
var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:hover:not([disabled])::before {\n background-color: ", ";\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
343
354
|
var theme = _a.theme;
|
|
344
355
|
return theme.ui_cpnt_button_line_base_hover;
|
|
345
356
|
}, transitionStyle_1.ButtonTransition, function (_a) {
|
|
@@ -351,11 +362,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
|
|
|
351
362
|
}, function (_a) {
|
|
352
363
|
var colorTheme = _a.colorTheme;
|
|
353
364
|
return colorTheme === 'secondary1' && secondary1;
|
|
365
|
+
}, function (_a) {
|
|
366
|
+
var colorTheme = _a.colorTheme;
|
|
367
|
+
return colorTheme === 'secondary2' && secondary2;
|
|
354
368
|
}, function (_a) {
|
|
355
369
|
var disabled = _a.disabled;
|
|
356
370
|
return disabled && secondaryDisabled;
|
|
357
371
|
});
|
|
358
|
-
var S_UploadMainButton = styled_components_1.default.label(
|
|
372
|
+
var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n & > div {\n font-weight: ", ";\n }\n\n ", "\n ", "\n ", "\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: ", ";\n display: inline-flex;\n justify-content: center;\n\n & > div {\n font-weight: ", ";\n }\n\n ", "\n ", "\n ", "\n ", ";\n"])), function (_a) {
|
|
359
373
|
var disabled = _a.disabled;
|
|
360
374
|
return (disabled ? 'default' : 'pointer');
|
|
361
375
|
}, function (_a) {
|
|
@@ -378,7 +392,7 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_20 ||
|
|
|
378
392
|
var responsiveMode = _a.responsiveMode;
|
|
379
393
|
return responsiveMode === 'use' && 'width: 100%';
|
|
380
394
|
});
|
|
381
|
-
var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(
|
|
382
|
-
var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(
|
|
395
|
+
var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
|
|
396
|
+
var S_SubmittingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n cursor: default;\n"], ["\n cursor: default;\n"])));
|
|
383
397
|
exports.default = UploadMainButton;
|
|
384
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22;
|
|
398
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
|
|
@@ -11,7 +11,7 @@ export type MainButtonProps = {
|
|
|
11
11
|
iconMode?: 'none' | 'left' | 'right';
|
|
12
12
|
iconFillType?: 'fill' | 'line';
|
|
13
13
|
iconName?: PDSIconType;
|
|
14
|
-
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
|
|
14
|
+
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
|
|
15
15
|
type?: 'button' | 'submit';
|
|
16
16
|
state?: 'normal' | 'disabled';
|
|
17
17
|
isLoading?: boolean;
|
|
@@ -121,7 +121,7 @@ function MainButton(_a) {
|
|
|
121
121
|
return 'usrTextBrandOnPrimary';
|
|
122
122
|
}
|
|
123
123
|
if (styleTheme === 'secondary') {
|
|
124
|
-
if (colorTheme === 'secondary1') {
|
|
124
|
+
if (colorTheme === 'secondary1' || colorTheme === 'secondary2') {
|
|
125
125
|
return 'sysTextWhite';
|
|
126
126
|
}
|
|
127
127
|
return 'usrTextBrandPrimary';
|
|
@@ -138,6 +138,9 @@ function MainButton(_a) {
|
|
|
138
138
|
if (styleTheme === 'secondary' && colorTheme === 'secondary1' && state === 'disabled') {
|
|
139
139
|
return 'ui_cpnt_button_text_secondary_variation_disabled';
|
|
140
140
|
}
|
|
141
|
+
if (styleTheme === 'secondary' && colorTheme === 'secondary2' && state === 'disabled') {
|
|
142
|
+
return 'ui_cpnt_button_text_secondary_variation_disabled';
|
|
143
|
+
}
|
|
141
144
|
return undefined;
|
|
142
145
|
};
|
|
143
146
|
var iconFillTypeColors = {
|
|
@@ -333,21 +336,32 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
|
|
|
333
336
|
var theme = _a.theme;
|
|
334
337
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
335
338
|
});
|
|
336
|
-
var
|
|
339
|
+
var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
340
|
+
var theme = _a.theme;
|
|
341
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
342
|
+
});
|
|
343
|
+
var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
337
344
|
var theme = _a.theme;
|
|
338
345
|
return theme.ui_cpnt_button_line_base_hover;
|
|
339
346
|
}, function (_a) {
|
|
340
347
|
var colorTheme = _a.colorTheme;
|
|
341
348
|
return colorTheme === 'secondary1' && secondary1Disabled;
|
|
349
|
+
}, function (_a) {
|
|
350
|
+
var colorTheme = _a.colorTheme;
|
|
351
|
+
return colorTheme === 'secondary2' && secondary2Disabled;
|
|
342
352
|
});
|
|
343
|
-
var secondary1 = (0, styled_components_1.css)(
|
|
353
|
+
var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:enabled {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"], ["\n background-color: ", ";\n\n &:active:enabled {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"])), function (_a) {
|
|
344
354
|
var theme = _a.theme;
|
|
345
355
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
346
356
|
}, function (_a) {
|
|
347
357
|
var theme = _a.theme;
|
|
348
358
|
return theme.ui_cpnt_button_secondary_variation_base_pressed;
|
|
349
359
|
}, transitionStyle_1.ButtonTransition);
|
|
350
|
-
var
|
|
360
|
+
var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
361
|
+
var theme = _a.theme;
|
|
362
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
363
|
+
});
|
|
364
|
+
var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:enabled::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
351
365
|
var theme = _a.theme;
|
|
352
366
|
return theme.ui_cpnt_button_line_base_hover;
|
|
353
367
|
}, transitionStyle_1.ButtonTransition, function (_a) {
|
|
@@ -356,11 +370,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
|
|
|
356
370
|
}, function (_a) {
|
|
357
371
|
var colorTheme = _a.colorTheme;
|
|
358
372
|
return colorTheme === 'secondary1' && secondary1;
|
|
373
|
+
}, function (_a) {
|
|
374
|
+
var colorTheme = _a.colorTheme;
|
|
375
|
+
return colorTheme === 'secondary2' && secondary2;
|
|
359
376
|
}, function (_a) {
|
|
360
377
|
var state = _a.state;
|
|
361
378
|
return state === 'disabled' && secondaryDisabled;
|
|
362
379
|
});
|
|
363
|
-
var S_MainButton = styled_components_1.default.button(
|
|
380
|
+
var S_MainButton = styled_components_1.default.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n\n &:focus {\n outline: none;\n }\n\n ", "\n ", "\n ", "\n ", ";\n\n & > div {\n ", ";\n }\n"])), function (_a) {
|
|
364
381
|
var styleTheme = _a.styleTheme;
|
|
365
382
|
return styleTheme && { primary: primary, secondary: secondary }[styleTheme];
|
|
366
383
|
}, function (_a) {
|
|
@@ -380,6 +397,6 @@ var S_MainButton = styled_components_1.default.button(templateObject_20 || (temp
|
|
|
380
397
|
regular: "font-weight: ".concat(theme.fontWeight.normal)
|
|
381
398
|
}[fontWeight];
|
|
382
399
|
});
|
|
383
|
-
var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(
|
|
400
|
+
var S_LoadingMainButton = (0, styled_components_1.default)(S_MainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
|
|
384
401
|
exports.default = MainButton;
|
|
385
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
402
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
@@ -11,7 +11,7 @@ type UploadMainButtonProps = {
|
|
|
11
11
|
iconMode?: 'none' | 'left' | 'right';
|
|
12
12
|
iconFillType?: 'fill' | 'line';
|
|
13
13
|
iconName?: PDSIconType;
|
|
14
|
-
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1';
|
|
14
|
+
colorTheme?: 'none' | 'line1' | 'line2' | 'line3' | 'primary1' | 'secondary1' | 'secondary2';
|
|
15
15
|
state?: 'normal' | 'disabled';
|
|
16
16
|
accept?: string;
|
|
17
17
|
multipleMode?: 'none' | 'use';
|
|
@@ -310,21 +310,32 @@ var secondary1Disabled = (0, styled_components_1.css)(templateObject_16 || (temp
|
|
|
310
310
|
var theme = _a.theme;
|
|
311
311
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
312
312
|
});
|
|
313
|
-
var
|
|
313
|
+
var secondary2Disabled = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
314
|
+
var theme = _a.theme;
|
|
315
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
316
|
+
});
|
|
317
|
+
var secondaryDisabled = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background-color: ", ";\n\n ", "\n ", "\n"], ["\n background-color: ", ";\n\n ", "\n ", "\n"])), function (_a) {
|
|
314
318
|
var theme = _a.theme;
|
|
315
319
|
return theme.ui_cpnt_button_line_base_hover;
|
|
316
320
|
}, function (_a) {
|
|
317
321
|
var colorTheme = _a.colorTheme;
|
|
318
322
|
return colorTheme === 'secondary1' && secondary1Disabled;
|
|
323
|
+
}, function (_a) {
|
|
324
|
+
var colorTheme = _a.colorTheme;
|
|
325
|
+
return colorTheme === 'secondary2' && secondary2Disabled;
|
|
319
326
|
});
|
|
320
|
-
var secondary1 = (0, styled_components_1.css)(
|
|
327
|
+
var secondary1 = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"], ["\n background-color: ", ";\n\n &:active:not([disabled]) {\n background-color: ", ";\n }\n\n &::before {\n content: '';\n display: none;\n }\n\n ", "\n"])), function (_a) {
|
|
321
328
|
var theme = _a.theme;
|
|
322
329
|
return theme.ui_cpnt_button_secondary_variation_base_default;
|
|
323
330
|
}, function (_a) {
|
|
324
331
|
var theme = _a.theme;
|
|
325
332
|
return theme.ui_cpnt_button_secondary_variation_base_pressed;
|
|
326
333
|
}, transitionStyle_1.ButtonTransition);
|
|
327
|
-
var
|
|
334
|
+
var secondary2 = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
|
|
335
|
+
var theme = _a.theme;
|
|
336
|
+
return theme.ui_cpnt_button_fill_base_on_sheet;
|
|
337
|
+
});
|
|
338
|
+
var secondary = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"], ["\n background-color: ", ";\n border: none;\n position: relative;\n\n &::before {\n content: '';\n border-radius: inherit;\n position: absolute;\n background-color: transparent;\n height: 100%;\n width: 100%;\n padding: 0;\n ", "\n }\n\n &:active:not([disabled])::before {\n background-color: ", ";\n }\n\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
328
339
|
var theme = _a.theme;
|
|
329
340
|
return theme.ui_cpnt_button_line_base_hover;
|
|
330
341
|
}, transitionStyle_1.ButtonTransition, function (_a) {
|
|
@@ -333,11 +344,14 @@ var secondary = (0, styled_components_1.css)(templateObject_19 || (templateObjec
|
|
|
333
344
|
}, function (_a) {
|
|
334
345
|
var colorTheme = _a.colorTheme;
|
|
335
346
|
return colorTheme === 'secondary1' && secondary1;
|
|
347
|
+
}, function (_a) {
|
|
348
|
+
var colorTheme = _a.colorTheme;
|
|
349
|
+
return colorTheme === 'secondary2' && secondary2;
|
|
336
350
|
}, function (_a) {
|
|
337
351
|
var disabled = _a.disabled;
|
|
338
352
|
return disabled && secondaryDisabled;
|
|
339
353
|
});
|
|
340
|
-
var S_UploadMainButton = styled_components_1.default.label(
|
|
354
|
+
var S_UploadMainButton = styled_components_1.default.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n & > div {\n font-weight: ", ";\n }\n\n ", "\n ", "\n ", "\n ", ";\n"], ["\n align-items: center;\n background-color: transparent;\n border: 1px solid transparent;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n\n & > div {\n font-weight: ", ";\n }\n\n ", "\n ", "\n ", "\n ", ";\n"])), function (_a) {
|
|
341
355
|
var theme = _a.theme, fontWeight = _a.fontWeight;
|
|
342
356
|
return fontWeight &&
|
|
343
357
|
{
|
|
@@ -357,6 +371,6 @@ var S_UploadMainButton = styled_components_1.default.label(templateObject_20 ||
|
|
|
357
371
|
var responsiveMode = _a.responsiveMode;
|
|
358
372
|
return responsiveMode === 'use' && 'width: 100%';
|
|
359
373
|
});
|
|
360
|
-
var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(
|
|
374
|
+
var S_LoadingUploadMainButton = (0, styled_components_1.default)(S_UploadMainButton)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), styles_1.skeletonLoadingStyle);
|
|
361
375
|
exports.default = UploadMainButton;
|
|
362
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
376
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
package/package.json
CHANGED
package/release-note.md
CHANGED