@elice/material-survey 1.230328.0 → 1.230418.0

package/cjs/components/shared/StyledMarkdown.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var markdown = require('@elice/markdown');
 var styled = require('styled-components');
 
@@ -7,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledMarkdown = styled__default["default"](markdown.Markdown).withConfig({
+var StyledMarkdown = styled__default["default"](markdown.Markdown).withConfig({
   componentId: "sc-h8kc9g-0"
 })(["p{margin:0 !important;}"]);
 
-module.exports = StyledMarkdown;
+exports["default"] = StyledMarkdown;

package/cjs/components/shared/SurveyContentBox.js

@@ -15,78 +15,72 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledQuestionBox = styled__default["default"].div.withConfig({
+var StyledQuestionBox = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-0"
-})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
-  vertical
-}) => vertical ? '0' : '8px', ({
-  hasFooter
-}) => hasFooter ? '100%' : '', ({
-  hasFooter
-}) => hasFooter ? '' : '100%');
-const StyledQuestionBoxHeader = styled__default["default"].div.withConfig({
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
+  var vertical = _ref.vertical;
+  return vertical ? '0' : '8px';
+}, function (_ref2) {
+  var hasFooter = _ref2.hasFooter;
+  return hasFooter ? '100%' : '';
+}, function (_ref3) {
+  var hasFooter = _ref3.hasFooter;
+  return hasFooter ? '' : '100%';
+});
+var StyledQuestionBoxHeader = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-1"
 })(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
-const StyledQuestionBoxBody = styled__default["default"].div.withConfig({
+var StyledQuestionBoxBody = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-2"
-})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, ({
-  hasFooter
-}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
-const StyledQuestionBoxFooter = styled__default["default"].div.withConfig({
+})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, function (_ref4) {
+  var hasFooter = _ref4.hasFooter;
+  return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
+});
+var StyledQuestionBoxFooter = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-3"
-})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy6, ({
-  vertical
-}) => {
-  return vertical ? `
-          flex-direction: column;
-          align-items: flex-start;
-        ` : '';
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy6, function (_ref5) {
+  var vertical = _ref5.vertical;
+  return vertical ? "\n          flex-direction: column;\n          align-items: flex-start;\n        " : '';
 });
