@coorpacademy/components 10.1.1 → 10.1.2

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

@@ -3,6 +3,15 @@
 @value medium from colors;
 @value light from colors;
 @value negative 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;
@@ -169,3 +178,259 @@
   align-self: flex-start;
   padding-left: 13px;
 }
+
+/******************************* 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: auto;
+  position: relative;
+}
+
+.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;
+  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;
+  top: 15px;
+  left: 16px;
+  position: absolute;
+  margin: 0;
+}
+
+.coorpmanager .title.noValue .infoIcon {
+  height: 10px;
+  width: 10px;
+  line-height: 12px;
+  color: cm_grey_500;
+}
+
+.coorpmanager textarea {
+  width: 285px;
+  min-height: 145px;
+  resize: vertical;
+  margin: 0px;
+  flex-grow: 0;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 35px 0px 0px 17px;
+  border-radius: 7px;
+  background-color: transparent;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 21px;
+  letter-spacing: normal;
+  text-align: left;
+  color: cm_grey_700;
+  border: none;
+  transition: all 0.25s linear;
+  outline: none;
+  display: flex;
+  margin: 0px 16px 13px 0px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.coorpmanager label::before {
+  content: '';
+  top: 0px;
+  bottom: 20px;
+  left: 0px;
+  right: 0px;
+  position: absolute;
+  background-color: cm_grey_100;
+  border-radius: 7px;
+  transition: all 0.25s linear;
+}
+
+.coorpmanager .title.noValue{
+  font-size: 14px;
+  font-weight: 500;
+  color: cm_grey_700;
+}
+
+.coorpmanager:focus-within .title.noValue {
+  font-size: 10px;
+  font-weight: bold;
+  color: cm_grey_400;
+  top: 15px;
+}
+
+.coorpmanager:focus-within textarea::placeholder {
+  color: cm_grey_400;
+}
+
+.coorpmanager:focus-within .title.noValue .infoIcon {
+  width: 8px;
+  height: 8px;
+  line-height: 12px;
+  color: cm_grey_400;
+}
+
+
+
+.coorpmanager label:hover:before {
+  background-color: cm_grey_150;
+}
+
+.coorpmanager textarea::placeholder {
+  color: transparent;
+  transition: all 0.25s linear;
+}
+
+.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;
+  height: 12px;
+}
+
+.coorpmanager.error .hint {
+  color: cm_negative_100;
+}
+
+.coorpmanager.error .leftIcon {
+  background-color: cm_negative_100;
+  color: white;
+  border-radius: 50%;
+  padding: 2px;
+  width: 11px;
+  height: 11px;
+  right: 17px;
+  top: 13px;
+}
+
+.coorpmanager .leftIcon {
+  color: cm_positive_100;
+  width: 17px;
+  height: 17px;
+  position: absolute;
+  right: 15px;
+  top: 12px;
+}
+
+.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;
+}
+.coorpmanager textarea::-webkit-resizer {
+background: repeating-linear-gradient(
+  135deg,
+  transparent,
+  transparent 14px,
+  cm_grey_400 14px,
+  cm_grey_400 15.5px,
+  transparent 15.5px,
+  transparent 17px,
+  cm_grey_400 17px,
+  cm_grey_400 18.5px,
+  transparent 18.5px,
+  transparent 20px,
+  cm_grey_400 20px,
+  cm_grey_400 21.5px
+);
+}

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

@@ -0,0 +1,17 @@
+export default {
+  props: {
+    type: 'textarea',
+    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-textarea/test/fixtures/cm-default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-textarea/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,UADD;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: 'textarea',\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/atom/input-textarea/test/fixtures/cm-empty.js

@@ -0,0 +1,17 @@
+export default {
+  props: {
+    type: 'textarea',
+    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: '',
+    disabled: false,
+    valid: false,
+    error: '',
+    required: true,
+    onChange: value => console.log(value)
+  }
+};
+//# sourceMappingURL=cm-empty.js.map

package/es/atom/input-textarea/test/fixtures/cm-empty.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/input-textarea/test/fixtures/cm-empty.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,UADD;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,EAPF;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: 'textarea',\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: '',\n    disabled: false,\n    valid: false,\n    error: '',\n    required: true,\n    onChange: value => console.log(value)\n  }\n};\n"],"file":"cm-empty.js"}

package/es/atom/title/test/fixtures.js

@@ -2,16 +2,12 @@ import test from 'ava';
 import forEach from 'lodash/forEach';
 import renderComponentMacro from '../../../test/helpers/render-component';
 import AtomTitle from '..';
-import fixtureFormGroupTitleWithoutSubtitle from './fixtures/form-group-title-without-subtitle';
-import fixtureFormGroupTitle from './fixtures/form-group-title';
-import fixturePageTitle from './fixtures/page-title';
+import fixtureFixture from './fixtures/fixture';
 test('Atom › AtomTitle > should have valid propTypes', t => {
   t.pass();
   forEach(AtomTitle.propTypes, (value, key) => {
     t.not(value, undefined, `PropType for "Atom.AtomTitle.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
   });
 });
-test('Atom › AtomTitle › FormGroupTitleWithoutSubtitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitleWithoutSubtitle);
-test('Atom › AtomTitle › FormGroupTitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitle);
-test('Atom › AtomTitle › PageTitle › should be rendered', renderComponentMacro, AtomTitle, fixturePageTitle);
+test('Atom › AtomTitle › Fixture › should be rendered', renderComponentMacro, AtomTitle, fixtureFixture);
 //# sourceMappingURL=fixtures.js.map

package/es/atom/title/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/atom/title/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTitle","fixtureFormGroupTitleWithoutSubtitle","fixtureFormGroupTitle","fixturePageTitle","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,SAAP,MAAsB,IAAtB;AACA,OAAOC,oCAAP,MAAiD,8CAAjD;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,gBAAP,MAA6B,uBAA7B;AAEAN,IAAI,CAAC,gDAAD,EAAmDO,CAAC,IAAI;AAC1DA,EAAAA,CAAC,CAACC,IAAF;AACAP,EAAAA,OAAO,CAACE,SAAS,CAACM,SAAX,EAAsB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3CJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0CAAyCF,GAAI,mEAAtE;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAX,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,SAAhG,EAA2GC,oCAA3G,CAAJ;AACAJ,IAAI,CAAC,wDAAD,EAA2DE,oBAA3D,EAAiFC,SAAjF,EAA4FE,qBAA5F,CAAJ;AACAL,IAAI,CAAC,mDAAD,EAAsDE,oBAAtD,EAA4EC,SAA5E,EAAuFG,gBAAvF,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTitle from '..';\nimport fixtureFormGroupTitleWithoutSubtitle from './fixtures/form-group-title-without-subtitle';\nimport fixtureFormGroupTitle from './fixtures/form-group-title';\nimport fixturePageTitle from './fixtures/page-title';\n\ntest('Atom › AtomTitle > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomTitle.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomTitle.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomTitle › FormGroupTitleWithoutSubtitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitleWithoutSubtitle);\ntest('Atom › AtomTitle › FormGroupTitle › should be rendered', renderComponentMacro, AtomTitle, fixtureFormGroupTitle);\ntest('Atom › AtomTitle › PageTitle › should be rendered', renderComponentMacro, AtomTitle, fixturePageTitle);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/atom/title/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","AtomTitle","fixtureFixture","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,SAAP,MAAsB,IAAtB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAJ,IAAI,CAAC,gDAAD,EAAmDK,CAAC,IAAI;AAC1DA,EAAAA,CAAC,CAACC,IAAF;AACAL,EAAAA,OAAO,CAACE,SAAS,CAACI,SAAX,EAAsB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAC3CJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,0CAAyCF,GAAI,mEAAtE;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAT,IAAI,CAAC,iDAAD,EAAoDE,oBAApD,EAA0EC,SAA1E,EAAqFC,cAArF,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport AtomTitle from '..';\nimport fixtureFixture from './fixtures/fixture';\n\ntest('Atom › AtomTitle > should have valid propTypes', t => {\n  t.pass();\n  forEach(AtomTitle.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Atom.AtomTitle.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Atom › AtomTitle › Fixture › should be rendered', renderComponentMacro, AtomTitle, fixtureFixture);\n"],"file":"fixtures.js"}

package/es/molecule/banner/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon } from '@coorpacademy/nova-icons';
+import Link from '../../atom/link';
+import style from './style.css';
+
+const Banner = props => {
+  const {
+    type,
+    message,
+    firstCTA,
+    firstCTALabel,
+    secondCTALabel,
+    secondCTA
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.banner, type === 'error' && style.errorBanner)
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-name": `${type}-banner-message`,
+    className: style.message
+  }, /*#__PURE__*/React.createElement(QuestionIcon, {
+    className: style.icon
+  }), message), firstCTALabel ? /*#__PURE__*/React.createElement(Link, {
+    "data-name": "first-banner-cta",
+    className: style.button,
+    onClick: firstCTA
+  }, firstCTALabel) : null, firstCTALabel && secondCTALabel ? /*#__PURE__*/React.createElement("div", {
+    className: style.buttonsBar
+  }) : null, secondCTALabel ? /*#__PURE__*/React.createElement(Link, {
+    "data-name": "second-banner-cta",
+    className: style.button,
+    onClick: secondCTA
+  }, secondCTALabel) : null);
+};
+
+Banner.propTypes = process.env.NODE_ENV !== "production" ? {
+  type: PropTypes.oneOf(['information', 'error']),
+  message: PropTypes.string.isRequired,
+  firstCTA: PropTypes.func,
+  firstCTALabel: PropTypes.string,
+  secondCTALabel: PropTypes.string,
+  secondCTA: PropTypes.func
+} : {};
+export default Banner;
+//# sourceMappingURL=index.js.map

