@elice/material-survey 1.220803.0

package/es/components/shared/SurveyContentBox.js

@@ -0,0 +1,98 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, Button } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useMaterialSurveyState } from '../material-survey/context/MaterialSurveyContext.js';
+
+const StyledQuestionBox = styled.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.div.withConfig({
+  componentId: "sc-h8ztvr-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], base.color.navy6);
+const StyledQuestionBoxBody = styled.div.withConfig({
+  componentId: "sc-h8ztvr-2"
+})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], base.color.navy7, ({
+  hasFooter
+}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+const StyledQuestionBoxFooter = styled.div.withConfig({
+  componentId: "sc-h8ztvr-3"
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy6, ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+          align-items: flex-start;
+        ` : '';
+});
+const StyledQuestionBoxFooterActions = styled.div.withConfig({
+  componentId: "sc-h8ztvr-4"
+})(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
+const StyledQuestionBoxFooterStatus = styled.div.withConfig({
+  componentId: "sc-h8ztvr-5"
+})(["margin-left:0.75rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          margin-left: 0;
+          margin-top: 0.75rem;
+        ` : '';
+});
+
+const SurveyContentBox = _a => {
+  var {
+    children,
+    footerActions = [],
+    title,
+    submitResult,
+    submitStatus,
+    onNext
+  } = _a,
+      props = __rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
+
+  const intl = useIntl();
+  const {
+    vertical
+  } = useMaterialSurveyState();
+  const hasFooter = footerActions.length > 0;
+  const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
+    bold: true,
+    customStyles: {
+      color: base.color.navy0
+    }
+  }, title), submitResult ? submitResult : null);
+  const body = React.createElement(StyledQuestionBoxBody, {
+    hasFooter: hasFooter
+  }, children);
+  const footer = React.createElement(StyledQuestionBoxFooter, {
+    vertical: vertical
+  }, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React.createElement(Button, Object.assign({
+    key: index,
+    size: "small"
+  }, action), action.children)), typeof onNext === 'function' ? React.createElement(Button, {
+    size: "small",
+    border: true,
+    tabIndex: 0,
+    transparent: false,
+    role: "lightpurple",
+    onClick: onNext
+  }, intl.formatMessage({
+    id: 'materialSurvey.next'
+  })) : null), React.createElement(StyledQuestionBoxFooterStatus, {
+    vertical: vertical
+  }, submitStatus));
+  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
+    vertical: vertical,
+    hasFooter: hasFooter
+  }), header, body, footerActions.length > 0 ? footer : null);
+};
+
+export { StyledQuestionBox, SurveyContentBox as default };

package/es/components/shared/index.d.ts

@@ -0,0 +1,4 @@
+export { default as QuestionRadio } from './question-radio/QuestionRadio';
+export { default as QuestionRadioOption } from './question-radio/QuestionRadioOption';
+export { default as QuestionCheckbox } from './question-checkbox/QuestionCheckbox';
+export { default as QuestionCheckboxOption } from './question-checkbox/QuestionCheckboxOption';

