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

package/lib/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/lib/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/lib/atom/form-text-input/index.js

@@ -0,0 +1,121 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _propTypes = _interopRequireWildcard(require("./prop-types"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const validate = (fieldValue, fieldEqualsValue) => {
+  return (0, _isEqual.default)(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 => !(0, _isEmpty.default)(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.default,
+  passwordValidator = () => false,
+  placeholder,
+  type = 'default',
+  value,
+  equals,
+  wrapperClassName
+}) => {
+  const [newValue, setNewValue] = (0, _react.useState)(value);
+  const [isValid, setIsValid] = (0, _react.useState)(true);
+  const isDefaultType = (0, _react.useMemo)(() => !type || type === _propTypes.TextInput.default, [type]);
+  const isPasswordInput = (0, _react.useMemo)(() => type === _propTypes.TextInput.password || type === _propTypes.TextInput.passwordConfirmation, [type]);
+  const isEmailInput = (0, _react.useMemo)(() => type === _propTypes.TextInput.email, [type]);
+  const handleInputChange = (0, _react.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]);
+  (0, _react.useEffect)(() => {
+    onChange(newValue, isValid);
+    return;
+  }, [isValid, newValue, onChange]);
+  const fieldLabel = (0, _react.useMemo)(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);
+  const errorStyle = (0, _react.useMemo)(() => isValid ? undefined : {
+    border: '2px solid rgb(247, 63, 82)'
+  }, [isValid]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.wrapper, wrapperClassName)
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    className: _style.default.formLabel,
+    htmlFor: name
+  }, fieldLabel), /*#__PURE__*/_react.default.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: (0, _classnames.default)(_style.default.textInput, inputClassName),
+    "data-testid": dataTestid,
+    disabled: disabled,
+    id: name,
+    name: name,
+    onInput: handleInputChange,
+    placeholder: placeholder,
+    value: value,
+    style: errorStyle
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.hintWrapper
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.hint
+  }, hint)));
+};
+
+FormTextInput.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+var _default = FormTextInput;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["validate","fieldValue","fieldEqualsValue","isEqual","VALID_EMAIL_PATTERN","validatePattern","pattern","test","DEFAULT_MAX_LENGTH","isEqualsDefined","equals","isEmpty","FormTextInput","ariaLabel","autocomplete","dataTestid","disabled","hint","inputClassName","isRequired","label","maxlength","name","onChange","noop","passwordValidator","placeholder","type","value","wrapperClassName","newValue","setNewValue","useState","isValid","setIsValid","isDefaultType","useMemo","TextInput","default","isPasswordInput","password","passwordConfirmation","isEmailInput","email","handleInputChange","useCallback","event","newInput","target","isNewValueValid","validPattern","isPasswordCompliant","useEffect","fieldLabel","errorStyle","undefined","border","classnames","style","wrapper","formLabel","maxLength","autoCapitalize","required","textInput","hintWrapper","propTypes"],"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/lib/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/lib/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/lib/atom/form-text-input/prop-types.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.TextInput = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _keys = _interopRequireDefault(require("lodash/fp/keys"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TextInput = {
+  country: 'country',
+  email: 'email',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  language: 'language',
+  login: 'login',
+  password: 'password',
+  passwordConfirmation: 'passwordConfirmation',
+  default: 'default'
+};
+exports.TextInput = TextInput;
+const propTypes = {
+  'aria-label': _propTypes.default.string,
+  autocomplete: _propTypes.default.string,
+  'data-testid': _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  equals: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  hint: _propTypes.default.string,
+  inputClassName: _propTypes.default.string,
+  isRequired: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  maxlength: _propTypes.default.number,
+  name: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  passwordValidator: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  type: _propTypes.default.oneOf((0, _keys.default)(TextInput)),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  wrapperClassName: _propTypes.default.string
+};
+var _default = propTypes;
+exports.default = _default;
+//# sourceMappingURL=prop-types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["TextInput","country","email","firstName","lastName","language","login","password","passwordConfirmation","default","propTypes","PropTypes","string","autocomplete","disabled","bool","equals","oneOfType","number","hint","inputClassName","isRequired","label","maxlength","name","onChange","func","passwordValidator","placeholder","type","oneOf","keys","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;;AACA;;;;AAEO,MAAMA,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,cAAcC,kBAAA,CAAUC,MADR;EAEhBC,YAAY,EAAEF,kBAAA,CAAUC,MAFR;EAGhB,eAAeD,kBAAA,CAAUC,MAHT;EAIhBE,QAAQ,EAAEH,kBAAA,CAAUI,IAJJ;EAKhBC,MAAM,EAAEL,kBAAA,CAAUM,SAAV,CAAoB,CAACN,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUO,MAA7B,CAApB,CALQ;EAMhBC,IAAI,EAAER,kBAAA,CAAUC,MANA;EAOhBQ,cAAc,EAAET,kBAAA,CAAUC,MAPV;EAQhBS,UAAU,EAAEV,kBAAA,CAAUI,IARN;EAShBO,KAAK,EAAEX,kBAAA,CAAUC,MATD;EAUhBW,SAAS,EAAEZ,kBAAA,CAAUO,MAVL;EAWhBM,IAAI,EAAEb,kBAAA,CAAUC,MAXA;EAYhBa,QAAQ,EAAEd,kBAAA,CAAUe,IAZJ;EAahBC,iBAAiB,EAAEhB,kBAAA,CAAUe,IAbb;EAchBE,WAAW,EAAEjB,kBAAA,CAAUC,MAdP;EAehBiB,IAAI,EAAElB,kBAAA,CAAUmB,KAAV,CAAgB,IAAAC,aAAA,EAAK/B,SAAL,CAAhB,CAfU;EAgBhBgC,KAAK,EAAErB,kBAAA,CAAUM,SAAV,CAAoB,CAACN,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUO,MAA7B,CAApB,CAhBS;EAiBhBe,gBAAgB,EAAEtB,kBAAA,CAAUC;AAjBZ,CAAlB;eA4CeF,S"}

