pds-dev-kit-web 0.3.7 → 0.3.8
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/services/i18n/resources/en.json +12 -2
- package/dist/src/common/services/i18n/resources/es.json +12 -2
- package/dist/src/common/services/i18n/resources/index.d.ts +40 -0
- package/dist/src/common/services/i18n/resources/jp.json +12 -2
- package/dist/src/common/services/i18n/resources/ko.json +12 -2
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +9 -5
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +8 -4
- package/dist/src/common/styles/colorSet/SemanticColor.json +7 -1
- package/dist/src/common/styles/colorSet/UIColor.json +13 -2
- package/dist/src/common/styles/colorSet/index.d.ts +74 -49
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +11 -0
- package/dist/src/common/styles/ui-colors.js +1 -1
- package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +5 -3
- package/dist/src/desktop/components/TextLabel/TextLabel.js +13 -5
- package/dist/src/desktop/layout/LayoutWF/Containers/ContentsContainer/variation/WFK.js +2 -2
- package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +5 -1
- package/dist/src/mobile/components/TextLabel/TextLabel.js +13 -5
- package/package.json +1 -1
|
@@ -2513,7 +2513,7 @@
|
|
|
2513
2513
|
"str_1426": "$t(str_refund) 가능 금액",
|
|
2514
2514
|
"str_1427": "$t(str_refund) 금액",
|
|
2515
2515
|
"str_1428": "영상 처리가 시작될 예정입니다.",
|
|
2516
|
-
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에
|
|
2516
|
+
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에 화면을 새고침하시거나 다른 사이트로 이동하면, 업로드가 중단됩니다.\n업로드하신 영상이 에피소드 목록에 뜰 때까지 페이지에 머물러있어 주세요.",
|
|
2517
2517
|
"str_1430": "$t(str_refund) 후 남은 금액",
|
|
2518
2518
|
"str_1431": "$t(str_refund) 방법",
|
|
2519
2519
|
"str_1432": "$t(str_refund) 금액을 입력해 주세요.",
|
|
@@ -2565,6 +2565,16 @@
|
|
|
2565
2565
|
"str_1455": "$t(str_refund) 처리 내역이 존재하지 않습니다.",
|
|
2566
2566
|
"str_papp_event_live_chat": "채팅",
|
|
2567
2567
|
"str_1456": "내용을 입력하세요.",
|
|
2568
|
-
"str_papp_event_live_chat_room_enter": "입장하기"
|
|
2568
|
+
"str_papp_event_live_chat_room_enter": "입장하기",
|
|
2569
|
+
"str_papp_event_live_event_upcoming": "예정된 이벤트",
|
|
2570
|
+
"str_promotion_page_id": "프로모션 페이지 pApp",
|
|
2571
|
+
"str_promotion_page_name": "프로모션 페이지 pApp",
|
|
2572
|
+
"str_pam_lpc": "LPC pAM",
|
|
2573
|
+
"str_pam_lpc_landing_post": "랜딩 게시글",
|
|
2574
|
+
"str_pam_lpc_comment": "댓글",
|
|
2575
|
+
"str_pam_lpc_label": "라벨",
|
|
2576
|
+
"str_1458": "채널 데스크탑용 로고 이미지",
|
|
2577
|
+
"str_1459": "채널 데스크탑용 로고 이미지는 PC 웹에서 가로형으로 표시, 사용할 수 있는 이미지입니다.\n채널의 브랜드나 이미지를 표현할 수 있는 로고로 사용됩니다.\n최대 1MB, PNG 및 SVG 형식으로 업로드 할 수 있고, 투명한 배경에 120x24 크기를 권장합니다.",
|
|
2578
|
+
"str_1460": "무료로 시작하기"
|
|
2569
2579
|
}
|
|
2570
2580
|
}
|
|
@@ -2513,7 +2513,7 @@
|
|
|
2513
2513
|
"str_1426": "$t(str_refund) 가능 금액",
|
|
2514
2514
|
"str_1427": "$t(str_refund) 금액",
|
|
2515
2515
|
"str_1428": "영상 처리가 시작될 예정입니다.",
|
|
2516
|
-
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에
|
|
2516
|
+
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에 화면을 새고침하시거나 다른 사이트로 이동하면, 업로드가 중단됩니다.\n업로드하신 영상이 에피소드 목록에 뜰 때까지 페이지에 머물러있어 주세요.",
|
|
2517
2517
|
"str_1430": "$t(str_refund) 후 남은 금액",
|
|
2518
2518
|
"str_1431": "$t(str_refund) 방법",
|
|
2519
2519
|
"str_1432": "$t(str_refund) 금액을 입력해 주세요.",
|
|
@@ -2565,6 +2565,16 @@
|
|
|
2565
2565
|
"str_1455": "$t(str_refund) 처리 내역이 존재하지 않습니다.",
|
|
2566
2566
|
"str_papp_event_live_chat": "채팅",
|
|
2567
2567
|
"str_1456": "내용을 입력하세요.",
|
|
2568
|
-
"str_papp_event_live_chat_room_enter": "입장하기"
|
|
2568
|
+
"str_papp_event_live_chat_room_enter": "입장하기",
|
|
2569
|
+
"str_papp_event_live_event_upcoming": "예정된 이벤트",
|
|
2570
|
+
"str_promotion_page_id": "프로모션 페이지 pApp",
|
|
2571
|
+
"str_promotion_page_name": "프로모션 페이지 pApp",
|
|
2572
|
+
"str_pam_lpc": "LPC pAM",
|
|
2573
|
+
"str_pam_lpc_landing_post": "랜딩 게시글",
|
|
2574
|
+
"str_pam_lpc_comment": "댓글",
|
|
2575
|
+
"str_pam_lpc_label": "라벨",
|
|
2576
|
+
"str_1458": "채널 데스크탑용 로고 이미지",
|
|
2577
|
+
"str_1459": "채널 데스크탑용 로고 이미지는 PC 웹에서 가로형으로 표시, 사용할 수 있는 이미지입니다.\n채널의 브랜드나 이미지를 표현할 수 있는 로고로 사용됩니다.\n최대 1MB, PNG 및 SVG 형식으로 업로드 할 수 있고, 투명한 배경에 120x24 크기를 권장합니다.",
|
|
2578
|
+
"str_1460": "무료로 시작하기"
|
|
2569
2579
|
}
|
|
2570
2580
|
}
|
|
@@ -2567,6 +2567,16 @@ declare const locale: {
|
|
|
2567
2567
|
str_papp_event_live_chat: string;
|
|
2568
2568
|
str_1456: string;
|
|
2569
2569
|
str_papp_event_live_chat_room_enter: string;
|
|
2570
|
+
str_papp_event_live_event_upcoming: string;
|
|
2571
|
+
str_promotion_page_id: string;
|
|
2572
|
+
str_promotion_page_name: string;
|
|
2573
|
+
str_pam_lpc: string;
|
|
2574
|
+
str_pam_lpc_landing_post: string;
|
|
2575
|
+
str_pam_lpc_comment: string;
|
|
2576
|
+
str_pam_lpc_label: string;
|
|
2577
|
+
str_1458: string;
|
|
2578
|
+
str_1459: string;
|
|
2579
|
+
str_1460: string;
|
|
2570
2580
|
};
|
|
2571
2581
|
};
|
|
2572
2582
|
readonly en: {
|
|
@@ -5137,6 +5147,16 @@ declare const locale: {
|
|
|
5137
5147
|
str_papp_event_live_chat: string;
|
|
5138
5148
|
str_1456: string;
|
|
5139
5149
|
str_papp_event_live_chat_room_enter: string;
|
|
5150
|
+
str_papp_event_live_event_upcoming: string;
|
|
5151
|
+
str_promotion_page_id: string;
|
|
5152
|
+
str_promotion_page_name: string;
|
|
5153
|
+
str_pam_lpc: string;
|
|
5154
|
+
str_pam_lpc_landing_post: string;
|
|
5155
|
+
str_pam_lpc_comment: string;
|
|
5156
|
+
str_pam_lpc_label: string;
|
|
5157
|
+
str_1458: string;
|
|
5158
|
+
str_1459: string;
|
|
5159
|
+
str_1460: string;
|
|
5140
5160
|
};
|
|
5141
5161
|
};
|
|
5142
5162
|
readonly jp: {
|
|
@@ -7707,6 +7727,16 @@ declare const locale: {
|
|
|
7707
7727
|
str_papp_event_live_chat: string;
|
|
7708
7728
|
str_1456: string;
|
|
7709
7729
|
str_papp_event_live_chat_room_enter: string;
|
|
7730
|
+
str_papp_event_live_event_upcoming: string;
|
|
7731
|
+
str_promotion_page_id: string;
|
|
7732
|
+
str_promotion_page_name: string;
|
|
7733
|
+
str_pam_lpc: string;
|
|
7734
|
+
str_pam_lpc_landing_post: string;
|
|
7735
|
+
str_pam_lpc_comment: string;
|
|
7736
|
+
str_pam_lpc_label: string;
|
|
7737
|
+
str_1458: string;
|
|
7738
|
+
str_1459: string;
|
|
7739
|
+
str_1460: string;
|
|
7710
7740
|
};
|
|
7711
7741
|
};
|
|
7712
7742
|
readonly es: {
|
|
@@ -10277,6 +10307,16 @@ declare const locale: {
|
|
|
10277
10307
|
str_papp_event_live_chat: string;
|
|
10278
10308
|
str_1456: string;
|
|
10279
10309
|
str_papp_event_live_chat_room_enter: string;
|
|
10310
|
+
str_papp_event_live_event_upcoming: string;
|
|
10311
|
+
str_promotion_page_id: string;
|
|
10312
|
+
str_promotion_page_name: string;
|
|
10313
|
+
str_pam_lpc: string;
|
|
10314
|
+
str_pam_lpc_landing_post: string;
|
|
10315
|
+
str_pam_lpc_comment: string;
|
|
10316
|
+
str_pam_lpc_label: string;
|
|
10317
|
+
str_1458: string;
|
|
10318
|
+
str_1459: string;
|
|
10319
|
+
str_1460: string;
|
|
10280
10320
|
};
|
|
10281
10321
|
};
|
|
10282
10322
|
};
|
|
@@ -2513,7 +2513,7 @@
|
|
|
2513
2513
|
"str_1426": "$t(str_refund) 가능 금액",
|
|
2514
2514
|
"str_1427": "$t(str_refund) 금액",
|
|
2515
2515
|
"str_1428": "영상 처리가 시작될 예정입니다.",
|
|
2516
|
-
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에
|
|
2516
|
+
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에 화면을 새고침하시거나 다른 사이트로 이동하면, 업로드가 중단됩니다.\n업로드하신 영상이 에피소드 목록에 뜰 때까지 페이지에 머물러있어 주세요.",
|
|
2517
2517
|
"str_1430": "$t(str_refund) 후 남은 금액",
|
|
2518
2518
|
"str_1431": "$t(str_refund) 방법",
|
|
2519
2519
|
"str_1432": "$t(str_refund) 금액을 입력해 주세요.",
|
|
@@ -2565,6 +2565,16 @@
|
|
|
2565
2565
|
"str_1455": "$t(str_refund) 처리 내역이 존재하지 않습니다.",
|
|
2566
2566
|
"str_papp_event_live_chat": "채팅",
|
|
2567
2567
|
"str_1456": "내용을 입력하세요.",
|
|
2568
|
-
"str_papp_event_live_chat_room_enter": "입장하기"
|
|
2568
|
+
"str_papp_event_live_chat_room_enter": "입장하기",
|
|
2569
|
+
"str_papp_event_live_event_upcoming": "예정된 이벤트",
|
|
2570
|
+
"str_promotion_page_id": "프로모션 페이지 pApp",
|
|
2571
|
+
"str_promotion_page_name": "프로모션 페이지 pApp",
|
|
2572
|
+
"str_pam_lpc": "LPC pAM",
|
|
2573
|
+
"str_pam_lpc_landing_post": "랜딩 게시글",
|
|
2574
|
+
"str_pam_lpc_comment": "댓글",
|
|
2575
|
+
"str_pam_lpc_label": "라벨",
|
|
2576
|
+
"str_1458": "채널 데스크탑용 로고 이미지",
|
|
2577
|
+
"str_1459": "채널 데스크탑용 로고 이미지는 PC 웹에서 가로형으로 표시, 사용할 수 있는 이미지입니다.\n채널의 브랜드나 이미지를 표현할 수 있는 로고로 사용됩니다.\n최대 1MB, PNG 및 SVG 형식으로 업로드 할 수 있고, 투명한 배경에 120x24 크기를 권장합니다.",
|
|
2578
|
+
"str_1460": "무료로 시작하기"
|
|
2569
2579
|
}
|
|
2570
2580
|
}
|
|
@@ -2513,7 +2513,7 @@
|
|
|
2513
2513
|
"str_1426": "$t(str_refund) 가능 금액",
|
|
2514
2514
|
"str_1427": "$t(str_refund) 금액",
|
|
2515
2515
|
"str_1428": "영상 처리가 시작될 예정입니다.",
|
|
2516
|
-
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에
|
|
2516
|
+
"str_1429": "영상이 업로드된 이후, 처리 과정이 시작됩니다.\n처리 과정이 끝났면, 완료된 영상을 에피소드 목록에서 확인하실 수 있습니다.\n\n처리가 끝나기 전에 화면을 새고침하시거나 다른 사이트로 이동하면, 업로드가 중단됩니다.\n업로드하신 영상이 에피소드 목록에 뜰 때까지 페이지에 머물러있어 주세요.",
|
|
2517
2517
|
"str_1430": "$t(str_refund) 후 남은 금액",
|
|
2518
2518
|
"str_1431": "$t(str_refund) 방법",
|
|
2519
2519
|
"str_1432": "$t(str_refund) 금액을 입력해 주세요.",
|
|
@@ -2565,6 +2565,16 @@
|
|
|
2565
2565
|
"str_1455": "$t(str_refund) 처리 내역이 존재하지 않습니다.",
|
|
2566
2566
|
"str_papp_event_live_chat": "채팅",
|
|
2567
2567
|
"str_1456": "내용을 입력하세요.",
|
|
2568
|
-
"str_papp_event_live_chat_room_enter": "입장하기"
|
|
2568
|
+
"str_papp_event_live_chat_room_enter": "입장하기",
|
|
2569
|
+
"str_papp_event_live_event_upcoming": "예정된 이벤트",
|
|
2570
|
+
"str_promotion_page_id": "프로모션 페이지 pApp",
|
|
2571
|
+
"str_promotion_page_name": "프로모션 페이지 pApp",
|
|
2572
|
+
"str_pam_lpc": "LPC pAM",
|
|
2573
|
+
"str_pam_lpc_landing_post": "랜딩 게시글",
|
|
2574
|
+
"str_pam_lpc_comment": "댓글",
|
|
2575
|
+
"str_pam_lpc_label": "라벨",
|
|
2576
|
+
"str_1458": "채널 데스크탑용 로고 이미지",
|
|
2577
|
+
"str_1459": "채널 데스크탑용 로고 이미지는 PC 웹에서 가로형으로 표시, 사용할 수 있는 이미지입니다.\n채널의 브랜드나 이미지를 표현할 수 있는 로고로 사용됩니다.\n최대 1MB, PNG 및 SVG 형식으로 업로드 할 수 있고, 투명한 배경에 120x24 크기를 권장합니다.",
|
|
2578
|
+
"str_1460": "무료로 시작하기"
|
|
2569
2579
|
}
|
|
2570
2580
|
}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"sys_on_base_white_opacity00": "whiteopacity00",
|
|
33
33
|
"sys_on_base_white_opacity30": "whiteopacity30",
|
|
34
34
|
"sys_on_base_black_opacity20": "blackopacity20",
|
|
35
|
-
"usr_brand_primary": "
|
|
35
|
+
"usr_brand_primary": "darkblue500",
|
|
36
36
|
"usr_brand_secondary": "darkgreen500",
|
|
37
37
|
"usr_brand_secondary_variant": "darkgreen700",
|
|
38
38
|
"usr_background": "grey950",
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
"usr_on_background": "darkgrey900",
|
|
44
44
|
"usr_on_surface": "grey900",
|
|
45
45
|
"sys_widget_status_active_01": "darkgreen500",
|
|
46
|
-
"ui_cpnt_list_badge_active": "sys_widget_status_active_01",
|
|
47
46
|
"sys_text_success_01": "darkgreen700",
|
|
48
47
|
"sys_widget_grey_04": "darkgrey100",
|
|
49
48
|
"sys_text_active": "darkgreen700",
|
|
@@ -52,8 +51,6 @@
|
|
|
52
51
|
"sys_component_base_04": "darkgrey70",
|
|
53
52
|
"sys_component_base_black": "black",
|
|
54
53
|
"sys_component_base_black_opacity00": "blackopacity00",
|
|
55
|
-
"ui_cpnt_editorsidebar_text_disabled": "sys_text_grey_02",
|
|
56
|
-
"ui_cpnt_editorsidebar_icon_disabled": "sys_widget_grey_02",
|
|
57
54
|
"usr_text_brand_secondary_variant": "darkgreen700",
|
|
58
55
|
"usr_text_brand_primary": "darkblue500",
|
|
59
56
|
"usr_text_brand_on_primary": "grey900",
|
|
@@ -81,5 +78,12 @@
|
|
|
81
78
|
"sys_temp_primary_02": "darkblue700",
|
|
82
79
|
"sys_temp_primary_03": "darkblue300",
|
|
83
80
|
"sys_temp_secondary_02": "darkgreen500",
|
|
84
|
-
"sys_temp_lightgreen_01": "darklightgreen500"
|
|
81
|
+
"sys_temp_lightgreen_01": "darklightgreen500",
|
|
82
|
+
"sys_text_grey_04": "darkgrey600",
|
|
83
|
+
"sys_papp_post_social_background": "",
|
|
84
|
+
"sys_papp_post_notice_background": "",
|
|
85
|
+
"sys_papp_post_free_background": "",
|
|
86
|
+
"sys_papp_vod_background": "",
|
|
87
|
+
"sys_papp_vodplus_background": "",
|
|
88
|
+
"sys_papp_live_background": ""
|
|
85
89
|
}
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
"usr_on_background": "grey900",
|
|
44
44
|
"usr_on_surface": "white",
|
|
45
45
|
"sys_widget_status_active_01": "green500",
|
|
46
|
-
"ui_cpnt_list_badge_active": "sys_widget_status_active_01",
|
|
47
46
|
"sys_text_success_01": "green700",
|
|
48
47
|
"sys_widget_grey_04": "grey100",
|
|
49
48
|
"sys_text_active": "green700",
|
|
@@ -52,8 +51,6 @@
|
|
|
52
51
|
"sys_component_base_04": "grey70",
|
|
53
52
|
"sys_component_base_black": "black",
|
|
54
53
|
"sys_component_base_black_opacity00": "blackopacity00",
|
|
55
|
-
"ui_cpnt_editorsidebar_text_disabled": "sys_text_grey_02",
|
|
56
|
-
"ui_cpnt_editorsidebar_icon_disabled": "sys_widget_grey_02",
|
|
57
54
|
"usr_text_brand_secondary_variant": "green700",
|
|
58
55
|
"usr_text_brand_primary": "blue500",
|
|
59
56
|
"usr_text_brand_on_primary": "white",
|
|
@@ -81,5 +78,12 @@
|
|
|
81
78
|
"sys_temp_primary_02": "blue700",
|
|
82
79
|
"sys_temp_primary_03": "blue300",
|
|
83
80
|
"sys_temp_secondary_02": "green500",
|
|
84
|
-
"sys_temp_lightgreen_01": "lightgreen500"
|
|
81
|
+
"sys_temp_lightgreen_01": "lightgreen500",
|
|
82
|
+
"sys_text_grey_04": "grey600",
|
|
83
|
+
"sys_papp_post_social_background": "blue500",
|
|
84
|
+
"sys_papp_post_notice_background": "skyblue500",
|
|
85
|
+
"sys_papp_post_free_background": "skyblue300",
|
|
86
|
+
"sys_papp_vod_background": "lightpink500",
|
|
87
|
+
"sys_papp_vodplus_background": "pink500",
|
|
88
|
+
"sys_papp_live_background": "pink300"
|
|
85
89
|
}
|
|
@@ -37,5 +37,11 @@
|
|
|
37
37
|
"darknavy500": "#282A3C",
|
|
38
38
|
"darkpink500": "#ED3058",
|
|
39
39
|
"darklightgreen500": "#24C43D",
|
|
40
|
-
"opacity10": "1A"
|
|
40
|
+
"opacity10": "1A",
|
|
41
|
+
"grey600": "#404042",
|
|
42
|
+
"darkgrey600": "#DADADF",
|
|
43
|
+
"skyblue500": "#458BEF",
|
|
44
|
+
"skyblue300": "#45B9EF",
|
|
45
|
+
"pink300": "#FD5B7D",
|
|
46
|
+
"lightpink500": "#FF708C"
|
|
41
47
|
}
|
|
@@ -157,6 +157,7 @@
|
|
|
157
157
|
"ui_cpnt_videoplayer_unavailable": "sys_widget_grey_03",
|
|
158
158
|
"ui_cpnt_list_divider": "sys_border_line_01",
|
|
159
159
|
"ui_cpnt_button_fill_base_transparent": "sys_component_base_white_opacity00",
|
|
160
|
+
"ui_cpnt_list_badge_active": "sys_widget_status_active_01",
|
|
160
161
|
"ui_cpnt_list_badge_active_primary": "usr_brand_primary",
|
|
161
162
|
"ui_cpnt_list_badge_disabled": "sys_widget_grey_03",
|
|
162
163
|
"ui_cpnt_list_badge_cancle": "sys_widget_error_01",
|
|
@@ -258,12 +259,14 @@
|
|
|
258
259
|
"ui_cpnt_step_text_number": "sys_text_white",
|
|
259
260
|
"ui_cpnt_imageslide_dot_area_1": "sys_component_base_black",
|
|
260
261
|
"ui_cpnt_imageslide_dot_area_2": "sys_component_base_black_opacity00",
|
|
262
|
+
"ui_cpnt_editorsidebar_text_disabled": "sys_text_grey_02",
|
|
263
|
+
"ui_cpnt_editorsidebar_icon_disabled": "sys_widget_grey_02",
|
|
261
264
|
"ui_cpnt_editorsidebar_card_border_disabled": "sys_widget_grey_02",
|
|
262
265
|
"ui_cpnt_userdesktopnavbar_base_area": "sys_component_base_white_opacity00",
|
|
263
266
|
"ui_cpnt_button_line_base_default": "sys_component_base_02",
|
|
264
267
|
"ui_cpnt_userdesktoptabbar_base_area": "sys_component_base_white_opacity00",
|
|
265
268
|
"ui_cpnt_userdesktoptabbar_divider": "sys_border_line_01",
|
|
266
|
-
"ui_cpnt_userdesktoptabbar_border_active_indicator": "
|
|
269
|
+
"ui_cpnt_userdesktoptabbar_border_active_indicator": "usr_brand_primary",
|
|
267
270
|
"ui_cpnt_userdesktoptabbar_text_active": "sys_text_grey_01",
|
|
268
271
|
"ui_cpnt_userdesktoptabbar_text_inactive": "sys_text_grey_02",
|
|
269
272
|
"ui_cpnt_selcontrols_base_off_disabled": "sys_widget_grey_03opacity65",
|
|
@@ -345,5 +348,13 @@
|
|
|
345
348
|
"ui_temp_primary_02": "sys_temp_primary_02",
|
|
346
349
|
"ui_temp_primary_03": "sys_temp_primary_03",
|
|
347
350
|
"ui_temp_secondary_02": "sys_temp_secondary_02",
|
|
348
|
-
"ui_temp_lightgreen_01": "sys_temp_lightgreen_01"
|
|
351
|
+
"ui_temp_lightgreen_01": "sys_temp_lightgreen_01",
|
|
352
|
+
"ui_cpnt_userdesktopnavbar_profile_border": "sys_border_line_01",
|
|
353
|
+
"ui_cpnt_textlabel_sys_grey_04": "sys_text_grey_04",
|
|
354
|
+
"ui_papp_post_social_background": "sys_papp_post_social_background",
|
|
355
|
+
"ui_papp_post_notice_background": "sys_papp_post_notice_background",
|
|
356
|
+
"ui_papp_post_free_background": "sys_papp_post_free_background",
|
|
357
|
+
"ui_papp_vod_background": "sys_papp_vod_background",
|
|
358
|
+
"ui_papp_vodplus_background": "sys_papp_vodplus_background",
|
|
359
|
+
"ui_papp_live_background": "sys_papp_live_background"
|
|
349
360
|
}
|
|
@@ -1,46 +1,5 @@
|
|
|
1
1
|
declare const colorSet: {
|
|
2
|
-
readonly
|
|
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
|
-
};
|
|
43
|
-
readonly PaletteColor_light: {
|
|
2
|
+
readonly PaletteColor_Dark: {
|
|
44
3
|
sys_container_background_01: string;
|
|
45
4
|
sys_container_background_02: string;
|
|
46
5
|
sys_container_background_03: string;
|
|
@@ -85,7 +44,6 @@ declare const colorSet: {
|
|
|
85
44
|
usr_on_background: string;
|
|
86
45
|
usr_on_surface: string;
|
|
87
46
|
sys_widget_status_active_01: string;
|
|
88
|
-
ui_cpnt_list_badge_active: string;
|
|
89
47
|
sys_text_success_01: string;
|
|
90
48
|
sys_widget_grey_04: string;
|
|
91
49
|
sys_text_active: string;
|
|
@@ -94,8 +52,6 @@ declare const colorSet: {
|
|
|
94
52
|
sys_component_base_04: string;
|
|
95
53
|
sys_component_base_black: string;
|
|
96
54
|
sys_component_base_black_opacity00: string;
|
|
97
|
-
ui_cpnt_editorsidebar_text_disabled: string;
|
|
98
|
-
ui_cpnt_editorsidebar_icon_disabled: string;
|
|
99
55
|
usr_text_brand_secondary_variant: string;
|
|
100
56
|
usr_text_brand_primary: string;
|
|
101
57
|
usr_text_brand_on_primary: string;
|
|
@@ -124,8 +80,62 @@ declare const colorSet: {
|
|
|
124
80
|
sys_temp_primary_03: string;
|
|
125
81
|
sys_temp_secondary_02: string;
|
|
126
82
|
sys_temp_lightgreen_01: string;
|
|
83
|
+
sys_text_grey_04: string;
|
|
84
|
+
sys_papp_post_social_background: string;
|
|
85
|
+
sys_papp_post_notice_background: string;
|
|
86
|
+
sys_papp_post_free_background: string;
|
|
87
|
+
sys_papp_vod_background: string;
|
|
88
|
+
sys_papp_vodplus_background: string;
|
|
89
|
+
sys_papp_live_background: string;
|
|
127
90
|
};
|
|
128
|
-
readonly
|
|
91
|
+
readonly SemanticColor: {
|
|
92
|
+
blue500: string;
|
|
93
|
+
blue700: string;
|
|
94
|
+
blue300: string;
|
|
95
|
+
green700: string;
|
|
96
|
+
green500: string;
|
|
97
|
+
green300: string;
|
|
98
|
+
red500: string;
|
|
99
|
+
grey900: string;
|
|
100
|
+
grey500: string;
|
|
101
|
+
grey400: string;
|
|
102
|
+
grey100: string;
|
|
103
|
+
grey50: string;
|
|
104
|
+
white: string;
|
|
105
|
+
black: string;
|
|
106
|
+
darkblue500: string;
|
|
107
|
+
grey950: string;
|
|
108
|
+
darkgrey900: string;
|
|
109
|
+
darkgrey500: string;
|
|
110
|
+
darkgrey400: string;
|
|
111
|
+
darkgrey100: string;
|
|
112
|
+
darkgrey50: string;
|
|
113
|
+
darkred500: string;
|
|
114
|
+
darkgreen700: string;
|
|
115
|
+
orange500: string;
|
|
116
|
+
darkorange500: string;
|
|
117
|
+
opacity00: string;
|
|
118
|
+
opacity20: string;
|
|
119
|
+
opacity30: string;
|
|
120
|
+
opacity65: string;
|
|
121
|
+
darkgreen500: string;
|
|
122
|
+
grey70: string;
|
|
123
|
+
navy500: string;
|
|
124
|
+
lightgreen500: string;
|
|
125
|
+
pink500: string;
|
|
126
|
+
darkgrey70: string;
|
|
127
|
+
darknavy500: string;
|
|
128
|
+
darkpink500: string;
|
|
129
|
+
darklightgreen500: string;
|
|
130
|
+
opacity10: string;
|
|
131
|
+
grey600: string;
|
|
132
|
+
darkgrey600: string;
|
|
133
|
+
skyblue500: string;
|
|
134
|
+
skyblue300: string;
|
|
135
|
+
pink300: string;
|
|
136
|
+
lightpink500: string;
|
|
137
|
+
};
|
|
138
|
+
readonly PaletteColor_light: {
|
|
129
139
|
sys_container_background_01: string;
|
|
130
140
|
sys_container_background_02: string;
|
|
131
141
|
sys_container_background_03: string;
|
|
@@ -170,7 +180,6 @@ declare const colorSet: {
|
|
|
170
180
|
usr_on_background: string;
|
|
171
181
|
usr_on_surface: string;
|
|
172
182
|
sys_widget_status_active_01: string;
|
|
173
|
-
ui_cpnt_list_badge_active: string;
|
|
174
183
|
sys_text_success_01: string;
|
|
175
184
|
sys_widget_grey_04: string;
|
|
176
185
|
sys_text_active: string;
|
|
@@ -179,8 +188,6 @@ declare const colorSet: {
|
|
|
179
188
|
sys_component_base_04: string;
|
|
180
189
|
sys_component_base_black: string;
|
|
181
190
|
sys_component_base_black_opacity00: string;
|
|
182
|
-
ui_cpnt_editorsidebar_text_disabled: string;
|
|
183
|
-
ui_cpnt_editorsidebar_icon_disabled: string;
|
|
184
191
|
usr_text_brand_secondary_variant: string;
|
|
185
192
|
usr_text_brand_primary: string;
|
|
186
193
|
usr_text_brand_on_primary: string;
|
|
@@ -209,6 +216,13 @@ declare const colorSet: {
|
|
|
209
216
|
sys_temp_primary_03: string;
|
|
210
217
|
sys_temp_secondary_02: string;
|
|
211
218
|
sys_temp_lightgreen_01: string;
|
|
219
|
+
sys_text_grey_04: string;
|
|
220
|
+
sys_papp_post_social_background: string;
|
|
221
|
+
sys_papp_post_notice_background: string;
|
|
222
|
+
sys_papp_post_free_background: string;
|
|
223
|
+
sys_papp_vod_background: string;
|
|
224
|
+
sys_papp_vodplus_background: string;
|
|
225
|
+
sys_papp_live_background: string;
|
|
212
226
|
};
|
|
213
227
|
readonly UIColor: {
|
|
214
228
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -369,6 +383,7 @@ declare const colorSet: {
|
|
|
369
383
|
ui_cpnt_videoplayer_unavailable: string;
|
|
370
384
|
ui_cpnt_list_divider: string;
|
|
371
385
|
ui_cpnt_button_fill_base_transparent: string;
|
|
386
|
+
ui_cpnt_list_badge_active: string;
|
|
372
387
|
ui_cpnt_list_badge_active_primary: string;
|
|
373
388
|
ui_cpnt_list_badge_disabled: string;
|
|
374
389
|
ui_cpnt_list_badge_cancle: string;
|
|
@@ -470,6 +485,8 @@ declare const colorSet: {
|
|
|
470
485
|
ui_cpnt_step_text_number: string;
|
|
471
486
|
ui_cpnt_imageslide_dot_area_1: string;
|
|
472
487
|
ui_cpnt_imageslide_dot_area_2: string;
|
|
488
|
+
ui_cpnt_editorsidebar_text_disabled: string;
|
|
489
|
+
ui_cpnt_editorsidebar_icon_disabled: string;
|
|
473
490
|
ui_cpnt_editorsidebar_card_border_disabled: string;
|
|
474
491
|
ui_cpnt_userdesktopnavbar_base_area: string;
|
|
475
492
|
ui_cpnt_button_line_base_default: string;
|
|
@@ -558,6 +575,14 @@ declare const colorSet: {
|
|
|
558
575
|
ui_temp_primary_03: string;
|
|
559
576
|
ui_temp_secondary_02: string;
|
|
560
577
|
ui_temp_lightgreen_01: string;
|
|
578
|
+
ui_cpnt_userdesktopnavbar_profile_border: string;
|
|
579
|
+
ui_cpnt_textlabel_sys_grey_04: string;
|
|
580
|
+
ui_papp_post_social_background: string;
|
|
581
|
+
ui_papp_post_notice_background: string;
|
|
582
|
+
ui_papp_post_free_background: string;
|
|
583
|
+
ui_papp_vod_background: string;
|
|
584
|
+
ui_papp_vodplus_background: string;
|
|
585
|
+
ui_papp_live_background: string;
|
|
561
586
|
};
|
|
562
587
|
};
|
|
563
588
|
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"));
|
|
7
8
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
9
|
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,
|
|
12
13
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
14
|
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;
|
|
@@ -157,6 +157,7 @@ export interface UITheme {
|
|
|
157
157
|
ui_cpnt_videoplayer_unavailable: string;
|
|
158
158
|
ui_cpnt_list_divider: string;
|
|
159
159
|
ui_cpnt_button_fill_base_transparent: string;
|
|
160
|
+
ui_cpnt_list_badge_active: string;
|
|
160
161
|
ui_cpnt_list_badge_active_primary: string;
|
|
161
162
|
ui_cpnt_list_badge_disabled: string;
|
|
162
163
|
ui_cpnt_list_badge_cancle: string;
|
|
@@ -258,6 +259,8 @@ export interface UITheme {
|
|
|
258
259
|
ui_cpnt_step_text_number: string;
|
|
259
260
|
ui_cpnt_imageslide_dot_area_1: string;
|
|
260
261
|
ui_cpnt_imageslide_dot_area_2: string;
|
|
262
|
+
ui_cpnt_editorsidebar_text_disabled: string;
|
|
263
|
+
ui_cpnt_editorsidebar_icon_disabled: string;
|
|
261
264
|
ui_cpnt_editorsidebar_card_border_disabled: string;
|
|
262
265
|
ui_cpnt_userdesktopnavbar_base_area: string;
|
|
263
266
|
ui_cpnt_button_line_base_default: string;
|
|
@@ -346,4 +349,12 @@ export interface UITheme {
|
|
|
346
349
|
ui_temp_primary_03: string;
|
|
347
350
|
ui_temp_secondary_02: string;
|
|
348
351
|
ui_temp_lightgreen_01: string;
|
|
352
|
+
ui_cpnt_userdesktopnavbar_profile_border: string;
|
|
353
|
+
ui_cpnt_textlabel_sys_grey_04: string;
|
|
354
|
+
ui_papp_post_social_background: string;
|
|
355
|
+
ui_papp_post_notice_background: string;
|
|
356
|
+
ui_papp_post_free_background: string;
|
|
357
|
+
ui_papp_vod_background: string;
|
|
358
|
+
ui_papp_vodplus_background: string;
|
|
359
|
+
ui_papp_live_background: string;
|
|
349
360
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TFunctionResult } from 'i18next';
|
|
3
|
-
|
|
4
|
-
export declare type
|
|
3
|
+
import { uiColors } from '../../../common';
|
|
4
|
+
export declare type UiColors = keyof typeof uiColors;
|
|
5
5
|
export declare type TextLabelProps = {
|
|
6
6
|
text: string | number | TFunctionResult;
|
|
7
7
|
textAlign?: 'left' | 'center' | 'right';
|
|
8
8
|
styleTheme?: 'displayBold' | 'headingBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
9
|
+
colorOverride?: UiColors;
|
|
9
10
|
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
10
11
|
underline?: 'none' | 'use';
|
|
11
12
|
singleLineMode?: 'none' | 'use';
|
|
@@ -15,11 +16,12 @@ export declare type TextLabelProps = {
|
|
|
15
16
|
export declare type TextStyleProps = {
|
|
16
17
|
textAlign?: 'left' | 'center' | 'right';
|
|
17
18
|
styleTheme?: 'displayBold' | 'headingBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
19
|
+
colorOverride?: UiColors;
|
|
18
20
|
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
19
21
|
underline?: 'none' | 'use';
|
|
20
22
|
singleLineMode?: 'none' | 'use';
|
|
21
23
|
ellipsisMode?: 'none' | 'use';
|
|
22
24
|
lineLimit?: number;
|
|
23
25
|
};
|
|
24
|
-
declare function TextLabel({ text, textAlign, styleTheme, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
|
|
26
|
+
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
|
|
25
27
|
export default TextLabel;
|
|
@@ -28,9 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
|
+
var common_1 = require("../../../common");
|
|
31
32
|
function TextLabel(_a) {
|
|
32
|
-
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
|
|
33
|
-
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
|
|
33
|
+
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
|
|
34
|
+
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
|
|
34
35
|
}
|
|
35
36
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
36
37
|
var theme = _a.theme;
|
|
@@ -232,11 +233,15 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_26 || (t
|
|
|
232
233
|
var theme = _a.theme;
|
|
233
234
|
return theme.ui_cpnt_textlabel_usr_brandonprimary;
|
|
234
235
|
});
|
|
235
|
-
var
|
|
236
|
+
var colorOverrideStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
237
|
+
var colorOverride = _a.colorOverride;
|
|
238
|
+
return colorOverride && common_1.uiColors[colorOverride];
|
|
239
|
+
});
|
|
240
|
+
var ellipsisStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
236
241
|
var lineLimit = _a.lineLimit;
|
|
237
242
|
return lineLimit;
|
|
238
243
|
});
|
|
239
|
-
var S_TextLabel = styled_components_1.default.div(
|
|
244
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n\n line-height: ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n\n line-height: ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
240
245
|
var textAlign = _a.textAlign;
|
|
241
246
|
return textAlign;
|
|
242
247
|
}, function (_a) {
|
|
@@ -284,6 +289,9 @@ var S_TextLabel = styled_components_1.default.div(templateObject_28 || (template
|
|
|
284
289
|
}, function (_a) {
|
|
285
290
|
var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
|
|
286
291
|
return ellipsisMode === 'use' && lineLimit && ellipsisStyle;
|
|
292
|
+
}, function (_a) {
|
|
293
|
+
var colorOverride = _a.colorOverride;
|
|
294
|
+
return colorOverride && colorOverrideStyle;
|
|
287
295
|
});
|
|
288
296
|
exports.default = TextLabel;
|
|
289
|
-
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, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
|
|
297
|
+
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, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
|
@@ -20,14 +20,14 @@ var WFK = function (_a) {
|
|
|
20
20
|
react_1.default.createElement(S_Content2, null, content2)))));
|
|
21
21
|
};
|
|
22
22
|
var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n"], ["\n display: flex;\n height: 100%;\n"])));
|
|
23
|
-
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 360px;\n width:
|
|
23
|
+
var S_ContentsContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n min-width: 360px;\n width: 40%;\n height: 100%;\n ", ";\n"], ["\n background-color: ", ";\n min-width: 360px;\n width: 40%;\n height: 100%;\n ", ";\n"])), function (_a) {
|
|
24
24
|
var theme = _a.theme;
|
|
25
25
|
return theme.ui_contentscontainer01_background;
|
|
26
26
|
}, function (_a) {
|
|
27
27
|
var containerColor = _a.containerColor;
|
|
28
28
|
return "background-color: " + containerColor;
|
|
29
29
|
});
|
|
30
|
-
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 360px;\n width:
|
|
30
|
+
var S_ContentsContainer2 = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 360px;\n width: 60%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"], ["\n background-color: ", ";\n border-left: 1px solid ", ";\n min-width: 360px;\n width: 60%;\n overflow-x: hidden;\n overflow-y: auto;\n ", ";\n"])), function (_a) {
|
|
31
31
|
var theme = _a.theme;
|
|
32
32
|
return theme.ui_contentscontainer02_background;
|
|
33
33
|
}, function (_a) {
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TFunctionResult } from 'i18next';
|
|
3
|
+
import { uiColors } from '../../../common';
|
|
4
|
+
export declare type UiColors = keyof typeof uiColors;
|
|
3
5
|
export declare type TextLabelProps = {
|
|
4
6
|
text: string | number | TFunctionResult;
|
|
5
7
|
textAlign?: 'left' | 'center' | 'right';
|
|
6
8
|
styleTheme?: 'displayBold' | 'headingBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
9
|
+
colorOverride?: UiColors;
|
|
7
10
|
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
8
11
|
underline?: 'none' | 'use';
|
|
9
12
|
singleLineMode?: 'none' | 'use';
|
|
@@ -13,11 +16,12 @@ export declare type TextLabelProps = {
|
|
|
13
16
|
export declare type TextStyleProps = {
|
|
14
17
|
textAlign?: 'left' | 'center' | 'right';
|
|
15
18
|
styleTheme?: 'displayBold' | 'headingBold' | 'leadParaRegular' | 'subTitleBold' | 'subTitleRegular' | 'body1Bold' | 'body1Regular' | 'body2Bold' | 'body2Regular' | 'caption1Bold' | 'caption1Regular' | 'caption2Bold' | 'caption2Regular' | 'form1Regular' | 'form2Regular' | 'blog1Regular';
|
|
19
|
+
colorOverride?: UiColors;
|
|
16
20
|
colorTheme?: 'sysTextPrimary' | 'sysTextSecondary' | 'sysTextTertiary' | 'sysTextWhite' | 'sysTextError' | 'sysTextBrandPrimary' | 'sysTextBrandSeconVariant' | 'usrTextBrandPrimary' | 'usrTextBrandSeconVariant' | 'usrTextBrandOnPrimary';
|
|
17
21
|
underline?: 'none' | 'use';
|
|
18
22
|
singleLineMode?: 'none' | 'use';
|
|
19
23
|
ellipsisMode?: 'none' | 'use';
|
|
20
24
|
lineLimit?: number;
|
|
21
25
|
};
|
|
22
|
-
declare function TextLabel({ text, textAlign, styleTheme, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
|
|
26
|
+
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, underline, singleLineMode, ellipsisMode, lineLimit }: TextLabelProps): JSX.Element;
|
|
23
27
|
export default TextLabel;
|
|
@@ -28,9 +28,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
var react_1 = __importDefault(require("react"));
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
|
+
var common_1 = require("../../../common");
|
|
31
32
|
function TextLabel(_a) {
|
|
32
|
-
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
|
|
33
|
-
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
|
|
33
|
+
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.underline, underline = _e === void 0 ? 'none' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit;
|
|
34
|
+
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, underline: underline, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit }, text));
|
|
34
35
|
}
|
|
35
36
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
36
37
|
var theme = _a.theme;
|
|
@@ -232,11 +233,15 @@ var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_26 || (t
|
|
|
232
233
|
var theme = _a.theme;
|
|
233
234
|
return theme.ui_cpnt_textlabel_usr_brandonprimary;
|
|
234
235
|
});
|
|
235
|
-
var
|
|
236
|
+
var colorOverrideStyle = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
237
|
+
var colorOverride = _a.colorOverride;
|
|
238
|
+
return colorOverride && common_1.uiColors[colorOverride];
|
|
239
|
+
});
|
|
240
|
+
var ellipsisStyle = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (_a) {
|
|
236
241
|
var lineLimit = _a.lineLimit;
|
|
237
242
|
return lineLimit;
|
|
238
243
|
});
|
|
239
|
-
var S_TextLabel = styled_components_1.default.div(
|
|
244
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n\n line-height: ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n text-decoration: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n\n ", ";\n\n ", ";\n\n line-height: ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
240
245
|
var textAlign = _a.textAlign;
|
|
241
246
|
return textAlign;
|
|
242
247
|
}, function (_a) {
|
|
@@ -284,6 +289,9 @@ var S_TextLabel = styled_components_1.default.div(templateObject_28 || (template
|
|
|
284
289
|
}, function (_a) {
|
|
285
290
|
var ellipsisMode = _a.ellipsisMode, lineLimit = _a.lineLimit;
|
|
286
291
|
return ellipsisMode === 'use' && lineLimit && ellipsisStyle;
|
|
292
|
+
}, function (_a) {
|
|
293
|
+
var colorOverride = _a.colorOverride;
|
|
294
|
+
return colorOverride && colorOverrideStyle;
|
|
287
295
|
});
|
|
288
296
|
exports.default = TextLabel;
|
|
289
|
-
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, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
|
|
297
|
+
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, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|