pds-dev-kit-web-test 2.5.391 → 2.5.393
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/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +129 -126
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/desktop/components/Chip/Chip.d.ts +1 -1
- package/dist/src/desktop/components/Chip/Chip.js +50 -5
- package/dist/src/mobile/components/Chip/Chip.d.ts +1 -1
- package/dist/src/mobile/components/Chip/Chip.js +50 -5
- package/dist/src/sub/DynamicLayout/mock_video_cb.js +1 -1
- package/dist/src/sub/DynamicLayout/mocks.js +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js +1 -1
- package/package.json +1 -1
- package/release-note.md +2 -2
@@ -375,5 +375,6 @@
|
|
375
375
|
"sys_cpnt_sheet_base_52": "darkgrey50",
|
376
376
|
"sys_cpnt_sheet_base_53": "darkgrey70",
|
377
377
|
"sys_widget_grey_07": "grey900",
|
378
|
-
"sys_cpnt_sheet_base_54": "grey30"
|
378
|
+
"sys_cpnt_sheet_base_54": "grey30",
|
379
|
+
"sys_component_border_01": "grey100/opacity50"
|
379
380
|
}
|
@@ -899,5 +899,6 @@
|
|
899
899
|
"ui_cpnt_selcontrols_icon_grey_01": "sys_widget_grey_01",
|
900
900
|
"ui_cpnt_selcontrols_text_grey_01": "sys_text_grey_01",
|
901
901
|
"ui_cpnt_snackbar_text": "sys_widget_grey_07",
|
902
|
-
"ui_cpnt_snackbar_base": "sys_cpnt_sheet_base_54"
|
902
|
+
"ui_cpnt_snackbar_base": "sys_cpnt_sheet_base_54",
|
903
|
+
"ui_140": "sys_component_border_01"
|
903
904
|
}
|
@@ -1,5 +1,129 @@
|
|
1
1
|
declare const colorSet: {
|
2
|
-
readonly
|
2
|
+
readonly SemanticColor: {
|
3
|
+
blue500: string;
|
4
|
+
blue700: string;
|
5
|
+
blue300: string;
|
6
|
+
green700: string;
|
7
|
+
green500: string;
|
8
|
+
green300: string;
|
9
|
+
red500: string;
|
10
|
+
grey900: string;
|
11
|
+
grey500: string;
|
12
|
+
grey400: string;
|
13
|
+
grey100: string;
|
14
|
+
grey50: string;
|
15
|
+
white: string;
|
16
|
+
black: string;
|
17
|
+
darkblue500: string;
|
18
|
+
grey950: string;
|
19
|
+
darkgrey900: string;
|
20
|
+
darkgrey500: string;
|
21
|
+
darkgrey400: string;
|
22
|
+
darkgrey100: string;
|
23
|
+
darkgrey50: string;
|
24
|
+
darkred500: string;
|
25
|
+
darkgreen700: string;
|
26
|
+
orange500: string;
|
27
|
+
darkorange500: string;
|
28
|
+
opacity00: string;
|
29
|
+
opacity20: string;
|
30
|
+
opacity30: string;
|
31
|
+
opacity65: string;
|
32
|
+
darkgreen500: string;
|
33
|
+
grey70: string;
|
34
|
+
navy500: string;
|
35
|
+
lightgreen500: string;
|
36
|
+
pink500: string;
|
37
|
+
darkgrey70: string;
|
38
|
+
darknavy500: string;
|
39
|
+
darkpink500: string;
|
40
|
+
darklightgreen500: string;
|
41
|
+
opacity10: string;
|
42
|
+
grey600: string;
|
43
|
+
darkgrey600: string;
|
44
|
+
skyblue500: string;
|
45
|
+
skyblue300: string;
|
46
|
+
pink300: string;
|
47
|
+
lightpink500: string;
|
48
|
+
darkblue300: string;
|
49
|
+
darkblue700: string;
|
50
|
+
darkgreen300: string;
|
51
|
+
darkskyblue500: string;
|
52
|
+
navy100: string;
|
53
|
+
darknavy100: string;
|
54
|
+
opacity80: string;
|
55
|
+
opacity50: string;
|
56
|
+
grey30: string;
|
57
|
+
opacity95: string;
|
58
|
+
darkgrey30: string;
|
59
|
+
opacity40: string;
|
60
|
+
kakaoyellow: string;
|
61
|
+
pastelblue500: string;
|
62
|
+
pastelpink500: string;
|
63
|
+
pastelorange500: string;
|
64
|
+
pastelgreen500: string;
|
65
|
+
pastelpurple500: string;
|
66
|
+
darkpastelblue500: string;
|
67
|
+
darkpastelpink500: string;
|
68
|
+
darkpastelorange500: string;
|
69
|
+
darkpastelgreen500: string;
|
70
|
+
darkpastelpurple500: string;
|
71
|
+
green30: string;
|
72
|
+
darkgreen30: string;
|
73
|
+
orange50: string;
|
74
|
+
darkorange50: string;
|
75
|
+
orange30: string;
|
76
|
+
darkorange30: string;
|
77
|
+
green50: string;
|
78
|
+
darkgreen50: string;
|
79
|
+
opacity90: string;
|
80
|
+
facebookblue: string;
|
81
|
+
opacity05: string;
|
82
|
+
opacity15: string;
|
83
|
+
grey80: string;
|
84
|
+
grey200: string;
|
85
|
+
darkgrey80: string;
|
86
|
+
darkgrey200: string;
|
87
|
+
opacity70: string;
|
88
|
+
opacity60: string;
|
89
|
+
skyblue100: string;
|
90
|
+
green100: string;
|
91
|
+
darkgreen100: string;
|
92
|
+
darkskyblue100: string;
|
93
|
+
opacity25: string;
|
94
|
+
opacity35: string;
|
95
|
+
grey10: string;
|
96
|
+
darkgrey10: string;
|
97
|
+
blue50: string;
|
98
|
+
darkblue50: string;
|
99
|
+
blue10: string;
|
100
|
+
red10: string;
|
101
|
+
green10: string;
|
102
|
+
blue30: string;
|
103
|
+
red30: string;
|
104
|
+
orange300: string;
|
105
|
+
darkorange300: string;
|
106
|
+
darkpink300: string;
|
107
|
+
pastelblue300: string;
|
108
|
+
darkpastelblue300: string;
|
109
|
+
softpurple500: string;
|
110
|
+
darksoftpurple500: string;
|
111
|
+
coolpink500: string;
|
112
|
+
darkcoolpink500: string;
|
113
|
+
brown500: string;
|
114
|
+
darkbrown500: string;
|
115
|
+
yellow300: string;
|
116
|
+
darkyellow300: string;
|
117
|
+
grey20: string;
|
118
|
+
darkgrey20: string;
|
119
|
+
grey300: string;
|
120
|
+
darkgrey300: string;
|
121
|
+
yellow500: string;
|
122
|
+
darkyellow500: string;
|
123
|
+
grey450: string;
|
124
|
+
darkgrey450: string;
|
125
|
+
};
|
126
|
+
readonly PaletteColor_light: {
|
3
127
|
sys_container_background_01: string;
|
4
128
|
sys_container_background_02: string;
|
5
129
|
sys_container_background_03: string;
|
@@ -377,132 +501,9 @@ declare const colorSet: {
|
|
377
501
|
sys_cpnt_sheet_base_53: string;
|
378
502
|
sys_widget_grey_07: string;
|
379
503
|
sys_cpnt_sheet_base_54: string;
|
504
|
+
sys_component_border_01: string;
|
380
505
|
};
|
381
|
-
readonly
|
382
|
-
blue500: string;
|
383
|
-
blue700: string;
|
384
|
-
blue300: string;
|
385
|
-
green700: string;
|
386
|
-
green500: string;
|
387
|
-
green300: string;
|
388
|
-
red500: string;
|
389
|
-
grey900: string;
|
390
|
-
grey500: string;
|
391
|
-
grey400: string;
|
392
|
-
grey100: string;
|
393
|
-
grey50: string;
|
394
|
-
white: string;
|
395
|
-
black: string;
|
396
|
-
darkblue500: string;
|
397
|
-
grey950: string;
|
398
|
-
darkgrey900: string;
|
399
|
-
darkgrey500: string;
|
400
|
-
darkgrey400: string;
|
401
|
-
darkgrey100: string;
|
402
|
-
darkgrey50: string;
|
403
|
-
darkred500: string;
|
404
|
-
darkgreen700: string;
|
405
|
-
orange500: string;
|
406
|
-
darkorange500: string;
|
407
|
-
opacity00: string;
|
408
|
-
opacity20: string;
|
409
|
-
opacity30: string;
|
410
|
-
opacity65: string;
|
411
|
-
darkgreen500: string;
|
412
|
-
grey70: string;
|
413
|
-
navy500: string;
|
414
|
-
lightgreen500: string;
|
415
|
-
pink500: string;
|
416
|
-
darkgrey70: string;
|
417
|
-
darknavy500: string;
|
418
|
-
darkpink500: string;
|
419
|
-
darklightgreen500: string;
|
420
|
-
opacity10: string;
|
421
|
-
grey600: string;
|
422
|
-
darkgrey600: string;
|
423
|
-
skyblue500: string;
|
424
|
-
skyblue300: string;
|
425
|
-
pink300: string;
|
426
|
-
lightpink500: string;
|
427
|
-
darkblue300: string;
|
428
|
-
darkblue700: string;
|
429
|
-
darkgreen300: string;
|
430
|
-
darkskyblue500: string;
|
431
|
-
navy100: string;
|
432
|
-
darknavy100: string;
|
433
|
-
opacity80: string;
|
434
|
-
opacity50: string;
|
435
|
-
grey30: string;
|
436
|
-
opacity95: string;
|
437
|
-
darkgrey30: string;
|
438
|
-
opacity40: string;
|
439
|
-
kakaoyellow: string;
|
440
|
-
pastelblue500: string;
|
441
|
-
pastelpink500: string;
|
442
|
-
pastelorange500: string;
|
443
|
-
pastelgreen500: string;
|
444
|
-
pastelpurple500: string;
|
445
|
-
darkpastelblue500: string;
|
446
|
-
darkpastelpink500: string;
|
447
|
-
darkpastelorange500: string;
|
448
|
-
darkpastelgreen500: string;
|
449
|
-
darkpastelpurple500: string;
|
450
|
-
green30: string;
|
451
|
-
darkgreen30: string;
|
452
|
-
orange50: string;
|
453
|
-
darkorange50: string;
|
454
|
-
orange30: string;
|
455
|
-
darkorange30: string;
|
456
|
-
green50: string;
|
457
|
-
darkgreen50: string;
|
458
|
-
opacity90: string;
|
459
|
-
facebookblue: string;
|
460
|
-
opacity05: string;
|
461
|
-
opacity15: string;
|
462
|
-
grey80: string;
|
463
|
-
grey200: string;
|
464
|
-
darkgrey80: string;
|
465
|
-
darkgrey200: string;
|
466
|
-
opacity70: string;
|
467
|
-
opacity60: string;
|
468
|
-
skyblue100: string;
|
469
|
-
green100: string;
|
470
|
-
darkgreen100: string;
|
471
|
-
darkskyblue100: string;
|
472
|
-
opacity25: string;
|
473
|
-
opacity35: string;
|
474
|
-
grey10: string;
|
475
|
-
darkgrey10: string;
|
476
|
-
blue50: string;
|
477
|
-
darkblue50: string;
|
478
|
-
blue10: string;
|
479
|
-
red10: string;
|
480
|
-
green10: string;
|
481
|
-
blue30: string;
|
482
|
-
red30: string;
|
483
|
-
orange300: string;
|
484
|
-
darkorange300: string;
|
485
|
-
darkpink300: string;
|
486
|
-
pastelblue300: string;
|
487
|
-
darkpastelblue300: string;
|
488
|
-
softpurple500: string;
|
489
|
-
darksoftpurple500: string;
|
490
|
-
coolpink500: string;
|
491
|
-
darkcoolpink500: string;
|
492
|
-
brown500: string;
|
493
|
-
darkbrown500: string;
|
494
|
-
yellow300: string;
|
495
|
-
darkyellow300: string;
|
496
|
-
grey20: string;
|
497
|
-
darkgrey20: string;
|
498
|
-
grey300: string;
|
499
|
-
darkgrey300: string;
|
500
|
-
yellow500: string;
|
501
|
-
darkyellow500: string;
|
502
|
-
grey450: string;
|
503
|
-
darkgrey450: string;
|
504
|
-
};
|
505
|
-
readonly PaletteColor_light: {
|
506
|
+
readonly PaletteColor_Dark: {
|
506
507
|
sys_container_background_01: string;
|
507
508
|
sys_container_background_02: string;
|
508
509
|
sys_container_background_03: string;
|
@@ -880,6 +881,7 @@ declare const colorSet: {
|
|
880
881
|
sys_cpnt_sheet_base_53: string;
|
881
882
|
sys_widget_grey_07: string;
|
882
883
|
sys_cpnt_sheet_base_54: string;
|
884
|
+
sys_component_border_01: string;
|
883
885
|
};
|
884
886
|
readonly UIColor: {
|
885
887
|
ui_cpnt_button_fill_base_primary: string;
|
@@ -1783,6 +1785,7 @@ declare const colorSet: {
|
|
1783
1785
|
ui_cpnt_selcontrols_text_grey_01: string;
|
1784
1786
|
ui_cpnt_snackbar_text: string;
|
1785
1787
|
ui_cpnt_snackbar_base: string;
|
1788
|
+
ui_140: string;
|
1786
1789
|
};
|
1787
1790
|
};
|
1788
1791
|
export default colorSet;
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
/* eslint-disable import/order */
|
7
|
-
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
8
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
9
8
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
9
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
10
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
11
11
|
var colorSet = {
|
12
|
-
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
13
12
|
SemanticColor: SemanticColor_json_1.default,
|
14
13
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
14
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
15
15
|
UIColor: UIColor_json_1.default
|
16
16
|
};
|
17
17
|
exports.default = colorSet;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
|
3
|
-
type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
|
3
|
+
type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
|
4
4
|
export type ChipProps = {
|
5
5
|
displayType?: DisplayType;
|
6
6
|
text?: PDSTextType;
|
@@ -14,13 +14,33 @@ var __assign = (this && this.__assign) || function () {
|
|
14
14
|
};
|
15
15
|
return __assign.apply(this, arguments);
|
16
16
|
};
|
17
|
-
var
|
18
|
-
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
19
39
|
};
|
20
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
21
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
22
42
|
var react_1 = require("react");
|
23
|
-
var styled_components_1 =
|
43
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
24
44
|
var hybrid_1 = require("../../../hybrid");
|
25
45
|
var Icon_1 = require("../../../hybrid/components/Icon");
|
26
46
|
var TextLabel_1 = require("../TextLabel");
|
@@ -58,6 +78,10 @@ function Chip(_a) {
|
|
58
78
|
return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
|
59
79
|
case 'removable':
|
60
80
|
return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
|
81
|
+
case 'information2':
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
|
83
|
+
case 'information3':
|
84
|
+
return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
|
61
85
|
default:
|
62
86
|
return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
|
63
87
|
}
|
@@ -131,5 +155,26 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
|
|
131
155
|
var theme = _a.theme;
|
132
156
|
return theme.spacing.spacingB;
|
133
157
|
});
|
134
|
-
var
|
135
|
-
var
|
158
|
+
var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
|
159
|
+
var theme = _a.theme;
|
160
|
+
return theme.spacing.spacingB;
|
161
|
+
}, function (_a) {
|
162
|
+
var theme = _a.theme;
|
163
|
+
return theme.spacing.spacingB;
|
164
|
+
});
|
165
|
+
var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
|
166
|
+
var theme = _a.theme;
|
167
|
+
return theme.ui_67;
|
168
|
+
}, function (_a) {
|
169
|
+
var theme = _a.theme;
|
170
|
+
return theme.ui_140;
|
171
|
+
});
|
172
|
+
var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
|
173
|
+
var theme = _a.theme;
|
174
|
+
return theme.ui_37;
|
175
|
+
}, function (_a) {
|
176
|
+
var theme = _a.theme;
|
177
|
+
return theme.ui_67;
|
178
|
+
});
|
179
|
+
var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"])));
|
180
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { PDSIconType, PDSTextType, PDSValueOption, UiColors } from '../../../common';
|
3
|
-
type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information';
|
3
|
+
type DisplayType = 'category_choice' | 'filter_single' | 'filter_multi' | 'removable' | 'label' | 'time' | 'information' | 'information2' | 'information3';
|
4
4
|
export type ChipProps = {
|
5
5
|
displayType?: DisplayType;
|
6
6
|
text?: PDSTextType;
|
@@ -14,13 +14,33 @@ var __assign = (this && this.__assign) || function () {
|
|
14
14
|
};
|
15
15
|
return __assign.apply(this, arguments);
|
16
16
|
};
|
17
|
-
var
|
18
|
-
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
18
|
+
if (k2 === undefined) k2 = k;
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
22
|
+
}
|
23
|
+
Object.defineProperty(o, k2, desc);
|
24
|
+
}) : (function(o, m, k, k2) {
|
25
|
+
if (k2 === undefined) k2 = k;
|
26
|
+
o[k2] = m[k];
|
27
|
+
}));
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
30
|
+
}) : function(o, v) {
|
31
|
+
o["default"] = v;
|
32
|
+
});
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
34
|
+
if (mod && mod.__esModule) return mod;
|
35
|
+
var result = {};
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
37
|
+
__setModuleDefault(result, mod);
|
38
|
+
return result;
|
19
39
|
};
|
20
40
|
Object.defineProperty(exports, "__esModule", { value: true });
|
21
41
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
22
42
|
var react_1 = require("react");
|
23
|
-
var styled_components_1 =
|
43
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
24
44
|
var hybrid_1 = require("../../../hybrid");
|
25
45
|
var Icon_1 = require("../../../hybrid/components/Icon");
|
26
46
|
var TextLabel_1 = require("../TextLabel");
|
@@ -58,6 +78,10 @@ function Chip(_a) {
|
|
58
78
|
return ((0, jsx_runtime_1.jsx)(S_TimeChip, __assign({ onClick: handleClickChip }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption2Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }) })));
|
59
79
|
case 'removable':
|
60
80
|
return ((0, jsx_runtime_1.jsxs)(S_RemovableChip, __assign({ onClick: handleClickChip }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: "sysTextSecondary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), (0, jsx_runtime_1.jsx)(S_XIconWrapper, __assign({ onClick: handleClickXMarkIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 12, iconName: "ic_xmark", fillType: "line", colorKey: "ui_cpnt_chip_fill_icon_inactive" }) }))] })));
|
81
|
+
case 'information2':
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(S_Information2, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_usr_brandprimary" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "usrTextBrandPrimary", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
|
83
|
+
case 'information3':
|
84
|
+
return ((0, jsx_runtime_1.jsxs)(S_Information3, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: "ui_cpnt_icon_sys_white" }), text && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Bold", singleLineMode: "use", colorTheme: "sysTextWhite", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] }))] }));
|
61
85
|
default:
|
62
86
|
return ((0, jsx_runtime_1.jsxs)(S_FilterSingleChip, __assign({ isActive: isActive, onClick: handleClickChip }, { children: [filterIconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { fillType: iconFillType, iconName: iconName, size: 16, colorKey: isActive ? 'ui_cpnt_chip_fill_icon_active_01' : 'ui_cpnt_chip_line_icon_02' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", singleLineMode: "use", colorTheme: isActive ? 'usrTextBrandOnPrimary' : 'sysTextSecondary', ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" })] })));
|
63
87
|
}
|
@@ -128,5 +152,26 @@ var S_TimeChip = styled_components_1.default.div(templateObject_7 || (templateOb
|
|
128
152
|
var theme = _a.theme;
|
129
153
|
return theme.spacing.spacingB;
|
130
154
|
});
|
131
|
-
var
|
132
|
-
var
|
155
|
+
var informationBase = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"], ["\n align-items: center;\n border: 1px solid transparent;\n border-radius: 16px;\n box-sizing: border-box;\n display: flex;\n height: 32px;\n justify-content: center;\n padding-left: ", ";\n padding-right: ", ";\n\n & > div {\n height: 32px;\n line-height: 32px;\n }\n"])), function (_a) {
|
156
|
+
var theme = _a.theme;
|
157
|
+
return theme.spacing.spacingB;
|
158
|
+
}, function (_a) {
|
159
|
+
var theme = _a.theme;
|
160
|
+
return theme.spacing.spacingB;
|
161
|
+
});
|
162
|
+
var S_Information2 = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
|
163
|
+
var theme = _a.theme;
|
164
|
+
return theme.ui_67;
|
165
|
+
}, function (_a) {
|
166
|
+
var theme = _a.theme;
|
167
|
+
return theme.ui_140;
|
168
|
+
});
|
169
|
+
var S_Information3 = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"], ["\n ", ";\n\n background-color: ", ";\n border: 1px solid ", ";\n"])), informationBase, function (_a) {
|
170
|
+
var theme = _a.theme;
|
171
|
+
return theme.ui_37;
|
172
|
+
}, function (_a) {
|
173
|
+
var theme = _a.theme;
|
174
|
+
return theme.ui_67;
|
175
|
+
});
|
176
|
+
var S_ChipWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"], ["\n display: inline-block;\n min-width: fit-content;\n vertical-align: bottom;\n"])));
|
177
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
@@ -21,7 +21,7 @@ exports.MOCK_VIDEO_CB = {
|
|
21
21
|
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: 5,
|
22
22
|
CB_CONTENT_PROP_VIDEO_SPEC_MPLAY: true,
|
23
23
|
CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: true,
|
24
|
-
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: '
|
24
|
+
CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: 'http://publ-upload-local.s3.ap-northeast-2.amazonaws.com/dd7418e3-b4fb-4be4-86c0-f582c80d4986.mov',
|
25
25
|
CB_CONTENT_PROP_VIDEO_SPEC_STARTTIME: 0,
|
26
26
|
CB_CONTENT_PROP_VIDEO_SPEC_THUMB: '',
|
27
27
|
CB_CONTENT_PROP_VIDEO_SPEC_TYPE: 'FILE',
|
@@ -125,7 +125,7 @@ function VideoPlayer(props) {
|
|
125
125
|
alignItems: 'center',
|
126
126
|
justifyContent: 'center',
|
127
127
|
transform: 'translate(-50%, -50%)'
|
128
|
-
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
|
128
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ preload: "metadata", muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onLoadedMetadata: onLoadedMetadata, onPlay: onPlay, onError: onVideoError, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
|
129
129
|
}
|
130
130
|
function getBGColorStyles(props, device) {
|
131
131
|
var availableSpecCodes = [
|
package/package.json
CHANGED
package/release-note.md
CHANGED