@coorpacademy/components 10.1.0 → 10.1.1

package/es/atom/input-text/index.js

@@ -1,13 +1,16 @@
+import _isEmpty from "lodash/fp/isEmpty";
 import _keys from "lodash/fp/keys";
 import _isNil from "lodash/fp/isNil";
 import _noop from "lodash/fp/noop";
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidStatusClose as ErrorIcon, NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
 import classnames from 'classnames';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
 const themeStyle = {
   setup: style.setup,
+  coorpmanager: style.coorpmanager,
   cockpit: style.cockpit,
   default: style.default
 };
@@ -17,9 +20,11 @@ const InputText = props => {
     autoFocus = false,
     placeholder = '',
     value,
+    hint,
     defaultValue,
     onChange = _noop,
     error,
+    valid,
     theme = 'default',
     description,
     disabled,
@@ -31,25 +36,46 @@ const InputText = props => {
   const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
   const mainClass = themeStyle[theme];
   const className = getClassState(style.default, style.modified, style.error, modified, error);
-  const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
+  const descriptionView = description && theme !== 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description) : null;
+  const toolTipView = description && theme === 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
+    className: style.infoIconWrapper
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    className: style.infoIcon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.descriptionLabel
+  }, description)) : null;
+  const hintView = error || hint ? /*#__PURE__*/React.createElement("div", {
+    className: style.hint // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: error || hint
+    }
+  }) : null;
+  const errorIconView = error ? /*#__PURE__*/React.createElement(ErrorIcon, {
+    className: style.leftIcon
+  }) : null;
+  const validIconView = valid ? /*#__PURE__*/React.createElement(CheckIcon, {
+    className: style.leftIcon
+  }) : null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(mainClass, className, _isNil(propsTitle) && style.isNoTitle)
+    className: classnames(mainClass, className, disabled && style.disabled, _isNil(propsTitle) && style.isNoTitle)
   }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
-    className: style.title
-  }, title), /*#__PURE__*/React.createElement("input", {
+    className: classnames(style.title, _isEmpty(value) && style.noValue)
+  }, title, toolTipView), /*#__PURE__*/React.createElement("input", {
     autoFocus: autoFocus,
     type: "text",
     name: title,
     className: style.input,
     placeholder: placeholder,
     defaultValue: defaultValue,
+    autoComplete: 'off',
     value: value,
     onInput: handleChange,
     disabled: disabled,
     onChange: _noop
-  })), descriptionView);
+  }), errorIconView, validIconView, hintView), descriptionView);
 };
 
 InputText.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -61,10 +87,12 @@ InputText.propTypes = process.env.NODE_ENV !== "production" ? {
   disabled: PropTypes.bool,
   required: PropTypes.bool,
   value: PropTypes.string,
+  hint: PropTypes.string,
   error: PropTypes.string,
   onChange: PropTypes.func,
   description: PropTypes.string,
-  modified: PropTypes.bool
+  modified: PropTypes.bool,
+  valid: PropTypes.bool
 } : {};
 export default InputText;
 //# sourceMappingURL=index.js.map