-const StyledQuestionBoxFooterActions = styled__default["default"].div.withConfig({
+var StyledQuestionBoxFooterActions = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-4"
 })(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
-const StyledQuestionBoxFooterStatus = styled__default["default"].div.withConfig({
+var StyledQuestionBoxFooterStatus = styled__default["default"].div.withConfig({
   componentId: "sc-h8ztvr-5"
-})(["margin-left:0.75rem;", ""], ({
-  vertical
-}) => {
-  return vertical ? `
-          margin-left: 0;
-          margin-top: 0.75rem;
-        ` : '';
+})(["margin-left:0.75rem;", ""], function (_ref6) {
+  var vertical = _ref6.vertical;
+  return vertical ? "\n          margin-left: 0;\n          margin-top: 0.75rem;\n        " : '';
 });
-
-const SurveyContentBox = _a => {
-  var {
-    children,
-    footerActions = [],
-    title,
-    submitResult,
-    submitStatus,
-    onNext
-  } = _a,
-      props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
-
-  const intl = reactIntl.useIntl();
-  const {
-    vertical
-  } = MaterialSurveyContext.useMaterialSurveyState();
-  const hasFooter = footerActions.length > 0;
-  const header = React__default["default"].createElement(StyledQuestionBoxHeader, null, React__default["default"].createElement(blocks.Text, {
+var SurveyContentBox = function SurveyContentBox(_a) {
+  var children = _a.children,
+    _a$footerActions = _a.footerActions,
+    footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
+    title = _a.title,
+    submitResult = _a.submitResult,
+    submitStatus = _a.submitStatus,
+    onNext = _a.onNext,
+    props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
+  var intl = reactIntl.useIntl();
+  var _useMaterialSurveySta = MaterialSurveyContext.useMaterialSurveyState(),
+    vertical = _useMaterialSurveySta.vertical;
+  var hasFooter = footerActions.length > 0;
+  var header = React__default["default"].createElement(StyledQuestionBoxHeader, null, React__default["default"].createElement(blocks.Text, {
     bold: true,
     customStyles: {
       color: designTokens.base.color.navy0
     }
   }, title), submitResult ? submitResult : null);
-  const body = React__default["default"].createElement(StyledQuestionBoxBody, {
+  var body = React__default["default"].createElement(StyledQuestionBoxBody, {
     hasFooter: hasFooter
   }, children);
-  const footer = React__default["default"].createElement(StyledQuestionBoxFooter, {
+  var footer = React__default["default"].createElement(StyledQuestionBoxFooter, {
     vertical: vertical
-  }, React__default["default"].createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React__default["default"].createElement(blocks.Button, Object.assign({
-    key: index,
-    size: "small"
-  }, action), action.children)), typeof onNext === 'function' ? React__default["default"].createElement(blocks.Button, {
+  }, React__default["default"].createElement(StyledQuestionBoxFooterActions, null, footerActions.map(function (action, index) {
+    return React__default["default"].createElement(blocks.Button, Object.assign({
+      key: index,
+      size: "small"
+    }, action), action.children);
+  }), typeof onNext === 'function' ? React__default["default"].createElement(blocks.Button, {
     size: "small",
     border: true,
     tabIndex: 0,

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
@@ -10,17 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledQuestionCheckbox = styled__default["default"].div.withConfig({
+var StyledQuestionCheckbox = styled__default["default"].div.withConfig({
   componentId: "sc-1ovh9lp-0"
 })(["display:flex;flex-direction:column;"]);
-
-const QuestionCheckbox = _a => {
-  var {
-    children
-  } = _a,
-      props = tslib.__rest(_a, ["children"]);
-
+var QuestionCheckbox = function QuestionCheckbox(_a) {
+  var children = _a.children,
+    props = tslib.__rest(_a, ["children"]);
   return React__default["default"].createElement(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props), React__default["default"].createElement(StyledQuestionCheckbox, null, children));
 };
 
-module.exports = QuestionCheckbox;
+exports["default"] = QuestionCheckbox;

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

@@ -8,33 +8,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const QuestionCheckboxContext = React__default["default"].createContext(undefined);
+var QuestionCheckboxContext = React__default["default"].createContext(undefined);
 QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
-
-function QuestionCheckboxContextProvider({
-  selectedOptions,
-  onSelect,
-  disabled,
-  children
-}) {
-  const onSelectValue = React__default["default"].useCallback(onSelect, []);
-  const value = React__default["default"].useMemo(() => ({
-    selectedOptions,
-    disabled,
-    onSelect: onSelectValue
-  }), [selectedOptions, disabled, onSelectValue]);
+function QuestionCheckboxContextProvider(_ref) {
+  var selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var onSelectValue = React__default["default"].useCallback(onSelect, []);
+  var value = React__default["default"].useMemo(function () {
+    return {
+      selectedOptions: selectedOptions,
+      disabled: disabled,
+      onSelect: onSelectValue
+    };
+  }, [selectedOptions, disabled, onSelectValue]);
   return React__default["default"].createElement(QuestionCheckboxContext.Provider, {
     value: value
   }, children);
 }
-
 function useQuestionCheckboxContext() {
-  const context = React__default["default"].useContext(QuestionCheckboxContext);
-
+  var context = React__default["default"].useContext(QuestionCheckboxContext);
   if (context === undefined) {
     throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
   }
-
   return context;
 }
 

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
@@ -10,203 +12,146 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledQuestionCheckboxOption = styled__default["default"].div.withConfig({
+var StyledQuestionCheckboxOption = styled__default["default"].div.withConfig({
   componentId: "sc-em5vxx-0"
-})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
-  checked,
-  status
-}) => {
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+  var checked = _ref.checked,
+    status = _ref.status;
   if (checked) {
     return designTokens.base.color.primary1;
   }
-
   switch (status) {
     case 'correct':
       return designTokens.base.color.green1;
-
     case 'wrong':
       return designTokens.base.color.red1;
-
     default:
       return designTokens.base.color.navy5;
   }
-}, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  isAnswer
-}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
-const StyledCustomCheckboxButton = styled__default["default"].span.withConfig({
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref3) {
+  var isAnswer = _ref3.isAnswer;
+  return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
+});
+var StyledCustomCheckboxButton = styled__default["default"].span.withConfig({
   componentId: "sc-em5vxx-1"
 })([""]);
-const StyledQuestionCheckboxInput = styled__default["default"].input.withConfig({
+var StyledQuestionCheckboxInput = styled__default["default"].input.withConfig({
   componentId: "sc-em5vxx-2"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
-  checked,
-  status
-}) => {
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], function (_ref4) {
+  var checked = _ref4.checked,
+    status = _ref4.status;
   if (checked) {
     return designTokens.base.color.primary6;
   }
-
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
-
     case 'wrong':
       return designTokens.base.color.red9;
-
     default:
       return 'transparent';
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref5) {
+  var checked = _ref5.checked,
+    status = _ref5.status;
   if (checked) {
     return designTokens.base.color.primary6;
   }
-
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
-
     case 'wrong':
       return designTokens.base.color.red9;
-
     default:
-      return `1px solid ${designTokens.base.color.gray3}`;
+      return "1px solid ".concat(designTokens.base.color.gray3);
   }
-}, ({
-  status,
-  checked
-}) => {
+}, function (_ref6) {
+  var status = _ref6.status,
+    checked = _ref6.checked;
   if (checked) {
-    return `
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 5px;
-          height: 10px;
-          border: solid ${designTokens.base.color.primary1};
-          transform: translate(-50%, -50%) rotate(45deg);
-          border-width: 0 3px 3px 0;
-        }
-      `;
+    return "\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 5px;\n          height: 10px;\n          border: solid ".concat(designTokens.base.color.primary1, ";\n          transform: translate(-50%, -50%) rotate(45deg);\n          border-width: 0 3px 3px 0;\n        }\n      ");
   }
-
   if (status) {
-    let bgColor;
-
+    var bgColor;
     switch (status) {
       case 'correct':
         bgColor = designTokens.base.color.green9;
         break;
-
       case 'wrong':
         bgColor = designTokens.base.color.red9;
         break;
-
       default:
         bgColor = 'transparent';
         break;
     }
-
-    let borderColor;
-
+    var borderColor;
     switch (status) {
       case 'correct':
         borderColor = designTokens.base.color.green1;
         break;
-
       case 'wrong':
         borderColor = designTokens.base.color.red1;
         break;
-
       default:
         borderColor = designTokens.base.color.navy5;
         break;
     }
-
-    return `
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 5px;
-            height: 10px;
-            border: solid ${borderColor};
-            transform: translate(-50%, -50%) rotate(45deg);
-            border-width: 0 3px 3px 0;
-            background-color: ${bgColor};
-          }
-        `;
+    return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 5px;\n            height: 10px;\n            border: solid ".concat(borderColor, ";\n            transform: translate(-50%, -50%) rotate(45deg);\n            border-width: 0 3px 3px 0;\n            background-color: ").concat(bgColor, ";\n          }\n        ");
   }
 });
-const StyledLabel = styled__default["default"].label.withConfig({
+var StyledLabel = styled__default["default"].label.withConfig({
   componentId: "sc-em5vxx-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
-  checked,
-  status
-}) => {
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
+  var checked = _ref7.checked,
+    status = _ref7.status;
   if (checked) {
     return designTokens.base.color.primary6;
   }
-
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
-
     case 'wrong':
       return designTokens.base.color.red9;
-
     default:
       return designTokens.base.color.navy0;
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref8) {
+  var checked = _ref8.checked,
+    status = _ref8.status;
   if (checked) {
     return designTokens.base.color.primary6;
   }
-
   switch (status) {
     case 'correct':
       return designTokens.base.color.green9;
-
     case 'wrong':
       return designTokens.base.color.red9;
-
     default:
       return designTokens.base.color.navy0;
   }
 });
-const QuestionCheckboxOption = React__default["default"].memo(({
-  value,
-  status,
-  isAnswer,
-  children
-}) => {
-  const {
-    selectedOptions,
-    disabled,
-    onSelect
-  } = QuestionCheckboxContext.useQuestionCheckboxContext();
-  const checked = selectedOptions.includes(value);
+var QuestionCheckboxOption = React__default["default"].memo(function (_ref9) {
+  var value = _ref9.value,
+    status = _ref9.status,
+    isAnswer = _ref9.isAnswer,
+    children = _ref9.children;
+  var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
+    selectedOptions = _useQuestionCheckboxC.selectedOptions,
+    disabled = _useQuestionCheckboxC.disabled,
+    onSelect = _useQuestionCheckboxC.onSelect;
+  var checked = selectedOptions.includes(value);
   return React__default["default"].createElement(StyledQuestionCheckboxOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: checked,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.preventDefault();
-
       if (disabled) {
         return;
       }
-
       onSelect(value);
     },
     status: status
@@ -223,4 +168,4 @@ const QuestionCheckboxOption = React__default["default"].memo(({
   }, children));
 });
 
-module.exports = QuestionCheckboxOption;
+exports["default"] = QuestionCheckboxOption;

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var styled = require('styled-components');
@@ -10,17 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledQuestionRadio = styled__default["default"].div.withConfig({
+var StyledQuestionRadio = styled__default["default"].div.withConfig({
   componentId: "sc-4da40f-0"
 })(["display:flex;flex-direction:column;"]);
-
-const QuestionRadio = _a => {
-  var {
-    children
-  } = _a,
-      props = tslib.__rest(_a, ["children"]);
-
+var QuestionRadio = function QuestionRadio(_a) {
+  var children = _a.children,
+    props = tslib.__rest(_a, ["children"]);
   return React__default["default"].createElement(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props), React__default["default"].createElement(StyledQuestionRadio, null, children));
 };
 
-module.exports = QuestionRadio;
+exports["default"] = QuestionRadio;

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

@@ -8,33 +8,30 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const QuestionRadioContext = React__default["default"].createContext(undefined);
+var QuestionRadioContext = React__default["default"].createContext(undefined);
 QuestionRadioContext.displayName = 'QuestionRadioContext';
-
-function QuestionRadioContextProvider({
-  selectedValue,
-  onSelect,
-  disabled,
-  children
-}) {
-  const onSelectValue = React__default["default"].useCallback(onSelect, []);
-  const value = React__default["default"].useMemo(() => ({
-    selectedValue,
-    disabled,
-    onSelect: onSelectValue
-  }), [selectedValue, disabled, onSelectValue]);
+function QuestionRadioContextProvider(_ref) {
+  var selectedValue = _ref.selectedValue,
+    onSelect = _ref.onSelect,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var onSelectValue = React__default["default"].useCallback(onSelect, []);
+  var value = React__default["default"].useMemo(function () {
+    return {
+      selectedValue: selectedValue,
+      disabled: disabled,
+      onSelect: onSelectValue
+    };
+  }, [selectedValue, disabled, onSelectValue]);
   return React__default["default"].createElement(QuestionRadioContext.Provider, {
     value: value
   }, children);
 }
-
 function useQuestionRadioContext() {
-  const context = React__default["default"].useContext(QuestionRadioContext);
-
+  var context = React__default["default"].useContext(QuestionRadioContext);
   if (context === undefined) {
     throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
   }
-
   return context;
 }