package/es/molecule/banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","Link","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","banner","errorBanner","icon","button","buttonsBar","propTypes","oneOf","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,IAAP,MAAiB,iBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA;AAAzD,MAAsEN,KAA5E;AACA,sBACE;AAAK,IAAA,SAAS,EAAEN,UAAU,CAACI,KAAK,CAACS,MAAP,EAAeN,IAAI,KAAK,OAAT,IAAoBH,KAAK,CAACU,WAAzC;AAA1B,kBACE;AAAK,iBAAY,GAAEP,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEH,KAAK,CAACI;AAA3D,kBACE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEJ,KAAK,CAACW;AAA/B,IADF,EAEGP,OAFH,CADF,EAKGE,aAAa,gBACZ,oBAAC,IAAD;AAAM,iBAAU,kBAAhB;AAAmC,IAAA,SAAS,EAAEN,KAAK,CAACY,MAApD;AAA4D,IAAA,OAAO,EAAEP;AAArE,KACGC,aADH,CADY,GAIV,IATN,EAUGA,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACa;AAAtB,IAAlC,GAAyE,IAV5E,EAWGN,cAAc,gBACb,oBAAC,IAAD;AAAM,iBAAU,mBAAhB;AAAoC,IAAA,SAAS,EAAEP,KAAK,CAACY,MAArD;AAA6D,IAAA,OAAO,EAAEJ;AAAtE,KACGD,cADH,CADa,GAIX,IAfN,CADF;AAmBD,CArBD;;AAuBAN,MAAM,CAACa,SAAP,2CAAmB;AACjBX,EAAAA,IAAI,EAAER,SAAS,CAACoB,KAAV,CAAgB,CAAC,aAAD,EAAgB,OAAhB,CAAhB,CADW;AAEjBX,EAAAA,OAAO,EAAET,SAAS,CAACqB,MAAV,CAAiBC,UAFT;AAGjBZ,EAAAA,QAAQ,EAAEV,SAAS,CAACuB,IAHH;AAIjBZ,EAAAA,aAAa,EAAEX,SAAS,CAACqB,MAJR;AAKjBT,EAAAA,cAAc,EAAEZ,SAAS,CAACqB,MALT;AAMjBR,EAAAA,SAAS,EAAEb,SAAS,CAACuB;AANJ,CAAnB;AASA,eAAejB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/link';\nimport style from './style.css';\n\nconst Banner = props => {\n  const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA} = props;\n  return (\n    <div className={classnames(style.banner, type === 'error' && style.errorBanner)}>\n      <div data-name={`${type}-banner-message`} className={style.message}>\n        <QuestionIcon className={style.icon} />\n        {message}\n      </div>\n      {firstCTALabel ? (\n        <Link data-name=\"first-banner-cta\" className={style.button} onClick={firstCTA}>\n          {firstCTALabel}\n        </Link>\n      ) : null}\n      {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n      {secondCTALabel ? (\n        <Link data-name=\"second-banner-cta\" className={style.button} onClick={secondCTA}>\n          {secondCTALabel}\n        </Link>\n      ) : null}\n    </div>\n  );\n};\n\nBanner.propTypes = {\n  type: PropTypes.oneOf(['information', 'error']),\n  message: PropTypes.string.isRequired,\n  firstCTA: PropTypes.func,\n  firstCTALabel: PropTypes.string,\n  secondCTALabel: PropTypes.string,\n  secondCTA: PropTypes.func\n};\n\nexport default Banner;\n"],"file":"index.js"}

