intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/AccordionTable/AccordionTable.stories.js

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AccordionTableTemplate: function() {
+        return AccordionTableTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _AccordionTable = /*#__PURE__*/ _interop_require_default(require("./AccordionTable"));
+const _Status = /*#__PURE__*/ _interop_require_default(require("../Status/Status"));
+require("../../../../../scss/main.scss");
+require("./AccordionTable.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+global.lng = 'en';
+const _default = {
+    title: 'UI/AccordionTable',
+    component: _AccordionTable.default,
+    argTypes: {}
+};
+const Template = (args)=>{
+    const onChange = (e)=>console.log(e);
+    const [sortParams, setSortParams] = (0, _react.useState)({
+        key: 'apr',
+        direction: 'DESC'
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        style: {
+            backgroundColor: '#f7f8fa',
+            overflowX: 'auto'
+        },
+        className: "p15",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AccordionTable.default, {
+            ...args,
+            onChange: onChange,
+            sortParams: sortParams,
+            onSort: setSortParams
+        })
+    });
+};
+const AccordionTableTemplate = Template.bind({});
+AccordionTableTemplate.args = {
+    className: '',
+    header: [
+        {
+            key: 'name',
+            label: 'Name',
+            width: 20,
+            className: '',
+            noSort: true
+        },
+        {
+            key: 'monthlyPayment',
+            label: 'Monthly Payment',
+            width: 15,
+            className: 'j6'
+        },
+        {
+            key: 'term',
+            label: 'Term(months)',
+            width: 15,
+            className: 'j6'
+        },
+        {
+            key: 'apr',
+            label: 'APR',
+            width: 15,
+            className: 'j6'
+        },
+        {
+            key: 'merchantFee',
+            label: 'Merchant Fee',
+            width: 15,
+            className: 'j6'
+        },
+        {
+            key: 'creditProfile',
+            label: 'EST Credit Profile',
+            width: 20,
+            className: 'j6'
+        }
+    ],
+    items: [
+        {
+            key: 'dod818',
+            isOpen: true,
+            label: 'DOT818 LLC',
+            offers: 3,
+            className: '',
+            statistics: {
+                name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ',
+                monthlyPayment: 3123,
+                term: 12,
+                apr: 3,
+                merchantFee: 4,
+                creditProfile: 22
+            },
+            rows: [
+                {
+                    name: 'Offer 1',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750',
+                    promoDetails: 'test 123'
+                },
+                {
+                    name: 'Offer 2',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                },
+                {
+                    name: 'Offer 3',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750',
+                    promoDetails: 'NO INTEREST if paid in full within 24 months and very looooooooooooooooooooooooooooooooooooooooooooooong description. very very very very very very very very very looooooooooooooooooooooooooooooooooooooooooooooong description.',
+                    disclosure: 'Offer Disclosure  very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long very long'
+                },
+                {
+                    name: 'Offer 4',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750',
+                    promoDetails: 'test 123'
+                }
+            ]
+        },
+        {
+            key: 'lendingUSA',
+            isOpen: false,
+            label: 'Lending USA',
+            offers: 3,
+            className: '',
+            titleContent: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+                    className: "accordion-label-box__status",
+                    status: "info",
+                    label: "3 OFFERS"
+                })
+            }),
+            rows: [
+                {
+                    name: 'Offer 1',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                },
+                {
+                    name: 'Offer 2',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                }
+            ]
+        },
+        {
+            key: 'creditSuisse',
+            isOpen: true,
+            label: 'Credit Suisse',
+            offers: 3,
+            className: '',
+            status: 'Active',
+            titleContent: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Status.default, {
+                    className: "accordion-label-box__status",
+                    onClick: ()=>console.log('clicked'),
+                    status: "info",
+                    label: "8 OFFERS"
+                })
+            }),
+            rows: [
+                {
+                    name: 'Offer 2',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                },
+                {
+                    name: 'Offer 3',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                },
+                {
+                    name: 'Offer 4',
+                    monthlyPayment: 'from 31.33',
+                    term: 60,
+                    apr: 'from 10.99%',
+                    merchantFee: '0%',
+                    creditProfile: '680 - 750'
+                }
+            ]
+        }
+    ]
+};

package/dist/src/Atomic/UI/AccordionText/AccordionText.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactfeather = require("react-feather");
+require("./AccordionText.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+const AccordionText = ({ isDefaultOpen = false, isOuterOpen = false, className, text = defaultText, shortText = null })=>{
+    const bodyRef = (0, _react.useRef)(null);
+    const [isOpen, setIsOpen] = (0, _react.useState)(isDefaultOpen);
+    const [isNeedTrimText, setIsNeedTrimText] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        setIsOpen(isOuterOpen);
+    }, [
+        isOuterOpen
+    ]);
+    (0, _react.useEffect)(()=>{
+        const checkEllipsis = ()=>{
+            if (bodyRef.current) {
+                setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
+            }
+        };
+        const resizeObserver = new ResizeObserver(()=>{
+            checkEllipsis();
+        });
+        if (bodyRef.current) {
+            resizeObserver.observe(bodyRef.current);
+            checkEllipsis();
+        }
+        return ()=>{
+            if (bodyRef.current) {
+                resizeObserver.unobserve(bodyRef.current);
+            }
+        };
+    }, [
+        text
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)("accordion-text", className, {
+            "accordion-text--open": isOpen
+        }),
+        onClick: ()=>setIsOpen((prevIsOpen)=>!prevIsOpen),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)("accordion-text__body", {
+                    "accordion-text__body--trim-text": isNeedTrimText && !isOpen
+                }),
+                ref: bodyRef,
+                children: shortText ? isOpen ? text : shortText : text
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "accordion-text__toggle",
+                children: isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {})
+            })
+        ]
+    });
+};
+const _default = AccordionText;

