+ );
+};
+AttributeList.propTypes = {
+ attributes: PropTypes.arrayOf(PropTypes.object),
+ editedAttribute: PropTypes.object,
+ disabled: PropTypes.bool,
+ newAttrMessage: PropTypes.string,
+ maxLength: PropTypes.number,
+ customClass: PropTypes.string,
+ onChange: PropTypes.func,
+ onEdit: PropTypes.func,
+ onAddNew: PropTypes.func,
+ onRemove: PropTypes.func,
+ getURIKey: PropTypes.func,
+ getURIValue: PropTypes.func,
+ showButton: PropTypes.bool,
+ editable: PropTypes.bool,
+ attributesListClassname: PropTypes.string,
+ editorDefaultOpen: PropTypes.bool,
+};
+AttributeList.defaultProps = {
+ attributes: [],
+ editedAttribute: null,
+ disabled: false,
+ keyURLCreator: null,
+ valueURLCreator: null,
+ newAttrMessage: '',
+ maxLength: Infinity,
+ customClass: '',
+ onChange: () => {},
+ onRemove: () => {},
+ onEdit: () => {},
+ onAddNew: () => {},
+ getURIKey: () => {},
+ getURIValue: () => {},
+ showButton: true,
+ editable: true,
+ attributesListClassname: '',
+ editorDefaultOpen: false,
+};
diff --git a/app/src/componentLibrary/attributeList/attributeList.scss b/app/src/componentLibrary/attributeList/attributeList.scss
new file mode 100644
index 0000000000..29ab8a3b99
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/attributeList.scss
@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.attributes-wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.attributes {
+ display: inline-flex;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.editable-attribute {
+ margin-top: 16px;
+}
diff --git a/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.jsx b/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.jsx
new file mode 100644
index 0000000000..959c518f39
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.jsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Parser from 'html-react-parser';
+import { formatAttribute } from 'common/utils/attributeUtils';
+import CrossIcon from 'common/img/cross-icon-inline.svg';
+import styles from './attribute.scss';
+
+const cx = classNames.bind(styles);
+
+export const Attribute = ({ attribute, onClick, onRemove, disabled, customClass, variant }) => {
+ const onClickRemove = (e) => {
+ e.stopPropagation();
+ onRemove();
+ };
+
+ return (
+
+
{formatAttribute(attribute)}
+ {!disabled && (
+
+ {Parser(CrossIcon)}
+
+ )}
+
+ );
+};
+
+Attribute.propTypes = {
+ attribute: PropTypes.object,
+ customClass: PropTypes.string,
+ disabled: PropTypes.bool,
+ onClick: PropTypes.func,
+ onRemove: PropTypes.func,
+ variant: PropTypes.string,
+};
+
+Attribute.defaultProps = {
+ attribute: {},
+ customClass: '',
+ disabled: false,
+ onClick: () => {},
+ onRemove: () => {},
+ variant: 'light',
+};
diff --git a/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.scss b/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.scss
new file mode 100644
index 0000000000..01a6651f1e
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttribute/attribute/attribute.scss
@@ -0,0 +1,89 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin attribute($bgColor) {
+ display: inline-flex;
+ align-items: center;
+ min-height: 28px;
+ padding: 4px 8px;
+ background-color: $bgColor;
+ border-radius: 6px;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+@mixin label($color) {
+ display: inline-block;
+ color: $color;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 13px;
+ line-height: 18px;
+ word-break: break-all;
+
+ @supports (word-break: break-word) {
+ word-break: break-word;
+ }
+}
+
+@mixin disabled-state($color, $bgColor) {
+ &.disabled {
+ background-color: $bgColor;
+ cursor: default;
+
+ & .label {
+ color: $color;
+ }
+ }
+}
+
+@mixin remove-icon($color) {
+ flex: none;
+ display: inline-block;
+ height: 10px;
+ width: 10px;
+ margin-left: 20px;
+ line-height: 8px;
+
+ svg {
+ fill: $color;
+ }
+}
+
+.light {
+ &.attribute {
+ @include attribute($COLOR--bg-200);
+ @include disabled-state($COLOR--almost-black, $COLOR--e-100);
+ }
+ &.label {
+ @include label($COLOR--darkmode-gray-200);
+ }
+ &.remove-icon {
+ @include remove-icon($COLOR--darkmode-gray-200);
+ }
+}
+
+.dark {
+ &.attribute {
+ @include attribute($COLOR--darkmode-gray-200);
+ @include disabled-state($COLOR--darkmode-gray-50, $COLOR--darkmode-gray-300);
+ }
+ &.label {
+ @include label($COLOR--darkmode-gray-50);
+ }
+ &.remove-icon {
+ @include remove-icon($COLOR--darkmode-gray-50);
+ }
+}
diff --git a/app/src/componentLibrary/attributeList/editableAttribute/attribute/index.js b/app/src/componentLibrary/attributeList/editableAttribute/attribute/index.js
new file mode 100644
index 0000000000..4e550b73c4
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttribute/attribute/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Attribute } from './attribute';
diff --git a/app/src/componentLibrary/attributeList/editableAttribute/editableAttribute.jsx b/app/src/componentLibrary/attributeList/editableAttribute/editableAttribute.jsx
new file mode 100644
index 0000000000..e7b1104f46
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttribute/editableAttribute.jsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import { Attribute } from './attribute';
+
+export const EditableAttribute = ({ attribute, onChange, onEdit, onCancelEdit, ...rest }) => (
+
+);
+
+EditableAttribute.propTypes = {
+ attribute: PropTypes.object,
+ attributes: PropTypes.array,
+ editMode: PropTypes.bool,
+ disabled: PropTypes.bool,
+ customClass: PropTypes.string,
+ onEdit: PropTypes.func,
+ onRemove: PropTypes.func,
+ onChange: PropTypes.func,
+ onCancelEdit: PropTypes.func,
+};
+EditableAttribute.defaultProps = {
+ attribute: {},
+ attributes: [],
+ editMode: false,
+ disabled: false,
+ customClass: '',
+ onEdit: () => {},
+ onRemove: () => {},
+ onChange: () => {},
+ onCancelEdit: () => {},
+};
diff --git a/app/src/componentLibrary/attributeList/editableAttribute/index.js b/app/src/componentLibrary/attributeList/editableAttribute/index.js
new file mode 100644
index 0000000000..e026ed56b3
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttribute/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { EditableAttribute } from './editableAttribute';
diff --git a/app/src/componentLibrary/attributeList/editableAttributeList.jsx b/app/src/componentLibrary/attributeList/editableAttributeList.jsx
new file mode 100644
index 0000000000..b74a7f6feb
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/editableAttributeList.jsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+import { AttributeList } from './attributeList';
+
+const NEW_ATTRIBUTE = {
+ system: false,
+ edited: true,
+ new: true,
+};
+
+export const EditableAttributeList = ({
+ attributes,
+ onChange,
+ disabled,
+ newAttrMessage,
+ maxLength,
+ customClass,
+ showButton,
+ editable,
+ defaultOpen,
+ ...rest
+}) => {
+ const handleAddNew = () => {
+ onChange([...attributes, NEW_ATTRIBUTE]);
+ };
+ useEffect(() => {
+ if (defaultOpen && !attributes.length) {
+ handleAddNew();
+ }
+ }, [disabled, attributes]);
+
+ const handleChange = (attr) => {
+ onChange(attr);
+ };
+
+ return (
+
+ );
+};
+
+EditableAttributeList.propTypes = {
+ attributes: PropTypes.arrayOf(PropTypes.object),
+ disabled: PropTypes.bool,
+ newAttrMessage: PropTypes.string,
+ onChange: PropTypes.func,
+ maxLength: PropTypes.number,
+ customClass: PropTypes.string,
+ showButton: PropTypes.bool,
+ editable: PropTypes.bool,
+ defaultOpen: PropTypes.bool,
+};
+
+EditableAttributeList.defaultProps = {
+ attributes: [],
+ value: [],
+ disabled: false,
+ newAttrMessage: '',
+ onChange: () => {},
+ maxLength: Infinity,
+ customClass: '',
+ showButton: true,
+ editable: true,
+ defaultOpen: false,
+};
diff --git a/app/src/componentLibrary/attributeList/index.js b/app/src/componentLibrary/attributeList/index.js
new file mode 100644
index 0000000000..6aa25a7a11
--- /dev/null
+++ b/app/src/componentLibrary/attributeList/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { EditableAttributeList as AttributeList } from './editableAttributeList';
diff --git a/app/src/componentLibrary/autocompletes/asyncAutocomplete.jsx b/app/src/componentLibrary/autocompletes/asyncAutocomplete.jsx
new file mode 100644
index 0000000000..634977d2a6
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/asyncAutocomplete.jsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WithAsyncLoading } from './withAsyncLoading';
+import { SingleAutocomplete } from './singleAutocomplete';
+
+export const AsyncAutocomplete = WithAsyncLoading(SingleAutocomplete);
diff --git a/app/src/componentLibrary/autocompletes/asyncMultipleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/asyncMultipleAutocomplete.jsx
new file mode 100644
index 0000000000..2a195c3baf
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/asyncMultipleAutocomplete.jsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { WithAsyncLoading } from './withAsyncLoading';
+import { MultipleAutocomplete } from './multipleAutocomplete';
+
+export const AsyncMultipleAutocomplete = WithAsyncLoading(MultipleAutocomplete);
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.jsx
new file mode 100644
index 0000000000..d12efbc152
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.jsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { AutocompleteOptions } from './../autocompleteOptions';
+import styles from './autocompleteMenu.scss';
+
+const cx = classNames.bind(styles);
+
+const isReadyForSearch = (minLength, inputValue) =>
+ !minLength || minLength <= inputValue.trim().length;
+
+export const AutocompleteMenu = React.forwardRef(
+ ({ isOpen, placement, style, minLength, inputValue, className, ...props }, ref) => {
+ return (
+
+
+
+ );
+ },
+);
+
+AutocompleteMenu.propTypes = {
+ isOpen: PropTypes.bool,
+ placement: PropTypes.string,
+ style: PropTypes.object,
+ minLength: PropTypes.number,
+ inputValue: PropTypes.string,
+ className: PropTypes.string,
+};
+
+AutocompleteMenu.defaultProps = {
+ isOpen: false,
+ placement: 'bottom-start',
+ style: {},
+ minLength: 1,
+ inputValue: '',
+ className: '',
+};
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss
new file mode 100644
index 0000000000..6d385689f2
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/autocompleteMenu.scss
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.menu {
+ position: absolute;
+ top: 100%;
+ display: none;
+ width: 100%;
+ border-radius: 3px;
+ margin-top: 4px;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--charcoal-grey;
+ background-color: $COLOR--white-two;
+ box-sizing: border-box;
+ box-shadow: $BOX_SHADOW--modal-window;
+ z-index: $Z-INDEX-POPUP;
+ &.opened {
+ display: block;
+ }
+}
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteMenu/index.js b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/index.js
new file mode 100644
index 0000000000..a5c11d0576
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteMenu/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { AutocompleteMenu } from './autocompleteMenu';
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx
new file mode 100644
index 0000000000..d4f2045161
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.jsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { Button } from 'componentLibrary/button';
+import PlusIcon from 'common/img/plus-button-inline.svg';
+import styles from './autocompleteOption.scss';
+
+const cx = classNames.bind(styles);
+
+export const AutocompleteOption = ({
+ isActive,
+ isSelected,
+ children,
+ isNew,
+ disabled,
+ variant,
+ ...props
+}) => {
+ return isNew ? (
+ <>
+
+
+ {children}
+
+
+
+ ) : (
+
+ {children}
+
+ );
+};
+
+AutocompleteOption.propTypes = {
+ isActive: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ isNew: PropTypes.bool,
+ children: PropTypes.node,
+ disabled: PropTypes.bool,
+ variant: PropTypes.string,
+};
+
+AutocompleteOption.defaultProps = {
+ isActive: false,
+ isSelected: false,
+ isNew: false,
+ children: null,
+ disabled: false,
+ variant: '',
+};
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss
new file mode 100644
index 0000000000..5a0838b663
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin option-state($color, $bgcolor) {
+ color: $color;
+ .tag {
+ padding: 4px 8px;
+ background-color: $bgcolor;
+ border-radius: 6px;
+ }
+
+ .value {
+ display: inline-block;
+ height: 28px;
+ max-width: 115px;
+ padding: 4px 8px 4px 8px;
+ font-size: 13px;
+ text-align: center;
+ border: 1px solid $bgcolor;
+ border-radius: 6px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ box-sizing: border-box;
+ }
+}
+
+.item {
+ display: inline-flex;
+ align-items: center;
+ width: 100%;
+ min-height: 36px;
+ padding: 4px 12px;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 13px;
+ box-sizing: border-box;
+ cursor: pointer;
+
+ &.active {
+ background-color: $COLOR--bg-100;
+ }
+}
+
+.divider {
+ display: block;
+ height: 1px;
+ margin: 0 12px;
+ background: $COLOR--e-100;
+}
+
+.new-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 36px;
+ padding: 4px 12px;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+.key-variant {
+ @include option-state($COLOR--tag-key-text, $COLOR--tag-key-background);
+
+ &.active {
+ background-color: $COLOR--bg-200;
+ }
+}
+
+.value-variant {
+ @include option-state($COLOR--tag-value-text, $COLOR--tag-value-background);
+
+ &.active {
+ background-color: $COLOR--bg-200;
+ }
+}
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/index.js b/app/src/componentLibrary/autocompletes/common/autocompleteOption/index.js
new file mode 100644
index 0000000000..ec331d3fd9
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteOption/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { AutocompleteOption } from './autocompleteOption';
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx b/app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx
new file mode 100644
index 0000000000..99ab74e692
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteOptions.jsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { ScrollWrapper } from 'components/main/scrollWrapper';
+import { BubblesPreloader } from 'components/preloaders/bubblesPreloader';
+import { AutocompletePrompt } from './autocompletePrompt';
+import { AutocompleteOption } from './autocompleteOption';
+import styles from './autocompleteOptions.scss';
+
+const cx = classNames.bind(styles);
+
+export class AutocompleteOptions extends Component {
+ static propTypes = {
+ children: PropTypes.func,
+ options: PropTypes.array,
+ loading: PropTypes.bool,
+ inputValue: PropTypes.string,
+ parseValueToString: PropTypes.func,
+ getItemProps: PropTypes.func,
+ renderOption: PropTypes.func,
+ async: PropTypes.bool,
+ autocompleteVariant: PropTypes.string,
+ createWithoutConfirmation: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ children: null,
+ options: [],
+ loading: false,
+ inputValue: '',
+ parseValueToString: (value) => value || '',
+ getItemProps: () => {},
+ renderOption: null,
+ async: false,
+ autocompleteVariant: '',
+ createWithoutConfirmation: false,
+ };
+
+ filterStaticOptions = () => {
+ const { options, inputValue, parseValueToString } = this.props;
+ return (options || []).filter(
+ (option) =>
+ parseValueToString(option)
+ .toUpperCase()
+ .indexOf((inputValue.toUpperCase() || '').trim()) > -1,
+ );
+ };
+
+ getPrompt = (options) => {
+ const { loading, createWithoutConfirmation } = this.props;
+ if (loading) {
+ return (
+ <>
+
+
+
+ {!createWithoutConfirmation && this.renderNewItem(options)}
+
+ );
+ }
+ return '';
+ };
+
+ renderItem = (item, index, isNew = false) => {
+ const { getItemProps, renderOption, autocompleteVariant } = this.props;
+ return renderOption ? (
+ renderOption(item, index, isNew, getItemProps)
+ ) : (
+
+ {this.props.parseValueToString(item)}
+
+ );
+ };
+
+ renderItems = (options) => {
+ return options.length ? options.map((item, index) => this.renderItem(item, index)) : '';
+ };
+
+ renderNewItem = (options) => {
+ const { inputValue, getItemProps, autocompleteVariant } = this.props;
+ const index = options.length;
+ const isNew = true;
+ return (
+
+ );
+ }
+}
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOptions.scss b/app/src/componentLibrary/autocompletes/common/autocompleteOptions.scss
new file mode 100644
index 0000000000..564ec89db2
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompleteOptions.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ margin: 4px 0;
+}
diff --git a/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.jsx b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.jsx
new file mode 100644
index 0000000000..e39ca5fd79
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.jsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './autocompletePrompt.scss';
+
+const cx = classNames.bind(styles);
+
+export const AutocompletePrompt = ({ children }) =>
{children}
;
+
+AutocompletePrompt.propTypes = {
+ children: PropTypes.node,
+};
+
+AutocompletePrompt.defaultProps = {
+ children: null,
+};
diff --git a/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.scss b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.scss
new file mode 100644
index 0000000000..ede8a3cf87
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/autocompletePrompt.scss
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.prompt {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 36px;
+ background-color: $COLOR--white-two;
+ border-radius: 3px;
+ padding-right: 42px;
+ box-sizing: border-box;
+}
diff --git a/app/src/componentLibrary/autocompletes/common/autocompletePrompt/index.js b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/index.js
new file mode 100644
index 0000000000..1ed68b194c
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/common/autocompletePrompt/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { AutocompletePrompt } from './autocompletePrompt';
diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/rallyCredentials/index.js b/app/src/componentLibrary/autocompletes/multipleAutocomplete/index.js
similarity index 90%
rename from app/src/pages/inside/stepPage/modals/postIssueModal/rallyCredentials/index.js
rename to app/src/componentLibrary/autocompletes/multipleAutocomplete/index.js
index 3a9cacc8ac..2ad123175f 100644
--- a/app/src/pages/inside/stepPage/modals/postIssueModal/rallyCredentials/index.js
+++ b/app/src/componentLibrary/autocompletes/multipleAutocomplete/index.js
@@ -14,4 +14,4 @@
* limitations under the License.
*/
-export { RallyCredentials } from './rallyCredentials';
+export { MultipleAutocomplete } from './multipleAutocomplete';
diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx b/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx
new file mode 100644
index 0000000000..89f36c3fca
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.jsx
@@ -0,0 +1,292 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import isEqual from 'fast-deep-equal';
+import classNames from 'classnames/bind';
+import { Manager, Reference, Popper } from 'react-popper';
+import { AutocompleteMenu } from './../common/autocompleteMenu';
+import { SelectedItems } from './selectedItems';
+import { MultipleDownshift } from './multipleDownshift';
+import styles from './multipleAutocomplete.scss';
+
+const cx = classNames.bind(styles);
+
+export const MultipleAutocomplete = ({
+ onChange,
+ onBlur,
+ onFocus,
+ parseValueToString,
+ placeholder,
+ disabled,
+ error,
+ touched,
+ mobileDisabled,
+ value = [],
+ inputProps,
+ onStateChange,
+ customClass,
+ maxLength,
+ createWithoutConfirmation,
+ options,
+ getItemValidationErrorType,
+ creatable,
+ editable,
+ getAdditionalCreationCondition,
+ highlightUnStoredItem,
+ parseInputValueFn,
+ handleUnStoredItemCb,
+ dataAutomationId,
+ existingItemsMap,
+ ...props
+}) => {
+ let updatePosition;
+ const placeholderIfEmptyField = value.length === 0 && !disabled ? placeholder : '';
+
+ const handleChange = (...args) => {
+ updatePosition && updatePosition();
+ onChange(...args);
+ };
+ const getOptionProps = (getItemProps, highlightedIndex, selectedItems) => ({
+ item,
+ index,
+ ...rest
+ }) =>
+ getItemProps({
+ item,
+ index,
+ isActive: highlightedIndex === index,
+ isSelected: selectedItems.some((selectedItem) => isEqual(selectedItem, item)),
+ ...rest,
+ });
+ const removeItemByBackspace = ({ event, removeItem, inputValue }) => {
+ if (event.key === 'Backspace' && !inputValue && value.length) {
+ removeItem(value[value.length - 1]);
+ }
+ };
+ const createNewItem = ({ inputValue, selectItem, clearSelection }) => {
+ if (parseInputValueFn) {
+ const parsedItems = parseInputValueFn(inputValue);
+ const items = parsedItems.length ? parsedItems : [inputValue];
+ selectItem(items);
+ clearSelection();
+ } else {
+ selectItem(inputValue);
+ clearSelection();
+ }
+ };
+
+ return (
+
+
+ {({
+ getInputProps,
+ getItemProps,
+ isOpen,
+ inputValue,
+ highlightedIndex,
+ removeItem,
+ editItem,
+ openMenu,
+ selectItem,
+ clearSelection,
+ storedItemsMap,
+ }) => (
+
+ )}
+
+
+ );
+ }
+}
diff --git a/app/src/componentLibrary/autocompletes/withAsyncLoading.jsx b/app/src/componentLibrary/autocompletes/withAsyncLoading.jsx
new file mode 100644
index 0000000000..396453c762
--- /dev/null
+++ b/app/src/componentLibrary/autocompletes/withAsyncLoading.jsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { debounce, fetch, ERROR_CANCELED } from 'common/utils';
+
+export const WithAsyncLoading = (AutocompleteComponent) =>
+ class WrappedAutocomplete extends Component {
+ static propTypes = {
+ getURI: PropTypes.func,
+ makeOptions: PropTypes.func,
+ filterOption: PropTypes.func,
+ minLength: PropTypes.number,
+ };
+
+ static defaultProps = {
+ getURI: () => '',
+ makeOptions: (values) => values,
+ filterOption: () => true,
+ minLength: 1,
+ };
+
+ state = {
+ options: [],
+ loading: false,
+ };
+
+ cancelToken = null;
+
+ componentWillUnmount() {
+ this.cancelToken && this.cancelToken();
+ this.cancelDebounce && this.cancelDebounce();
+ }
+
+ debouncedFetch = debounce((inputValue) => {
+ const { getURI, makeOptions, filterOption } = this.props;
+ if (this.cancelToken) {
+ this.cancelToken();
+ }
+ const value = (inputValue || '').trim();
+ const uri = getURI(value);
+ fetch(uri, {
+ abort: (cancelToken) => {
+ this.cancelToken = cancelToken;
+ },
+ })
+ .then((response) => {
+ this.cancelToken = null;
+ this.setState({
+ options: makeOptions(response).filter(filterOption),
+ loading: false,
+ });
+ })
+ .catch((error) => {
+ if (error.message !== ERROR_CANCELED) {
+ this.setState({
+ options: [],
+ loading: false,
+ });
+ }
+ this.cancelToken = null;
+ });
+ }, 200);
+
+ loadOptions = (inputValue) => {
+ this.setState({ loading: true });
+ this.cancelDebounce = this.debouncedFetch(inputValue);
+ };
+
+ handleStateChange = (changes, { isOpen, inputValue }) => {
+ if (!isOpen) return;
+
+ if (
+ ('isOpen' in changes && !this.props.minLength) ||
+ ('inputValue' in changes && (inputValue || '').trim().length >= this.props.minLength)
+ ) {
+ this.loadOptions(inputValue || '');
+ }
+ };
+
+ render() {
+ const { options, loading } = this.state;
+ return (
+
+ );
+ }
+ };
diff --git a/app/src/componentLibrary/breadcrumbs/README.md b/app/src/componentLibrary/breadcrumbs/README.md
new file mode 100644
index 0000000000..20a7424ac7
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/README.md
@@ -0,0 +1,27 @@
+## **Breadcrumbs with optional url and paths**
+
+### Description:
+
+Breadcrumbs with possibility of ellipsis in the middle of each link that exceeds the size.
+Shows from 1 to 5 links.
+If there are more than 5 links, then it shows 4, and hides the rest of the links in the meatball.
+
+### Props:
+
+- **descriptors**: _array_ of {
+ **id**: _string_ or _number_,
+ **title**: _string_,
+ **link**: _object_,
+ **onClick**: _func_, optional, default = () => {}
+ }, optional, default = []
+- **dataAutomationId**: _string_, optional, default = ''
+
+### Example
+
+```jsx
+...
+breadcrumbs: breadcrumbsSelector(state),
+...
+
+
+```
diff --git a/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.jsx b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.jsx
new file mode 100644
index 0000000000..050529229f
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.jsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { Breadcrumb } from '../breadcrumb';
+import styles from './backBreadcrumb.scss';
+
+const cx = classNames.bind(styles);
+
+export const BackBreadcrumb = (props) => (
+
+
+
+);
+
+BackBreadcrumb.propTypes = {
+ descriptor: PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ link: PropTypes.object.isRequired,
+ onClick: PropTypes.func,
+ }).isRequired,
+ maxBreadcrumbWidth: PropTypes.number,
+};
+
+BackBreadcrumb.defaultProps = {
+ maxBreadcrumbWidth: 132,
+};
diff --git a/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.scss b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.scss
new file mode 100644
index 0000000000..cdd8d8233c
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/backBreadcrumb.scss
@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.back-breadcrumb {
+ display: inline-block;
+ width: auto;
+ height: 100%;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 12px;
+ background-image: url(../img/arrow.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ margin: 0 4px;
+ transform: rotate(180deg);
+ }
+}
diff --git a/app/src/componentLibrary/breadcrumbs/backBreadcrumb/index.js b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/index.js
new file mode 100644
index 0000000000..3d7a754237
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/backBreadcrumb/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { BackBreadcrumb } from './backBreadcrumb';
diff --git a/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.jsx b/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.jsx
new file mode 100644
index 0000000000..7165c14e7b
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.jsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { NavLink } from 'components/main/navLink';
+import styles from './breadcrumb.scss';
+
+const cx = classNames.bind(styles);
+
+export const Breadcrumb = ({
+ maxBreadcrumbWidth,
+ titleTailNumChars,
+ descriptor: { title, link, onClick },
+}) => {
+ const ref = useRef();
+ const [breadcrumbTitle, setBreadcrumbTitle] = useState(null);
+
+ useEffect(() => {
+ const { offsetWidth, scrollWidth, dataset } = ref.current;
+
+ if (offsetWidth < scrollWidth) {
+ dataset.tail = title.slice(title.length - titleTailNumChars);
+ setBreadcrumbTitle(title);
+ }
+ }, [title, titleTailNumChars]);
+
+ return (
+
+
+
+ {title}
+
+
+
+ );
+};
+
+Breadcrumb.propTypes = {
+ maxBreadcrumbWidth: PropTypes.number,
+ titleTailNumChars: PropTypes.number,
+ descriptor: PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ link: PropTypes.object.isRequired,
+ onClick: PropTypes.func,
+ }).isRequired,
+};
+
+Breadcrumb.defaultProps = {
+ maxBreadcrumbWidth: 132,
+ titleTailNumChars: 8,
+};
diff --git a/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.scss b/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.scss
new file mode 100644
index 0000000000..8cc06f5206
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/breadcrumb/breadcrumb.scss
@@ -0,0 +1,55 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.breadcrumb {
+ display: inline-block;
+ width: auto;
+ height: 100%;
+}
+
+.breadcrumb-text {
+ display: inline-block;
+ line-height: 20px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-size: 13px;
+ font-family: $FONT-REGULAR;
+ color: $COLOR--e-300;
+ text-decoration: none;
+ user-select: none;
+ -webkit-user-select: none;
+
+ &:hover {
+ color: $COLOR--topaz-hover-2;
+ }
+}
+
+.breadcrumb-text::before {
+ float: right;
+ content: attr(data-tail);
+}
+
+.breadcrumb + .breadcrumb::before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 12px;
+ background-image: url(../img/arrow.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ margin: 0 4px;
+}
diff --git a/app/src/componentLibrary/breadcrumbs/breadcrumb/index.js b/app/src/componentLibrary/breadcrumbs/breadcrumb/index.js
new file mode 100644
index 0000000000..7caaac046d
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/breadcrumb/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Breadcrumb } from './breadcrumb';
diff --git a/app/src/componentLibrary/breadcrumbs/breadcrumbs.jsx b/app/src/componentLibrary/breadcrumbs/breadcrumbs.jsx
new file mode 100644
index 0000000000..b01c2282e7
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/breadcrumbs.jsx
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { BackBreadcrumb } from './backBreadcrumb';
+import { Breadcrumb } from './breadcrumb';
+import { Meatball } from './meatball';
+import styles from './breadcrumbs.scss';
+
+const cx = classNames.bind(styles);
+const MAX_BREADCRUMBS_WIDTH = 740;
+const MEATBALL_WIDTH = 36;
+const ARROW_WIDTH = 20;
+const MAX_SHOWN_DESCRIPTORS = 5;
+
+export const Breadcrumbs = ({ descriptors, dataAutomationId }) => {
+ const shownDescriptors = [...descriptors];
+
+ const titleTailNumChars = ((breadcrumbsCount) => {
+ if (breadcrumbsCount >= MAX_SHOWN_DESCRIPTORS) {
+ return 12;
+ } else if (breadcrumbsCount === 4) {
+ return 13;
+ } else if (breadcrumbsCount === 3) {
+ return 18;
+ } else if (breadcrumbsCount === 2) {
+ return 24;
+ } else {
+ return 55;
+ }
+ })(descriptors.length);
+
+ let hiddenDescriptors = [];
+ if (shownDescriptors.length > MAX_SHOWN_DESCRIPTORS) {
+ hiddenDescriptors = shownDescriptors.splice(
+ 1,
+ shownDescriptors.length - (MAX_SHOWN_DESCRIPTORS - 1),
+ );
+ }
+
+ const maxBreadcrumbWidth =
+ (MAX_BREADCRUMBS_WIDTH -
+ (hiddenDescriptors.length ? MEATBALL_WIDTH : 0) -
+ (shownDescriptors.length - 1) * ARROW_WIDTH) /
+ shownDescriptors.length;
+
+ return (
+
+ );
+};
+
+Breadcrumbs.propTypes = {
+ descriptors: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ title: PropTypes.string.isRequired,
+ link: PropTypes.object.isRequired,
+ onClick: PropTypes.func,
+ }),
+ ),
+ dataAutomationId: PropTypes.string,
+};
+
+Breadcrumbs.defaultProps = {
+ descriptors: [],
+ dataAutomationId: '',
+};
diff --git a/app/src/componentLibrary/breadcrumbs/breadcrumbs.scss b/app/src/componentLibrary/breadcrumbs/breadcrumbs.scss
new file mode 100644
index 0000000000..59f9609792
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/breadcrumbs.scss
@@ -0,0 +1,45 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.breadcrumbs-container {
+ display: inline-block;
+ width: 856px;
+ height: 20px;
+}
+
+.breadcrumbs {
+ display: inline-block;
+ width: 740px;
+ height: 100%;
+}
+
+.meatball {
+ display: inline-block;
+ width: auto;
+ height: 20px;
+}
+
+.meatball::after,
+.meatball::before {
+ content: '';
+ display: inline-block;
+ height: 20px;
+ width: 12px;
+ background-image: url(./img/arrow.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ margin: 0 4px;
+}
diff --git a/app/src/componentLibrary/breadcrumbs/img/arrow.svg b/app/src/componentLibrary/breadcrumbs/img/arrow.svg
new file mode 100644
index 0000000000..7c3adf206a
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/img/arrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/src/componentLibrary/breadcrumbs/img/meatball-inline.svg b/app/src/componentLibrary/breadcrumbs/img/meatball-inline.svg
new file mode 100644
index 0000000000..ff47875e70
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/img/meatball-inline.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/src/componentLibrary/breadcrumbs/img/next-level.svg b/app/src/componentLibrary/breadcrumbs/img/next-level.svg
new file mode 100644
index 0000000000..4f653f9ded
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/img/next-level.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/src/componentLibrary/breadcrumbs/index.js b/app/src/componentLibrary/breadcrumbs/index.js
new file mode 100644
index 0000000000..11c09c7095
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Breadcrumbs } from './breadcrumbs';
diff --git a/app/src/componentLibrary/breadcrumbs/meatball/index.js b/app/src/componentLibrary/breadcrumbs/meatball/index.js
new file mode 100644
index 0000000000..a021d7c889
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/meatball/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Meatball } from './meatball';
diff --git a/app/src/componentLibrary/breadcrumbs/meatball/meatball.jsx b/app/src/componentLibrary/breadcrumbs/meatball/meatball.jsx
new file mode 100644
index 0000000000..c91cdeb6ca
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/meatball/meatball.jsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+import { withPopover } from 'componentLibrary/popover';
+import { Breadcrumb } from '../breadcrumb';
+import { MeatballIconComponent } from './meatballIconComponent';
+import styles from './meatball.scss';
+
+const cx = classNames.bind(styles);
+
+const MeatballPopoverContent = ({ descriptors }) => (
+
+ {descriptors.map((descriptor, index) => (
+
+ {index !== 0 && }
+
+
+ ))}
+
+);
+
+MeatballPopoverContent.propTypes = {
+ descriptors: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ title: PropTypes.string,
+ link: PropTypes.object,
+ }),
+ ),
+};
+
+MeatballPopoverContent.defaultProps = {
+ descriptors: [],
+};
+
+export const Meatball = withPopover({
+ ContentComponent: MeatballPopoverContent,
+ side: 'bottom',
+ arrowPosition: 'left',
+ popoverWrapperClassName: cx('popover-wrapper'),
+})(MeatballIconComponent);
diff --git a/app/src/pages/inside/stepPage/modals/postIssueModal/jiraCredentials/jiraCredentials.scss b/app/src/componentLibrary/breadcrumbs/meatball/meatball.scss
similarity index 53%
rename from app/src/pages/inside/stepPage/modals/postIssueModal/jiraCredentials/jiraCredentials.scss
rename to app/src/componentLibrary/breadcrumbs/meatball/meatball.scss
index af42bfe0bc..b07bf72c50 100644
--- a/app/src/pages/inside/stepPage/modals/postIssueModal/jiraCredentials/jiraCredentials.scss
+++ b/app/src/componentLibrary/breadcrumbs/meatball/meatball.scss
@@ -1,5 +1,5 @@
/*!
- * Copyright 2019 EPAM Systems
+ * Copyright 2022 EPAM Systems
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -14,34 +14,33 @@
* limitations under the License.
*/
-.field-title {
- min-width: 182px;
- padding-right: 30px;
+.meatball-popover-content {
+ color: $COLOR--e-300;
font-size: 13px;
font-family: $FONT-REGULAR;
- text-align: right;
- &.dark-view {
- min-width: 160px;
- width: 160px;
- text-align: left;
- padding-right: 0;
- margin-right: 16px;
- color: $COLOR--dirty-gray;
- }
- @media (max-width: $SCREEN_XS_MAX) {
- width: 100%;
- margin-bottom: 8px;
- padding: 0;
- text-align: left;
- }
+ line-height: 20px;
+ width: max-content;
}
-.field-wrapper {
- width: 280px;
- padding: 0;
- margin: 0;
- @media (max-width: $SCREEN_XS_MAX) {
- max-width: 100%;
- margin-bottom: 8px;
+.meatball-popover-content-row {
+ height: 20px;
+
+ + .meatball-popover-content-row {
+ margin-top: 8px;
}
}
+
+.next-level-icon {
+ display: inline-block;
+ height: 20px;
+ width: 12px;
+ background-image: url(../img/next-level.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ margin-right: 4px;
+}
+
+.popover-wrapper {
+ display: inline-block;
+ vertical-align: top;
+}
diff --git a/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/index.js b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/index.js
new file mode 100644
index 0000000000..39406e8a97
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { MeatballIconComponent } from './meatballIconComponent';
diff --git a/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.jsx b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.jsx
new file mode 100644
index 0000000000..314b558054
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.jsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+import Parser from 'html-react-parser';
+import MeatballIcon from '../../img/meatball-inline.svg';
+import styles from './meatballIconComponent.scss';
+
+const cx = classNames.bind(styles);
+
+export const MeatballIconComponent = ({ isPopoverOpen }) => (
+ {Parser(MeatballIcon)}
+);
+
+MeatballIconComponent.propTypes = {
+ isPopoverOpen: PropTypes.bool,
+};
+
+MeatballIconComponent.defaultProps = {
+ isPopoverOpen: false,
+};
diff --git a/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.scss b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.scss
new file mode 100644
index 0000000000..0b8a5374f7
--- /dev/null
+++ b/app/src/componentLibrary/breadcrumbs/meatball/meatballIconComponent/meatballIconComponent.scss
@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin meatball-icon-color($meatballIconColor) {
+ svg path {
+ fill: $meatballIconColor;
+ }
+}
+
+.meatball-icon {
+ display: inline-block;
+ height: 20px;
+ width: 16px;
+ vertical-align: top;
+
+ &:hover {
+ @include meatball-icon-color($COLOR--topaz-hover-2);
+ }
+
+ &.active {
+ @include meatball-icon-color($COLOR--topaz-2);
+ }
+
+ svg {
+ vertical-align: middle;
+ }
+}
diff --git a/app/src/componentLibrary/button/README.md b/app/src/componentLibrary/button/README.md
new file mode 100644
index 0000000000..75e7bd9716
--- /dev/null
+++ b/app/src/componentLibrary/button/README.md
@@ -0,0 +1,29 @@
+## **Button**
+
+Min width - 120px. Max width - flexible.
+
+### Props:
+
+- **type**: _string_, optional, default = "button"
+- **disabled**: _bool_, optional, default = false
+- **variant**: _string_, optional, default = "topaz"
+- **wide**: _bool_, optional, default = false
+- **startIcon**: _string(imported svg icon)_, optional, default = ""
+- **endIcon**: _string(imported svg icon)_, optional, default = ""
+- **children**: _node_, optional, default= ""
+- **customClassName**: _string_, optional, default= ""
+- **dataAutomationId**: _string_, optional, default = ''
+
+### Events:
+
+- **onClick**
+
+### Variants
+
+The Button comes with variants: _topaz_ (default), _ghost_, _danger_ and _text_.
+And similar variants for dark theme: _dark-topaz_, _dark-ghost_ and _dark-text_.
+
+### Icon
+
+Only text variant can be used with icon. You can pass imported svg icon
+via _startIcon_ or _endIcon_ props to display it on the left or right respectively.
diff --git a/app/src/componentLibrary/button/button.jsx b/app/src/componentLibrary/button/button.jsx
new file mode 100644
index 0000000000..274b802978
--- /dev/null
+++ b/app/src/componentLibrary/button/button.jsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Parser from 'html-react-parser';
+import styles from './button.scss';
+
+const cx = classNames.bind(styles);
+
+export const Button = ({
+ variant,
+ startIcon,
+ endIcon,
+ wide,
+ type,
+ children,
+ disabled,
+ onClick,
+ form,
+ title,
+ customClassName,
+ dataAutomationId,
+}) => {
+ const classes = cx('button', variant, customClassName, {
+ disabled,
+ wide,
+ });
+
+ const icon = (variant === 'text' || variant === 'dark-text') && (startIcon || endIcon);
+
+ return (
+
+ );
+};
+
+Button.propTypes = {
+ variant: PropTypes.string,
+ startIcon: PropTypes.string,
+ endIcon: PropTypes.string,
+ wide: PropTypes.bool,
+ children: PropTypes.node,
+ disabled: PropTypes.bool,
+ type: PropTypes.string,
+ onClick: PropTypes.func,
+ form: PropTypes.string,
+ title: PropTypes.string,
+ customClassName: PropTypes.string,
+ dataAutomationId: PropTypes.string,
+};
+
+Button.defaultProps = {
+ variant: 'topaz',
+ startIcon: '',
+ endIcon: '',
+ wide: false,
+ children: '',
+ disabled: false,
+ type: 'button',
+ onClick: () => {},
+ form: null,
+ title: '',
+ customClassName: '',
+ dataAutomationId: '',
+};
diff --git a/app/src/componentLibrary/button/button.scss b/app/src/componentLibrary/button/button.scss
new file mode 100644
index 0000000000..d540c2472d
--- /dev/null
+++ b/app/src/componentLibrary/button/button.scss
@@ -0,0 +1,203 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.button {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 120px;
+ height: 36px;
+ padding: 9px 16px 7px;
+ margin: 0;
+ outline: none;
+ border-radius: 3px;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 13px;
+ line-height: 20px;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+.topaz {
+ border: 1px solid $COLOR--topaz-2;
+ background-color: $COLOR--topaz-2;
+ color: $COLOR--bg-000;
+ &:hover:not(.disabled) {
+ border: 1px solid $COLOR--topaz-hover-2;
+ background-color: $COLOR--topaz-hover-2;
+ }
+ &:active:not(.disabled) {
+ border: 1px solid $COLOR--topaz-pressed;
+ background-color: $COLOR--topaz-pressed;
+ }
+ &:focus:not(.disabled, :active) {
+ border: 2px solid $COLOR--topaz-focused;
+ }
+}
+
+.ghost {
+ border: 1px solid $COLOR--topaz-2;
+ background-color: transparent;
+ color: $COLOR--almost-black;
+ &:hover:not(.disabled) {
+ border: 1px solid $COLOR--topaz-hover-2;
+ }
+ &:active:not(.disabled) {
+ border: 1px solid $COLOR--topaz-pressed;
+ }
+ &:focus:not(.disabled, :active) {
+ border: 2px solid $COLOR--topaz-focused;
+ }
+}
+
+.danger {
+ border: 1px solid $COLOR--red-failed-2;
+ background-color: $COLOR--red-failed-2;
+ color: $COLOR--bg-000;
+ &:hover:not(.disabled) {
+ opacity: 0.9;
+ }
+ &:active:not(.disabled) {
+ border: 1px solid $COLOR--red-pressed;
+ background-color: $COLOR--red-pressed;
+ }
+ &:focus:not(.disabled, :active) {
+ border: 2px solid $COLOR--red-focused;
+ }
+}
+
+.text {
+ min-width: auto;
+ height: auto;
+ border: 0;
+ padding: 0;
+ background: none;
+ color: $COLOR--topaz-2;
+ line-height: 22px;
+ &:hover:not(.disabled) {
+ color: $COLOR--topaz-hover-2;
+ svg * {
+ fill: $COLOR--topaz-hover-2;
+ }
+ }
+ &:active:not(.disabled) {
+ color: $COLOR--topaz-pressed;
+ svg * {
+ fill: $COLOR--topaz-pressed;
+ }
+ }
+ &:focus:not(.disabled, :active) {
+ color: $COLOR--topaz-focused;
+ svg * {
+ fill: $COLOR--topaz-focused;
+ }
+ }
+ svg * {
+ fill: $COLOR--topaz-2;
+ }
+}
+
+.dark-topaz {
+ border: 1px solid $COLOR--darkmode-topaz-main;
+ background-color: $COLOR--darkmode-topaz-main;
+ color: $COLOR--bg-000;
+ &:hover:not(.disabled) {
+ border: 1px solid $COLOR--darkmode-topaz-hover;
+ background-color: $COLOR--darkmode-topaz-hover;
+ }
+ &:active:not(.disabled) {
+ border: 1px solid $COLOR--topaz-pressed;
+ background-color: $COLOR--topaz-pressed;
+ }
+ &:focus:not(.disabled, :active) {
+ border: 2px solid $COLOR--darkmode-topaz-focused;
+ }
+}
+
+.dark-ghost {
+ border: 1px solid $COLOR--darkmode-topaz-main;
+ background-color: transparent;
+ color: $COLOR--darkmode-gray-50;
+ &:hover:not(.disabled) {
+ border: 1px solid $COLOR--darkmode-topaz-hover;
+ }
+ &:active:not(.disabled) {
+ border: 1px solid $COLOR--topaz-pressed;
+ }
+ &:focus:not(.disabled, :active) {
+ border: 2px solid $COLOR--darkmode-topaz-focused;
+ }
+}
+
+.dark-text {
+ min-width: auto;
+ height: auto;
+ border: 0;
+ padding: 0;
+ background: none;
+ line-height: 22px;
+ color: $COLOR--darkmode-topaz-text;
+ &:hover:not(.disabled) {
+ color: $COLOR--darkmode-topaz-hover;
+ svg * {
+ fill: $COLOR--darkmode-topaz-hover;
+ }
+ }
+ &:active:not(.disabled) {
+ color: $COLOR--darkmode-topaz-pressed;
+ svg * {
+ fill: $COLOR--darkmode-topaz-pressed;
+ }
+ }
+ &:focus:not(.disabled, :active) {
+ color: $COLOR--darkmode-topaz-focused;
+ svg * {
+ fill: $COLOR--darkmode-topaz-focused;
+ }
+ }
+ svg * {
+ fill: $COLOR--darkmode-topaz-text;
+ }
+}
+
+.wide {
+ padding: 9px 47px 7px;
+ margin: 0;
+}
+
+.icon {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+}
+
+.start-icon {
+ margin: auto 8px auto 0;
+}
+.end-icon {
+ margin: auto 0 auto 8px;
+ order: 1;
+}
+
+.disabled:not(.dark-topaz, .dark-ghost, .dark-text) {
+ opacity: 0.3;
+ cursor: default;
+}
+
+.disabled:not(.topaz, .ghost, .text) {
+ opacity: 0.5;
+ cursor: default;
+}
diff --git a/app/src/componentLibrary/button/index.js b/app/src/componentLibrary/button/index.js
new file mode 100644
index 0000000000..174cb5a4dc
--- /dev/null
+++ b/app/src/componentLibrary/button/index.js
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from './button';
+
+export { Button };
+
+export default Button;
diff --git a/app/src/componentLibrary/checkbox/README.md b/app/src/componentLibrary/checkbox/README.md
new file mode 100644
index 0000000000..31e92577b6
--- /dev/null
+++ b/app/src/componentLibrary/checkbox/README.md
@@ -0,0 +1,20 @@
+## **Checkbox with optional text**
+
+### Props:
+
+- **children**: _node_, optional, default ""
+- **value**: _bool_, optional, default = false
+- **disabled**: _bool_, optional, default = false
+- **variant**: _sting_, optional, default = "light"
+- **className**: _string_, optional, default = ""
+- **dataAutomationId**: _string_, optional, default = ''
+
+### Events:
+
+- **onFocus**
+- **onBlur**
+- **onChange**
+
+### Variants:
+
+Checkbox can be used in two variants: **light** for light background and **dark** for dark background.
diff --git a/app/src/componentLibrary/checkbox/checkbox.jsx b/app/src/componentLibrary/checkbox/checkbox.jsx
new file mode 100644
index 0000000000..ec58ac1090
--- /dev/null
+++ b/app/src/componentLibrary/checkbox/checkbox.jsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { useRef } from 'react';
+import styles from './checkbox.scss';
+
+const cx = classNames.bind(styles);
+
+export const Checkbox = ({
+ children,
+ disabled,
+ onChange,
+ onFocus,
+ onBlur,
+ className,
+ value,
+ variant,
+ dataAutomationId,
+}) => {
+ const inputRef = useRef(null);
+
+ const handleKeyDown = (event) => {
+ const { keyCode } = event;
+ const spaceKeyCode = 32;
+ const enterKeyCode = 13;
+
+ if (keyCode === spaceKeyCode) {
+ event.preventDefault();
+ return;
+ }
+
+ if (keyCode === enterKeyCode) {
+ event.preventDefault();
+ inputRef.current.click();
+ }
+ };
+
+ return (
+ // eslint-disable-next-line
+
+ );
+};
+Checkbox.propTypes = {
+ variant: PropTypes.string,
+ children: PropTypes.node,
+ value: PropTypes.bool,
+ disabled: PropTypes.bool,
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ className: PropTypes.string,
+ dataAutomationId: PropTypes.string,
+};
+Checkbox.defaultProps = {
+ variant: 'light',
+ children: '',
+ value: false,
+ disabled: false,
+ onChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ className: '',
+ dataAutomationId: '',
+};
diff --git a/app/src/componentLibrary/checkbox/checkbox.scss b/app/src/componentLibrary/checkbox/checkbox.scss
new file mode 100644
index 0000000000..e0f40a5d2b
--- /dev/null
+++ b/app/src/componentLibrary/checkbox/checkbox.scss
@@ -0,0 +1,134 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin checkboxContainer($color, $opacity) {
+ display: inline-flex;
+ align-items: center;
+ padding-left: 24px;
+ color: $color;
+ border-color: $color;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 13px;
+ line-height: 20px;
+ .disabled {
+ @include disabled-state($opacity);
+ }
+}
+
+@mixin checked-state($borderColor, $backgroundColor) {
+ border-color: $borderColor;
+ background-color: $backgroundColor;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 4.25L4.5 7.25L10.5 0.75' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+@mixin disabled-state($opacity) {
+ opacity: $opacity;
+ pointer-events: none;
+}
+
+.input {
+ position: absolute;
+ opacity: 0;
+ top: 0;
+ left: 0;
+}
+
+.checkbox {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border: 1px solid $COLOR--e-200;
+ border-radius: 3px;
+ margin-left: -24px;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+.children-container {
+ cursor: pointer;
+
+ & > a:focus-visible {
+ outline: none;
+ text-decoration: underline;
+ color: $COLOR--topaz-focused;
+ }
+
+ & > a {
+ color: $COLOR--topaz-2;
+ text-decoration: none;
+ }
+}
+
+.light {
+ @include checkboxContainer($COLOR--almost-black, 0.3);
+ .input {
+ &:checked + .checkbox {
+ @include checked-state($COLOR--topaz-2, $COLOR--topaz-2);
+ }
+ &:hover + .checkbox {
+ border-color: $COLOR--e-400;
+ }
+ &:active:not(:disabled) + .checkbox {
+ border: 2px solid $COLOR--topaz-focused;
+ }
+ &:checked:hover + .checkbox {
+ @include checked-state($COLOR--topaz-hover-2, $COLOR--topaz-hover-2);
+ }
+ &:checked:active:not(:disabled) + .checkbox {
+ @include checked-state($COLOR--topaz-focused, $COLOR--topaz-focused);
+ }
+ &:disabled + .checkbox {
+ border-color: $COLOR--e-200;
+ }
+ &:checked:disabled + .checkbox {
+ @include checked-state($COLOR--topaz-2, $COLOR--topaz-2);
+ @include disabled-state(0.3);
+ }
+ &:focus + .checkbox {
+ border: 2px solid $COLOR--topaz-focused;
+ }
+ }
+}
+
+.dark {
+ @include checkboxContainer($COLOR--darkmode-gray-100, 0.5);
+ .input {
+ &:checked + .checkbox {
+ @include checked-state($COLOR--darkmode-topaz-main, $COLOR--darkmode-topaz-main);
+ }
+ &:hover + .checkbox {
+ border-color: $COLOR--darkmode-gray-50;
+ }
+ &:active:not(:disabled) + .checkbox {
+ border: 2px solid $COLOR--darkmode-topaz-focused;
+ }
+ &:checked:hover + .checkbox {
+ @include checked-state($COLOR--darkmode-topaz-hover, $COLOR--darkmode-topaz-hover);
+ }
+ &:checked:active:not(:disabled) + .checkbox {
+ @include checked-state($COLOR--darkmode-topaz-focused, $COLOR--darkmode-topaz-focused);
+ }
+ &:disabled + .checkbox {
+ border-color: $COLOR--darkmode-gray-100;
+ }
+ &:checked:disabled + .checkbox {
+ @include checked-state($COLOR--darkmode-topaz-main, $COLOR--darkmode-topaz-main);
+ @include disabled-state(0.5);
+ }
+ }
+}
diff --git a/app/src/componentLibrary/checkbox/index.js b/app/src/componentLibrary/checkbox/index.js
new file mode 100644
index 0000000000..9129b30319
--- /dev/null
+++ b/app/src/componentLibrary/checkbox/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Checkbox } from './checkbox';
diff --git a/app/src/componentLibrary/datePicker/README.md b/app/src/componentLibrary/datePicker/README.md
new file mode 100644
index 0000000000..8dc876e561
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/README.md
@@ -0,0 +1,26 @@
+## **DatePicker**
+
+width - 380px. Max height - flexible.
+
+### Props:
+
+- **disabled** : _bool_, optional, default = false
+- **endDate** : _null_,_Date_, optional, default = null
+- **startDate** : _Date_, optional, default = new Date()
+- **selectsRange** : _bool_, optional, default = false
+- **customClassName** : _string_, optional, default : ""
+- **customTimeInput** : _node_, optional, default = null
+- **shouldCloseOnSelect** : _bool_, optional, default = false
+- **showPopperArrow** : _bool_, optional, default=false
+- **popperClassName** : _string_, optional, default = ""
+- **calendarClassName** : _string_, optional, default = ""
+- **fixedHeight** : _bool_, optional, default = false
+- **children** : _node_, optional, default = null
+- **headerNodes** : _node_, optional, default = null
+- **value** : _string_, optional, default = new Date()
+
+### Events
+
+- **onChange**
+- **onBlur**
+- **onFocus**
diff --git a/app/src/componentLibrary/datePicker/datePicker.jsx b/app/src/componentLibrary/datePicker/datePicker.jsx
new file mode 100644
index 0000000000..8ecfed40f8
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/datePicker.jsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ReactDatePicker, { registerLocale } from 'react-datepicker';
+import classNames from 'classnames/bind';
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { be, ru, enGB, uk, zhCN } from 'date-fns/locale';
+import { langSelector } from 'controllers/lang';
+import { useSelector } from 'react-redux';
+import styles from './datePicker.scss';
+import { DatePickerHeader } from './header';
+
+const cx = classNames.bind(styles);
+const currentLanguageToLocale = {
+ en: enGB,
+ be,
+ ru,
+ uk,
+ zh: zhCN,
+};
+
+export const DatePicker = ({
+ value,
+ onChange,
+ disabled,
+ onBlur,
+ onFocus,
+ endDate,
+ startDate,
+ selectsRange,
+ headerNodes,
+ customClassName,
+ customTimeInput,
+ shouldCloseOnSelect,
+ showPopperArrow,
+ children,
+ popperClassName,
+ calendarClassName,
+ fixedHeight,
+}) => {
+ const language = useSelector(langSelector);
+ const startDateToString = startDate && startDate.toDateString();
+ const endDateToString = endDate && endDate.toDateString();
+ const isValidEndDate = endDate > startDate;
+
+ useMemo(() => registerLocale(language, currentLanguageToLocale[language]), [language]);
+
+ const getDayClassName = (displayedDates) => {
+ const displayedDateToString = displayedDates.toDateString();
+ const isCurrentDate = displayedDateToString === startDateToString;
+ const isEndDate = isValidEndDate && displayedDateToString === endDateToString;
+
+ const isInsideSelectedRange =
+ ((startDate && endDate) || selectsRange) &&
+ displayedDates > startDate &&
+ displayedDates < endDate;
+
+ return cx('date', {
+ 'current-date': isCurrentDate,
+ 'selected-range': isInsideSelectedRange && !isEndDate,
+ 'end-date': isEndDate && isValidEndDate,
+ disabled,
+ });
+ };
+
+ const handleChange = (dates) => {
+ if (selectsRange) {
+ const [dateFrom, dateTo] = dates;
+ onChange({
+ startDate: dateFrom,
+ endDate: dateTo,
+ });
+ } else {
+ onChange(dates);
+ }
+ };
+
+ return (
+ (
+
+ )}
+ onChange={handleChange}
+ onBlur={onBlur}
+ onFocus={onFocus}
+ customTimeInput={customTimeInput}
+ showTimeInput={Boolean(customTimeInput)}
+ popperClassName={cx(popperClassName, 'popper')}
+ >
+ {children}
+
+ );
+};
+DatePicker.propTypes = {
+ onChange: PropTypes.func,
+ onBlur: PropTypes.func,
+ onFocus: PropTypes.func,
+ headerNodes: PropTypes.node,
+ disabled: PropTypes.bool,
+ selectsRange: PropTypes.bool,
+ shouldCloseOnSelect: PropTypes.bool,
+ showPopperArrow: PropTypes.bool,
+ fixedHeight: PropTypes.bool,
+ startDate: PropTypes.instanceOf(Date),
+ endDate: PropTypes.instanceOf(Date),
+ customClassName: PropTypes.string,
+ popperClassName: PropTypes.string,
+ calendarClassName: PropTypes.string,
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+ children: PropTypes.element,
+ customTimeInput: PropTypes.element,
+};
+DatePicker.defaultProps = {
+ onChange: () => {},
+ onBlur: () => {},
+ onFocus: () => {},
+ headerNodes: null,
+ disabled: false,
+ selectsRange: false,
+ shouldCloseOnSelect: false,
+ showPopperArrow: false,
+ fixedHeight: false,
+ startDate: new Date(),
+ endDate: null,
+ customClassName: '',
+ popperClassName: '',
+ calendarClassName: '',
+ children: null,
+ value: new Date(),
+};
diff --git a/app/src/componentLibrary/datePicker/datePicker.scss b/app/src/componentLibrary/datePicker/datePicker.scss
new file mode 100644
index 0000000000..e213e101ef
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/datePicker.scss
@@ -0,0 +1,219 @@
+/*!
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$DAY_OF_THE_WEEK_Z_INDEX: 3;
+$DAY_OF_THE_WEEK_HOVERED_Z_INDEX: 2;
+
+@mixin setMonthContainerProperties {
+ .react-datepicker__month-container {
+ width: 100%;
+ height: 100%;
+ float: none;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ @include setCustomHeaderProperties;
+ @include setMothProperties;
+ }
+}
+
+@mixin setCustomHeaderProperties {
+ .react-datepicker__header.react-datepicker__header--custom {
+ width: 100%;
+ background-color: $COLOR--bg-000;
+ border-bottom: none;
+ padding: 0;
+ @include setDaysNameOfTheWeekProperties;
+ }
+}
+
+@mixin setMothProperties {
+ .react-datepicker__month {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ row-gap: 8px;
+ @include setDaysDigitsContainerProperties;
+ }
+}
+
+@mixin setDaysDigitsContainerProperties {
+ .react-datepicker__week {
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-family: $FONT-ROBOTO-REGULAR;
+ color: $COLOR--darkmode-gray-500;
+ line-height: 20px;
+ font-size: 13px;
+ .react-datepicker__day--range-end:first-child:before {
+ display: none;
+ }
+ }
+}
+
+@mixin setDaysNameOfTheWeekProperties {
+ .react-datepicker__day-names {
+ display: flex;
+ height: 40px;
+ justify-content: space-between;
+ font-family: $FONT-ROBOTO-BOLD;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--darkmode-gray-500;
+ vertical-align: middle;
+ }
+}
+
+@mixin setHoverState($backgroundColor, $textColor: inherit) {
+ border-radius: 50%;
+ border: 1px solid $COLOR--topaz-2;
+ background-color: $backgroundColor;
+ line-height: 38px;
+ color: $textColor;
+}
+
+@mixin removeOutline {
+ &:focus-visible {
+ outline: none;
+ }
+}
+
+@mixin verticalAlign($height) {
+ height: $height;
+ line-height: $height;
+}
+
+@mixin drawBeforePseudoElement {
+ position: absolute;
+ content: '';
+ height: 32px;
+ background-color: $COLOR--bg-200;
+ width: 16px;
+ top: 0;
+ left: -9px;
+ z-index: $Z-INDEX-DEFAULT;
+}
+
+@mixin drawAfterPseudoElement($displayValue, $borderWidth) {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 40px;
+ height: 40px;
+ border: $borderWidth solid $COLOR--topaz-2;
+ border-radius: 50%;
+ display: $displayValue;
+ z-index: $DAY_OF_THE_WEEK_HOVERED_Z_INDEX;
+ box-sizing: border-box;
+}
+
+.calendar {
+ box-sizing: border-box;
+ background-color: $COLOR--bg-000;
+ width: 344px;
+ padding: 30px 32px 32px;
+ border-radius: 8px;
+ box-shadow: 0px 8px 40px rgba($COLOR--darkmode-bg, 0.15);
+ border: none;
+ :global {
+ @include setMonthContainerProperties;
+ }
+
+ .current-date,
+ .date {
+ width: 40px;
+ margin: 0;
+ box-sizing: border-box;
+ @include verticalAlign(40px);
+ @include removeOutline;
+ }
+
+ .date {
+ background-color: transparent;
+ border-radius: none;
+ color: inherit;
+ }
+
+ .current-date,
+ .current-date:hover {
+ position: relative;
+ z-index: $DAY_OF_THE_WEEK_Z_INDEX;
+ font-family: $FONT-ROBOTO-BOLD;
+ @include setHoverState($COLOR--topaz-2, $COLOR--white-two);
+ }
+
+ .date:hover:not(.current-date):not(.selected-range):not(.end-date) {
+ @include setHoverState(transparent);
+ }
+
+ .end-date {
+ position: relative;
+ border-radius: 50%;
+ background-color: $COLOR--topaz-2;
+ font-family: $FONT-ROBOTO-BOLD;
+ color: $COLOR--white-two;
+ }
+
+ .end-date::after {
+ @include drawAfterPseudoElement(block, 10px);
+ }
+
+ .end-date::before {
+ @include drawBeforePseudoElement;
+ top: 4px;
+ }
+
+ .selected-range {
+ background-color: $COLOR--bg-200;
+ border-radius: 8px;
+ @include verticalAlign(32px);
+ position: relative;
+ &:hover {
+ @include verticalAlign(40px);
+ border-radius: 50%;
+ background: $COLOR--bg-200;
+ &::after {
+ display: block;
+ }
+ &:not(:first-child)::before {
+ top: 4px;
+ }
+ }
+ }
+
+ .selected-range::after {
+ @include drawAfterPseudoElement(none, 1px);
+ }
+
+ .selected-range:not(:first-child)::before {
+ @include drawBeforePseudoElement;
+ }
+
+ .disabled {
+ color: $COLOR--e-400;
+ background-color: transparent;
+ @include removeOutline;
+ }
+}
+.popper {
+ z-index: $Z-INDEX-POPUP;
+}
diff --git a/app/src/componentLibrary/datePicker/header/datePickerHeader.jsx b/app/src/componentLibrary/datePicker/header/datePickerHeader.jsx
new file mode 100644
index 0000000000..1e0bc2df56
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/header/datePickerHeader.jsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Parser from 'html-react-parser';
+import classNames from 'classnames/bind';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+import { Dropdown } from 'componentLibrary/dropdown';
+import { COMMON_LOCALE_KEYS, months } from 'common/constants/localization';
+import styles from './datePickerHeader.scss';
+import DatePickerHeaderIcon from './img/calendar-arrow-inline.svg';
+
+const cx = classNames.bind(styles);
+
+const getYearsFrom = (start, amountYearsToGenerate = 20) => {
+ const yearsFromCurrent = start + amountYearsToGenerate;
+ return new Array(yearsFromCurrent - start).fill().map((_, i) => start - i);
+};
+
+export const DatePickerHeader = ({
+ date,
+ changeYear,
+ changeMonth,
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled,
+ headerNodes,
+ customClassName,
+}) => {
+ const { formatMessage } = useIntl();
+ const year = date.getFullYear();
+ const month = date.getMonth();
+
+ const monthDropdownOptions = useMemo(
+ () =>
+ months.reduce((acc, monthValue, monthNumber) => {
+ return acc.concat({
+ value: monthNumber,
+ label: formatMessage(COMMON_LOCALE_KEYS[monthValue]),
+ });
+ }, []),
+ [],
+ );
+
+ const yearDropdownOptions = useMemo(() => {
+ const yearValues = getYearsFrom(year);
+ return yearValues.reduce(
+ (acc, yearValue) => acc.concat({ value: yearValue, label: yearValue }),
+ [],
+ );
+ }, []);
+
+ const displayedYear = yearDropdownOptions.find(({ value }) => value === year);
+
+ const displayedMonth = monthDropdownOptions[month];
+
+ return (
+ <>
+ {headerNodes ?
{headerNodes}
: null}
+
+
+ {Parser(DatePickerHeaderIcon)}
+
+
+
+
+
+
+ {Parser(DatePickerHeaderIcon)}
+
+
+
+ );
+};
+DatePickerHeader.propTypes = {
+ changeYear: PropTypes.func,
+ changeMonth: PropTypes.func,
+ decreaseMonth: PropTypes.func,
+ increaseMonth: PropTypes.func,
+ headerNodes: PropTypes.node,
+ date: PropTypes.instanceOf(Date),
+ prevMonthButtonDisabled: PropTypes.bool,
+ nextMonthButtonDisabled: PropTypes.bool,
+ customClassName: PropTypes.string,
+};
+DatePickerHeader.defaultProps = {
+ date: new Date(),
+ prevMonthButtonDisabled: false,
+ nextMonthButtonDisabled: false,
+ changeYear: () => {},
+ changeMonth: () => {},
+ decreaseMonth: () => {},
+ increaseMonth: () => {},
+ headerNodes: null,
+ customClassName: '',
+};
diff --git a/app/src/componentLibrary/datePicker/header/datePickerHeader.scss b/app/src/componentLibrary/datePicker/header/datePickerHeader.scss
new file mode 100644
index 0000000000..cc0c318a3b
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/header/datePickerHeader.scss
@@ -0,0 +1,77 @@
+/*!
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin arrowHoverState($arrow-color) {
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ svg > path {
+ fill: $arrow-color;
+ }
+ }
+}
+
+@mixin disabledState {
+ opacity: 0.3;
+ pointer-events: none;
+}
+
+@mixin setArrowDefaultProps {
+ align-self: center;
+ width: 16px;
+ height: 16px;
+ svg {
+ width: 16px;
+ height: 16px;
+ }
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: $COLOR--bg-000;
+ padding-bottom: 18px;
+
+ .dropdowns-wrapper {
+ display: flex;
+ align-items: center;
+ column-gap: 8px;
+ }
+
+ .icon-prev,
+ .icon-next {
+ @include setArrowDefaultProps();
+ @include arrowHoverState($COLOR--e-400);
+ &.disabled {
+ @include disabledState;
+ }
+ }
+
+ .icon-next {
+ transform: rotate(180deg);
+ }
+
+ .dropdown {
+ .toggle-button > span {
+ color: $COLOR--topaz-2;
+ font-family: $FONT-ROBOTO-BOLD;
+ }
+
+ .toggle-button:hover > span {
+ color: $COLOR--topaz-hover-2;
+ }
+ }
+}
diff --git a/app/src/componentLibrary/datePicker/header/img/calendar-arrow-inline.svg b/app/src/componentLibrary/datePicker/header/img/calendar-arrow-inline.svg
new file mode 100644
index 0000000000..0e9e1aabe8
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/header/img/calendar-arrow-inline.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/src/componentLibrary/datePicker/header/index.js b/app/src/componentLibrary/datePicker/header/index.js
new file mode 100644
index 0000000000..86e5cad1ca
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/header/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { DatePickerHeader } from './datePickerHeader';
diff --git a/app/src/componentLibrary/datePicker/index.js b/app/src/componentLibrary/datePicker/index.js
new file mode 100644
index 0000000000..5d3231b588
--- /dev/null
+++ b/app/src/componentLibrary/datePicker/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { DatePicker } from './datePicker';
diff --git a/app/src/componentLibrary/dropdown/README.md b/app/src/componentLibrary/dropdown/README.md
new file mode 100644
index 0000000000..52427f27f9
--- /dev/null
+++ b/app/src/componentLibrary/dropdown/README.md
@@ -0,0 +1,37 @@
+## **Dropdown**
+
+Default width - 240px
+
+### Props:
+
+- **value**: _string_ or _number_ or _object_, optional, default = ""
+- **options**: _array_, optional, default = []
+- **disabled**: _bool_, optional, default = false
+- **error**: _string_, optional, default = ""
+- **mobileDisabled**: _bool_, optional, default = false
+- **title**: _string_, optional, default = ""
+- **touched**: _bool_, optional, default = false
+- **icon**: _string(imported svg icon)_, optional, default = ""
+- **variant**: _string_, optional, default = "light"
+- **placeholder**: _string_, optional, default = ""
+- **defaultWidth**: _bool_, optional, default = true
+
+### Events:
+
+- **onChange**
+- **onFocus**
+- **onBlur**
+
+### Variants
+
+The Dropdown comes with theme variants: _light_ (default), _dark_ and _ghost_
+
+### Icon
+
+Only text variant can be used with icon. You can pass imported svg icon
+via _icon_ prop to display it on the left side
+
+### Default width
+
+By default, width is set to 240px.
+To disable this behavior set the _defaultWidth_ prop to false
diff --git a/app/src/componentLibrary/dropdown/constants.js b/app/src/componentLibrary/dropdown/constants.js
new file mode 100644
index 0000000000..7c37d29054
--- /dev/null
+++ b/app/src/componentLibrary/dropdown/constants.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const ARROW_DOWN_KEY_CODE = 40;
+export const ENTER_KEY_CODE = 13;
+export const SPACE_KEY_CODE = 32;
+export const ESCAPE_KEY_CODE = 27;
+export const TAB_KEY_CODE = 9;
+
+export const OPEN_DROPDOWN_KEY_CODES_MAP = {
+ [ENTER_KEY_CODE]: 'ENTER',
+ [SPACE_KEY_CODE]: 'SPACE',
+ [ARROW_DOWN_KEY_CODE]: 'ARROW_DOWN',
+};
+
+export const CLOSE_DROPDOWN_KEY_CODES_MAP = {
+ [ESCAPE_KEY_CODE]: 'ESCAPE',
+ [TAB_KEY_CODE]: 'TAB',
+};
diff --git a/app/src/componentLibrary/dropdown/dropdown.jsx b/app/src/componentLibrary/dropdown/dropdown.jsx
new file mode 100644
index 0000000000..4db397ab83
--- /dev/null
+++ b/app/src/componentLibrary/dropdown/dropdown.jsx
@@ -0,0 +1,304 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Parser from 'html-react-parser';
+import { Manager, Reference, Popper } from 'react-popper';
+import { ScrollWrapper } from 'components/main/scrollWrapper';
+import { useOnClickOutside } from 'common/hooks';
+import { useSelect } from 'downshift';
+import { DropdownOption } from './dropdownOption';
+import ArrowIcon from './img/arrow-inline.svg';
+import styles from './dropdown.scss';
+import {
+ CLOSE_DROPDOWN_KEY_CODES_MAP,
+ ENTER_KEY_CODE,
+ OPEN_DROPDOWN_KEY_CODES_MAP,
+} from './constants';
+import { calculateDefaultIndex, calculateNextIndex, calculatePrevIndex } from './utils';
+
+const cx = classNames.bind(styles);
+
+export const Dropdown = ({
+ value,
+ options,
+ disabled,
+ error,
+ onChange,
+ onFocus,
+ onBlur,
+ mobileDisabled,
+ title,
+ touched,
+ icon,
+ variant,
+ placeholder,
+ defaultWidth,
+ renderOption,
+ dataAutomationId,
+ transparentBackground,
+ className,
+ toggleButtonClassName,
+}) => {
+ const [isOpened, setOpened] = useState(false);
+ const containerRef = useRef(null);
+ const updatePosition = useRef(null);
+
+ const handleClickOutside = () => {
+ if (isOpened) {
+ setOpened(false);
+ onBlur();
+ }
+ };
+ useOnClickOutside(containerRef, handleClickOutside);
+
+ const handleChange = (option) => {
+ if (option.disabled) {
+ return;
+ }
+ onChange(option.value);
+ setOpened((prevState) => !prevState);
+ };
+
+ const defaultHighlightedIndex = calculateDefaultIndex(options, value);
+
+ const {
+ getToggleButtonProps,
+ getMenuProps,
+ getItemProps,
+ setHighlightedIndex,
+ highlightedIndex,
+ selectedItem,
+ } = useSelect({
+ items: options,
+ itemToString: (item) => item.label ?? placeholder,
+ onChange: handleChange,
+ selectedItem: value,
+ isOpen: isOpened,
+ circularNavigation: true,
+ defaultHighlightedIndex,
+ onHighlightedIndexChange: (changes) => {
+ switch (changes.type) {
+ case useSelect.stateChangeTypes.MenuKeyDownArrowUp:
+ return {
+ ...changes,
+ highlightedIndex: setHighlightedIndex(
+ calculatePrevIndex(changes.highlightedIndex, options),
+ ),
+ };
+
+ case useSelect.stateChangeTypes.MenuKeyDownArrowDown:
+ return {
+ ...changes,
+ highlightedIndex: setHighlightedIndex(
+ calculateNextIndex(changes.highlightedIndex, options),
+ ),
+ };
+
+ default:
+ return {
+ ...changes,
+ };
+ }
+ },
+ });
+
+ const onClickDropdown = () => {
+ if (!disabled) {
+ updatePosition.current();
+ setOpened((prevState) => !prevState);
+ isOpened ? onBlur() : onFocus();
+ }
+ };
+
+ const getDisplayedValue = () => {
+ if (!value && value !== false) return placeholder;
+ let displayedValue = (value && value.label) || value;
+ options.forEach((option) => {
+ if (option.value === value) {
+ displayedValue = option.label;
+ }
+ });
+ return displayedValue;
+ };
+
+ const handleToggleButtonKeyDown = (event) => {
+ const { keyCode } = event;
+ if (OPEN_DROPDOWN_KEY_CODES_MAP[keyCode] && !isOpened) {
+ event.preventDefault();
+ setHighlightedIndex(defaultHighlightedIndex);
+ updatePosition.current();
+ setOpened(true);
+ onFocus();
+ }
+ };
+
+ const handleKeyDownMenu = (event) => {
+ const { keyCode } = event;
+ if (keyCode === ENTER_KEY_CODE) {
+ const option = options[highlightedIndex];
+ handleChange(option);
+ setOpened(false);
+ onBlur();
+ return;
+ }
+
+ if (CLOSE_DROPDOWN_KEY_CODES_MAP[keyCode]) {
+ event.stopPropagation();
+ setOpened(false);
+ onBlur();
+ }
+ };
+
+ const renderOptions = () =>
+ options.map((option, index) => (
+ handleChange(option),
+ onMouseEnter: () => setHighlightedIndex(index),
+ })}
+ />
+ ));
+
+ return (
+
+
+ )}
+
+ );
+};
+
+FieldTextFlex.propTypes = {
+ value: PropTypes.string,
+ placeholder: PropTypes.string,
+ disabled: PropTypes.bool,
+ readonly: PropTypes.bool,
+ error: PropTypes.string,
+ touched: PropTypes.bool,
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ onKeyUp: PropTypes.func,
+ refFunction: PropTypes.func,
+ className: PropTypes.string,
+ label: PropTypes.string,
+ helpText: PropTypes.string,
+};
+
+FieldTextFlex.defaultProps = {
+ value: '',
+ placeholder: '',
+ disabled: false,
+ readonly: false,
+ error: '',
+ touched: false,
+ className: '',
+ onChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ onKeyUp: () => {},
+ refFunction: () => {},
+ label: '',
+ helpText: '',
+};
diff --git a/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
new file mode 100644
index 0000000000..0aa19abe79
--- /dev/null
+++ b/app/src/componentLibrary/fieldTextFlex/fieldTextFlex.scss
@@ -0,0 +1,80 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin additional-text($color) {
+ display: block;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 11px;
+ line-height: 16px;
+ color: $color;
+}
+
+.text-area {
+ width: 100%;
+ min-height: 72px;
+ padding: 9px 12px 7px;
+ outline: none;
+ border: 1px solid $COLOR--e-200;
+ border-radius: 3px;
+ box-sizing: border-box;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--almost-black;
+ resize: vertical;
+
+ &:hover {
+ border-color: $COLOR--e-300;
+ }
+
+ &:focus:not(.error.touched) {
+ border: 1px solid $COLOR--topaz-hover-2;
+ box-shadow: 0 0 0 1px $COLOR--topaz-hover-2;
+ }
+
+ &.error.touched {
+ border: 1px solid $COLOR--red-failed-2;
+ }
+
+ &::placeholder {
+ color: $COLOR--e-300;
+ }
+}
+
+.label {
+ display: block;
+ margin-bottom: 4px;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--almost-black;
+}
+
+.additional-content {
+ margin-top: 4px;
+ .error-text {
+ @include additional-text($COLOR--red-failed-2);
+ }
+
+ .help-text {
+ @include additional-text($COLOR--e-300);
+ }
+}
+
+.disabled {
+ opacity: 0.3;
+ pointer-events: none;
+}
diff --git a/app/src/componentLibrary/fieldTextFlex/img/resizer.svg b/app/src/componentLibrary/fieldTextFlex/img/resizer.svg
new file mode 100644
index 0000000000..7570debadd
--- /dev/null
+++ b/app/src/componentLibrary/fieldTextFlex/img/resizer.svg
@@ -0,0 +1,4 @@
+
diff --git a/app/src/componentLibrary/fieldTextFlex/index.js b/app/src/componentLibrary/fieldTextFlex/index.js
new file mode 100644
index 0000000000..bb025164a7
--- /dev/null
+++ b/app/src/componentLibrary/fieldTextFlex/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { FieldTextFlex } from './fieldTextFlex';
diff --git a/app/src/componentLibrary/modal/index.js b/app/src/componentLibrary/modal/index.js
new file mode 100644
index 0000000000..6b93d43b19
--- /dev/null
+++ b/app/src/componentLibrary/modal/index.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ModalLayout } from './modalLayout/modalLayout';
+export { ModalContent } from './modalLayout/modalContent';
+export { ModalHeader } from './modalLayout/modalHeader/modalHeader';
+export { ModalFooter } from './modalLayout/modalFooter/modalFooter';
diff --git a/app/src/componentLibrary/modal/modalLayout/README.md b/app/src/componentLibrary/modal/modalLayout/README.md
new file mode 100644
index 0000000000..883924a45e
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/README.md
@@ -0,0 +1,43 @@
+## **Modal layout**
+
+Default width - 480px, height 100%
+
+> okButton format:
+
+```
+{
+ text: _string_, // required
+ danger: _bool_,
+ onClick: _func_,
+ disabled: _bool_,
+ eventInfo: object, // {category: "", action: "", label: ""}
+ attributes: object, // html attributes f.e. {form: 'formId"}
+}
+```
+
+> cancelButton format:
+
+```
+{
+ text: _string_, // required
+ eventInfo: object, // {category: "", action: "", label: ""}
+}
+```
+
+### Props :
+
+- **title**: _string_, optional, default = ""
+- **headerNode**: _node_, optional, default = null
+- **children**: _node_, optional, default = null
+- **footerNode**: _node_, optional, default = null
+- **okButton**: _object_, optional, default = null
+- **cancelButton**: _object_, optional, default = null
+- **className**: _string_, optional, default = ""
+- **modalSize**: _string_, optional, default = "default"
+- **onClose**: _function_, optional, default = () => {}
+
+### Variants
+
+the modal layout comes with different width sizes managed via modalSize prop:
+_small_ - 320px, _default_(default) - 480px, _large_ - 720px.
+Modal layout styles can be changed using the className props.
diff --git a/app/src/componentLibrary/modal/modalLayout/img/close-icon-inline.svg b/app/src/componentLibrary/modal/modalLayout/img/close-icon-inline.svg
new file mode 100644
index 0000000000..2ce104d169
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/img/close-icon-inline.svg
@@ -0,0 +1,3 @@
+
diff --git a/app/src/componentLibrary/modal/modalLayout/modalContent/index.js b/app/src/componentLibrary/modal/modalLayout/modalContent/index.js
new file mode 100644
index 0000000000..7229fb64eb
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalContent/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ModalContent } from './modalContent';
diff --git a/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.jsx b/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.jsx
new file mode 100644
index 0000000000..dcb5454aac
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.jsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './modalContent.scss';
+
+const cx = classNames.bind(styles);
+
+export const ModalContent = ({ children }) =>
{children}
;
+ModalContent.propTypes = {
+ children: PropTypes.node,
+};
+ModalContent.defaultProps = {
+ children: null,
+};
diff --git a/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.scss b/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.scss
new file mode 100644
index 0000000000..79a214a60b
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalContent/modalContent.scss
@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-content {
+ margin-top: 13px;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--almost-black;
+ white-space: pre-line;
+ word-break: break-word;
+}
diff --git a/app/src/componentLibrary/modal/modalLayout/modalFooter/index.js b/app/src/componentLibrary/modal/modalLayout/modalFooter/index.js
new file mode 100644
index 0000000000..bb574d47d4
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalFooter/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ModalFooter } from './modalFooter';
diff --git a/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.jsx b/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.jsx
new file mode 100644
index 0000000000..dba823302b
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.jsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { Button } from 'componentLibrary/button';
+import styles from './modalFooter.scss';
+
+const cx = classNames.bind(styles);
+
+export const ModalFooter = ({ okButton, cancelButton, closeHandler, footerNode }) => {
+ return (
+
+ {footerNode && footerNode}
+
+ {cancelButton && (
+
+
+
+ )}
+ {okButton && (
+
+
+
+ )}
+
+
+ );
+};
+ModalFooter.propTypes = {
+ okButton: PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ danger: PropTypes.bool,
+ onClick: PropTypes.func,
+ attributes: PropTypes.shape({
+ type: PropTypes.string,
+ form: PropTypes.string,
+ }),
+ }),
+ cancelButton: PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ }),
+ closeHandler: PropTypes.func,
+ footerNode: PropTypes.node,
+};
+ModalFooter.defaultProps = {
+ okButton: null,
+ cancelButton: null,
+ closeHandler: () => {},
+ footerNode: PropTypes.node,
+};
diff --git a/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.scss b/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.scss
new file mode 100644
index 0000000000..f5e86ff205
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalFooter/modalFooter.scss
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-footer {
+ position: relative;
+ width: 100%;
+ margin-top: 32px;
+}
+
+.buttons-block {
+ float: right;
+ white-space: nowrap;
+}
+
+.button-container {
+ display: inline-block;
+ min-width: 70px;
+ margin-right: 10px;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
diff --git a/app/src/componentLibrary/modal/modalLayout/modalHeader/index.js b/app/src/componentLibrary/modal/modalLayout/modalHeader/index.js
new file mode 100644
index 0000000000..52981cb854
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalHeader/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ModalHeader } from './modalHeader';
diff --git a/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.jsx b/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.jsx
new file mode 100644
index 0000000000..07eddf9c1b
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.jsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Parser from 'html-react-parser';
+import CloseIcon from '../img/close-icon-inline.svg';
+import styles from './modalHeader.scss';
+
+const cx = classNames.bind(styles);
+
+export const ModalHeader = ({ title, onClose, headerNode }) => (
+
+);
+ModalHeader.propTypes = {
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ onClose: PropTypes.func,
+ headerNode: PropTypes.node,
+};
+ModalHeader.defaultProps = {
+ title: '',
+ onClose: () => {},
+ headerNode: null,
+};
diff --git a/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.scss b/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.scss
new file mode 100644
index 0000000000..1bc7a3b8f7
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalHeader/modalHeader.scss
@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.modal-header {
+ position: relative;
+ font-family: $FONT-REGULAR;
+ font-size: 20px;
+ color: $COLOR--almost-black;
+}
+
+.modal-header-content {
+ display: flex;
+ justify-content: stretch;
+ align-items: center;
+ width: 100%;
+ padding-right: 30px;
+ box-sizing: border-box;
+}
+
+.modal-title {
+ flex-grow: 1;
+ line-height: 32px;
+ vertical-align: middle;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.close-modal-icon {
+ position: absolute;
+ top: 6px;
+ right: 0;
+ display: block;
+ width: 16px;
+ height: 16px;
+ vertical-align: middle;
+ cursor: pointer;
+
+ &:hover {
+ svg {
+ fill: $COLOR--e-400;
+ }
+ }
+
+ &:active {
+ svg {
+ fill: $COLOR--topaz-pressed;
+ }
+ }
+}
diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx b/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx
new file mode 100644
index 0000000000..b2763889a5
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalLayout.jsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Scrollbars } from 'react-custom-scrollbars';
+import { motion, AnimatePresence } from 'framer-motion';
+import classNames from 'classnames/bind';
+import { useOnClickOutside } from 'common/hooks';
+import { ModalContent } from './modalContent';
+import { ModalFooter } from './modalFooter';
+import { ModalHeader } from './modalHeader';
+import styles from './modalLayout.scss';
+
+const ESC_KEYCODE = 27;
+const cx = classNames.bind(styles);
+
+export const ModalLayout = ({
+ title,
+ headerNode,
+ children,
+ footerNode,
+ okButton,
+ cancelButton,
+ className,
+ modalSize,
+ onClose,
+ overlay,
+ allowCloseOutside,
+}) => {
+ const [isShown, setShown] = useState(false);
+ const modalRef = useRef();
+
+ const onKeydown = (e) => {
+ if (e.keyCode === ESC_KEYCODE) {
+ setShown(false);
+ }
+ };
+
+ useEffect(() => {
+ document.addEventListener('keydown', onKeydown, false);
+ setShown(true);
+ if (modalRef && modalRef.current) {
+ modalRef.current.focus();
+ }
+
+ return () => document.removeEventListener('keydown', onKeydown, false);
+ }, []);
+
+ const closeModal = () => {
+ setShown(false);
+ };
+
+ useOnClickOutside(modalRef, allowCloseOutside && closeModal);
+
+ return (
+
+ {isShown && (
+
+
+
+
+
+ {children}
+
+
+
+
+
+ )}
+
+ );
+};
+ModalLayout.propTypes = {
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ headerNode: PropTypes.node,
+ children: PropTypes.node,
+ footerNode: PropTypes.node,
+ okButton: PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ disabled: PropTypes.bool,
+ danger: PropTypes.bool,
+ onClick: PropTypes.func,
+ attributes: PropTypes.object,
+ }),
+ cancelButton: PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ }),
+ className: PropTypes.string,
+ modalSize: PropTypes.oneOf(['default', 'small', 'large']),
+ onClose: PropTypes.func,
+ overlay: PropTypes.string,
+ allowCloseOutside: PropTypes.bool,
+};
+ModalLayout.defaultProps = {
+ title: '',
+ headerNode: null,
+ children: null,
+ footerNode: null,
+ okButton: null,
+ cancelButton: null,
+ className: '',
+ modalSize: 'default',
+ onClose: () => {},
+ overlay: 'default',
+ allowCloseOutside: true,
+};
diff --git a/app/src/componentLibrary/modal/modalLayout/modalLayout.scss b/app/src/componentLibrary/modal/modalLayout/modalLayout.scss
new file mode 100644
index 0000000000..706e569033
--- /dev/null
+++ b/app/src/componentLibrary/modal/modalLayout/modalLayout.scss
@@ -0,0 +1,87 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$WIDTH-SMALL: 320px;
+$WIDTH-DEFAULT: 480px;
+$WIDTH-LARGE: 720px;
+
+$Z-INDEX-OVERLAY: 2;
+
+@mixin modalWidth($width) {
+ width: $width;
+
+ @media (max-width: $width) {
+ right: 10px;
+ left: 10px;
+ transform: none;
+ width: auto;
+ }
+}
+
+.modal-layout {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+}
+
+.scrolling-content {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ z-index: $Z-INDEX-OVERLAY;
+}
+
+.modal-window {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%);
+ display: inline-block;
+ margin-bottom: 10px;
+ padding: 32px 48px;
+ box-sizing: border-box;
+ background-color: $COLOR--bg-100;
+ text-align: left;
+ border-radius: 16px;
+ box-shadow: $BOX_SHADOW--modal-window;
+ opacity: 1;
+ outline: none;
+}
+
+.size-default {
+ @include modalWidth($WIDTH-DEFAULT);
+}
+
+.size-small {
+ @include modalWidth($WIDTH-SMALL);
+}
+
+.size-large {
+ @include modalWidth($WIDTH-LARGE);
+}
+
+.overlay-default {
+ background-color: rgba($COLOR--e-400, 0.35);
+ z-index: $Z_INDEX-OVERLAY;
+}
+
+.overlay-light-cyan {
+ background-color: rgba($COLOR--light-cyan, 0.7);
+ z-index: $Z_INDEX-OVERLAY;
+}
diff --git a/app/src/componentLibrary/popover/README.md b/app/src/componentLibrary/popover/README.md
new file mode 100644
index 0000000000..a7c49f4fb5
--- /dev/null
+++ b/app/src/componentLibrary/popover/README.md
@@ -0,0 +1,47 @@
+## **Popover with optional title and content**
+
+### Popover props:
+
+- **children**: _node_, optional, default = null
+- **title**: _string_, optional, default = ''
+- **side**: _string_, optional, default = 'top'
+- **arrowPosition**: _string_, optional, default = 'left'
+- **onClose**: _func_, optional, default = () => {}
+- **parentRef**: _object_, optional, default = null
+- **dataAutomationId**: _string_, optional, default = ''
+
+### trianglePosition
+
+The triangle can be in different places.
+The sides can be the following: top, bottom, left and right.
+At the top and bottom sides, the location of the triangle can be left, right and middle.
+At the left and right sides, the location of the triangle can only be in the middle.
+Popover adjusts to triangle position.
+
+### Events:
+
+- **onClose**
+
+### Size
+
+Min height is 52px.
+Min width is 160px.
+
+### Example
+
+```jsx
+const Hello = ({ isPopoverOpen }) => (
+ hello
+);
+const Content = ({ content }) => hello {content};
+
+const HelloWithPopover = withPopover({
+ ContentComponent: Content,
+ title: 'hello title',
+ side: 'bottom',
+ arrowPosition: 'right',
+ popoverWrapperClassName: cx('popover-wrapper'),
+})(Hello);
+
+;
+```
diff --git a/app/src/componentLibrary/popover/index.js b/app/src/componentLibrary/popover/index.js
new file mode 100644
index 0000000000..ea2cb5bf8c
--- /dev/null
+++ b/app/src/componentLibrary/popover/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { withPopover } from './withPopover/withPopover';
diff --git a/app/src/componentLibrary/popover/popover.jsx b/app/src/componentLibrary/popover/popover.jsx
new file mode 100644
index 0000000000..a43886a51c
--- /dev/null
+++ b/app/src/componentLibrary/popover/popover.jsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import { useOnClickOutside } from 'common/hooks';
+import styles from './popover.scss';
+
+const cx = classNames.bind(styles);
+const TRIANGLE_SIZE = 9;
+const SAFE_ZONE = 4;
+
+export const Popover = ({
+ children,
+ title,
+ side,
+ arrowPosition,
+ dataAutomationId,
+ onClose,
+ parentRef,
+}) => {
+ const popoverRef = useRef();
+ const [top, setTop] = useState(0);
+ const [left, setLeft] = useState(0);
+
+ useOnClickOutside(popoverRef, onClose);
+
+ useEffect(() => {
+ const { current: parent } = parentRef;
+ const parentTop = parent.offsetTop;
+ const parentLeft = parent.offsetLeft;
+ const parentHeight = parent.offsetHeight;
+ const parentWidth = parent.offsetWidth;
+
+ const { current: popover } = popoverRef;
+ const popoverHeight = popover.offsetHeight;
+ const popoverWidth = popover.offsetWidth;
+
+ const setHorizontalPosition = () => {
+ switch (arrowPosition) {
+ case 'right':
+ setLeft(parentLeft + parentWidth / 2 - popoverWidth + TRIANGLE_SIZE + 16);
+ break;
+ case 'middle':
+ setLeft(parentLeft + parentWidth / 2 - popoverWidth / 2);
+ break;
+ case 'left':
+ default:
+ setLeft(parentLeft + parentWidth / 2 - TRIANGLE_SIZE - 16);
+ }
+ };
+
+ const setVerticalMiddlePosition = () => {
+ setTop(parentTop + parentHeight / 2 - popoverHeight / 2);
+ };
+
+ if (side === 'bottom') {
+ setTop(parentTop + parentHeight + SAFE_ZONE + TRIANGLE_SIZE);
+ setHorizontalPosition();
+ } else if (side === 'top') {
+ setTop(parentTop - SAFE_ZONE - TRIANGLE_SIZE - popoverHeight);
+ setHorizontalPosition();
+ } else if (side === 'right') {
+ setVerticalMiddlePosition();
+ setLeft(parentLeft + parentWidth + SAFE_ZONE + TRIANGLE_SIZE);
+ } else if (side === 'left') {
+ setVerticalMiddlePosition();
+ setLeft(parentLeft - SAFE_ZONE - TRIANGLE_SIZE - popoverWidth);
+ }
+ }, [parentRef, side, arrowPosition]);
+
+ return (
+
+ {title &&
{title}
}
+
{children}
+
+ );
+};
+
+Popover.propTypes = {
+ children: PropTypes.node,
+ title: PropTypes.string,
+ side: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+ arrowPosition: PropTypes.oneOf(['left', 'middle', 'right']),
+ dataAutomationId: PropTypes.string,
+ onClose: PropTypes.func,
+ parentRef: PropTypes.shape({ current: PropTypes.object }),
+};
+
+Popover.defaultProps = {
+ children: null,
+ title: '',
+ side: 'top',
+ arrowPosition: 'left',
+ dataAutomationId: '',
+ onClose: () => {},
+ parentRef: null,
+};
diff --git a/app/src/componentLibrary/popover/popover.scss b/app/src/componentLibrary/popover/popover.scss
new file mode 100644
index 0000000000..55749cbdff
--- /dev/null
+++ b/app/src/componentLibrary/popover/popover.scss
@@ -0,0 +1,89 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.popover {
+ display: block;
+ position: absolute;
+ z-index: $Z-INDEX-POPUP;
+ background-color: $COLOR--white-two;
+ border-radius: 8px;
+ box-shadow: $BOX_SHADOW--modal-window;
+ padding: 16px;
+ min-height: 52px;
+ min-width: 160px;
+ max-width: fit-content;
+ box-sizing: border-box;
+
+ &::after {
+ content: '';
+ position: absolute;
+ border: 9px solid transparent;
+ }
+
+ &.side-bottom::after {
+ border-bottom-color: $COLOR--white-two;
+ bottom: 100%;
+ }
+
+ &.side-top::after {
+ border-top-color: $COLOR--white-two;
+ top: 100%;
+ }
+
+ &.side-bottom,
+ &.side-top {
+ &.position-left::after {
+ left: 16px;
+ }
+
+ &.position-middle::after {
+ left: calc(100% / 2 - 9px);
+ }
+
+ &.position-right::after {
+ right: 16px;
+ }
+ }
+
+ &.side-right::after {
+ border-right-color: $COLOR--white-two;
+ right: 100%;
+ }
+
+ &.side-left::after {
+ border-left-color: $COLOR--white-two;
+ left: 100%;
+ }
+
+ &.side-left,
+ &.side-right {
+ &::after {
+ top: calc(100% / 2 - 9px);
+ }
+ }
+}
+
+.content {
+ display: block;
+}
+
+.title {
+ display: inline-block;
+ font-family: $FONT-SEMIBOLD;
+ font-size: 13px;
+ line-height: 20px;
+ margin-bottom: 8px;
+}
diff --git a/app/src/componentLibrary/popover/withPopover/withPopover.jsx b/app/src/componentLibrary/popover/withPopover/withPopover.jsx
new file mode 100644
index 0000000000..53c7d71d5b
--- /dev/null
+++ b/app/src/componentLibrary/popover/withPopover/withPopover.jsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames/bind';
+import { Popover } from '../popover';
+import styles from './withPopover.scss';
+
+const cx = classNames.bind(styles);
+
+export const withPopover = ({ ContentComponent, popoverWrapperClassName, ...popoverConfig }) => (
+ WrappedComponent,
+) => (props) => {
+ const parentRef = useRef();
+ const [isOpened, setOpened] = useState(false);
+
+ return (
+ <>
+
{
+ setOpened(true);
+ }}
+ >
+
+
+ {isOpened && (
+ setOpened(false)} parentRef={parentRef} {...popoverConfig}>
+
+
+ )}
+
+ );
+};
diff --git a/app/src/componentLibrary/popover/withPopover/withPopover.scss b/app/src/componentLibrary/popover/withPopover/withPopover.scss
new file mode 100644
index 0000000000..7c2f4ea94b
--- /dev/null
+++ b/app/src/componentLibrary/popover/withPopover/withPopover.scss
@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.with-popover {
+ display: block;
+ width: fit-content;
+ height: fit-content;
+ cursor: pointer;
+}
diff --git a/app/src/componentLibrary/radioGroup/README.md b/app/src/componentLibrary/radioGroup/README.md
new file mode 100644
index 0000000000..23dc65feac
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/README.md
@@ -0,0 +1,18 @@
+## **Radio button group**
+
+### Props:
+
+- **value**: _string_ or _number_ or _bool_, optional, default = ""
+- **options**: _array_, optional, default = []
+- **variant**: _sting_, optional, default = "light"
+- **className**: _string_, optional, default = ""
+
+### Events:
+
+- **onFocus**
+- **onBlur**
+- **onChange**
+
+### Variants:
+
+Radio button group can be used in two variants: **light** for light background and **dark** for dark background.
diff --git a/app/src/componentLibrary/radioGroup/index.js b/app/src/componentLibrary/radioGroup/index.js
new file mode 100644
index 0000000000..54a1dfa133
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { RadioGroup } from './radioGroup';
diff --git a/app/src/componentLibrary/radioGroup/radioButton/index.js b/app/src/componentLibrary/radioGroup/radioButton/index.js
new file mode 100644
index 0000000000..3cf966fda3
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/radioButton/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { RadioButton } from './radioButton';
diff --git a/app/src/componentLibrary/radioGroup/radioButton/radioButton.jsx b/app/src/componentLibrary/radioGroup/radioButton/radioButton.jsx
new file mode 100644
index 0000000000..636155787c
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/radioButton/radioButton.jsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './radioButton.scss';
+
+const cx = classNames.bind(styles);
+
+export const RadioButton = ({ option, value, onChange, onFocus, onBlur, className, variant }) => {
+ const isChecked = option.value === value;
+
+ return (
+ // eslint-disable-next-line
+
+ );
+};
+RadioButton.propTypes = {
+ variant: PropTypes.oneOf(['light', 'dark']),
+ option: PropTypes.shape({
+ value: PropTypes.string,
+ label: PropTypes.string,
+ disabled: PropTypes.bool,
+ }),
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ className: PropTypes.string,
+};
+RadioButton.defaultProps = {
+ variant: 'light',
+ option: {},
+ value: '',
+ onChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ className: '',
+};
diff --git a/app/src/componentLibrary/radioGroup/radioButton/radioButton.scss b/app/src/componentLibrary/radioGroup/radioButton/radioButton.scss
new file mode 100644
index 0000000000..1befd8c47e
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/radioButton/radioButton.scss
@@ -0,0 +1,193 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin disabled-state {
+ opacity: 0.3;
+}
+
+@mixin toggler {
+ width: 16px;
+ height: 16px;
+ min-width: 16px;
+}
+
+@mixin toggler-active {
+ width: 8px;
+ height: 8px;
+}
+
+.radio-button {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ outline: none;
+ cursor: pointer;
+ padding-bottom: 4px;
+
+ &.disabled {
+ cursor: default;
+
+ .toggler {
+ &.checked.disabled {
+ &::after {
+ background-color: $COLOR--topaz-pressed;
+ }
+ }
+
+ &.disabled {
+ &::after {
+ background-color: transparent;
+ }
+ }
+ }
+
+ .children-container {
+ color: $COLOR--e-300;
+ }
+ }
+}
+
+.input {
+ display: none;
+}
+
+.toggler {
+ display: flex;
+ width: 16px;
+ height: 16px;
+ box-sizing: border-box;
+ margin: auto 10px auto 0;
+ border-radius: 100%;
+ border-width: 1px;
+ border-style: solid;
+ line-height: 18;
+
+ &::after {
+ content: '';
+ display: block;
+ border-radius: 100%;
+ margin: auto;
+ background-color: $COLOR--topaz-pressed;
+ opacity: 0;
+ transform: scale(0.5);
+ transition: transform 0.2s, opacity 0.2s;
+ }
+
+ &.checked,
+ &.disabled {
+ &::after {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+}
+
+.children-container {
+ display: inline-block;
+ overflow: hidden;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 13px;
+ line-height: 20px;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ color: $COLOR--almost-black;
+}
+
+.light {
+ &.toggler {
+ @include toggler;
+ border-color: $COLOR--e-200;
+ background-color: $COLOR--white-two;
+
+ &::after {
+ @include toggler-active;
+ }
+ }
+
+ &.children-container {
+ max-width: 100%;
+ }
+
+ &:hover:not(.disabled) {
+ border-color: $COLOR--e-400;
+ }
+
+ &:hover:after:not(.disabled) {
+ background-color: $COLOR--topaz-hover;
+ }
+
+ &:focus {
+ border-color: $COLOR--topaz-focused;
+ }
+
+ &:focus:after {
+ background-color: $COLOR--topaz-pressed;
+ }
+
+ &.disabled {
+ .toggler {
+ @include disabled-state;
+ }
+
+ &::after {
+ @include disabled-state;
+ }
+ }
+}
+
+.dark {
+ &.toggler {
+ @include toggler;
+ border-color: $COLOR--e-100;
+ background: none;
+
+ &::after {
+ @include toggler-active;
+ background-color: $COLOR--darkmode-topaz-main;
+ }
+ }
+
+ &.children-container {
+ max-width: 100%;
+ color: $COLOR--charcoal-grey;
+ }
+
+ &:hover:not(.disabled) {
+ border-color: $COLOR--darkmode-gray-50;
+ }
+
+ &:hover:after:not(.disabled) {
+ background-color: $COLOR--darkmode-topaz-hover;
+ }
+
+ &:focus {
+ border-color: $COLOR--darkmode-topaz-focused;
+ }
+
+ &:focus:after {
+ background-color: $COLOR--darkmode-topaz-main;
+ }
+
+ &.disabled {
+ .toggler {
+ @include disabled-state;
+ }
+
+ &::after {
+ @include disabled-state;
+ }
+ }
+}
diff --git a/app/src/componentLibrary/radioGroup/radioGroup.jsx b/app/src/componentLibrary/radioGroup/radioGroup.jsx
new file mode 100644
index 0000000000..7d07e9f5fb
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/radioGroup.jsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import React from 'react';
+import styles from './radioGroup.scss';
+import { RadioButton } from './radioButton';
+
+const cx = classNames.bind(styles);
+
+export const RadioGroup = ({ options, value, ...rest }) => (
+
+ {options.map((option) => (
+
+ ))}
+
+);
+RadioGroup.propTypes = {
+ variant: PropTypes.oneOf(['light', 'dark']),
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ value: PropTypes.string,
+ label: PropTypes.string,
+ disabled: PropTypes.bool,
+ }),
+ ),
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ className: PropTypes.string,
+};
+RadioGroup.defaultProps = {
+ variant: 'light',
+ options: [],
+ value: '',
+ onChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ className: '',
+};
diff --git a/app/src/componentLibrary/radioGroup/radioGroup.scss b/app/src/componentLibrary/radioGroup/radioGroup.scss
new file mode 100644
index 0000000000..0d0f7f1597
--- /dev/null
+++ b/app/src/componentLibrary/radioGroup/radioGroup.scss
@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.radio-group {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/app/src/componentLibrary/systemMessage/README.md b/app/src/componentLibrary/systemMessage/README.md
new file mode 100644
index 0000000000..542b241862
--- /dev/null
+++ b/app/src/componentLibrary/systemMessage/README.md
@@ -0,0 +1,21 @@
+## **System Message**
+
+Default width - 100% of parent element.
+Min-height - 104px. Max height - flexible.
+
+### Props:
+
+- **header**: _string_, optional, default = ""
+- **caption**: _string_, optional, default = ""
+- **children**: _node_, optional, default = null
+- **mode**: _string_, optional, default = "info"
+- **widthByContent**: _bool_, optional, default = false
+
+### Modes
+
+The System Message comes with mode: _info_ (default), _warning_ and _error_.
+
+### Width by content
+
+By default, width is set to 100% of parent element.
+To disable this behavior and set the width of component according to child's width, set the _widthByContent_ prop to true.
diff --git a/app/src/componentLibrary/systemMessage/index.js b/app/src/componentLibrary/systemMessage/index.js
new file mode 100644
index 0000000000..8df23c4275
--- /dev/null
+++ b/app/src/componentLibrary/systemMessage/index.js
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { SystemMessage } from './systemMessage';
diff --git a/app/src/componentLibrary/systemMessage/systemMessage.jsx b/app/src/componentLibrary/systemMessage/systemMessage.jsx
new file mode 100644
index 0000000000..e02543e95b
--- /dev/null
+++ b/app/src/componentLibrary/systemMessage/systemMessage.jsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './systemMessage.scss';
+
+const cx = classNames.bind(styles);
+const MODE_INFORMATION = 'info';
+const MODE_WARNING = 'warning';
+const MODE_SYS_ERROR = 'error';
+
+export const SystemMessage = ({ header, caption, children, mode, widthByContent }) => {
+ return (
+
+
+
+ {header &&
{header}
}
+
{children}
+ {caption &&
{caption}
}
+
+
+ );
+};
+
+SystemMessage.propTypes = {
+ header: PropTypes.string,
+ caption: PropTypes.node,
+ children: PropTypes.node,
+ mode: PropTypes.oneOf([MODE_INFORMATION, MODE_WARNING, MODE_SYS_ERROR]),
+ widthByContent: PropTypes.bool,
+};
+
+SystemMessage.defaultProps = {
+ header: '',
+ caption: null,
+ children: null,
+ mode: MODE_INFORMATION,
+ widthByContent: false,
+};
diff --git a/app/src/componentLibrary/systemMessage/systemMessage.scss b/app/src/componentLibrary/systemMessage/systemMessage.scss
new file mode 100644
index 0000000000..2aa2ed4b26
--- /dev/null
+++ b/app/src/componentLibrary/systemMessage/systemMessage.scss
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin font-config($font, $size, $height, $color) {
+ font-family: $font;
+ font-size: $size;
+ line-height: $height;
+ color: $color;
+}
+
+@mixin message-headers($color) {
+ color: $color;
+ text-transform: capitalize;
+ margin-bottom: 8px;
+ font-family: $FONT-ROBOTO-MEDIUM;
+ font-size: 15px;
+ line-height: 24px;
+}
+
+@mixin stripe-shape($color--line1, $color--line2) {
+ height: 8px;
+ border-radius: 8px 8px 0 0;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ $color--line1,
+ $color--line1 24px,
+ $color--line2 24px,
+ $color--line2 48px
+ );
+}
+
+.system-message {
+ min-height: 85px;
+ height: auto;
+ width: 100%;
+ background: $COLOR--bg-000;
+ border-radius: 8px;
+ box-shadow: $BOX_SHADOW--item;
+ display: flex;
+ flex-direction: column;
+ align-items: space-between;
+
+ .stripes-info {
+ @include stripe-shape($COLOR--system-message-information-line-100, $COLOR--e-200);
+ }
+
+ .stripes-warning {
+ @include stripe-shape(
+ $COLOR--system-message-warning-line-100,
+ $COLOR--system-message-warning-line-200
+ );
+ }
+ .stripes-error {
+ @include stripe-shape(
+ $COLOR--system-message-error-line-100,
+ $COLOR--system-message-error-line-200
+ );
+ }
+ .text-container {
+ padding: 12px 16px 16px;
+
+ .message-header-info {
+ @include message-headers($COLOR--e-400);
+ }
+
+ .message-header-warning {
+ @include message-headers($COLOR--system-message-warning);
+ }
+
+ .message-header-error {
+ @include message-headers($COLOR--system-message-error);
+ }
+
+ .children {
+ text-indent: 1px;
+ @include font-config($FONT-ROBOTO-BOLD, 13px, 20px, $COLOR--almost-black);
+ }
+
+ p {
+ margin-top: 4px;
+ max-width: 780px;
+ @include font-config($FONT-ROBOTO-REGULAR, 11px, 16px, $COLOR--e-400);
+ }
+ }
+}
+
+.content-width {
+ max-width: max-content;
+}
diff --git a/app/src/componentLibrary/toggle/README.md b/app/src/componentLibrary/toggle/README.md
new file mode 100644
index 0000000000..b860c01b2b
--- /dev/null
+++ b/app/src/componentLibrary/toggle/README.md
@@ -0,0 +1,16 @@
+## **Toggle with optional text**
+
+### Props:
+
+- **children**: _node_, optional, default = null
+- **value**: _bool_, optional, default = false
+- **disabled**: _bool_, optional, default = false
+- **className**: _string_, optional, default = ''
+- **title**: _string_, optional, default = ''
+- **dataAutomationId**: _string_, optional, default = ''
+
+### Events:
+
+- **onFocus**
+- **onBlur**
+- **onChange**
diff --git a/app/src/componentLibrary/toggle/index.js b/app/src/componentLibrary/toggle/index.js
new file mode 100644
index 0000000000..184af1a74d
--- /dev/null
+++ b/app/src/componentLibrary/toggle/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { Toggle } from './toggle';
diff --git a/app/src/componentLibrary/toggle/toggle.jsx b/app/src/componentLibrary/toggle/toggle.jsx
new file mode 100644
index 0000000000..b702d96ed0
--- /dev/null
+++ b/app/src/componentLibrary/toggle/toggle.jsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import styles from './toggle.scss';
+
+const cx = classNames.bind(styles);
+
+export const Toggle = ({
+ children,
+ value,
+ onChange,
+ onFocus,
+ onBlur,
+ className,
+ disabled,
+ title,
+ dataAutomationId,
+}) => (
+ // eslint-disable-next-line
+
+);
+
+Toggle.propTypes = {
+ children: PropTypes.node,
+ value: PropTypes.bool,
+ onChange: PropTypes.func,
+ onFocus: PropTypes.func,
+ onBlur: PropTypes.func,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ title: PropTypes.string,
+ dataAutomationId: PropTypes.string,
+};
+
+Toggle.defaultProps = {
+ children: null,
+ value: false,
+ onChange: () => {},
+ onFocus: () => {},
+ onBlur: () => {},
+ className: '',
+ disabled: false,
+ title: '',
+ dataAutomationId: '',
+};
diff --git a/app/src/componentLibrary/toggle/toggle.scss b/app/src/componentLibrary/toggle/toggle.scss
new file mode 100644
index 0000000000..f86366d5c8
--- /dev/null
+++ b/app/src/componentLibrary/toggle/toggle.scss
@@ -0,0 +1,87 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.toggle {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ font-family: $FONT-ROBOTO-REGULAR;
+ font-size: 13px;
+ line-height: 20px;
+ color: $COLOR--almost-black;
+ cursor: pointer;
+ width: 32px;
+}
+
+.children-container {
+ margin-left: 40px;
+}
+
+.slider {
+ background-color: $COLOR--e-200;
+ cursor: pointer;
+ position: absolute;
+ transition: 0.4s;
+ border-radius: 10px;
+ width: 32px;
+ height: 20px;
+ &:before {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ content: '';
+ width: 16px;
+ height: 16px;
+ background-color: $COLOR--white-two;
+ transition: 0.4s;
+ }
+}
+
+.round:before {
+ border-radius: 50%;
+}
+
+.input {
+ display: none;
+
+ &:checked + .slider {
+ background-color: $COLOR--topaz-2;
+ }
+ &:checked + .slider:before {
+ transform: translateX(12px);
+ }
+ &:hover + .slider {
+ background-color: $COLOR--e-400;
+ }
+ &:checked:hover + .slider {
+ background-color: $COLOR--topaz-hover-2;
+ }
+
+ &:checked:disabled + .slider {
+ background-color: $COLOR--topaz-2;
+ cursor: default;
+ }
+
+ &:disabled + .slider {
+ background-color: $COLOR--e-200;
+ cursor: default;
+ }
+}
+
+.disabled {
+ opacity: 0.3;
+ cursor: default;
+}
diff --git a/app/src/componentLibrary/tooltip/README.md b/app/src/componentLibrary/tooltip/README.md
new file mode 100644
index 0000000000..eeecb58225
--- /dev/null
+++ b/app/src/componentLibrary/tooltip/README.md
@@ -0,0 +1,37 @@
+## **Tooltip with optional title and content**
+
+### Tooltip props:
+
+- **children**: _node_, optional, default = null
+- **side**: _string_, optional, default = 'auto'
+- **noArrow**: _string_, optional, default = ''
+- **width**: _string_, optional, default = ''
+- **dynamicWidth**: _string_, optional, default = ''
+- **topOffset**: _string_, optional, default = ''
+- **leftOffset**: _string_, optional, default = ''
+- **tooltipWrapperClassName**: _string_, optional, default = ''
+- **dataAutomationId**: _string_, optional, default = ''
+
+### trianglePosition
+
+The triangle can be in different places.
+The sides can be the following: auto, top, bottom, left and right.
+Tooltip adjusts to triangle position.
+
+### Example
+
+```jsx
+const Hello = ({ isTooltipOpen }) => (
+ hello
+);
+const Content = ({ content }) => hello {content};
+
+const HelloWithTooltip = withTooltip({
+ ContentComponent: Content,
+ side: 'bottom',
+ noArrow: false,
+ tooltipWrapperClassName: cx('tooltip-wrapper'),
+})(Hello);
+
+;
+```
diff --git a/app/src/componentLibrary/tooltip/index.js b/app/src/componentLibrary/tooltip/index.js
new file mode 100644
index 0000000000..017f1719bb
--- /dev/null
+++ b/app/src/componentLibrary/tooltip/index.js
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { withTooltip } from './withTooltip';
diff --git a/app/src/componentLibrary/tooltip/withTooltip.jsx b/app/src/componentLibrary/tooltip/withTooltip.jsx
new file mode 100644
index 0000000000..18bf8f6078
--- /dev/null
+++ b/app/src/componentLibrary/tooltip/withTooltip.jsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import { Manager, Popper, Reference } from 'react-popper';
+import classNames from 'classnames/bind';
+import ReactDOM from 'react-dom';
+import styles from './withTooltip.scss';
+
+const cx = classNames.bind(styles);
+const TOOLTIP_DELAY_MS = 2000;
+const SAFE_ZONE = 100;
+
+export const withTooltip = ({
+ ContentComponent,
+ tooltipWrapperClassName,
+ dynamicWidth,
+ width,
+ topOffset,
+ leftOffset,
+ side,
+ noArrow,
+ dataAutomationId,
+}) => (WrappedComponent) => (props) => {
+ const [isOpened, setOpened] = useState(false);
+ const [currentTimeout, setCurrentTimeout] = useState(null);
+ const styleWidth = dynamicWidth ? null : { width };
+ const clientWidth = document.documentElement.clientWidth;
+ const maxWidth = !styleWidth ? clientWidth - SAFE_ZONE : styleWidth;
+ const tooltipRoot = document.getElementById('tooltip-root');
+ return (
+
+
+ {({ ref }) => (
+