@coorpacademy/components 11.13.7-alpha.14 → 11.13.7-alpha.8

package/es/atom/form-text-input/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { FormTextInputProps } from './prop-types';
+declare const FormTextInput: {
+    ({ "aria-label": ariaLabel, autocomplete, "data-testid": dataTestid, disabled, hint, inputClassName, isRequired, label, maxlength, name, onChange, passwordValidator, placeholder, type, value, equals, wrapperClassName }: FormTextInputProps): JSX.Element;
+    propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        autocomplete: import("prop-types").Requireable<string>;
+        'data-testid': import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        equals: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        hint: import("prop-types").Requireable<string>;
+        inputClassName: import("prop-types").Requireable<string>;
+        isRequired: import("prop-types").Requireable<boolean>;
+        label: import("prop-types").Requireable<string>;
+        maxlength: import("prop-types").Requireable<number>;
+        name: import("prop-types").Requireable<string>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        passwordValidator: import("prop-types").Requireable<(...args: any[]) => any>;
+        placeholder: import("prop-types").Requireable<string>;
+        type: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        wrapperClassName: import("prop-types").Requireable<string>;
+    };
+};
+export default FormTextInput;
+//# sourceMappingURL=index.d.ts.map

package/es/atom/form-text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAa,kBAAkB,EAAY,MAAM,cAAc,CAAC;AAkBlF,QAAA,MAAM,aAAa;gOAkBhB,kBAAkB;;;;;;;;;;;;;;;;;;;;CAuEpB,CAAC;AAIF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,103 @@
+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, { useCallback, useMemo, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import isEmpty from 'lodash/fp/isEmpty';
+import isEqual from 'lodash/fp/isEqual';
+import noop from 'lodash/fp/noop';
+import propTypes, { TextInput } from './prop-types';
+import style from './style.css';
+
+const validate = (fieldValue, fieldEqualsValue) => {
+  return isEqual(fieldValue, fieldEqualsValue);
+};
+
+const VALID_EMAIL_PATTERN = /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
+const validatePattern = (fieldValue, pattern) => {
+  return pattern.test(fieldValue);
+};
+
+const DEFAULT_MAX_LENGTH = 150;
+
+const isEqualsDefined = equals => !isEmpty(equals);
+
+const FormTextInput = ({
+  'aria-label': ariaLabel,
+  autocomplete,
+  'data-testid': dataTestid = 'form-text-input',
+  disabled,
+  hint,
+  inputClassName,
+  isRequired,
+  label,
+  maxlength = DEFAULT_MAX_LENGTH,
+  name,
+  onChange = noop,
+  passwordValidator = () => false,
+  placeholder,
+  type = 'default',
+  value,
+  equals,
+  wrapperClassName
+}) => {
+  const [newValue, setNewValue] = useState(value);
+  const [isValid, setIsValid] = useState(true);
+  const isDefaultType = useMemo(() => !type || type === TextInput.default, [type]);
+  const isPasswordInput = useMemo(() => type === TextInput.password || type === TextInput.passwordConfirmation, [type]);
+  const isEmailInput = useMemo(() => type === TextInput.email, [type]);
+  const handleInputChange = useCallback(event => {
+    const newInput = event.target.value;
+    setNewValue(() => {
+      const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);
+      const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);
+      const isPasswordCompliant = !isPasswordInput || passwordValidator(newInput);
+      setIsValid(isPasswordCompliant && isNewValueValid && validPattern);
+      return newInput;
+    });
+  }, [equals, isEmailInput, isPasswordInput, passwordValidator]);
+  useEffect(() => {
+    onChange(newValue, isValid);
+    return;
+  }, [isValid, newValue, onChange]);
+  const fieldLabel = useMemo(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);
+  const errorStyle = useMemo(() => isValid ? undefined : {
+    border: '2px solid rgb(247, 63, 82)'
+  }, [isValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.wrapper, wrapperClassName)
+  }, /*#__PURE__*/React.createElement("label", {
+    className: style.formLabel,
+    htmlFor: name
+  }, fieldLabel), /*#__PURE__*/React.createElement("input", _extends({}, !isPasswordInput && !isEmailInput && {
+    maxLength: maxlength
+  }, isEmailInput && {
+    autoCapitalize: 'none'
+  }, isRequired && {
+    required: true
+  }, !isValid && {
+    'aria-invalid': true
+  }, {
+    type: isDefaultType ? 'text' : type,
+    "aria-label": ariaLabel,
+    autoComplete: isDefaultType ? 'on' : autocomplete,
+    autoCorrect: 'off',
+    className: classnames(style.textInput, inputClassName),
+    "data-testid": dataTestid,
+    disabled: disabled,
+    id: name,
+    name: name,
+    onInput: handleInputChange,
+    placeholder: placeholder,
+    value: value,
+    style: errorStyle
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.hintWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.hint
+  }, hint)));
+};
+
+FormTextInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default FormTextInput;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useEffect","classnames","isEmpty","isEqual","noop","propTypes","TextInput","style","validate","fieldValue","fieldEqualsValue","VALID_EMAIL_PATTERN","validatePattern","pattern","test","DEFAULT_MAX_LENGTH","isEqualsDefined","equals","FormTextInput","ariaLabel","autocomplete","dataTestid","disabled","hint","inputClassName","isRequired","label","maxlength","name","onChange","passwordValidator","placeholder","type","value","wrapperClassName","newValue","setNewValue","isValid","setIsValid","isDefaultType","default","isPasswordInput","password","passwordConfirmation","isEmailInput","email","handleInputChange","event","newInput","target","isNewValueValid","validPattern","isPasswordCompliant","fieldLabel","errorStyle","undefined","border","wrapper","formLabel","maxLength","autoCapitalize","required","textInput","hintWrapper"],"sources":["../../../src/atom/form-text-input/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useEffect, FormEvent} from 'react';\nimport classnames from 'classnames';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport isEqual from 'lodash/fp/isEqual';\nimport noop from 'lodash/fp/noop';\nimport propTypes, {FieldValue, FormTextInputProps, TextInput} from './prop-types';\nimport style from './style.css';\n\nconst validate = (fieldValue: FieldValue, fieldEqualsValue: FieldValue) => {\n  return isEqual(fieldValue, fieldEqualsValue);\n};\n\nconst VALID_EMAIL_PATTERN =\n  /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;\n\nconst validatePattern = (fieldValue: string, pattern: RegExp) => {\n  return pattern.test(fieldValue);\n};\n\nconst DEFAULT_MAX_LENGTH = 150;\n\nconst isEqualsDefined = (equals: FieldValue | undefined): equals is FieldValue => !isEmpty(equals);\n\nconst FormTextInput = ({\n  'aria-label': ariaLabel,\n  autocomplete,\n  'data-testid': dataTestid = 'form-text-input',\n  disabled,\n  hint,\n  inputClassName,\n  isRequired,\n  label,\n  maxlength = DEFAULT_MAX_LENGTH,\n  name,\n  onChange = noop,\n  passwordValidator = () => false,\n  placeholder,\n  type = 'default',\n  value,\n  equals,\n  wrapperClassName\n}: FormTextInputProps) => {\n  const [newValue, setNewValue] = useState<FieldValue>(value);\n\n  const [isValid, setIsValid] = useState<boolean>(true);\n\n  const isDefaultType = useMemo(() => !type || type === TextInput.default, [type]);\n\n  const isPasswordInput = useMemo(\n    () => type === TextInput.password || type === TextInput.passwordConfirmation,\n    [type]\n  );\n\n  const isEmailInput = useMemo(() => type === TextInput.email, [type]);\n\n  const handleInputChange = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const newInput: FieldValue = (event.target as HTMLInputElement).value;\n      setNewValue(() => {\n        const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);\n        const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);\n        const isPasswordCompliant = !isPasswordInput || passwordValidator(newInput);\n\n        setIsValid(isPasswordCompliant && isNewValueValid && validPattern);\n\n        return newInput;\n      });\n    },\n    [equals, isEmailInput, isPasswordInput, passwordValidator]\n  );\n\n  useEffect(() => {\n    onChange(newValue, isValid);\n    return;\n  }, [isValid, newValue, onChange]);\n\n  const fieldLabel = useMemo(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);\n\n  const errorStyle = useMemo(\n    () => (isValid ? undefined : {border: '2px solid rgb(247, 63, 82)'}),\n    [isValid]\n  );\n\n  return (\n    <div className={classnames(style.wrapper, wrapperClassName)}>\n      <label className={style.formLabel} htmlFor={name}>\n        {fieldLabel}\n      </label>\n      <input\n        {...(!isPasswordInput && !isEmailInput && {maxLength: maxlength})}\n        {...(isEmailInput && {autoCapitalize: 'none'})}\n        {...(isRequired && {required: true})}\n        {...(!isValid && {'aria-invalid': true})}\n        type={isDefaultType ? 'text' : type}\n        aria-label={ariaLabel}\n        autoComplete={isDefaultType ? 'on' : autocomplete}\n        autoCorrect={'off'}\n        className={classnames(style.textInput, inputClassName)}\n        data-testid={dataTestid}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onInput={handleInputChange}\n        placeholder={placeholder}\n        value={value}\n        style={errorStyle}\n      />\n      <div className={style.hintWrapper}>\n        <span className={style.hint}>{hint}</span>\n      </div>\n    </div>\n  );\n};\n\nFormTextInput.propTypes = propTypes;\n\nexport default FormTextInput;\n"],"mappings":"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"}