package/es/atom/input-text/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-text/index.js"],"names":["React","useMemo","PropTypes","classnames","getClassState","style","themeStyle","setup","cockpit","default","InputText","props","autoFocus","placeholder","value","defaultValue","onChange","error","theme","description","disabled","required","modified","title","propsTitle","handleChange","e","target","mainClass","className","descriptionView","isNoTitle","input","propTypes","bool","string","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  setup: style.setup,\n  cockpit: style.cockpit,\n  default: style.default\n};\nconst InputText = props => {\n  const {\n    autoFocus = false,\n    placeholder = '',\n    value,\n    defaultValue,\n    onChange = noop,\n    error,\n    theme = 'default',\n    description,\n    disabled,\n    required,\n    modified = false,\n    title: propsTitle\n  } = props;\n\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n  return (\n    <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n      <label>\n        <span className={style.title}>{title}</span>\n        <input\n          autoFocus={autoFocus}\n          type=\"text\"\n          name={title}\n          className={style.input}\n          placeholder={placeholder}\n          defaultValue={defaultValue}\n          value={value}\n          onInput={handleChange}\n          disabled={disabled}\n          onChange={noop}\n        />\n      </label>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputText.propTypes = {\n  autoFocus: PropTypes.bool,\n  title: PropTypes.string,\n  placeholder: PropTypes.string,\n  defaultValue: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  error: PropTypes.string,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool\n};\nexport default InputText;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-text/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","classnames","getClassState","style","themeStyle","setup","coorpmanager","cockpit","default","InputText","props","autoFocus","placeholder","value","hint","defaultValue","onChange","error","valid","theme","description","disabled","required","modified","title","propsTitle","handleChange","e","target","mainClass","className","descriptionView","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","hintView","__html","errorIconView","leftIcon","validIconView","isNoTitle","noValue","input","propTypes","bool","string","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, isNil, keys, isEmpty} from 'lodash/fp';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidStatusClose as ErrorIcon,\n  NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  setup: style.setup,\n  coorpmanager: style.coorpmanager,\n  cockpit: style.cockpit,\n  default: style.default\n};\nconst InputText = props => {\n  const {\n    autoFocus = false,\n    placeholder = '',\n    value,\n    hint,\n    defaultValue,\n    onChange = noop,\n    error,\n    valid,\n    theme = 'default',\n    description,\n    disabled,\n    required,\n    modified = false,\n    title: propsTitle\n  } = props;\n\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n  const mainClass = themeStyle[theme];\n  const className = getClassState(style.default, style.modified, style.error, modified, error);\n  const descriptionView =\n    description && theme !== 'coorpmanager' ? (\n      <div className={style.description}>{description}</div>\n    ) : null;\n  const toolTipView =\n    description && theme === 'coorpmanager' ? (\n      <div className={style.infoIconWrapper}>\n        <InfoIcon className={style.infoIcon} />\n        <div className={style.descriptionLabel}>{description}</div>\n      </div>\n    ) : null;\n  const hintView =\n    error || hint ? (\n      <div\n        className={style.hint}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: error || hint}}\n      />\n    ) : null;\n  const errorIconView = error ? <ErrorIcon className={style.leftIcon} /> : null;\n  const validIconView = valid ? <CheckIcon className={style.leftIcon} /> : null;\n  return (\n    <div\n      className={classnames(\n        mainClass,\n        className,\n        disabled && style.disabled,\n        isNil(propsTitle) && style.isNoTitle\n      )}\n    >\n      <label>\n        <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n          {title}\n          {toolTipView}\n        </span>\n\n        <input\n          autoFocus={autoFocus}\n          type=\"text\"\n          name={title}\n          className={style.input}\n          placeholder={placeholder}\n          defaultValue={defaultValue}\n          autoComplete={'off'}\n          value={value}\n          onInput={handleChange}\n          disabled={disabled}\n          onChange={noop}\n        />\n        {errorIconView}\n        {validIconView}\n        {hintView}\n      </label>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputText.propTypes = {\n  autoFocus: PropTypes.bool,\n  title: PropTypes.string,\n  placeholder: PropTypes.string,\n  defaultValue: PropTypes.string,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  hint: PropTypes.string,\n  error: PropTypes.string,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  valid: PropTypes.bool\n};\nexport default InputText;\n"],"file":"index.js"}

package/es/atom/input-text/style.css

@@ -5,6 +5,15 @@
 @value dark from colors;
 @value grey from colors;
 @value medium from colors;
+@value xtraLightGrey from colors;
+@value cm_positive_100 from colors;
+@value cm_negative_100 from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_150 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
 
 .default {
   display: flex;
@@ -64,7 +73,7 @@
   bottom: 65px;
   left: 20px;
   max-width: 380px;
-  transition: opacity 0.5s ease-in;
+  transition: opacity 0.25s ease-in;
 }
 .cockpit .description:after {
   content: "";
@@ -168,3 +177,217 @@
   color: medium;
   font-style: italic;
 }
