@elice/material-assignment 1.240712.0 → 1.240715.0-touch.1

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.
Files changed (7) hide show
  1. package/cjs/components/material-assignment/MaterialAssignmentContent.js +28 -9
  2. package/cjs/components/material-assignment/constants/color.d.ts +1 -0
  3. package/cjs/components/material-assignment/constants/color.js +5 -0
  4. package/es/components/material-assignment/MaterialAssignmentContent.js +29 -10
  5. package/es/components/material-assignment/constants/color.d.ts +1 -0
  6. package/es/components/material-assignment/constants/color.js +3 -0
  7. package/package.json +4 -4
package/cjs/components/material-assignment/MaterialAssignmentContent.js CHANGED
@@ -5,13 +5,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var apiClient = require('@elice/api-client');
7
7
  var blocks = require('@elice/blocks');
8
+ var designTokens = require('@elice/design-tokens');
8
9
  var intl = require('@elice/intl');
9
10
  var materialSharedUtils = require('@elice/material-shared-utils');
11
+ var muiSystem = require('@elice/mui-system');
10
12
  var types = require('@elice/types');
13
+ var styled = require('styled-components');
11
14
  var MaterialAssignmentContainer = require('../shared/MaterialAssignmentContainer.js');
15
+ var color = require('./constants/color.js');
12
16
  var MaterialAssignmentUploadModal = require('./MaterialAssignmentUploadModal.js');
13
17
 
14
18
  const GRADE_LIST_COUNT = 20;
19
+ const StyledSubmittedText = styled(blocks.Text).withConfig({
20
+ componentId: "sc-1panlbq-0"
21
+ })(["color:", ";"], muiSystem.colors.green[400]);
22
+ const StyledNoSubmittedText = styled(blocks.Text).withConfig({
23
+ componentId: "sc-1panlbq-1"
24
+ })(["color:", ";"], muiSystem.colors.orange[400]);
25
+ const StyledTableHeaderCell = styled.td.withConfig({
26
+ componentId: "sc-1panlbq-2"
27
+ })(["color:", " !important;"], color.DARK_TEXT_TERTIARY_COLOR);
28
+ const StyledTotalPointText = styled(blocks.Text).withConfig({
29
+ componentId: "sc-1panlbq-3"
30
+ })(["color:", ";"], color.DARK_TEXT_TERTIARY_COLOR);
31
+ const StyledUploadButton = styled(blocks.Button).withConfig({
32
+ componentId: "sc-1panlbq-4"
33
+ })(["background-color:", ";border-color:", ";"], designTokens.base.color.primary6, designTokens.base.color.primary6);
15
34
  const MaterialAssignmentContent = ({
16
35
  materialAssignmentId,
17
36
  userId
@@ -158,7 +177,7 @@ const MaterialAssignmentContent = ({
158
177
  }));
159
178
  }