package/es/components/shared/question-checkbox/QuestionCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionCheckboxProps {
+    selectedOptions: any[];
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionCheckbox: React.FC<QuestionCheckboxProps>;
+export default QuestionCheckbox;

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

@@ -0,0 +1,19 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import styled from 'styled-components';
+import { QuestionCheckboxContextProvider } from './QuestionCheckboxContext.js';
+
+const StyledQuestionCheckbox = styled.div.withConfig({
+  componentId: "sc-1ovh9lp-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionCheckbox = _a => {
+  var {
+    children
+  } = _a,
+      props = __rest(_a, ["children"]);
+
+  return React.createElement(QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
+};
+
+export { QuestionCheckbox as default };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionCheckboxProps } from './QuestionCheckbox';
+declare type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSelect'>;
+interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
+    children: React.ReactNode;
+}
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
+declare function useQuestionCheckboxContext(): Value;
+export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const QuestionCheckboxContext = React.createContext(undefined);
+QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
+
+function QuestionCheckboxContextProvider({
+  selectedOptions,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedOptions,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedOptions, disabled, onSelectValue]);
+  return React.createElement(QuestionCheckboxContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionCheckboxContext() {
+  const context = React.useContext(QuestionCheckboxContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
+  }
+
+  return context;
+}
+
+export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

package/es/components/shared/question-checkbox/QuestionCheckboxOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionCheckboxOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionCheckboxOption: React.FC<QuestionCheckboxOptionProps>;
+export default QuestionCheckboxOption;

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

@@ -0,0 +1,219 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useQuestionCheckboxContext } from './QuestionCheckboxContext.js';
+
+const StyledQuestionCheckboxOption = styled.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
+}) => {
+  if (checked) {
+    return base.color.primary1;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green1;
+
+    case 'wrong':
+      return base.color.red1;
+
+    default:
+      return base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
+const StyledCustomCheckboxButton = styled.span.withConfig({
+  componentId: "sc-em5vxx-1"
+})([""]);
+const StyledQuestionCheckboxInput = styled.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
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return 'transparent';
+  }
+}, ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return `1px solid ${base.color.gray3}`;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  if (checked) {
+    return `
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 5px;
+          height: 10px;
+          border: solid ${base.color.primary1};
+          transform: translate(-50%, -50%) rotate(45deg);
+          border-width: 0 3px 3px 0;
+        }
+      `;
+  }
+
+  if (status) {
+    let bgColor;
+
+    switch (status) {
+      case 'correct':
+        bgColor = base.color.green9;
+        break;
+
+      case 'wrong':
+        bgColor = base.color.red9;
+        break;
+
+      default:
+        bgColor = 'transparent';
+        break;
+    }
+
+    let borderColor;
+
+    switch (status) {
+      case 'correct':
+        borderColor = base.color.green1;
+        break;
+
+      case 'wrong':
+        borderColor = base.color.red1;
+        break;
+
+      default:
+        borderColor = 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};
+          }
+        `;
+  }
+});
+const StyledLabel = styled.label.withConfig({
+  componentId: "sc-em5vxx-3"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+});
+const QuestionCheckboxOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedOptions,
+    disabled,
+    onSelect
+  } = useQuestionCheckboxContext();
+  const checked = selectedOptions.includes(value);
+  return React.createElement(StyledQuestionCheckboxOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: checked,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React.createElement(StyledCustomCheckboxButton, null), React.createElement(StyledQuestionCheckboxInput, {
+    id: value,
+    readOnly: true,
+    type: "checkbox",
+    checked: checked,
+    status: status
+  }), React.createElement(StyledLabel, {
+    htmlFor: value,
+    checked: checked,
+    status: status
+  }, children));
+});
+
+export { QuestionCheckboxOption as default };

package/es/components/shared/question-radio/QuestionRadio.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionRadioProps {
+    selectedValue: any;
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionRadio: React.FC<QuestionRadioProps>;
+export default QuestionRadio;

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

@@ -0,0 +1,19 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import styled from 'styled-components';
+import { QuestionRadioContextProvider } from './QuestionRadioContext.js';
+
+const StyledQuestionRadio = styled.div.withConfig({
+  componentId: "sc-4da40f-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionRadio = _a => {
+  var {
+    children
+  } = _a,
+      props = __rest(_a, ["children"]);
+
+  return React.createElement(QuestionRadioContextProvider, Object.assign({}, props), React.createElement(StyledQuestionRadio, null, children));
+};
+
+export { QuestionRadio as default };

package/es/components/shared/question-radio/QuestionRadioContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionRadioProps } from './QuestionRadio';
+declare type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>;
+interface QuestionRadioProviderProps extends QuestionRadioProps {
+    children: React.ReactNode;
+}
+declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
+declare function useQuestionRadioContext(): Value;
+export { QuestionRadioContextProvider, useQuestionRadioContext };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const QuestionRadioContext = React.createContext(undefined);
+QuestionRadioContext.displayName = 'QuestionRadioContext';
+
+function QuestionRadioContextProvider({
+  selectedValue,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedValue,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedValue, disabled, onSelectValue]);
+  return React.createElement(QuestionRadioContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionRadioContext() {
+  const context = React.useContext(QuestionRadioContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
+  }
+
+  return context;
+}
+
+export { QuestionRadioContextProvider, useQuestionRadioContext };

package/es/components/shared/question-radio/QuestionRadioOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionRadioOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionRadioOption: React.FC<QuestionRadioOptionProps>;
+export default QuestionRadioOption;

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useQuestionRadioContext } from './QuestionRadioContext.js';
+
+const StyledQuestionRadioOption = styled.div.withConfig({
+  componentId: "sc-zgbv8k-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
+}) => {
+  if (checked) {
+    return base.color.primary1;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green1;
+
+    case 'wrong':
+      return base.color.red1;
+
+    default:
+      return base.color.navy5;
+  }
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
+const StyledQuestionRadioInput = styled.input.withConfig({
+  componentId: "sc-zgbv8k-1"
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.gray3;
+  }
+}, ({
+  status,
+  checked
+}) => {
+  if (checked) {
+    return `
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 70%;
+          height: 70%;
+          border-radius: 50%;
+          background-color: ${base.color.primary6};
+        }
+      `;
+  }
+
+  if (status) {
+    let bgColor;
+
+    switch (status) {
+      case 'correct':
+        bgColor = base.color.green9;
+        break;
+
+      case 'wrong':
+        bgColor = base.color.red9;
+        break;
+
+      default:
+        bgColor = base.color.gray3;
+        break;
+    }
+
+    return `
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background-color: ${bgColor};
+          }
+        `;
+  }
+});
+const StyledLabel = styled.label.withConfig({
+  componentId: "sc-zgbv8k-2"
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+}, ({
+  checked,
+  status
+}) => {
+  if (checked) {
+    return base.color.primary6;
+  }
+
+  switch (status) {
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+});
+const QuestionRadioOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedValue,
+    disabled,
+    onSelect
+  } = useQuestionRadioContext();
+  return React.createElement(StyledQuestionRadioOption, {
+    isAnswer: isAnswer,
+    disabled: disabled,
+    checked: selectedValue === value,
+    onClick: e => {
+      e.preventDefault();
+
+      if (disabled) {
+        return;
+      }
+
+      onSelect(value);
+    },
+    status: status
+  }, React.createElement(StyledQuestionRadioInput, {
+    id: value,
+    type: "radio",
+    readOnly: true,
+    checked: selectedValue === value,
+    status: status
+  }), React.createElement(StyledLabel, {
+    htmlFor: value,
+    checked: selectedValue === value,
+    status: status
+  }, children));
+});
+
+export { QuestionRadioOption as default };

package/es/helpers/index.d.ts

@@ -0,0 +1,22 @@
+import type { GetOrgLectureGetResponses, GetOrgMaterialSurveyResponseGetResponses } from '@elice/types';
+import type { SurveyOptionType } from '@elice/types/es/enums';
+interface OptionInfo {
+    content: string;
+    optionType: SurveyOptionType;
+    answerIsSelected?: boolean;
+}
+interface AnswerInfo {
+    optionIdent: string;
+    text: string | null;
+    order: number | null;
+    isSelected: boolean;
+}
+export declare type Option = OptionInfo & Omit<AnswerInfo, 'optionIdent'>;
+export declare type OptionList = Option[];
+export declare enum SurveyResultStatus {
+    Submitted = 0,
+    NotSubmitted = 1
+}
+export declare function getSurveyResultStatus(materialSurveyResponse?: GetOrgMaterialSurveyResponseGetResponses['surveyResponse']): SurveyResultStatus;
+export declare function checkUserLectureTestEnded(lecture?: GetOrgLectureGetResponses['lecture']): boolean;
+export {};