@coorpacademy/components 11.9.2-alpha.1 → 11.9.2

package/es/atom/drag-and-drop/style.css

@@ -18,10 +18,10 @@
 
 .wrapper {
   font-family: "Gilroy";
-  max-height: 350px;
-  max-width: 460px;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .disabled {
@@ -55,6 +55,7 @@
   width: 100%;
   height: 80%;
   border: none;
+  display: flex;
   border-radius: 7px;
   background: cm_grey_50;
 }
@@ -96,7 +97,6 @@
 .inputWrapper {
   background: cm_grey_50;
   width: 100%;
-  height: 80%;
   box-sizing: border-box;
   border-radius: 7px;
   position: relative;
@@ -147,23 +147,26 @@
   background-color: cm_grey_50;
   border-radius: 3px;
   display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
   align-items: center;
   justify-content: space-between;
   margin-top: 16px;
   padding: 4px 8px;
   font-size: 12px;
   font-weight: 400;
+  position: relative;
 }
 
 .resetSrcLabel {
   color: cm_grey_700;
-  display: inline-block;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  direction: rtl;
-  text-align: left;
-  max-width: 90%;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  position: absolute;
+  left: 0;
+  right: 15px;
 }
 
 .closeIcon {
@@ -172,6 +175,8 @@
   margin-left: 6px;
   height: 15px;
   width: 15px;
+  position: absolute;
+  right: 0;
 }
 
 .dragging {
@@ -244,7 +249,7 @@
 }
 
 .loaderWrapper:hover .loadingCancel {
-  display: block;
+  display: flex;
 }
 
 .loaderWrapper:hover {

package/es/atom/image-upload/index.d.ts

@@ -1,5 +1,5 @@
 export default ImageUpload;
-declare function ImageUpload({ title, description, previewLabel, previewContent, uploadLabel, loading, modified, disabled, onChange, onReset, name, imageTypes, error, buttonAriaLabel, errorButtonLabel }: {
+declare function ImageUpload({ title, description, previewLabel, previewContent, uploadLabel, loading, modified, disabled, onChange, onReset, name, labelLink, labelButtonLink, hrefLink, imageTypes, error, buttonAriaLabel, errorButtonLabel }: {
     title: any;
     description: any;
     previewLabel: any;
@@ -11,6 +11,9 @@ declare function ImageUpload({ title, description, previewLabel, previewContent,
     onChange: any;
     onReset?: null | undefined;
     name: any;
+    labelLink: any;
+    labelButtonLink: any;
+    hrefLink: any;
     imageTypes?: string[] | undefined;
     error?: string | undefined;
     buttonAriaLabel: any;
@@ -25,6 +28,8 @@ declare namespace ImageUpload {
         error: PropTypes.Requireable<string>;
         buttonAriaLabel: PropTypes.Requireable<string>;
         errorButtonLabel: PropTypes.Requireable<string>;
+        labelLink: PropTypes.Requireable<string>;
+        hrefLink: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
         description: PropTypes.Requireable<string>;
         uploadLabel: PropTypes.Requireable<string>;

package/es/atom/image-upload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/image-upload/index.js"],"names":[],"mappings":";AAOA;;;;;;;;;;;;;;;;gBAgEC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/image-upload/index.js"],"names":[],"mappings":";AAQA;;;;;;;;;;;;;;;;;;;gBAmFC"}

package/es/atom/image-upload/index.js

@@ -9,6 +9,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import DragAndDrop from '../drag-and-drop';
 import { ImagePropType } from '../../util/proptypes';
+import Link from '../button-link';
 import style from './style.css';
 
 const ImageUpload = ({
@@ -24,6 +25,9 @@ const ImageUpload = ({
   onReset = null,
   name,
   // See ImagePropType for accepted values
+  labelLink,
+  labelButtonLink,
+  hrefLink,
   imageTypes = ['*'],
   error = '',
   buttonAriaLabel,
@@ -37,7 +41,11 @@ const ImageUpload = ({
 
   const acceptedImages = _pipe(_map(t => `image/${t}`), _join(','))(imageTypes);
 
-  return /*#__PURE__*/React.createElement(DragAndDrop, {
+  const linkCustomStyle = {
+    width: '40px',
+    color: 'red'
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DragAndDrop, {
     title: title,
     description: description,
     previewLabel: previewLabel,
@@ -50,7 +58,7 @@ const ImageUpload = ({
     disabled: disabled,
     buttonAriaLabel: buttonAriaLabel,
     errorButtonLabel: errorButtonLabel
-  }, (onDragStart, onDragStop) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
+  }, (onDragStart, onDragStop) => /*#__PURE__*/React.createElement("input", {
     type: "file",
     name: name,
     accept: acceptedImages,
@@ -60,7 +68,17 @@ const ImageUpload = ({
     onDragEnter: onDragStart,
     onDrop: onDragStop,
     onDragLeave: onDragStop
-  })));
+  })), labelLink && hrefLink ? /*#__PURE__*/React.createElement("div", {
+    className: style.templateLink
+  }, labelLink, /*#__PURE__*/React.createElement(Link, {
+    type: "text",
+    customStyle: linkCustomStyle,
+    link: {
+      href: hrefLink,
+      download: true
+    },
+    label: labelButtonLink
+  })) : null);
 };
 
 ImageUpload.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, DragAndDrop.propTypes, {
@@ -70,7 +88,9 @@ ImageUpload.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, Dra
   imageTypes: PropTypes.arrayOf(ImagePropType),
   error: PropTypes.string,
   buttonAriaLabel: PropTypes.string,
-  errorButtonLabel: PropTypes.string
+  errorButtonLabel: PropTypes.string,
+  labelLink: PropTypes.string,
+  hrefLink: PropTypes.string
 }) : {};
 export default ImageUpload;
 //# sourceMappingURL=index.js.map

package/es/atom/image-upload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","imageTypes","error","buttonAriaLabel","errorButtonLabel","handleReset","e","preventDefault","acceptedImages","t","onDragStart","onDragStop","input","propTypes","string","func","arrayOf"],"sources":["../../../src/atom/image-upload/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {join, map, pipe, isNil} from 'lodash/fp';\nimport DragAndDrop from '../drag-and-drop';\nimport {ImagePropType} from '../../util/proptypes';\nimport style from './style.css';\n\nconst ImageUpload = ({\n  title,\n  description,\n  previewLabel,\n  previewContent,\n  uploadLabel,\n  loading,\n  modified,\n  disabled = false,\n  onChange,\n  onReset = null,\n  name,\n  // See ImagePropType for accepted values\n  imageTypes = ['*'],\n  error = '',\n  buttonAriaLabel,\n  errorButtonLabel\n}) => {\n  const handleReset = useCallback(\n    e => {\n      if (isNil(onReset)) return;\n      e.preventDefault();\n      return onReset(e);\n    },\n    [onReset]\n  );\n\n  const acceptedImages = pipe(\n    map(t => `image/${t}`),\n    join(',')\n  )(imageTypes);\n\n  return (\n    <DragAndDrop\n      title={title}\n      description={description}\n      previewLabel={previewLabel}\n      previewContent={previewContent}\n      uploadLabel={uploadLabel}\n      loading={loading}\n      modified={modified}\n      onReset={handleReset}\n      error={error}\n      disabled={disabled}\n      buttonAriaLabel={buttonAriaLabel}\n      errorButtonLabel={errorButtonLabel}\n    >\n      {(onDragStart, onDragStop) => (\n        <div>\n          <input\n            type=\"file\"\n            name={name}\n            accept={acceptedImages}\n            disabled={loading || disabled}\n            className={style.input}\n            onChange={onChange}\n            onDragEnter={onDragStart}\n            onDrop={onDragStop}\n            onDragLeave={onDragStop}\n          />\n        </div>\n      )}\n    </DragAndDrop>\n  );\n};\n\nImageUpload.propTypes = {\n  ...DragAndDrop.propTypes,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  onReset: PropTypes.func,\n  imageTypes: PropTypes.arrayOf(ImagePropType),\n  error: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  errorButtonLabel: PropTypes.string\n};\n\nexport default ImageUpload;\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,WAAP,MAAwB,kBAAxB;AACA,SAAQC,aAAR,QAA4B,sBAA5B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,WAAW,GAAG,CAAC;EACnBC,KADmB;EAEnBC,WAFmB;EAGnBC,YAHmB;EAInBC,cAJmB;EAKnBC,WALmB;EAMnBC,OANmB;EAOnBC,QAPmB;EAQnBC,QAAQ,GAAG,KARQ;EASnBC,QATmB;EAUnBC,OAAO,GAAG,IAVS;EAWnBC,IAXmB;EAYnB;EACAC,UAAU,GAAG,CAAC,GAAD,CAbM;EAcnBC,KAAK,GAAG,EAdW;EAenBC,eAfmB;EAgBnBC;AAhBmB,CAAD,KAiBd;EACJ,MAAMC,WAAW,GAAGrB,WAAW,CAC7BsB,CAAC,IAAI;IACH,IAAI,OAAMP,OAAN,CAAJ,EAAoB;IACpBO,CAAC,CAACC,cAAF;IACA,OAAOR,OAAO,CAACO,CAAD,CAAd;EACD,CAL4B,EAM7B,CAACP,OAAD,CAN6B,CAA/B;;EASA,MAAMS,cAAc,GAAG,MACrB,KAAIC,CAAC,IAAK,SAAQA,CAAE,EAApB,CADqB,EAErB,MAAK,GAAL,CAFqB,EAGrBR,UAHqB,CAAvB;;EAKA,oBACE,oBAAC,WAAD;IACE,KAAK,EAAEX,KADT;IAEE,WAAW,EAAEC,WAFf;IAGE,YAAY,EAAEC,YAHhB;IAIE,cAAc,EAAEC,cAJlB;IAKE,WAAW,EAAEC,WALf;IAME,OAAO,EAAEC,OANX;IAOE,QAAQ,EAAEC,QAPZ;IAQE,OAAO,EAAES,WARX;IASE,KAAK,EAAEH,KATT;IAUE,QAAQ,EAAEL,QAVZ;IAWE,eAAe,EAAEM,eAXnB;IAYE,gBAAgB,EAAEC;EAZpB,GAcG,CAACM,WAAD,EAAcC,UAAd,kBACC,8CACE;IACE,IAAI,EAAC,MADP;IAEE,IAAI,EAAEX,IAFR;IAGE,MAAM,EAAEQ,cAHV;IAIE,QAAQ,EAAEb,OAAO,IAAIE,QAJvB;IAKE,SAAS,EAAET,KAAK,CAACwB,KALnB;IAME,QAAQ,EAAEd,QANZ;IAOE,WAAW,EAAEY,WAPf;IAQE,MAAM,EAAEC,UARV;IASE,WAAW,EAAEA;EATf,EADF,CAfJ,CADF;AAgCD,CAhED;;AAkEAtB,WAAW,CAACwB,SAAZ,wDACK3B,WAAW,CAAC2B,SADjB;EAEEb,IAAI,EAAEf,SAAS,CAAC6B,MAFlB;EAGEhB,QAAQ,EAAEb,SAAS,CAAC8B,IAHtB;EAIEhB,OAAO,EAAEd,SAAS,CAAC8B,IAJrB;EAKEd,UAAU,EAAEhB,SAAS,CAAC+B,OAAV,CAAkB7B,aAAlB,CALd;EAMEe,KAAK,EAAEjB,SAAS,CAAC6B,MANnB;EAOEX,eAAe,EAAElB,SAAS,CAAC6B,MAP7B;EAQEV,gBAAgB,EAAEnB,SAAS,CAAC6B;AAR9B;AAWA,eAAezB,WAAf"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","DragAndDrop","ImagePropType","Link","style","ImageUpload","title","description","previewLabel","previewContent","uploadLabel","loading","modified","disabled","onChange","onReset","name","labelLink","labelButtonLink","hrefLink","imageTypes","error","buttonAriaLabel","errorButtonLabel","handleReset","e","preventDefault","acceptedImages","t","linkCustomStyle","width","color","onDragStart","onDragStop","input","templateLink","href","download","propTypes","string","func","arrayOf"],"sources":["../../../src/atom/image-upload/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {join, map, pipe, isNil} from 'lodash/fp';\nimport DragAndDrop from '../drag-and-drop';\nimport {ImagePropType} from '../../util/proptypes';\nimport Link from '../button-link';\nimport style from './style.css';\n\nconst ImageUpload = ({\n  title,\n  description,\n  previewLabel,\n  previewContent,\n  uploadLabel,\n  loading,\n  modified,\n  disabled = false,\n  onChange,\n  onReset = null,\n  name,\n  // See ImagePropType for accepted values\n  labelLink,\n  labelButtonLink,\n  hrefLink,\n  imageTypes = ['*'],\n  error = '',\n  buttonAriaLabel,\n  errorButtonLabel\n}) => {\n  const handleReset = useCallback(\n    e => {\n      if (isNil(onReset)) return;\n      e.preventDefault();\n      return onReset(e);\n    },\n    [onReset]\n  );\n\n  const acceptedImages = pipe(\n    map(t => `image/${t}`),\n    join(',')\n  )(imageTypes);\n\n  const linkCustomStyle = {\n    width: '40px',\n    color: 'red'\n  };\n\n  return (\n    <div>\n      <DragAndDrop\n        title={title}\n        description={description}\n        previewLabel={previewLabel}\n        previewContent={previewContent}\n        uploadLabel={uploadLabel}\n        loading={loading}\n        modified={modified}\n        onReset={handleReset}\n        error={error}\n        disabled={disabled}\n        buttonAriaLabel={buttonAriaLabel}\n        errorButtonLabel={errorButtonLabel}\n      >\n        {(onDragStart, onDragStop) => (\n          <input\n            type=\"file\"\n            name={name}\n            accept={acceptedImages}\n            disabled={loading || disabled}\n            className={style.input}\n            onChange={onChange}\n            onDragEnter={onDragStart}\n            onDrop={onDragStop}\n            onDragLeave={onDragStop}\n          />\n        )}\n      </DragAndDrop>\n      {labelLink && hrefLink ? (\n        <div className={style.templateLink}>\n          {labelLink}\n          <Link\n            type=\"text\"\n            customStyle={linkCustomStyle}\n            link={{href: hrefLink, download: true}}\n            label={labelButtonLink}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nImageUpload.propTypes = {\n  ...DragAndDrop.propTypes,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  onReset: PropTypes.func,\n  imageTypes: PropTypes.arrayOf(ImagePropType),\n  error: PropTypes.string,\n  buttonAriaLabel: PropTypes.string,\n  errorButtonLabel: PropTypes.string,\n  labelLink: PropTypes.string,\n  hrefLink: PropTypes.string\n};\n\nexport default ImageUpload;\n"],"mappings":"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"}

package/es/atom/image-upload/style.css

@@ -10,3 +10,10 @@
   bottom: 0;
   right: 0;
 }
+
+.templateLink {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 8px;
+}

package/es/atom/review-presentation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";AA+CA,6DA+BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/review-presentation/index.js"],"names":[],"mappings":";AAyGA,6DA+BC"}

package/es/atom/review-presentation/index.js

@@ -1,9 +1,10 @@
-import React from 'react';
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import getOr from 'lodash/fp/getOr';
 import map from 'lodash/fp/map';
-import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidVoteRewardsVoteHeart as HeartIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon, NovaLineSelectionCursorsCursorArrowTarget as TargetIcon } from '@coorpacademy/nova-icons';
-import ToolTip from '../tooltip';
+import { NovaSolidStatusCheckCircle2 as CheckIcon, NovaSolidVoteRewardsVoteHeart as HeartIcon, NovaCompositionCoorpacademyInformationIcon as InformationIcon, NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon, NovaLineSelectionCursorsCursorArrowTarget as TargetIcon } from '@coorpacademy/nova-icons';
 import style from './style.css';
 import propTypes from './prop-types';
 const ICONS = {
@@ -30,6 +31,50 @@ const ReviewIcon = ({
   });
 };
 
+const ToolTip = ({
+  tooltipText,
+  'aria-label': moreDetailsAriaLabel,
+  'data-testid': dataTestId,
+  closeToolTipInformationTextAriaLabel
+}) => {
+  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
+  const handleKeyPress = useCallback(event => {
+    if (event.key === 'Enter') {
+      setToolTipIsVisible(!toolTipIsVisible);
+    } else if (event.key === 'Tab' || event.key === 'Escape') {
+      setToolTipIsVisible(false);
+    }
+  }, [setToolTipIsVisible, toolTipIsVisible]);
+  const handleMouseOver = useCallback(() => {
+    setToolTipIsVisible(true);
+  }, [setToolTipIsVisible]);
+  const handleMouseLeave = useCallback(() => {
+    setToolTipIsVisible(false);
+  }, [setToolTipIsVisible]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.tooltipContainer,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: style.tooltipIconContainer,
+    "data-testid": dataTestId,
+    onKeyDown: handleKeyPress,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(InformationIcon, {
+    className: style.informationIcon,
+    width: 12,
+    height: 12,
+    "aria-label": moreDetailsAriaLabel
+  })), toolTipIsVisible ? /*#__PURE__*/React.createElement("div", {
+    className: style.toolTip,
+    "data-testid": "review-presentation-tooltip",
+    "aria-label": closeToolTipInformationTextAriaLabel
+  }, /*#__PURE__*/React.createElement("p", {
+    className: style.tooltipText
+  }, tooltipText)) : null);
+};
+
 const ReviewListItemWrapper = ({
   iconKey,
   label
@@ -44,10 +89,10 @@ const ReviewListItemWrapper = ({
   }, /*#__PURE__*/React.createElement(ReviewIcon, {
     icon: iconKey
   }), " ", label.text), /*#__PURE__*/React.createElement(ToolTip, {
-    TooltipContent: label.tooltipText,
+    tooltipText: label.tooltipText,
+    "aria-label": label.moreDetailsAriaLabel,
     closeToolTipInformationTextAriaLabel: label.closeToolTipInformationTextAriaLabel,
-    "data-testid": `review-list-item-tooltip-button-${iconKey}`,
-    "aria-label": label.moreDetailsAriaLabel
+    "data-testid": `review-list-item-tooltip-button-${iconKey}`
   }));
 };
 
@@ -90,18 +135,23 @@ const ReviewPresentation = props => {
   }, labelsList)));
 };
 
+ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
+  tooltipText: PropTypes.string,
+  'aria-label': PropTypes.string,
+  'data-testid': PropTypes.string,
+  closeToolTipInformationTextAriaLabel: PropTypes.string
+} : {};
 ReviewIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: PropTypes.string
 } : {};
-ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
+ReviewListItemWrapper.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, ToolTip.propTypes, {
   iconKey: PropTypes.string,
   label: PropTypes.shape({
-    tooltipText: ToolTip.propTypes.tooltipText,
-    moreDetailsAriaLabel: ToolTip.propTypes['aria-label'],
-    closeToolTipInformationTextAriaLabel: ToolTip.propTypes.closeToolTipInformationTextAriaLabel,
-    text: PropTypes.string
+    tooltipText: PropTypes.string,
+    moreDetailsAriaLabel: PropTypes.string,
+    closeToolTipInformationTextAriaLabel: PropTypes.string
   })
-} : {};
+}) : {};
 ReviewPresentation.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default ReviewPresentation;
 //# sourceMappingURL=index.js.map

package/es/atom/review-presentation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","getOr","map","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidVoteRewardsVoteHeart","HeartIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","ToolTip","style","propTypes","ICONS","skills","questions","lifes","allright","ReviewIcon","icon","Icon","labelIcon","ReviewListItemWrapper","iconKey","label","reviewListItemWrapper","reviewListText","text","tooltipText","closeToolTipInformationTextAriaLabel","moreDetailsAriaLabel","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","convert","cap","key","reviewList","string","shape"],"sources":["../../../src/atom/review-presentation/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst ReviewIcon = ({icon}) => {\n  const Icon = getOr(null, icon, ICONS);\n\n  /* istanbul ignore next */\n  if (!Icon) {\n    return <div className={style.labelIcon} />;\n  }\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ReviewListItemWrapper = ({iconKey, label}) => {\n  return (\n    <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\" tabIndex={0}>\n      <div className={style.reviewListText}>\n        <ReviewIcon icon={iconKey} /> {label.text}\n      </div>\n      <ToolTip\n        TooltipContent={label.tooltipText}\n        closeToolTipInformationTextAriaLabel={label.closeToolTipInformationTextAriaLabel}\n        data-testid={`review-list-item-tooltip-button-${iconKey}`}\n        aria-label={label.moreDetailsAriaLabel}\n      />\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <ReviewListItemWrapper\n                iconKey={key}\n                label={label}\n                tooltipText={label.tooltipText}\n                aria-label={label.moreDetailsAriaLabel}\n              />\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nReviewIcon.propTypes = {\n  icon: PropTypes.string\n};\n\nReviewListItemWrapper.propTypes = {\n  iconKey: PropTypes.string,\n  label: PropTypes.shape({\n    tooltipText: ToolTip.propTypes.tooltipText,\n    moreDetailsAriaLabel: ToolTip.propTypes['aria-label'],\n    closeToolTipInformationTextAriaLabel: ToolTip.propTypes.closeToolTipInformationTextAriaLabel,\n    text: PropTypes.string\n  })\n};\n\nReviewPresentation.propTypes = propTypes;\n\nexport default ReviewPresentation;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","getOr","map","NovaSolidStatusCheckCircle2","CheckIcon","NovaSolidVoteRewardsVoteHeart","HeartIcon","NovaCompositionCoorpacademyInformationIcon","InformationIcon","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","NovaLineSelectionCursorsCursorArrowTarget","TargetIcon","style","propTypes","ICONS","skills","questions","lifes","allright","ReviewIcon","icon","Icon","labelIcon","ToolTip","tooltipText","moreDetailsAriaLabel","dataTestId","closeToolTipInformationTextAriaLabel","toolTipIsVisible","setToolTipIsVisible","handleKeyPress","event","key","handleMouseOver","handleMouseLeave","tooltipContainer","tooltipIconContainer","informationIcon","toolTip","ReviewListItemWrapper","iconKey","label","reviewListItemWrapper","reviewListText","text","ReviewPresentation","props","ariaLabel","reviewTitle","reviewText","labelsList","reviewWrapper","__html","reviewListWrapper","convert","cap","reviewList","string","shape"],"sources":["../../../src/atom/review-presentation/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport map from 'lodash/fp/map';\nimport {\n  NovaSolidStatusCheckCircle2 as CheckIcon,\n  NovaSolidVoteRewardsVoteHeart as HeartIcon,\n  NovaCompositionCoorpacademyInformationIcon as InformationIcon,\n  NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon,\n  NovaLineSelectionCursorsCursorArrowTarget as TargetIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst ICONS = {\n  skills: TargetIcon,\n  questions: QuestionIcon,\n  lifes: HeartIcon,\n  allright: CheckIcon\n};\n\nconst ReviewIcon = ({icon}) => {\n  const Icon = getOr(null, icon, ICONS);\n\n  /* istanbul ignore next */\n  if (!Icon) {\n    return <div className={style.labelIcon} />;\n  }\n  return <Icon className={style.labelIcon} />;\n};\n\nconst ToolTip = ({\n  tooltipText,\n  'aria-label': moreDetailsAriaLabel,\n  'data-testid': dataTestId,\n  closeToolTipInformationTextAriaLabel\n}) => {\n  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n  const handleKeyPress = useCallback(\n    event => {\n      if (event.key === 'Enter') {\n        setToolTipIsVisible(!toolTipIsVisible);\n      } else if (event.key === 'Tab' || event.key === 'Escape') {\n        setToolTipIsVisible(false);\n      }\n    },\n    [setToolTipIsVisible, toolTipIsVisible]\n  );\n  const handleMouseOver = useCallback(() => {\n    setToolTipIsVisible(true);\n  }, [setToolTipIsVisible]);\n\n  const handleMouseLeave = useCallback(() => {\n    setToolTipIsVisible(false);\n  }, [setToolTipIsVisible]);\n\n  return (\n    <div\n      className={style.tooltipContainer}\n      onMouseLeave={handleMouseLeave}\n      onMouseOver={handleMouseOver}\n    >\n      <button\n        type=\"button\"\n        className={style.tooltipIconContainer}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyPress}\n        tabIndex={0}\n      >\n        <InformationIcon\n          className={style.informationIcon}\n          width={12}\n          height={12}\n          aria-label={moreDetailsAriaLabel}\n        />\n      </button>\n      {toolTipIsVisible ? (\n        <div\n          className={style.toolTip}\n          data-testid=\"review-presentation-tooltip\"\n          aria-label={closeToolTipInformationTextAriaLabel}\n        >\n          <p className={style.tooltipText}>{tooltipText}</p>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nconst ReviewListItemWrapper = ({iconKey, label}) => {\n  return (\n    <div className={style.reviewListItemWrapper} data-tip data-for=\"reviewListItem\" tabIndex={0}>\n      <div className={style.reviewListText}>\n        <ReviewIcon icon={iconKey} /> {label.text}\n      </div>\n      <ToolTip\n        tooltipText={label.tooltipText}\n        aria-label={label.moreDetailsAriaLabel}\n        closeToolTipInformationTextAriaLabel={label.closeToolTipInformationTextAriaLabel}\n        data-testid={`review-list-item-tooltip-button-${iconKey}`}\n      />\n    </div>\n  );\n};\n\nconst ReviewPresentation = props => {\n  const {'aria-label': ariaLabel, reviewTitle, reviewText, labelsList} = props;\n\n  return (\n    <div className={style.reviewWrapper} aria-label={ariaLabel}>\n      <div\n        className={style.reviewTitle}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewTitle}}\n      />\n      <div\n        className={style.reviewText}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: reviewText}}\n      />\n      <ul className={style.reviewListWrapper}>\n        {map.convert({cap: false})((label, key) => {\n          return (\n            <li key={`step-${key}`} className={style.reviewList}>\n              <ReviewListItemWrapper\n                iconKey={key}\n                label={label}\n                tooltipText={label.tooltipText}\n                aria-label={label.moreDetailsAriaLabel}\n              />\n            </li>\n          );\n        }, labelsList)}\n      </ul>\n    </div>\n  );\n};\n\nToolTip.propTypes = {\n  tooltipText: PropTypes.string,\n  'aria-label': PropTypes.string,\n  'data-testid': PropTypes.string,\n  closeToolTipInformationTextAriaLabel: PropTypes.string\n};\n\nReviewIcon.propTypes = {\n  icon: PropTypes.string\n};\n\nReviewListItemWrapper.propTypes = {\n  ...ToolTip.propTypes,\n  iconKey: PropTypes.string,\n  label: PropTypes.shape({\n    tooltipText: PropTypes.string,\n    moreDetailsAriaLabel: PropTypes.string,\n    closeToolTipInformationTextAriaLabel: PropTypes.string\n  })\n};\n\nReviewPresentation.propTypes = propTypes;\n\nexport default ReviewPresentation;\n"],"mappings":"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"}

package/es/atom/review-presentation/style.css

@@ -3,14 +3,12 @@
 @value mobile from breakpoints;
 @value colors: "../../variables/colors.css";
 @value xtraLightGrey from colors;
+@value cm_blue_900 from colors;
 @value cm_grey_75 from colors;
+@value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+@value white from colors;
 
-.reviewWrapper {
-  width: 100%;
-  border-radius: 16px;
-  background-color: xtraLightGrey;
-  padding-bottom: 40px;
-}
 
 .textBase {
   font-family: "Gilroy";
@@ -19,6 +17,13 @@
   user-select: none;
 }
 
+.reviewWrapper {
+  width: 100%;
+  border-radius: 16px;
+  background-color: xtraLightGrey;
+  padding-bottom: 40px;
+}
+
 .reviewTitle {
   composes: textBase;
   font-weight: 700;
@@ -72,6 +77,61 @@
   width: 16px;
 }
 
+.informationIcon {
+  color: cm_grey_500;
+}
+
+.toolTip {
+  transition: opacity 0.8s;
+  position: absolute;
+  height: auto;
+  width: 200px;
+  border-radius: 7px;
+  background-color: cm_grey_700;
+  right: -81px;
+  bottom: 32px;
+}
+
+.toolTip::before {
+  content: '';
+  display: inline-block;
+  visibility: inherit;
+  opacity: inherit;
+  width: 15px;
+  height: 15px;
+  transform: rotate(-45deg);
+  background-color: cm_grey_700;
+  position: inherit;
+  bottom: -5px;
+  right: 40%;
+  border-radius: 2px;
+}
+
+.tooltipText {
+  composes: textBase;
+  font-weight: 500;
+  font-size: 14px;
+  display: inline-block;
+  border-radius: 3px;
+  word-wrap: break-word;
+  color: white;
+  padding: 8px 14px;
+  text-align: center;
+}
+
+.tooltipContainer {
+  overflow: visible;
+  position: relative;
+}
+
+.tooltipIconContainer {
+  display: flex;
+  justify-content: flex-end;
+  border: none;
+  background: cm_grey_75;
+  height: 25px;
+}
+
 @media tablet {
   .reviewWrapper{
     width: 100%;
@@ -82,4 +142,4 @@
   .reviewWrapper{
     width: 100%;
   }
-}
+}

package/es/atom/title/index.d.ts

@@ -6,6 +6,7 @@ declare namespace Title {
         subtitle: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
         'data-name': PropTypes.Requireable<string>;
+        subtitleSize: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

package/es/atom/title/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AAsBA,gDAeC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/title/index.js"],"names":[],"mappings":";AA2BA,gDAeC"}

package/es/atom/title/index.js

@@ -12,13 +12,20 @@ const getTitleStype = type => {
   }
 };
 
-const getSubtitleStype = type => {
+const getSubtitleStype = (type, size) => {
   switch (type) {
     case 'page':
       return style.subtitlePage;
 
     case 'form-group':
-      return style.subtitleFormGroup;
+      switch (size) {
+        case 'standard':
+          return style.subtitleFormGroup;
+
+        case 'small':
+          return style.smallSubtitleFormGroup;
+      }
+
   }
 };
 
@@ -27,10 +34,11 @@ const Title = props => {
     title,
     subtitle,
     type,
-    'data-name': dataName
+    'data-name': dataName,
+    subtitleSize = 'standard'
   } = props;
   const titleStyle = getTitleStype(type);
-  const subtitleStyle = getSubtitleStype(type);
+  const subtitleStyle = getSubtitleStype(type, subtitleSize);
   const subtitleSection = subtitle ? /*#__PURE__*/React.createElement("div", {
     className: subtitleStyle
   }, subtitle) : null;
@@ -44,7 +52,8 @@ Title.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string,
   subtitle: PropTypes.string,
   type: PropTypes.oneOf(['page', 'form-group']),
-  'data-name': PropTypes.string
+  'data-name': PropTypes.string,
+  subtitleSize: PropTypes.string
 } : {};
 export default Title;
 //# sourceMappingURL=index.js.map

package/es/atom/title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","style","getTitleStype","type","titlePage","titleFormGroup","getSubtitleStype","subtitlePage","subtitleFormGroup","Title","props","title","subtitle","dataName","titleStyle","subtitleStyle","subtitleSection","propTypes","string","oneOf"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from './style.css';\n\nconst getTitleStype = type => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      return style.titleFormGroup;\n  }\n};\n\nconst getSubtitleStype = type => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      return style.subtitleFormGroup;\n  }\n};\n\nconst Title = props => {\n  const {title, subtitle, type, 'data-name': dataName} = props;\n  const titleStyle = getTitleStype(type);\n  const subtitleStyle = getSubtitleStype(type);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div>\n      <div className={titleStyle} data-name={dataName}>\n        {title}\n      </div>\n      {subtitleSection}\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string\n};\nexport default Title;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAGC,IAAI,IAAI;EAC5B,QAAQA,IAAR;IACE,KAAK,MAAL;MACE,OAAOF,KAAK,CAACG,SAAb;;IACF,KAAK,YAAL;MACE,OAAOH,KAAK,CAACI,cAAb;EAJJ;AAMD,CAPD;;AASA,MAAMC,gBAAgB,GAAGH,IAAI,IAAI;EAC/B,QAAQA,IAAR;IACE,KAAK,MAAL;MACE,OAAOF,KAAK,CAACM,YAAb;;IACF,KAAK,YAAL;MACE,OAAON,KAAK,CAACO,iBAAb;EAJJ;AAMD,CAPD;;AASA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBT,IAAlB;IAAwB,aAAaU;EAArC,IAAiDH,KAAvD;EACA,MAAMI,UAAU,GAAGZ,aAAa,CAACC,IAAD,CAAhC;EACA,MAAMY,aAAa,GAAGT,gBAAgB,CAACH,IAAD,CAAtC;EAEA,MAAMa,eAAe,GAAGJ,QAAQ,gBAAG;IAAK,SAAS,EAAEG;EAAhB,GAAgCH,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE,8CACE;IAAK,SAAS,EAAEE,UAAhB;IAA4B,aAAWD;EAAvC,GACGF,KADH,CADF,EAIGK,eAJH,CADF;AAQD,CAfD;;AAiBAP,KAAK,CAACQ,SAAN,2CAAkB;EAChBN,KAAK,EAAEX,SAAS,CAACkB,MADD;EAEhBN,QAAQ,EAAEZ,SAAS,CAACkB,MAFJ;EAGhBf,IAAI,EAAEH,SAAS,CAACmB,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAanB,SAAS,CAACkB;AAJP,CAAlB;AAMA,eAAeT,KAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","style","getTitleStype","type","titlePage","titleFormGroup","getSubtitleStype","size","subtitlePage","subtitleFormGroup","smallSubtitleFormGroup","Title","props","title","subtitle","dataName","subtitleSize","titleStyle","subtitleStyle","subtitleSection","propTypes","string","oneOf"],"sources":["../../../src/atom/title/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport style from './style.css';\n\nconst getTitleStype = type => {\n  switch (type) {\n    case 'page':\n      return style.titlePage;\n    case 'form-group':\n      return style.titleFormGroup;\n  }\n};\n\nconst getSubtitleStype = (type, size) => {\n  switch (type) {\n    case 'page':\n      return style.subtitlePage;\n    case 'form-group':\n      switch (size) {\n        case 'standard':\n          return style.subtitleFormGroup;\n        case 'small':\n          return style.smallSubtitleFormGroup;\n      }\n  }\n};\n\nconst Title = props => {\n  const {title, subtitle, type, 'data-name': dataName, subtitleSize = 'standard'} = props;\n  const titleStyle = getTitleStype(type);\n  const subtitleStyle = getSubtitleStype(type, subtitleSize);\n\n  const subtitleSection = subtitle ? <div className={subtitleStyle}>{subtitle}</div> : null;\n\n  return (\n    <div>\n      <div className={titleStyle} data-name={dataName}>\n        {title}\n      </div>\n      {subtitleSection}\n    </div>\n  );\n};\n\nTitle.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  type: PropTypes.oneOf(['page', 'form-group']),\n  'data-name': PropTypes.string,\n  subtitleSize: PropTypes.string\n};\nexport default Title;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAGC,IAAI,IAAI;EAC5B,QAAQA,IAAR;IACE,KAAK,MAAL;MACE,OAAOF,KAAK,CAACG,SAAb;;IACF,KAAK,YAAL;MACE,OAAOH,KAAK,CAACI,cAAb;EAJJ;AAMD,CAPD;;AASA,MAAMC,gBAAgB,GAAG,CAACH,IAAD,EAAOI,IAAP,KAAgB;EACvC,QAAQJ,IAAR;IACE,KAAK,MAAL;MACE,OAAOF,KAAK,CAACO,YAAb;;IACF,KAAK,YAAL;MACE,QAAQD,IAAR;QACE,KAAK,UAAL;UACE,OAAON,KAAK,CAACQ,iBAAb;;QACF,KAAK,OAAL;UACE,OAAOR,KAAK,CAACS,sBAAb;MAJJ;;EAJJ;AAWD,CAZD;;AAcA,MAAMC,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBX,IAAlB;IAAwB,aAAaY,QAArC;IAA+CC,YAAY,GAAG;EAA9D,IAA4EJ,KAAlF;EACA,MAAMK,UAAU,GAAGf,aAAa,CAACC,IAAD,CAAhC;EACA,MAAMe,aAAa,GAAGZ,gBAAgB,CAACH,IAAD,EAAOa,YAAP,CAAtC;EAEA,MAAMG,eAAe,GAAGL,QAAQ,gBAAG;IAAK,SAAS,EAAEI;EAAhB,GAAgCJ,QAAhC,CAAH,GAAqD,IAArF;EAEA,oBACE,8CACE;IAAK,SAAS,EAAEG,UAAhB;IAA4B,aAAWF;EAAvC,GACGF,KADH,CADF,EAIGM,eAJH,CADF;AAQD,CAfD;;AAiBAR,KAAK,CAACS,SAAN,2CAAkB;EAChBP,KAAK,EAAEb,SAAS,CAACqB,MADD;EAEhBP,QAAQ,EAAEd,SAAS,CAACqB,MAFJ;EAGhBlB,IAAI,EAAEH,SAAS,CAACsB,KAAV,CAAgB,CAAC,MAAD,EAAS,YAAT,CAAhB,CAHU;EAIhB,aAAatB,SAAS,CAACqB,MAJP;EAKhBL,YAAY,EAAEhB,SAAS,CAACqB;AALR,CAAlB;AAOA,eAAeV,KAAf"}

package/es/atom/title/style.css

@@ -41,3 +41,9 @@
     line-height: 20px;
     color: cm_grey_400;
 }
+
+
+.smallSubtitleFormGroup{
+    composes: subtitleFormGroup;
+    max-width: 450px
+}

package/es/molecule/brand-form-group/index.d.ts

@@ -4,6 +4,7 @@ declare namespace BrandFormGroup {
     namespace propTypes {
         const title: PropTypes.Requireable<string>;
         const subtitle: PropTypes.Requireable<string>;
+        const subtitleSize: PropTypes.Requireable<string>;
         const fieldsLayout: PropTypes.Requireable<string>;
         const groupLayout: PropTypes.Requireable<string>;
         const fields: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
@@ -129,6 +130,8 @@ declare namespace BrandFormGroup {
             error: PropTypes.Requireable<string>;
             buttonAriaLabel: PropTypes.Requireable<string>;
             errorButtonLabel: PropTypes.Requireable<string>;
+            labelLink: PropTypes.Requireable<string>;
+            hrefLink: PropTypes.Requireable<string>;
             title: PropTypes.Requireable<string>;
             description: PropTypes.Requireable<string>;
             uploadLabel: PropTypes.Requireable<string>;
@@ -242,6 +245,8 @@ declare namespace BrandFormGroup {
                     error: PropTypes.Requireable<string>;
                     buttonAriaLabel: PropTypes.Requireable<string>;
                     errorButtonLabel: PropTypes.Requireable<string>;
+                    labelLink: PropTypes.Requireable<string>;
+                    hrefLink: PropTypes.Requireable<string>;
                     title: PropTypes.Requireable<string>;
                     description: PropTypes.Requireable<string>;
                     uploadLabel: PropTypes.Requireable<string>;

package/es/molecule/brand-form-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/brand-form-group/index.js"],"names":[],"mappings":";AAmGA,yDAeC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/brand-form-group/index.js"],"names":[],"mappings":";AAmGA,yDAsBC"}

package/es/molecule/brand-form-group/index.js

@@ -132,7 +132,8 @@ const BrandFormGroup = props => {
     subtitle = '',
     fieldsLayout = '',
     groupLayout = '',
-    fields = []
+    fields = [],
+    subtitleSize = 'standard'
   } = props;
 
   const fieldsList = _map.convert({
@@ -147,6 +148,7 @@ const BrandFormGroup = props => {
   }, /*#__PURE__*/React.createElement(Title, {
     title: title,
     subtitle: subtitle,
+    subtitleSize: subtitleSize,
     type: 'form-group'
   })), /*#__PURE__*/React.createElement("div", {
     className: fieldsLayout === 'grid' ? style.grid : null
@@ -156,6 +158,7 @@ const BrandFormGroup = props => {
 BrandFormGroup.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string,
   subtitle: PropTypes.string,
+  subtitleSize: PropTypes.string,
   fieldsLayout: PropTypes.string,
   groupLayout: PropTypes.string,
   fields: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(_extends({}, Autocomplete.propTypes, {