package/es/molecule/banner/style.css

@@ -0,0 +1,63 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value white from colors;
+@value medium from colors;
+@value cm_negative_50 from colors;
+@value cm_negative_200 from colors;
+@value cm_warning_50 from colors;
+@value cm_warning_200 from colors;
+
+.banner {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;  
+    align-items: center; 
+    gap: 8px; 
+    padding: 16px 24px; 
+    border-radius: 5px;
+    background-color: cm_warning_50;
+    color: cm_warning_200;
+    border-radius: 5px;
+}
+
+.errorBanner {
+    background-color: cm_negative_50;
+    color: cm_negative_200;
+}
+
+.button {
+    flex-grow: 0;
+    font-family: Gilroy;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    background-color: transparent;
+}
+
+.buttonsBar {
+    width: 1px;
+    align-self: stretch;
+    flex-grow: 0;
+    opacity: 0.1;
+    background-color: cm_warning_200;
+}
+
+.icon {
+    height: 22px;
+    margin-right: 16px;
+}
+
+.message {
+    font-family: 'Gilroy';
+    font-size: 14px;
+    font-weight: 600;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    flex: 0 1 100%;
+    display: flex;
+    align-content: center;
+    align-items: center;
+}

package/es/molecule/banner/test/fixtures/default.js