160
179
  if (isAssignmentSubmitted) {
161
- return React.createElement(blocks.Text, {
180
+ return React.createElement(StyledSubmittedText, {
162
181
  bold: true,
163
182
  role: "success",
164
183
  size: "small"
@@ -166,7 +185,7 @@ const MaterialAssignmentContent = ({
166
185
  id: 'materialAssignment.status.submitted'
167
186
  }));
168
187
  }
169
- return React.createElement(blocks.Text, {
188
+ return React.createElement(StyledNoSubmittedText, {
170
189
  bold: true,
171
190
  role: "warning",
172
191
  size: "small"
@@ -218,36 +237,36 @@ const MaterialAssignmentContent = ({
218
237
  };
219
238
  return React.createElement(blocks.InfoTable, {
220
239
  dark: true
221
- }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", {
240
+ }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement(StyledTableHeaderCell, {
222
241
  style: {
223
242
  width: '19%'
224
243
  }
225
244
  }, intl$1.formatMessage({
226
245
  id: 'materialAssignment.table.column.status'
227
- })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement("td", null, intl$1.formatMessage({
246
+ })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl$1.formatMessage({
228
247
  id: 'materialAssignment.table.column.deadlineDatetime'
229
248
  })), React.createElement("td", null, intl$1.formatDate(materialAssignment.closeDatetime, {
230
249
  dateStyle: 'medium',
231
250
  timeStyle: 'short'
232
- }))), React.createElement("tr", null, React.createElement("td", null, intl$1.formatMessage({
251
+ }))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl$1.formatMessage({
233
252
  id: 'materialAssignment.table.column.lastSubmitDatetime'
234
253
  })), React.createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? intl$1.formatDate(materialAssignmentSubmission.createdDatetime, {
235
254
  dateStyle: 'medium',
236
255
  timeStyle: 'short'
237
- }) : '--')), React.createElement("tr", null, React.createElement("td", null, intl$1.formatMessage({
256
+ }) : '--')), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl$1.formatMessage({
238
257
  id: 'materialAssignment.table.column.uploadedFile'
239
258
  })), React.createElement("td", null, React.createElement("div", null, renderAssignmentAttachment(), React.createElement(blocks.Vspace, {
240
259
  height: 0.75
241
- }), React.createElement(blocks.Button, {
260
+ }), React.createElement(StyledUploadButton, {
242
261
  size: "tiny",
243
262
  role: "lightpurple",
244
263
  disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
245
264
  onClick: () => setShowAssignmentSubmitModal(true)
246
265
  }, intl$1.formatMessage({
247
266
  id: 'materialAssignment.button.upload'
248
- }))))), React.createElement("tr", null, React.createElement("td", null, intl$1.formatMessage({
267
+ }))))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl$1.formatMessage({
249
268
  id: 'materialAssignment.table.column.assignmentScore'
250
- })), React.createElement("td", null, renderAssignmentScore(), React.createElement(blocks.Text, {
269
+ })), React.createElement("td", null, renderAssignmentScore(), React.createElement(StyledTotalPointText, {
251
270
  role: "navy4",
252
271
  size: "small"
253
272
  }, intl$1.formatMessage({
package/cjs/components/material-assignment/constants/color.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const DARK_TEXT_TERTIARY_COLOR = "rgba(255, 255, 255, 0.7)";
package/cjs/components/material-assignment/constants/color.js ADDED
@@ -0,0 +1,5 @@
1
+ 'use strict';
2
+
3
+ const DARK_TEXT_TERTIARY_COLOR = 'rgba(255, 255, 255, 0.7)';
4
+
5
+ exports.DARK_TEXT_TERTIARY_COLOR = DARK_TEXT_TERTIARY_COLOR;
package/es/components/material-assignment/MaterialAssignmentContent.js CHANGED
@@ -1,13 +1,32 @@
1
1
  import React from 'react';
2
2
  import { config, getOrgMaterialAssignmentGet, getOrgMaterialAssignmentGradeList, getOrgMaterialAssignmentGradeResultGet, getOrgMaterialAssignmentSubmissionGet } from '@elice/api-client';
3
- import { Spinner, Text, Vspace, InfoTable, Button, TableNext, Hspace } from '@elice/blocks';
3
+ import { Text, Button, Spinner, Vspace, InfoTable, TableNext, Hspace } from '@elice/blocks';
4
+ import { base } from '@elice/design-tokens';
4
5
  import { useRawEliceIntl } from '@elice/intl';
5
6
  import { useMaterialConfigApiClientUpdate, useMaterialFetchRaw } from '@elice/material-shared-utils';
7
+ import { colors } from '@elice/mui-system';
6
8
  import { enums } from '@elice/types';
9
+ import styled from 'styled-components';
7
10
  import MaterialAssignmentContainer from '../shared/MaterialAssignmentContainer.js';
11
+ import { DARK_TEXT_TERTIARY_COLOR } from './constants/color.js';
8
12
  import MaterialAssignmentUploadModal from './MaterialAssignmentUploadModal.js';
9
13
 
10
14
  const GRADE_LIST_COUNT = 20;
15
+ const StyledSubmittedText = styled(Text).withConfig({
16
+ componentId: "sc-1panlbq-0"
17
+ })(["color:", ";"], colors.green[400]);
18
+ const StyledNoSubmittedText = styled(Text).withConfig({
19
+ componentId: "sc-1panlbq-1"
20
+ })(["color:", ";"], colors.orange[400]);
21
+ const StyledTableHeaderCell = styled.td.withConfig({
22
+ componentId: "sc-1panlbq-2"
23
+ })(["color:", " !important;"], DARK_TEXT_TERTIARY_COLOR);
24
+ const StyledTotalPointText = styled(Text).withConfig({
25
+ componentId: "sc-1panlbq-3"
26
+ })(["color:", ";"], DARK_TEXT_TERTIARY_COLOR);
27
+ const StyledUploadButton = styled(Button).withConfig({
28
+ componentId: "sc-1panlbq-4"
29
+ })(["background-color:", ";border-color:", ";"], base.color.primary6, base.color.primary6);
11
30
  const MaterialAssignmentContent = ({
12
31
  materialAssignmentId,
13
32
  userId
@@ -154,7 +173,7 @@ const MaterialAssignmentContent = ({
154
173
  }));
155
174
  }
156
175
  if (isAssignmentSubmitted) {
157
- return React.createElement(Text, {
176
+ return React.createElement(StyledSubmittedText, {
158
177
  bold: true,
159
178
  role: "success",
160
179
  size: "small"
@@ -162,7 +181,7 @@ const MaterialAssignmentContent = ({
162
181
  id: 'materialAssignment.status.submitted'
163
182
  }));
164
183
  }
165
- return React.createElement(Text, {
184
+ return React.createElement(StyledNoSubmittedText, {
166
185
  bold: true,
167
186
  role: "warning",
168
187
  size: "small"
@@ -214,36 +233,36 @@ const MaterialAssignmentContent = ({
214
233
  };
215
234
  return React.createElement(InfoTable, {
216
235
  dark: true
217
- }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("td", {
236
+ }, React.createElement("tbody", null, React.createElement("tr", null, React.createElement(StyledTableHeaderCell, {
218
237
  style: {
219
238
  width: '19%'
220
239
  }
221
240
  }, intl.formatMessage({
222
241
  id: 'materialAssignment.table.column.status'
223
- })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
242
+ })), React.createElement("td", null, renderAssignmentStatus())), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
224
243
  id: 'materialAssignment.table.column.deadlineDatetime'
225
244
  })), React.createElement("td", null, intl.formatDate(materialAssignment.closeDatetime, {
226
245
  dateStyle: 'medium',
227
246
  timeStyle: 'short'
228
- }))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
247
+ }))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
229
248
  id: 'materialAssignment.table.column.lastSubmitDatetime'
230
249
  })), React.createElement("td", null, (materialAssignmentSubmission === null || materialAssignmentSubmission === void 0 ? void 0 : materialAssignmentSubmission.createdDatetime) ? intl.formatDate(materialAssignmentSubmission.createdDatetime, {
231
250
  dateStyle: 'medium',
232
251
  timeStyle: 'short'
233
- }) : '--')), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
252
+ }) : '--')), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
234
253
  id: 'materialAssignment.table.column.uploadedFile'
235
254
  })), React.createElement("td", null, React.createElement("div", null, renderAssignmentAttachment(), React.createElement(Vspace, {
236
255
  height: 0.75
237
- }), React.createElement(Button, {
256
+ }), React.createElement(StyledUploadButton, {
238
257
  size: "tiny",
239
258
  role: "lightpurple",
240
259
  disabled: [isAssignmentResultVisible, !materialAssignment.isResubmitEnabled && isAssignmentSubmitted, isAssignmentClosed].some(Boolean),
241
260
  onClick: () => setShowAssignmentSubmitModal(true)
242
261
  }, intl.formatMessage({
243
262
  id: 'materialAssignment.button.upload'
244
- }))))), React.createElement("tr", null, React.createElement("td", null, intl.formatMessage({
263
+ }))))), React.createElement("tr", null, React.createElement(StyledTableHeaderCell, null, intl.formatMessage({
245
264
  id: 'materialAssignment.table.column.assignmentScore'
246
- })), React.createElement("td", null, renderAssignmentScore(), React.createElement(Text, {
265
+ })), React.createElement("td", null, renderAssignmentScore(), React.createElement(StyledTotalPointText, {
247
266
  role: "navy4",
248
267
  size: "small"
249
268
  }, intl.formatMessage({
package/es/components/material-assignment/constants/color.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const DARK_TEXT_TERTIARY_COLOR = "rgba(255, 255, 255, 0.7)";
package/es/components/material-assignment/constants/color.js ADDED
@@ -0,0 +1,3 @@
1
+ const DARK_TEXT_TERTIARY_COLOR = 'rgba(255, 255, 255, 0.7)';
2
+
3
+ export { DARK_TEXT_TERTIARY_COLOR };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-assignment",
3
- "version": "1.240712.0",
3
+ "version": "1.240715.0-touch.1",
4
4
  "description": "User view and editing components of Elice material assignment",
5
5
  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
6
6
  "license": "UNLICENSED",
@@ -52,8 +52,8 @@
52
52
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
53
53
  "@elice/intl": "0.240425.0-rc.2",
54
54
  "@elice/markdown": "^1.220815.0",
55
- "@elice/material-shared-types": "1.240712.0",
56
- "@elice/material-shared-utils": "1.240712.0",
55
+ "@elice/material-shared-types": "1.240715.0-touch.1",
56
+ "@elice/material-shared-utils": "1.240715.0-touch.1",
57
57
  "@elice/types": "^1.240619.0",
58
58
  "@types/classnames": "^2.3.1",
59
59
  "@types/react": "~17.0.9",
@@ -62,5 +62,5 @@
62
62
  "react-use": "^17.2.4",
63
63
  "styled-components": "^5.3.0"
64
64
  },
65
- "gitHead": "928310d29430ff8bc0a5e346fd54007ec31ee866"
65
+ "gitHead": "87c590dcefdcad8147a8ee638fc6aa52dc928f9b"
66
66
  }