package/dist/src/Atomic/UI/AccordionText/AccordionText.scss

@@ -0,0 +1,66 @@
+.accordion-text {
+  position: relative;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+  height: 25px;
+  padding: 4px 24px 4px 8px;
+
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  cursor: pointer;
+
+  border-radius: 4px;
+  background-color: rgba(48, 57, 91, 0.05);
+
+  &--open {
+    height: fit-content;
+    max-height: 100%;
+  }
+
+  &__body {
+    overflow: hidden;
+
+    width: 100%; // Устанавливаем ширину в 100% родительского контейнера
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__body--trim-text > * {
+    overflow: hidden; // Необходимо для работы обрезки текста
+
+    width: 100%; // Обеспечивает переполнение текста
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &--open &__body {
+    overflow: visible; // Убираем скрытие переполненного контента в открытом состоянии
+
+    white-space: normal; // Вернуть к нормальному переносу в открытом состоянии
+    text-overflow: clip; // Убираем обрезку текста
+  }
+
+  &__toggle {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 16px;
+    height: 16px;
+    margin: 4px;
+    padding: 2px;
+
+    pointer-events: none;
+
+    color: #a0a4b0;
+  }
+}

package/dist/src/Atomic/UI/AccordionText/AccordionText.stories.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AccordionTextTemplate: function() {
+        return AccordionTextTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _AccordionText = /*#__PURE__*/ _interop_require_default(require("./AccordionText"));
+require("../../../../../scss/main.scss");
+const _Button = /*#__PURE__*/ _interop_require_default(require("../Button/Button"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+global.lng = 'en';
+const _default = {
+    title: 'UI/AccordionText',
+    component: _AccordionText.default
+};
+const Template = (args)=>{
+    const { className, onClick } = args;
+    const [text, setText] = _react.default.useState('СЛИШКОМ КОТОРКИЙ ТЕКСТ');
+    const jsxWithReactElementWrapper = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, ipsam exercitationem necessitatibus magni aspernatur sunt libero perspiciatis facilis? Error, ullam alias. Aliquam facere rem odit?"
+            })
+        ]
+    });
+    const jsxWithDivWrapper = /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, ipsam exercitationem necessitatibus magni aspernatur sunt libero perspiciatis facilis? Error, ullam alias. Aliquam facere rem odit?"
+            })
+        ]
+    });
+    const jsxWithSpanWrapper = /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, ipsam exercitationem necessitatibus magni aspernatur sunt libero perspiciatis facilis? Error, ullam alias. Aliquam facere rem odit?"
+            })
+        ]
+    });
+    const lognTextInDiv = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo rem quam molestiae deserunt animi optio iusto quasi aut aliquid eos molestias, voluptatum, cum similique ducimus, dignissimos soluta voluptatibus quis adipisci asperiores unde et itaque? Tenetur nobis nulla consectetur aliquid sint voluptatem optio sunt? Praesentium, aperiam alias? Quos praesentium cum eum?"
+    });
+    const looongTextWithoutWrapper = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo rem quam molestiae deserunt animi optio iusto quasi aut aliquid eos molestias, voluptatum, cum similique ducimus, dignissimos soluta voluptatibus quis adipisci asperiores unde et itaque? Tenetur nobis nulla consectetur aliquid sint voluptatem optio sunt? Praesentium, aperiam alias? Quos praesentium cum eum?';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '2rem'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_AccordionText.default, {
+                ...args,
+                text: text
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    rowGap: '1rem',
+                    width: 'fit-content'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: ()=>setText(jsxWithReactElementWrapper),
+                        children: "С оберткой контента в виде react element"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: ()=>setText(jsxWithDivWrapper),
+                        children: "С оберткой контента в виде div и вложенных туда элементов"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: ()=>setText(jsxWithSpanWrapper),
+                        children: "С оберткой контента в виде span и вложенных туда элементов"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: ()=>setText(lognTextInDiv),
+                        children: "С оберткой контента в виде div и длинного текста внутри"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: ()=>setText(looongTextWithoutWrapper),
+                        children: "Длинный текст без оберток"
+                    })
+                ]
+            })
+        ]
+    });
+};
+const AccordionTextTemplate = Template.bind({});
+AccordionTextTemplate.args = {};