+/******************************* coorpmanager theme ***************************************/
+
+
+.coorpmanager {
+  width: 300px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.coorpmanager label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 0px;
+}
+
+.coorpmanager .title {
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 10px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-align: left;
+  margin: 7px 0px -19px 16px;
+  z-index: 1;
+  color: cm_grey_400;
+  width: auto;
+  transition: all 0.25s linear;
+  pointer-events: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.coorpmanager .title.noValue .infoIcon {
+  height: 10px;
+  width: 10px;
+  line-height: 12px;
+  color: cm_grey_500;
+}
+
+.coorpmanager input {
+  width: 300px;
+  height: 44px;
+  margin: 0px;
+  flex-grow: 0;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 19px 30px 5px 16px;
+  border-radius: 7px;
+  background-color: cm_grey_100;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 44px;
+  letter-spacing: normal;
+  text-align: left;
+  color: cm_grey_700;
+  border: none;
+  transition: all 0.25s linear;
+  outline: none;
+  display: flex;
+}
+
+.coorpmanager .title.noValue{
+  font-size: 14px;
+  font-weight: 500;
+  color: cm_grey_700;
+  margin: 14px 0px -30px 16px;
+}
+
+.coorpmanager:focus-within .title.noValue {
+  font-size: 10px;
+  font-weight: bold;
+  color: cm_grey_400;
+  margin: 7px 0px -19px 16px;
+}
+
+.coorpmanager:focus-within input::placeholder {
+  color: cm_grey_400;
+}
+
+.coorpmanager:focus-within .title.noValue .infoIcon {
+  width: 8px;
+  height: 8px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+.coorpmanager input:hover {
+  background-color: cm_grey_150;
+}
+
+.coorpmanager input::placeholder {
+  color: transparent;
+}
+
+.coorpmanager .hint {
+  flex-grow: 0;
+  opacity: 0.5;
+  font-family: Gilroy;
+  font-size: 10px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-align: left;
+  padding-top: 8px;
+  color: cm_grey_700;
+}
+
+.coorpmanager.error .hint {
+  color: cm_negative_100;
+}
+
+.coorpmanager.error .leftIcon {
+  background-color: cm_negative_100;
+  color: white;
+  border-radius: 50%;
+  padding: 2px;
+  width: 8px;
+  height: 8px;
+}
+
+.coorpmanager .leftIcon {
+  color: cm_positive_100;
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  right: 15px;
+  top: 16px;
+  line-height: 16px;
+}
+
+.coorpmanager.disabled {
+  opacity: 0.5;
+}
+
+.coorpmanager .infoIconWrapper {
+  overflow: visible;
+  height: 12px;
+  margin: 0px 4px;
+  cursor: pointer;
+  pointer-events: fill;
+  position: relative;
+}
+
+.coorpmanager .infoIcon {
+  cursor: pointer;
+  width: 8px;
+  height: 8px;
+  line-height: 16px;
+  color: cm_grey_400;
+  transition: all 0.25s linear;
+}
+
+.coorpmanager .infoIconWrapper:hover .descriptionLabel {
+  visibility: visible;
+  opacity: 1;
+}
+
+.coorpmanager .descriptionLabel {
+  margin: 0 1px 18px 0;
+  padding: 8px 16px;
+  border-radius: 7px;
+  background-color: cm_grey_700;
+  flex-grow: 0;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.43;
+  letter-spacing: normal;
+  text-align: center;
+  color: white;
+  padding: 8px 16px;
+  max-width: 200px;
+  position: absolute;
+  left: -24px;
+  z-index: 3;
+  bottom: 5px;
+  width: max-content;
+  visibility: hidden;
+  opacity: 0s
+}
+
+.coorpmanager .descriptionLabel::after{
+  content:'';
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid cm_grey_700;
+  position: absolute;
+  bottom: -6px;
+  left: 21px;
+}
+.coorpmanager .title.noValue .descriptionLabel::after{
+  left: 22px;
+}
+.coorpmanager:focus-within .title.noValue .descriptionLabel::after{
+  left: 21px;
+}

package/es/atom/input-text/test/fixtures/cm-default.js

@@ -0,0 +1,17 @@
+export default {
+  props: {
+    type: 'text',
+    title: 'Input name',
+    hint: 'Hint <span style="color:red;">10<span>/40',
+    placeholder: 'This is an input',
+    theme: 'coorpmanager',
+    description: 'This is the tooltip text',
+    value: 'This is an input',
+    disabled: false,
+    valid: false,
+    error: '',
+    required: true,
+    onChange: value => console.log(value)
+  }
+};
+//# sourceMappingURL=cm-default.js.map

package/es/atom/input-text/test/fixtures/cm-default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-text/test/fixtures/cm-default.js"],"names":["props","type","title","hint","placeholder","theme","description","value","disabled","valid","error","required","onChange","console","log"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,MADD;AAELC,IAAAA,KAAK,EAAE,YAFF;AAGLC,IAAAA,IAAI,EAAE,2CAHD;AAILC,IAAAA,WAAW,EAAE,kBAJR;AAKLC,IAAAA,KAAK,EAAE,cALF;AAMLC,IAAAA,WAAW,EAAE,0BANR;AAOLC,IAAAA,KAAK,EAAE,kBAPF;AAQLC,IAAAA,QAAQ,EAAE,KARL;AASLC,IAAAA,KAAK,EAAE,KATF;AAULC,IAAAA,KAAK,EAAE,EAVF;AAWLC,IAAAA,QAAQ,EAAE,IAXL;AAYLC,IAAAA,QAAQ,EAAEL,KAAK,IAAIM,OAAO,CAACC,GAAR,CAAYP,KAAZ;AAZd;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    type: 'text',\n    title: 'Input name',\n    hint: 'Hint <span style=\"color:red;\">10<span>/40',\n    placeholder: 'This is an input',\n    theme: 'coorpmanager',\n    description: 'This is the tooltip text',\n    value: 'This is an input',\n    disabled: false,\n    valid: false,\n    error: '',\n    required: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"cm-default.js"}

package/es/molecule/wizard-summary/index.js

@@ -0,0 +1,160 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { NovaSolidComputersSdCard } from '@coorpacademy/nova-icons';
+import Link from '../../atom/link';
+import ContentBagde from '../../atom/content-badge';
+import style from './style.css';
+
+const buildItemsOfSection = items => {
+  return items.map((item, index) => {
+    const {
+      type
+    } = item;
+
+    switch (type) {
+      case 'mainElement':
+        return /*#__PURE__*/React.createElement("li", {
+          key: `${item.title}-${index}`
+        }, /*#__PURE__*/React.createElement("span", {
+          className: style.title
+        }, item.title), /*#__PURE__*/React.createElement("span", {
+          className: style.value
+        }, item.value));
+
+      case 'content':
+        {
+          const {
+            category,
+            label,
+            title,
+            author
+          } = item;
+          return /*#__PURE__*/React.createElement("li", {
+            className: style.contentWrapper,
+            key: `${title}-${index}`
+          }, /*#__PURE__*/React.createElement("span", {
+            className: style.contentCounter
+          }, index + 1), /*#__PURE__*/React.createElement("div", {
+            className: style.contentItem
+          }, /*#__PURE__*/React.createElement("div", {
+            className: style.content
+          }, /*#__PURE__*/React.createElement(ContentBagde, {
+            category: category,
+            label: label
+          }), /*#__PURE__*/React.createElement("span", {
+            className: style.contentTitle,
+            title: title // eslint-disable-next-line react/no-danger
+            ,
+            dangerouslySetInnerHTML: {
+              __html: title
+            }
+          })), author ? /*#__PURE__*/React.createElement("span", {
+            className: style.author
+          }, author) : null));
+        }
+
+      case 'text':
+      default:
+        return /*#__PURE__*/React.createElement("li", {
+          key: `${item.text}-${index}`
+        }, /*#__PURE__*/React.createElement("span", {
+          className: style.valueSimpleText
+        }, item.text));
+    }
+  });
+};
+
+const buildSectionHeader = section => {
+  const {
+    title,
+    counterText
+  } = section;
+
+  if (!title) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.sectionHeader
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.title
+  }, title), counterText ? /*#__PURE__*/React.createElement("span", {
+    className: style.counterText
+  }, counterText) : null);
+};
+
+const buildSections = sections => {
+  return sections.map((section, index) => {
+    const sectionHeader = buildSectionHeader(section);
+    const itemsView = buildItemsOfSection(section.items);
+    return /*#__PURE__*/React.createElement("div", {
+      key: `summary-section-${index}`,
+      "data-step": index,
+      className: style.sectionWrapper
+    }, sectionHeader, /*#__PURE__*/React.createElement("ul", null, itemsView));
+  });
+};
+
+const buildAction = action => {
+  if (!action) return null;
+  const {
+    onClick,
+    text,
+    icon
+  } = action;
+  const handleClick = useMemo(() => () => onClick(), [onClick]);
+  return /*#__PURE__*/React.createElement(Link, {
+    className: style.actionLink,
+    onClick: handleClick
+  }, icon === 'draft' ? /*#__PURE__*/React.createElement(NovaSolidComputersSdCard, {
+    className: style.icon
+  }) : null, /*#__PURE__*/React.createElement("span", null, text));
+};
+
+const WizardSummary = props => {
+  const {
+    title,
+    sections,
+    action
+  } = props;
+  const sectionView = buildSections(sections);
+  const actionView = buildAction(action);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.summaryTitle
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: style.summary
+  }, sectionView), /*#__PURE__*/React.createElement("div", {
+    className: style.actionZone
+  }, actionView));
+};
+
+WizardSummary.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  sections: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+      type: PropTypes.string,
+      title: PropTypes.string,
+      value: PropTypes.string
+    }), PropTypes.shape({
+      type: PropTypes.string,
+      text: PropTypes.string
+    }), PropTypes.shape({
+      type: PropTypes.string,
+      category: PropTypes.oneOf(['base', 'advanced', 'coach', 'chapter', 'scorm', 'video', 'article', 'podcast']),
+      title: PropTypes.string,
+      label: PropTypes.string,
+      author: PropTypes.string
+    })])),
+    counterText: PropTypes.string
+  })),
+  action: PropTypes.shape({
+    icon: PropTypes.string,
+    text: PropTypes.string,
+    onClick: PropTypes.func
+  })
+} : {};
+export default WizardSummary;
+//# sourceMappingURL=index.js.map