package/es/atom/form-text-input/prop-types.d.ts

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+export declare const TextInput: {
+    readonly country: "country";
+    readonly email: "email";
+    readonly firstName: "firstName";
+    readonly lastName: "lastName";
+    readonly language: "language";
+    readonly login: "login";
+    readonly password: "password";
+    readonly passwordConfirmation: "passwordConfirmation";
+    readonly default: "default";
+};
+declare const propTypes: {
+    'aria-label': PropTypes.Requireable<string>;
+    autocomplete: PropTypes.Requireable<string>;
+    'data-testid': PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    equals: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    hint: PropTypes.Requireable<string>;
+    inputClassName: PropTypes.Requireable<string>;
+    isRequired: PropTypes.Requireable<boolean>;
+    label: PropTypes.Requireable<string>;
+    maxlength: PropTypes.Requireable<number>;
+    name: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    passwordValidator: PropTypes.Requireable<(...args: any[]) => any>;
+    placeholder: PropTypes.Requireable<string>;
+    type: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    wrapperClassName: PropTypes.Requireable<string>;
+};
+declare type TextInputType = keyof typeof TextInput;
+export declare type FieldValue = string | number;
+export declare type FormTextInputProps = {
+    'aria-label'?: string;
+    autocomplete?: string;
+    'data-testid'?: string;
+    disabled?: boolean;
+    equals?: FieldValue;
+    hint?: string;
+    inputClassName?: string | null;
+    isRequired?: boolean;
+    label: string;
+    maxlength?: number;
+    name: string;
+    onChange?: (value: FieldValue, isValid?: boolean) => void;
+    passwordValidator?: (password: string) => boolean;
+    placeholder?: string;
+    type?: TextInputType;
+    value: FieldValue;
+    wrapperClassName?: string | null;
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.d.ts.map

package/es/atom/form-text-input/prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAkBd,CAAC;AAEF,aAAK,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC;AAE5C,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,oBAAY,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/atom/form-text-input/prop-types.js

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import keys from 'lodash/fp/keys';
+export const TextInput = {
+  country: 'country',
+  email: 'email',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  language: 'language',
+  login: 'login',
+  password: 'password',
+  passwordConfirmation: 'passwordConfirmation',
+  default: 'default'
+};
+const propTypes = {
+  'aria-label': PropTypes.string,
+  autocomplete: PropTypes.string,
+  'data-testid': PropTypes.string,
+  disabled: PropTypes.bool,
+  equals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hint: PropTypes.string,
+  inputClassName: PropTypes.string,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  maxlength: PropTypes.number,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  passwordValidator: PropTypes.func,
+  placeholder: PropTypes.string,
+  type: PropTypes.oneOf(keys(TextInput)),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  wrapperClassName: PropTypes.string
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.js.map

package/es/atom/form-text-input/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["PropTypes","keys","TextInput","country","email","firstName","lastName","language","login","password","passwordConfirmation","default","propTypes","string","autocomplete","disabled","bool","equals","oneOfType","number","hint","inputClassName","isRequired","label","maxlength","name","onChange","func","passwordValidator","placeholder","type","oneOf","value","wrapperClassName"],"sources":["../../../src/atom/form-text-input/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport keys from 'lodash/fp/keys';\n\nexport const TextInput = {\n  country: 'country',\n  email: 'email',\n  firstName: 'firstName',\n  lastName: 'lastName',\n  language: 'language',\n  login: 'login',\n  password: 'password',\n  passwordConfirmation: 'passwordConfirmation',\n  default: 'default'\n} as const;\n\nconst propTypes = {\n  'aria-label': PropTypes.string,\n  autocomplete: PropTypes.string,\n  'data-testid': PropTypes.string,\n  disabled: PropTypes.bool,\n  equals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  hint: PropTypes.string,\n  inputClassName: PropTypes.string,\n  isRequired: PropTypes.bool,\n  label: PropTypes.string,\n  maxlength: PropTypes.number,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  passwordValidator: PropTypes.func,\n  placeholder: PropTypes.string,\n  type: PropTypes.oneOf(keys(TextInput)),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  wrapperClassName: PropTypes.string\n};\n\ntype TextInputType = keyof typeof TextInput;\n\nexport type FieldValue = string | number;\n\nexport type FormTextInputProps = {\n  'aria-label'?: string;\n  autocomplete?: string;\n  'data-testid'?: string;\n  disabled?: boolean;\n  equals?: FieldValue;\n  hint?: string;\n  inputClassName?: string | null;\n  isRequired?: boolean;\n  label: string;\n  maxlength?: number;\n  name: string;\n  onChange?: (value: FieldValue, isValid?: boolean) => void;\n  passwordValidator?: (password: string) => boolean;\n  placeholder?: string;\n  type?: TextInputType;\n  value: FieldValue;\n  wrapperClassName?: string | null;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,OAAO,EAAE,SADc;EAEvBC,KAAK,EAAE,OAFgB;EAGvBC,SAAS,EAAE,WAHY;EAIvBC,QAAQ,EAAE,UAJa;EAKvBC,QAAQ,EAAE,UALa;EAMvBC,KAAK,EAAE,OANgB;EAOvBC,QAAQ,EAAE,UAPa;EAQvBC,oBAAoB,EAAE,sBARC;EASvBC,OAAO,EAAE;AATc,CAAlB;AAYP,MAAMC,SAAS,GAAG;EAChB,cAAcZ,SAAS,CAACa,MADR;EAEhBC,YAAY,EAAEd,SAAS,CAACa,MAFR;EAGhB,eAAeb,SAAS,CAACa,MAHT;EAIhBE,QAAQ,EAAEf,SAAS,CAACgB,IAJJ;EAKhBC,MAAM,EAAEjB,SAAS,CAACkB,SAAV,CAAoB,CAAClB,SAAS,CAACa,MAAX,EAAmBb,SAAS,CAACmB,MAA7B,CAApB,CALQ;EAMhBC,IAAI,EAAEpB,SAAS,CAACa,MANA;EAOhBQ,cAAc,EAAErB,SAAS,CAACa,MAPV;EAQhBS,UAAU,EAAEtB,SAAS,CAACgB,IARN;EAShBO,KAAK,EAAEvB,SAAS,CAACa,MATD;EAUhBW,SAAS,EAAExB,SAAS,CAACmB,MAVL;EAWhBM,IAAI,EAAEzB,SAAS,CAACa,MAXA;EAYhBa,QAAQ,EAAE1B,SAAS,CAAC2B,IAZJ;EAahBC,iBAAiB,EAAE5B,SAAS,CAAC2B,IAbb;EAchBE,WAAW,EAAE7B,SAAS,CAACa,MAdP;EAehBiB,IAAI,EAAE9B,SAAS,CAAC+B,KAAV,CAAgB9B,IAAI,CAACC,SAAD,CAApB,CAfU;EAgBhB8B,KAAK,EAAEhC,SAAS,CAACkB,SAAV,CAAoB,CAAClB,SAAS,CAACa,MAAX,EAAmBb,SAAS,CAACmB,MAA7B,CAApB,CAhBS;EAiBhBc,gBAAgB,EAAEjC,SAAS,CAACa;AAjBZ,CAAlB;AA4CA,eAAeD,SAAf"}

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

@@ -0,0 +1,53 @@
+@value colors: "../../variables/colors.css";
+@value dark from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_450 from colors;
+@value white from colors;
+
+.wrapper {
+  margin: 10px 0;
+  position: relative;
+  font-family: 'Gilroy';
+}
+
+.formLabel {
+  font-size: 13px;
+  text-align: left;
+  /* temporal */
+  color: dark;
+  display: block;
+  margin-bottom: 7px;
+  width: 100%;
+}
+
+.textInput {
+  width: 100%;
+  height: 59px;
+  background-color: white;
+  border: solid 1px cm_grey_450;
+  text-align: left;
+  margin-bottom: 26px;
+
+  appearance: none;
+  padding: 0 8px 0 15px;
+  border-radius: 0;
+
+  box-sizing: border-box;
+  cursor: text;
+
+  color: inherit;
+  font: inherit;
+  overflow: visible;
+}
+
+.hintWrapper {
+  font-size: 12px;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+
+.hint {
+  color: cm_grey_400;
+  text-align: left;
+  font-style: italic;
+}

package/es/molecule/cm-popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAeA,kDAkLC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/index.js"],"names":[],"mappings":";AAcA,kDAiLC"}

package/es/molecule/cm-popin/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket, NovaLineStatusCheckCircle1 as CheckCircle1 } from '@coorpacademy/nova-icons';
+import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond, NovaSolidApplicationsWindowUpload3 as WindowUpload, NovaLineSettingsCookie as Cookie, NovaSolidSpaceMoonRocket as MoonRocket } from '@coorpacademy/nova-icons';
 import map from 'lodash/fp/map';
 import Cta from '../../atom/button-link';
 import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
@@ -26,8 +26,7 @@ const CMPopin = props => {
   const logo = {
     AlertDiamond,
     WindowUpload,
-    MoonRocket,
-    CheckCircle1
+    MoonRocket
   };
   const LogoComponent = logo[icon];
   const backgroundImageStyle = backgroundImageUrl ? {

package/es/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","AlertDiamond","NovaSolidApplicationsWindowUpload3","WindowUpload","NovaLineSettingsCookie","Cookie","NovaSolidSpaceMoonRocket","MoonRocket","NovaLineStatusCheckCircle1","CheckCircle1","map","Cta","ButtonLinkIconOnly","InputSwitch","style","propTypes","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","customStyle"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket,\n  NovaLineStatusCheckCircle1 as CheckCircle1\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload,\n    MoonRocket,\n    CheckCircle1\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) return <img className={style.headerBackground} src={header} />;\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div\n          className={\n            mode === 'cookie' || mode === 'information'\n              ? style.cookieTitleContainer\n              : style.titleContainer\n          }\n        >\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderBtnSwitch()}\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={firstButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n                customStyle={firstButton.customStyle}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n                customStyle={secondButton.customStyle}\n              />\n            </div>\n          ) : null}\n          {thirdButton ? (\n            <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={thirdButton.label}\n                onClick={thirdButton.handleOnclick}\n                data-name={`cm-popin-cta-${thirdButton.type}`}\n                aria-label={thirdButton['aria-label']}\n                type={thirdButton.type}\n                customStyle={thirdButton.customStyle}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","AlertDiamond","NovaSolidApplicationsWindowUpload3","WindowUpload","NovaLineSettingsCookie","Cookie","NovaSolidSpaceMoonRocket","MoonRocket","map","Cta","ButtonLinkIconOnly","InputSwitch","style","propTypes","CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","id","dataName","background","popinCookie","popin","popinHeader","cookieTitleContainer","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","customStyle"],"sources":["../../../src/molecule/cm-popin/index.js"],"sourcesContent":["import React from 'react';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie,\n  NovaSolidSpaceMoonRocket as MoonRocket\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload,\n    MoonRocket\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) return <img className={style.headerBackground} src={header} />;\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled,\n        id,\n        'data-name': dataName\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled,\n              id,\n              'data-name': dataName\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div\n          className={\n            mode === 'cookie' || mode === 'information'\n              ? style.cookieTitleContainer\n              : style.titleContainer\n          }\n        >\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderBtnSwitch()}\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={firstButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n                customStyle={firstButton.customStyle}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n                customStyle={secondButton.customStyle}\n              />\n            </div>\n          ) : null}\n          {thirdButton ? (\n            <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={thirdButton.label}\n                onClick={thirdButton.handleOnclick}\n                data-name={`cm-popin-cta-${thirdButton.type}`}\n                aria-label={thirdButton['aria-label']}\n                type={thirdButton.type}\n                customStyle={thirdButton.customStyle}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = propTypes;\n\nexport default CMPopin;\n"],"mappings":"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"}

package/es/molecule/cm-popin/style.css

@@ -47,7 +47,7 @@
 
 .popin {
   overflow: auto;
-  width: 434px;
+  width: 500px;
   flex-grow: 0;
   margin: 16px;
   padding: 16px 16px 20px 16px;
@@ -114,12 +114,12 @@
 
 .button {
   min-width: max-content;
-  width: 161px;
+  width: 160px;
   padding: 8px;
 }
 
 .largeButton {
-  width: 75%;
+  width: 100%;
   padding: 8px;
 }
 
@@ -150,11 +150,6 @@
   margin-top: 0px;
 }
 
-.descriptionText, .content, .message {
-  margin-left: 32px;
-  margin-right: 32px;
-}
-
 .cookieTitleContainer {
   align-items: center;
   display: flex;
@@ -283,21 +278,29 @@ a {
 }
 
 @media tablet {
+  .popin {
+    position: fixed;
+  }
+
   .popin {
     width: 80%;
-    overflow: hidden;
   }
 
   .buttonContainer {
     display: flex;
     flex-wrap: wrap-reverse;
-    margin: 12px 24px 32px 24px;
+    margin: 48px 24px 32px 24px;
+    width: 85%;
   }
   
-  .largeButton, .button , .titleContainer {
+  .button {
     width: 100%;
   }
 
+  .titleContainer {
+    width: 85%;
+  }
+
   .popinCookie {
     position: fixed;
     bottom: 10px;
@@ -313,50 +316,34 @@ a {
   }
 
   .popinCookie .largeButton {
-    padding: 8px 0px 0px 0px;
+    padding: 8px 0px 0px 0px
   }
   .popinCookie .message {
     padding: 24px 24px 0px 24px
   }
 
-  .descriptionText, .content, .message {
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-}
-
-@media mobile {
-  .background {
-    padding: 0;
-  }
-
-  .popin {
-    width: 80%;
-    overflow: hidden;
-  }
-
-  .buttonContainer {
-    display: flex;
-    margin: 12px 16px 32px 16px;
-  }
-  
-  .button {
-    width: 100%;
-  }
-
-  .titleContainer {
-    width: 100%;
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-
-  .content, .message, .descriptionText {
-    margin-left: 16px;
-    margin-right: 16px;
-  }
-  .largeButton { 
-    margin-left: 32px;
-    margin-right: 32px;
+  @media mobile {
+    .popin {
+      position: fixed;
+    }
+
+    .popin {
+      width: 80%;
+    }
+
+    .buttonContainer {
+      display: flex;
+      margin: 48px 24px 32px 24px;
+      width: 85%;
+    }
+    
+    .button {
+      width: 100%;
+    }
+
+    .titleContainer {
+      width: 85%;
+    }
   }
 }
 
@@ -368,6 +355,7 @@ button {
 }
 
 _:-ms-fullscreen,
+.descriptionText,
 .buttonContainer {
   width: 85%;
 }