@@ -0,0 +1,11 @@
+export default {
+  props: {
+    type: 'information',
+    message: 'Changes saved but not published. Do you want to update this custom playlist now? ',
+    firstCTALabel: 'Undo',
+    firstCTA: () => console.log('first cta'),
+    secondCTALabel: 'Update',
+    secondCTA: () => console.log('second cta')
+  }
+};
+//# sourceMappingURL=default.js.map

package/es/molecule/banner/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,aADD;AAELC,IAAAA,OAAO,EAAE,mFAFJ;AAGLC,IAAAA,aAAa,EAAE,MAHV;AAILC,IAAAA,QAAQ,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,WAAZ,CAJX;AAKLC,IAAAA,cAAc,EAAE,QALX;AAMLC,IAAAA,SAAS,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,YAAZ;AANZ;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    type: 'information',\n    message: 'Changes saved but not published. Do you want to update this custom playlist now? ',\n    firstCTALabel: 'Undo',\n    firstCTA: () => console.log('first cta'),\n    secondCTALabel: 'Update',\n    secondCTA: () => console.log('second cta')\n  }\n};\n"],"file":"default.js"}

package/es/molecule/banner/test/fixtures/error-banner.js

@@ -0,0 +1,7 @@
+export default {
+  props: {
+    type: 'error',
+    message: 'Unable to publish this custom playlist. You must complete all the creation steps before publishing it. '
+  }
+};
+//# sourceMappingURL=error-banner.js.map

package/es/molecule/banner/test/fixtures/error-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/error-banner.js"],"names":["props","type","message"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,OAAO,EACL;AAHG;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    type: 'error',\n    message:\n      'Unable to publish this custom playlist. You must complete all the creation steps before publishing it. '\n  }\n};\n"],"file":"error-banner.js"}

package/es/molecule/brand-form-group/test/fixtures/cm-default.js