package/lib/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/lib/molecule/discipline-header/index.d.ts

@@ -39,8 +39,6 @@ declare class DisciplineHeader extends React.Component<any, any, any> {
             }>>;
             mimeType: PropTypes.Validator<string>;
         }>>;
-        lastUpdated: PropTypes.Requireable<string>;
-        invertedLanguage: PropTypes.Requireable<boolean>;
     };
     static contextTypes: {
         translate: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/molecule/discipline-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAOE;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,yBAEC;IAED,sBAuDC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA2BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAKE;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,yBAEC;IAED,sBAsCC;CACF"}

package/lib/molecule/discipline-header/index.js

@@ -13,8 +13,6 @@ var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _novaIcons = require("@coorpacademy/nova-icons");
-
 var _videoPlayer = _interopRequireDefault(require("../video-player"));
 
 var _picture = _interopRequireDefault(require("../../atom/picture"));
@@ -81,9 +79,7 @@ class DisciplineHeader extends _react.default.Component {
       image,
       title,
       description,
-      video,
-      lastUpdated,
-      invertedLanguage
+      video
     } = this.props;
     const {
       fullDisplay,
@@ -92,23 +88,19 @@ class DisciplineHeader extends _react.default.Component {
     const {
       translate
     } = this.context;
-    const maxHeightCourseInfos = 209;
-    const hasMediaContent = image || video;
+    const maxHeightDescription = 219;
     const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');
-    const shortCourseText = offsetHeightShowMore <= maxHeightCourseInfos;
-    const courseSeeMoreButtonStyle = shortCourseText ? _style.default.showMoreHidden : _style.default.showMore;
+    const descritpionViewStyle = offsetHeightShowMore <= maxHeightDescription ? _style.default.showMoreHidden : _style.default.showMore;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "disciplineHeader",
       className: _style.default.wrapper
-    }, hasMediaContent ? /*#__PURE__*/_react.default.createElement("div", {
+    }, image || video ? /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.imgWrapper
     }, /*#__PURE__*/_react.default.createElement(Preview, {
       image: image,
       video: video
     })) : null, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.courseWrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: fullDisplay ? _style.default.courseTextWrapperFull : _style.default.courseTextWrapperShort
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "title",
       className: (0, _classnames.default)(_style.default.title, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
@@ -117,6 +109,8 @@ class DisciplineHeader extends _react.default.Component {
         __html: title
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
+      className: fullDisplay ? _style.default.desc : _style.default.shortDesc
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.innerHTML // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
@@ -124,21 +118,9 @@ class DisciplineHeader extends _react.default.Component {
       },
       ref: this.setHandle
     })), /*#__PURE__*/_react.default.createElement("div", {
-      className: invertedLanguage ? _style.default.invertedLanguage : null
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: courseSeeMoreButtonStyle,
+      className: descritpionViewStyle,
       onClick: this.handleToggleDisplay
-    }, toggleLabel), lastUpdated ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_style.default.lastUpdatedWrapper, shortCourseText ? _style.default.lastUpdatedWrapperShort : null)
-    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidSynchronizeSynchronize3, {
-      className: _style.default.syncIcon
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_style.default.lastUpdatedText, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
-      ,
-      dangerouslySetInnerHTML: {
-        __html: lastUpdated
-      }
-    })) : null)));
+    }, toggleLabel)));
   }
 
 }