package/es/molecule/wizard-summary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/wizard-summary/index.js"],"names":["React","useMemo","PropTypes","NovaSolidComputersSdCard","Link","ContentBagde","style","buildItemsOfSection","items","map","item","index","type","title","value","category","label","author","contentWrapper","contentCounter","contentItem","content","contentTitle","__html","text","valueSimpleText","buildSectionHeader","section","counterText","sectionHeader","buildSections","sections","itemsView","sectionWrapper","buildAction","action","onClick","icon","handleClick","actionLink","WizardSummary","props","sectionView","actionView","container","summaryTitle","summary","actionZone","propTypes","string","arrayOf","shape","oneOfType","oneOf","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidComputersSdCard} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport ContentBagde from '../../atom/content-badge';\nimport style from './style.css';\n\nconst buildItemsOfSection = items => {\n  return items.map((item, index) => {\n    const {type} = item;\n    switch (type) {\n      case 'mainElement':\n        return (\n          <li key={`${item.title}-${index}`}>\n            <span className={style.title}>{item.title}</span>\n            <span className={style.value}>{item.value}</span>\n          </li>\n        );\n      case 'content': {\n        const {category, label, title, author} = item;\n        return (\n          <li className={style.contentWrapper} key={`${title}-${index}`}>\n            <span className={style.contentCounter}>{index + 1}</span>\n            <div className={style.contentItem}>\n              <div className={style.content}>\n                <ContentBagde category={category} label={label} />\n                <span\n                  className={style.contentTitle}\n                  title={title}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: title}}\n                />\n              </div>\n              {author ? <span className={style.author}>{author}</span> : null}\n            </div>\n          </li>\n        );\n      }\n      case 'text':\n      default:\n        return (\n          <li key={`${item.text}-${index}`}>\n            <span className={style.valueSimpleText}>{item.text}</span>\n          </li>\n        );\n    }\n  });\n};\n\nconst buildSectionHeader = section => {\n  const {title, counterText} = section;\n  if (!title) {\n    return null;\n  }\n  return (\n    <div className={style.sectionHeader}>\n      <span className={style.title}>{title}</span>\n      {counterText ? <span className={style.counterText}>{counterText}</span> : null}\n    </div>\n  );\n};\n\nconst buildSections = sections => {\n  return sections.map((section, index) => {\n    const sectionHeader = buildSectionHeader(section);\n    const itemsView = buildItemsOfSection(section.items);\n    return (\n      <div key={`summary-section-${index}`} data-step={index} className={style.sectionWrapper}>\n        {sectionHeader}\n        <ul>{itemsView}</ul>\n      </div>\n    );\n  });\n};\n\nconst buildAction = action => {\n  if (!action) return null;\n\n  const {onClick, text, icon} = action;\n  const handleClick = useMemo(() => () => onClick(), [onClick]);\n  return (\n    <Link className={style.actionLink} onClick={handleClick}>\n      {icon === 'draft' ? <NovaSolidComputersSdCard className={style.icon} /> : null}\n      <span>{text}</span>\n    </Link>\n  );\n};\n\nconst WizardSummary = props => {\n  const {title, sections, action} = props;\n\n  const sectionView = buildSections(sections);\n  const actionView = buildAction(action);\n\n  return (\n    <div className={style.container}>\n      <span className={style.summaryTitle}>{title}</span>\n      <div className={style.summary}>{sectionView}</div>\n      <div className={style.actionZone}>{actionView}</div>\n    </div>\n  );\n};\n\nWizardSummary.propTypes = {\n  title: PropTypes.string,\n  sections: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      items: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.shape({\n            type: PropTypes.string,\n            title: PropTypes.string,\n            value: PropTypes.string\n          }),\n          PropTypes.shape({\n            type: PropTypes.string,\n            text: PropTypes.string\n          }),\n          PropTypes.shape({\n            type: PropTypes.string,\n            category: PropTypes.oneOf([\n              'base',\n              'advanced',\n              'coach',\n              'chapter',\n              'scorm',\n              'video',\n              'article',\n              'podcast'\n            ]),\n            title: PropTypes.string,\n            label: PropTypes.string,\n            author: PropTypes.string\n          })\n        ])\n      ),\n      counterText: PropTypes.string\n    })\n  ),\n  action: PropTypes.shape({\n    icon: PropTypes.string,\n    text: PropTypes.string,\n    onClick: PropTypes.func\n  })\n};\n\nexport default WizardSummary;\n"],"file":"index.js"}