@elice/material-quiz 1.230629.1 → 1.230705.0

package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
+var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -90,34 +91,12 @@ var StyledQuestionCheckboxInput = styled__default["default"].input.withConfig({
 });
 var StyledLabel = styled__default["default"].label.withConfig({
   componentId: "sc-1erloup-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-}, function (_ref8) {
-  var checked = _ref8.checked,
-    status = _ref8.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-});
-var QuestionCheckboxOption = React__default["default"].memo(function (_ref9) {
-  var value = _ref9.value,
-    status = _ref9.status,
-    isAnswer = _ref9.isAnswer,
-    children = _ref9.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], designTokens.base.size.body3, getQuestionStatusStyle.getQuestionStatusStyle());
+var QuestionCheckboxOption = React__default["default"].memo(function (_ref7) {
+  var value = _ref7.value,
+    status = _ref7.status,
+    isAnswer = _ref7.isAnswer,
+    children = _ref7.children;
   var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
     selectedOptions = _useQuestionCheckboxC.selectedOptions,
     disabled = _useQuestionCheckboxC.disabled,

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
+var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionRadioContext = require('./QuestionRadioContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -66,34 +67,12 @@ var StyledQuestionRadioInput = styled__default["default"].input.withConfig({
 });
 var StyledLabel = styled__default["default"].label.withConfig({
   componentId: "sc-cy66me-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref6) {
-  var checked = _ref6.checked,
-    status = _ref6.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-}, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-});
-var QuestionRadioOption = React__default["default"].memo(function (_ref8) {
-  var value = _ref8.value,
-    status = _ref8.status,
-    isAnswer = _ref8.isAnswer,
-    children = _ref8.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], designTokens.base.size.body3, getQuestionStatusStyle.getQuestionStatusStyle());
+var QuestionRadioOption = React__default["default"].memo(function (_ref6) {
+  var value = _ref6.value,
+    status = _ref6.status,
+    isAnswer = _ref6.isAnswer,
+    children = _ref6.children;
   var _useQuestionRadioCont = QuestionRadioContext.useQuestionRadioContext(),
     selectedValue = _useQuestionRadioCont.selectedValue,
     disabled = _useQuestionRadioCont.disabled,

package/cjs/components/shared/utils/getQuestionStatusStyle.d.ts

@@ -0,0 +1,10 @@
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionValues {
+    checked: boolean;
+    status?: Status;
+}
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+export declare function getQuestionStatusStyle(): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<QuestionValues, any>>;
+export {};

package/cjs/components/shared/utils/getQuestionStatusStyle.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+function getQuestionStatusStyle() {
+  return styled.css(["&,& p,& p.elicemd.elicemd--theme-light{color:", ";}"], function (_ref) {
+    var checked = _ref.checked,
+      status = _ref.status;
+    switch (status) {
+      case 'correct':
+        return designTokens.base.color.green9;
+      case 'wrong':
+        return designTokens.base.color.red9;
+      default:
+        return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+    }
+  });
+}
+
+exports.getQuestionStatusStyle = getQuestionStatusStyle;

package/es/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
+import { getQuestionStatusStyle } from '../utils/getQuestionStatusStyle.js';
 import { useQuestionCheckboxContext } from './QuestionCheckboxContext.js';
 
 var StyledQuestionCheckboxOption = styled.div.withConfig({
@@ -81,34 +82,12 @@ var StyledQuestionCheckboxInput = styled.input.withConfig({
 });
 var StyledLabel = styled.label.withConfig({
   componentId: "sc-1erloup-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], base.size.body3, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-}, function (_ref8) {
-  var checked = _ref8.checked,
-    status = _ref8.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-});
-var QuestionCheckboxOption = React.memo(function (_ref9) {
-  var value = _ref9.value,
-    status = _ref9.status,
-    isAnswer = _ref9.isAnswer,
-    children = _ref9.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], base.size.body3, getQuestionStatusStyle());
+var QuestionCheckboxOption = React.memo(function (_ref7) {
+  var value = _ref7.value,
+    status = _ref7.status,
+    isAnswer = _ref7.isAnswer,
+    children = _ref7.children;
   var _useQuestionCheckboxC = useQuestionCheckboxContext(),
     selectedOptions = _useQuestionCheckboxC.selectedOptions,
     disabled = _useQuestionCheckboxC.disabled,

package/es/components/shared/question-radio/QuestionRadioOption.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
+import { getQuestionStatusStyle } from '../utils/getQuestionStatusStyle.js';
 import { useQuestionRadioContext } from './QuestionRadioContext.js';
 
 var StyledQuestionRadioOption = styled.div.withConfig({
@@ -57,34 +58,12 @@ var StyledQuestionRadioInput = styled.input.withConfig({
 });
 var StyledLabel = styled.label.withConfig({
   componentId: "sc-cy66me-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], base.size.body3, function (_ref6) {
-  var checked = _ref6.checked,
-    status = _ref6.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-}, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-});
-var QuestionRadioOption = React.memo(function (_ref8) {
-  var value = _ref8.value,
-    status = _ref8.status,
-    isAnswer = _ref8.isAnswer,
-    children = _ref8.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], base.size.body3, getQuestionStatusStyle());
+var QuestionRadioOption = React.memo(function (_ref6) {
+  var value = _ref6.value,
+    status = _ref6.status,
+    isAnswer = _ref6.isAnswer,
+    children = _ref6.children;
   var _useQuestionRadioCont = useQuestionRadioContext(),
     selectedValue = _useQuestionRadioCont.selectedValue,
     disabled = _useQuestionRadioCont.disabled,

package/es/components/shared/utils/getQuestionStatusStyle.d.ts

@@ -0,0 +1,10 @@
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionValues {
+    checked: boolean;
+    status?: Status;
+}
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+export declare function getQuestionStatusStyle(): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<QuestionValues, any>>;
+export {};

package/es/components/shared/utils/getQuestionStatusStyle.js

@@ -0,0 +1,22 @@
+import { base } from '@elice/design-tokens';
+import { css } from 'styled-components';
+
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+function getQuestionStatusStyle() {
+  return css(["&,& p,& p.elicemd.elicemd--theme-light{color:", ";}"], function (_ref) {
+    var checked = _ref.checked,
+      status = _ref.status;
+    switch (status) {
+      case 'correct':
+        return base.color.green9;
+      case 'wrong':
+        return base.color.red9;
+      default:
+        return checked ? base.color.primary6 : base.color.navy0;
+    }
+  });
+}
+
+export { getQuestionStatusStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.230629.1",
+  "version": "1.230705.0",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -58,8 +58,8 @@
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230629.1",
-    "@elice/material-shared-utils": "1.230629.1",
+    "@elice/material-shared-types": "1.230705.0",
+    "@elice/material-shared-utils": "1.230705.0",
     "@elice/types": "^1.230629.0",
     "@types/classnames": "^2.3.1",
     "@types/jquery": "^3.5.13",
@@ -73,5 +73,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "61c8c138a1361e5e8a081157fd2e7837fc39fbf3"
+  "gitHead": "3f369e88f09030e7025ccbc65d0f510bd6f1cf49"
 }