@@ -150,9 +132,7 @@ DisciplineHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes.default.string,
   description: _propTypes.default.string,
   image: Preview.propTypes.image,
-  video: Preview.propTypes.video,
-  lastUpdated: _propTypes.default.string,
-  invertedLanguage: _propTypes.default.bool
+  video: Preview.propTypes.video
 } : {};
 var _default = DisciplineHeader;
 exports.default = _default;

package/lib/molecule/discipline-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","offsetHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","getOr","render","title","description","lastUpdated","invertedLanguage","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","classnames","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string","bool"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video,\n    lastUpdated: PropTypes.string,\n    invertedLanguage: PropTypes.bool\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      offsetHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({offsetHeightShowMore: getOr(0, 'offsetHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video, lastUpdated, invertedLanguage} = this.props;\n    const {fullDisplay, offsetHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightCourseInfos = 209;\n    const hasMediaContent = image || video;\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const shortCourseText = offsetHeightShowMore <= maxHeightCourseInfos;\n    const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {hasMediaContent ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}>\n            <div\n              data-name=\"title\"\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n              ref={this.setHandle}\n            />\n          </div>\n          <div className={invertedLanguage ? style.invertedLanguage : null}>\n            <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n              {toggleLabel}\n            </div>\n            {lastUpdated ? (\n              <div\n                className={classnames(\n                  style.lastUpdatedWrapper,\n                  shortCourseText ? style.lastUpdatedWrapperShort : null\n                )}\n              >\n                <SyncIcon className={style.syncIcon} />\n                <div\n                  className={classnames(style.lastUpdatedText, style.innerHTML)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{__html: lastUpdated}}\n                />\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","offsetHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","getOr","render","title","description","translate","context","maxHeightDescription","toggleLabel","descritpionViewStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","classnames","innerHTML","__html","desc","shortDesc","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n  const mimeType = get('mimeType', video);\n  const id = get('id', video);\n  const jwpOptions = get('jwpOptions', video);\n  if (id) {\n    return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n  } else if (jwpOptions) {\n    return <VideoPlayer {...video} />;\n  } else {\n    return <Picture className={style.image} src={image} />;\n  }\n};\n\nPreview.propTypes = {\n  image: Picture.propTypes.src,\n  video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n  static propTypes = {\n    title: PropTypes.string,\n    description: PropTypes.string,\n    image: Preview.propTypes.image,\n    video: Preview.propTypes.video\n  };\n\n  static contextTypes = {\n    translate: PropTypes.func\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      fullDisplay: false,\n      offsetHeightShowMore: 0\n    };\n    this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n    this.setHandle = this.setHandle.bind(this);\n  }\n\n  handleToggleDisplay() {\n    this.setState(prevState => ({\n      fullDisplay: !prevState.fullDisplay\n    }));\n  }\n\n  setHandle(el) {\n    this.setState({offsetHeightShowMore: getOr(0, 'offsetHeight', el)});\n  }\n\n  render() {\n    const {image, title, description, video} = this.props;\n    const {fullDisplay, offsetHeightShowMore} = this.state;\n    const {translate} = this.context;\n    const maxHeightDescription = 219;\n\n    const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n    const descritpionViewStyle =\n      offsetHeightShowMore <= maxHeightDescription ? style.showMoreHidden : style.showMore;\n\n    return (\n      <div data-name=\"disciplineHeader\" className={style.wrapper}>\n        {image || video ? (\n          <div className={style.imgWrapper}>\n            <Preview image={image} video={video} />\n          </div>\n        ) : null}\n        <div className={style.courseWrapper}>\n          <div\n            data-name=\"title\"\n            className={classnames(style.title, style.innerHTML)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n          <div className={fullDisplay ? style.desc : style.shortDesc}>\n            <div\n              className={style.innerHTML}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: description}}\n              ref={this.setHandle}\n            />\n          </div>\n          <div className={descritpionViewStyle} onClick={this.handleToggleDisplay}>\n            {toggleLabel}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default DisciplineHeader;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAAoB;EAClC,MAAMC,QAAQ,GAAG,IAAAC,YAAA,EAAI,UAAJ,EAAgBF,KAAhB,CAAjB;EACA,MAAMG,EAAE,GAAG,IAAAD,YAAA,EAAI,IAAJ,EAAUF,KAAV,CAAX;EACA,MAAMI,UAAU,GAAG,IAAAF,YAAA,EAAI,YAAJ,EAAkBF,KAAlB,CAAnB;;EACA,IAAIG,EAAJ,EAAQ;IACN,oBAAO,6BAAC,oBAAD;MAAa,QAAQ,EAAEF,QAAvB;MAAiC,EAAE,EAAEE,EAArC;MAAyC,KAAK,EAAC,OAA/C;MAAuD,MAAM,EAAC;IAA9D,EAAP;EACD,CAFD,MAEO,IAAIC,UAAJ,EAAgB;IACrB,oBAAO,6BAAC,oBAAD,EAAiBJ,KAAjB,CAAP;EACD,CAFM,MAEA;IACL,oBAAO,6BAAC,gBAAD;MAAS,SAAS,EAAEK,cAAA,CAAMN,KAA1B;MAAiC,GAAG,EAAEA;IAAtC,EAAP;EACD;AACF,CAXD;;AAaAD,OAAO,CAACQ,SAAR,2CAAoB;EAClBP,KAAK,EAAEQ,gBAAA,CAAQD,SAAR,CAAkBE,GADP;EAElBR,KAAK,EAAES,kBAAA,CAAUC,KAAV,CAAgBC,oBAAA,CAAYL,SAA5B;AAFW,CAApB;;AAKA,MAAMM,gBAAN,SAA+BC,cAAA,CAAMC,SAArC,CAA+C;EAY7CC,WAAW,CAACC,KAAD,EAAQ;IACjB,MAAMA,KAAN;IACA,KAAKC,KAAL,GAAa;MACXC,WAAW,EAAE,KADF;MAEXC,oBAAoB,EAAE;IAFX,CAAb;IAIA,KAAKC,mBAAL,GAA2B,KAAKA,mBAAL,CAAyBC,IAAzB,CAA8B,IAA9B,CAA3B;IACA,KAAKC,SAAL,GAAiB,KAAKA,SAAL,CAAeD,IAAf,CAAoB,IAApB,CAAjB;EACD;;EAEDD,mBAAmB,GAAG;IACpB,KAAKG,QAAL,CAAcC,SAAS,KAAK;MAC1BN,WAAW,EAAE,CAACM,SAAS,CAACN;IADE,CAAL,CAAvB;EAGD;;EAEDI,SAAS,CAACG,EAAD,EAAK;IACZ,KAAKF,QAAL,CAAc;MAACJ,oBAAoB,EAAE,IAAAO,cAAA,EAAM,CAAN,EAAS,cAAT,EAAyBD,EAAzB;IAAvB,CAAd;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAC5B,KAAD;MAAQ6B,KAAR;MAAeC,WAAf;MAA4B7B;IAA5B,IAAqC,KAAKgB,KAAhD;IACA,MAAM;MAACE,WAAD;MAAcC;IAAd,IAAsC,KAAKF,KAAjD;IACA,MAAM;MAACa;IAAD,IAAc,KAAKC,OAAzB;IACA,MAAMC,oBAAoB,GAAG,GAA7B;IAEA,MAAMC,WAAW,GAAGf,WAAW,GAAGY,SAAS,CAAC,UAAD,CAAZ,GAA2BA,SAAS,CAAC,WAAD,CAAnE;IACA,MAAMI,oBAAoB,GACxBf,oBAAoB,IAAIa,oBAAxB,GAA+C3B,cAAA,CAAM8B,cAArD,GAAsE9B,cAAA,CAAM+B,QAD9E;IAGA,oBACE;MAAK,aAAU,kBAAf;MAAkC,SAAS,EAAE/B,cAAA,CAAMgC;IAAnD,GACGtC,KAAK,IAAIC,KAAT,gBACC;MAAK,SAAS,EAAEK,cAAA,CAAMiC;IAAtB,gBACE,6BAAC,OAAD;MAAS,KAAK,EAAEvC,KAAhB;MAAuB,KAAK,EAAEC;IAA9B,EADF,CADD,GAIG,IALN,eAME;MAAK,SAAS,EAAEK,cAAA,CAAMkC;IAAtB,gBACE;MACE,aAAU,OADZ;MAEE,SAAS,EAAE,IAAAC,mBAAA,EAAWnC,cAAA,CAAMuB,KAAjB,EAAwBvB,cAAA,CAAMoC,SAA9B,CAFb,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEd;MAAT;IAJ3B,EADF,eAOE;MAAK,SAAS,EAAEV,WAAW,GAAGb,cAAA,CAAMsC,IAAT,GAAgBtC,cAAA,CAAMuC;IAAjD,gBACE;MACE,SAAS,EAAEvC,cAAA,CAAMoC,SADnB,CAEE;MAFF;MAGE,uBAAuB,EAAE;QAACC,MAAM,EAAEb;MAAT,CAH3B;MAIE,GAAG,EAAE,KAAKP;IAJZ,EADF,CAPF,eAeE;MAAK,SAAS,EAAEY,oBAAhB;MAAsC,OAAO,EAAE,KAAKd;IAApD,GACGa,WADH,CAfF,CANF,CADF;EA4BD;;AAtE4C;;AAAzCrB,gB,CAQGiC,Y,GAAe;EACpBf,SAAS,EAAErB,kBAAA,CAAUqC;AADD,C;AARlBlC,gB,CACGN,S,2CAAY;EACjBsB,KAAK,EAAEnB,kBAAA,CAAUsC,MADA;EAEjBlB,WAAW,EAAEpB,kBAAA,CAAUsC,MAFN;EAGjBhD,KAAK,EAAED,OAAO,CAACQ,SAAR,CAAkBP,KAHR;EAIjBC,KAAK,EAAEF,OAAO,CAACQ,SAAR,CAAkBN;AAJR,C;eAwENY,gB"}