@@ -0,0 +1,51 @@
+export default {
+  props: {
+    title: 'Platform Name',
+    fields: [{
+      title: 'Domain name',
+      value: 'samsung.coorpacademy.com',
+      hint: 'Hint <span style="color:red;">10<span>/40',
+      placeholder: 'This is an input',
+      theme: 'coorpmanager',
+      description: 'This is the tooltip text',
+      type: 'text',
+      disabled: true
+    }, {
+      title: 'Platform name',
+      value: 'Samsung',
+      hint: 'Hint <span style="color:red;">10<span>/40',
+      placeholder: 'This is an input',
+      theme: 'coorpmanager',
+      description: 'This is the tooltip text',
+      type: 'text',
+      disabled: true
+    }, {
+      title: 'Description',
+      value: '',
+      theme: 'coorpmanager',
+      type: 'html'
+    }, {
+      title: 'TextArea',
+      value: '',
+      hint: 'Hint <span style="color:red;">10<span>/40',
+      placeholder: 'This is an input',
+      theme: 'coorpmanager',
+      description: 'This is the tooltip text',
+      type: 'textarea'
+    }, {
+      title: 'Default field',
+      value: '',
+      hint: 'Hint <span style="color:red;">10<span>/40',
+      placeholder: 'This is an input',
+      theme: 'coorpmanager',
+      description: 'This is the tooltip text',
+      type: 'unknow'
+    }, {
+      title: 'Select Multiple',
+      value: '',
+      theme: 'coorpmanager',
+      type: 'selectMultiple'
+    }]
+  }
+};
+//# sourceMappingURL=cm-default.js.map

package/es/molecule/brand-form-group/test/fixtures/cm-default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/brand-form-group/test/fixtures/cm-default.js"],"names":["props","title","fields","value","hint","placeholder","theme","description","type","disabled"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,eADF;AAELC,IAAAA,MAAM,EAAE,CACN;AACED,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,0BAFT;AAGEC,MAAAA,IAAI,EAAE,2CAHR;AAIEC,MAAAA,WAAW,EAAE,kBAJf;AAKEC,MAAAA,KAAK,EAAE,cALT;AAMEC,MAAAA,WAAW,EAAE,0BANf;AAOEC,MAAAA,IAAI,EAAE,MAPR;AAQEC,MAAAA,QAAQ,EAAE;AARZ,KADM,EAWN;AACER,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,SAFT;AAGEC,MAAAA,IAAI,EAAE,2CAHR;AAIEC,MAAAA,WAAW,EAAE,kBAJf;AAKEC,MAAAA,KAAK,EAAE,cALT;AAMEC,MAAAA,WAAW,EAAE,0BANf;AAOEC,MAAAA,IAAI,EAAE,MAPR;AAQEC,MAAAA,QAAQ,EAAE;AARZ,KAXM,EAqBN;AACER,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEG,MAAAA,KAAK,EAAE,cAHT;AAIEE,MAAAA,IAAI,EAAE;AAJR,KArBM,EA2BN;AACEP,MAAAA,KAAK,EAAE,UADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE,2CAHR;AAIEC,MAAAA,WAAW,EAAE,kBAJf;AAKEC,MAAAA,KAAK,EAAE,cALT;AAMEC,MAAAA,WAAW,EAAE,0BANf;AAOEC,MAAAA,IAAI,EAAE;AAPR,KA3BM,EAoCN;AACEP,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE,2CAHR;AAIEC,MAAAA,WAAW,EAAE,kBAJf;AAKEC,MAAAA,KAAK,EAAE,cALT;AAMEC,MAAAA,WAAW,EAAE,0BANf;AAOEC,MAAAA,IAAI,EAAE;AAPR,KApCM,EA6CN;AACEP,MAAAA,KAAK,EAAE,iBADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEG,MAAAA,KAAK,EAAE,cAHT;AAIEE,MAAAA,IAAI,EAAE;AAJR,KA7CM;AAFH;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Platform Name',\n    fields: [\n      {\n        title: 'Domain name',\n        value: 'samsung.coorpacademy.com',\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        type: 'text',\n        disabled: true\n      },\n      {\n        title: 'Platform name',\n        value: 'Samsung',\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        type: 'text',\n        disabled: true\n      },\n      {\n        title: 'Description',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'html'\n      },\n      {\n        title: 'TextArea',\n        value: '',\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        type: 'textarea'\n      },\n      {\n        title: 'Default field',\n        value: '',\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        type: 'unknow'\n      },\n      {\n        title: 'Select Multiple',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'selectMultiple'\n      }\n    ]\n  }\n};\n"],"file":"cm-default.js"}

package/es/molecule/brand-form-group/test/fixtures/default.js