package/lib/molecule/discipline-header/style.css

@@ -45,7 +45,7 @@
   color: dark;
 }
 
-.courseTextWrapperFull {
+.desc {
   font-family: "Gilroy";
   font-size: 15px;
   color: black;
@@ -53,14 +53,14 @@
   line-height: 22px;
 }
 
-.courseTextWrapperFull a {
+.desc a {
   font-family: Gilroy;
   font-weight: 600;
   color: brand;
   text-decoration: none;
 }
 
-.courseTextWrapperFull a:hover {
+.desc a:hover {
   text-decoration: underline;
 }
 
@@ -68,42 +68,10 @@
   display: none;
 }
 
-.lastUpdatedWrapperShort {
-/* This is required in case that the text is short to make sure that it
- is stuck to the bottom at the same level to the media */
- height: 28px;
- align-items: flex-end; 
-}
-
-.lastUpdatedWrapper {
-  display: flex;
-  margin-top: 8px;
-}
-
-.lastUpdatedText {
-  font-family: 'Gilroy';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 14px;
-  color: #536E7A;  
-}
-
-.invertedLanguage {
-  float: right;
-  text-align: right;
-  align-items: right;
-}
-
-.syncIcon {
-  height: 13px;
-  color: #536E7A;
-  margin-right: 3px;
-}
-
 .showMore {
   display: block;
   font-size: 14px;
+  margin: 0 14px 0 0;
   transition: all time ease-in-out;
   cursor: pointer;
   order: 1;
@@ -117,9 +85,9 @@
   opacity: 0.8;
 }
 
-.courseTextWrapperShort {
-  composes: courseTextWrapperFull;
-  height: 213px;
+.shortDesc {
+  composes: desc;
+  height: 200px;
   overflow: hidden;
 }
 
@@ -138,7 +106,6 @@
     margin-top: 20px;
     padding-left: 0;
   }
-
 }
 
 .innerHTML {

package/lib/template/common/discipline/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/discipline/index.js"],"names":[],"mappings":";AAcA,mEAiKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/discipline/index.js"],"names":[],"mappings":";AAcA,mEAwJC"}

package/lib/template/common/discipline/index.js

@@ -54,9 +54,7 @@ const Discipline = (props, context) => {
     addToMyListText,
     removeFromMyListText,
     disableShare = false,
-    disableAddToMyList = false,
-    lastUpdated,
-    invertedLanguage = false
+    disableAddToMyList = false
   } = props;
   const authorSection = (0, _isEmpty.default)(authors) ? null : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.partners
@@ -87,9 +85,7 @@ const Discipline = (props, context) => {
     image: image,
     video: video,
     title: title,
-    description: description,
-    lastUpdated: lastUpdated,
-    invertedLanguage: invertedLanguage
+    description: description
   }));
 
   const discipline = /*#__PURE__*/_react.default.createElement("div", {