@@ -4,26 +4,35 @@ export default {
     fields: [{
       title: 'Domain name',
       value: 'samsung.coorpacademy.com',
-      type: 'readonly'
+      theme: 'coorpmanager',
+      type: 'text',
+      disabled: true
     }, {
       title: 'Platform name',
       value: 'Samsung',
-      type: 'readonly'
+      theme: 'coorpmanager',
+      type: 'text',
+      disabled: true
     }, {
       title: 'Description',
       value: '',
+      theme: 'coorpmanager',
       type: 'html'
     }, {
       title: 'TextArea',
       value: '',
-      type: 'textarea'
+      theme: 'coorpmanager',
+      type: 'textarea',
+      hint: ''
     }, {
       title: 'Default field',
       value: '',
+      theme: 'coorpmanager',
       type: 'unknow'
     }, {
       title: 'Select Multiple',
       value: '',
+      theme: 'coorpmanager',
       type: 'selectMultiple'
     }]
   }

package/es/molecule/brand-form-group/test/fixtures/default.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/molecule/brand-form-group/test/fixtures/default.js"],"names":["props","title","fields","value","type"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,eADF;AAELC,IAAAA,MAAM,EAAE,CACN;AACED,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,0BAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KADM,EAMN;AACEH,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,SAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KANM,EAWN;AACEH,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KAXM,EAgBN;AACEH,MAAAA,KAAK,EAAE,UADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KAhBM,EAqBN;AACEH,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KArBM,EA0BN;AACEH,MAAAA,KAAK,EAAE,iBADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,IAAI,EAAE;AAHR,KA1BM;AAFH;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Platform Name',\n    fields: [\n      {\n        title: 'Domain name',\n        value: 'samsung.coorpacademy.com',\n        type: 'readonly'\n      },\n      {\n        title: 'Platform name',\n        value: 'Samsung',\n        type: 'readonly'\n      },\n      {\n        title: 'Description',\n        value: '',\n        type: 'html'\n      },\n      {\n        title: 'TextArea',\n        value: '',\n        type: 'textarea'\n      },\n      {\n        title: 'Default field',\n        value: '',\n        type: 'unknow'\n      },\n      {\n        title: 'Select Multiple',\n        value: '',\n        type: 'selectMultiple'\n      }\n    ]\n  }\n};\n"],"file":"default.js"}
+{"version":3,"sources":["../../../../../src/molecule/brand-form-group/test/fixtures/default.js"],"names":["props","title","fields","value","theme","type","disabled","hint"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,eADF;AAELC,IAAAA,MAAM,EAAE,CACN;AACED,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,0BAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE,MAJR;AAKEC,MAAAA,QAAQ,EAAE;AALZ,KADM,EAQN;AACEL,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,SAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE,MAJR;AAKEC,MAAAA,QAAQ,EAAE;AALZ,KARM,EAeN;AACEL,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE;AAJR,KAfM,EAqBN;AACEJ,MAAAA,KAAK,EAAE,UADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE,UAJR;AAKEE,MAAAA,IAAI,EAAE;AALR,KArBM,EA4BN;AACEN,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE;AAJR,KA5BM,EAkCN;AACEJ,MAAAA,KAAK,EAAE,iBADT;AAEEE,MAAAA,KAAK,EAAE,EAFT;AAGEC,MAAAA,KAAK,EAAE,cAHT;AAIEC,MAAAA,IAAI,EAAE;AAJR,KAlCM;AAFH;AADM,CAAf","sourcesContent":["export default {\n  props: {\n    title: 'Platform Name',\n    fields: [\n      {\n        title: 'Domain name',\n        value: 'samsung.coorpacademy.com',\n        theme: 'coorpmanager',\n        type: 'text',\n        disabled: true\n      },\n      {\n        title: 'Platform name',\n        value: 'Samsung',\n        theme: 'coorpmanager',\n        type: 'text',\n        disabled: true\n      },\n      {\n        title: 'Description',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'html'\n      },\n      {\n        title: 'TextArea',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'textarea',\n        hint: ''\n      },\n      {\n        title: 'Default field',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'unknow'\n      },\n      {\n        title: 'Select Multiple',\n        value: '',\n        theme: 'coorpmanager',\n        type: 'selectMultiple'\n      }\n    ]\n  }\n};\n"],"file":"default.js"}