intelicoreact 1.6.7 → 1.6.8

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

@@ -0,0 +1,321 @@
+"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 _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+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;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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, _object_spread_props(_object_spread({}, 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'
+                }
+            ]
+        }
+    ]
+};
+
+//# sourceMappingURL=AccordionTable.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/UI/AccordionTable/AccordionTable.stories.js"],"sourcesContent":["import React, {useState} from 'react';\nimport AccordionTable from './AccordionTable';\nimport Status from '../Status/Status';\n\nimport '../../../../../scss/main.scss';\nimport './AccordionTable.scss';\n\nglobal.lng = 'en';\n\nexport default {\n  title: 'UI/AccordionTable',\n  component: AccordionTable,\n  argTypes: {},\n};\n\nconst Template = args => {\n  const onChange = e => console.log(e);\n  const [sortParams, setSortParams] = useState({key: 'apr', direction: 'DESC'});\n\n  return (\n    <div style={{backgroundColor: '#f7f8fa', overflowX: 'auto'}} className=\"p15\">\n      <AccordionTable {...args} onChange={onChange} sortParams={sortParams} onSort={setSortParams}/>\n    </div>\n  );\n};\n\nexport const AccordionTableTemplate = Template.bind({});\n\nAccordionTableTemplate.args = {\n  className: '',\n  header: [\n    {\n      key: 'name',\n      label: 'Name',\n      width: 20,\n      className: '',\n      noSort: true\n    },\n    {\n      key: 'monthlyPayment',\n      label: 'Monthly Payment',\n      width: 15,\n      className: 'j6',\n    },\n    {\n      key: 'term',\n      label: 'Term(months)',\n      width: 15,\n      className: 'j6',\n    },\n    {\n      key: 'apr',\n      label: 'APR',\n      width: 15,\n      className: 'j6',\n    },\n    {\n      key: 'merchantFee',\n      label: 'Merchant Fee',\n      width: 15,\n      className: 'j6',\n    },\n    {\n      key: 'creditProfile',\n      label: 'EST Credit Profile',\n      width: 20,\n      className: 'j6',\n    },\n  ],\n  items: [\n    {\n      key: 'dod818',\n      isOpen: true,\n      label: 'DOT818 LLC',\n      offers: 3,\n      className: '',\n      statistics: {\n        name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ',\n        monthlyPayment: 3123,\n        term: 12,\n        apr: 3,\n        merchantFee: 4,\n        creditProfile: 22,\n      },\n      rows: [\n        {\n          name: 'Offer 1',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n          promoDetails: 'test 123',\n        },\n        {\n          name: 'Offer 2',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n        {\n          name: 'Offer 3',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n          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.',\n          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',\n        },\n        {\n          name: 'Offer 4',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n          promoDetails: 'test 123',\n        },\n      ],\n    },\n    {\n      key: 'lendingUSA',\n      isOpen: false,\n      label: 'Lending USA',\n      offers: 3,\n      className: '',\n      titleContent: (\n        <div>\n          <Status className=\"accordion-label-box__status\" status=\"info\" label=\"3 OFFERS\" />\n        </div>\n      ),\n      rows: [\n        {\n          name: 'Offer 1',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n        {\n          name: 'Offer 2',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n      ],\n    },\n    {\n      key: 'creditSuisse',\n      isOpen: true,\n      label: 'Credit Suisse',\n      offers: 3,\n      className: '',\n      status: 'Active',\n      titleContent: (\n        <div>\n          <Status\n            className=\"accordion-label-box__status\"\n            onClick={() => console.log('clicked')}\n            status=\"info\"\n            label=\"8 OFFERS\"\n          />\n        </div>\n      ),\n      rows: [\n        {\n          name: 'Offer 2',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n        {\n          name: 'Offer 3',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n        {\n          name: 'Offer 4',\n          monthlyPayment: 'from 31.33',\n          term: 60,\n          apr: 'from 10.99%',\n          merchantFee: '0%',\n          creditProfile: '680 - 750',\n        },\n      ],\n    },\n  ],\n};\n"],"names":["AccordionTableTemplate","global","lng","title","component","AccordionTable","argTypes","Template","args","onChange","e","console","log","sortParams","setSortParams","useState","key","direction","div","style","backgroundColor","overflowX","className","onSort","bind","header","label","width","noSort","items","isOpen","offers","statistics","name","monthlyPayment","term","apr","merchantFee","creditProfile","rows","promoDetails","disclosure","titleContent","Status","status","onClick"],"mappings":"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"}

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

@@ -0,0 +1,115 @@
+"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;
+
+//# sourceMappingURL=AccordionText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/UI/AccordionText/AccordionText.js"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport React from \"react\";\nimport cn from \"classnames\";\nimport { ChevronDown, ChevronUp } from \"react-feather\";\nimport \"./AccordionText.scss\";\n\nconst 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.`;\n\nconst AccordionText = ({\n  isDefaultOpen = false,\n  isOuterOpen = false,\n  className,\n  text = defaultText,\n  shortText = null\n}) => {\n  const bodyRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(isDefaultOpen);\n  const [isNeedTrimText, setIsNeedTrimText] = useState(false);\n\n  useEffect(() => {\n    setIsOpen(isOuterOpen);\n  }, [isOuterOpen]);\n\n  useEffect(() => {\n    const checkEllipsis = () => {\n      if (bodyRef.current) {\n        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);\n      }\n    };\n\n    const resizeObserver = new ResizeObserver(() => {\n      checkEllipsis();\n    });\n\n    if (bodyRef.current) {\n      resizeObserver.observe(bodyRef.current);\n      checkEllipsis();\n    }\n\n    return () => {\n      if (bodyRef.current) {\n        resizeObserver.unobserve(bodyRef.current);\n      }\n    };\n  }, [text]);\n\n  return (\n    <div\n      className={cn(\"accordion-text\", className, {\n        \"accordion-text--open\": isOpen,\n      })}\n      onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}\n    >\n      <div\n        className={cn(\"accordion-text__body\", {\n          \"accordion-text__body--trim-text\": isNeedTrimText && !isOpen,\n        })}\n        ref={bodyRef}\n      >\n        {shortText ? (isOpen ? text : shortText) : text}\n      </div>\n      <div className=\"accordion-text__toggle\">\n        {isOpen ? <ChevronUp /> : <ChevronDown />}\n      </div>\n    </div>\n  );\n};\n\nexport default AccordionText;\n"],"names":["defaultText","AccordionText","isDefaultOpen","isOuterOpen","className","text","shortText","bodyRef","useRef","isOpen","setIsOpen","useState","isNeedTrimText","setIsNeedTrimText","useEffect","checkEllipsis","current","scrollWidth","clientWidth","resizeObserver","ResizeObserver","observe","unobserve","div","cn","onClick","prevIsOpen","ref","ChevronUp","ChevronDown"],"mappings":";;;;+BAoEA;;;eAAA;;;;+DApE4C;mEAE7B;8BACwB;QAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEP,MAAMA,cAAc,CAAC,uOAAuO,CAAC;AAE7P,MAAMC,gBAAgB,CAAC,EACrBC,gBAAgB,KAAK,EACrBC,cAAc,KAAK,EACnBC,SAAS,EACTC,OAAOL,WAAW,EAClBM,YAAY,IAAI,EACjB;IACC,MAAMC,UAAUC,IAAAA,aAAM,EAAC;IACvB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,eAAQ,EAACT;IACrC,MAAM,CAACU,gBAAgBC,kBAAkB,GAAGF,IAAAA,eAAQ,EAAC;IAErDG,IAAAA,gBAAS,EAAC;QACRJ,UAAUP;IACZ,GAAG;QAACA;KAAY;IAEhBW,IAAAA,gBAAS,EAAC;QACR,MAAMC,gBAAgB;YACpB,IAAIR,QAAQS,OAAO,EAAE;gBACnBH,kBAAkBN,QAAQS,OAAO,CAACC,WAAW,GAAGV,QAAQS,OAAO,CAACE,WAAW;YAC7E;QACF;QAEA,MAAMC,iBAAiB,IAAIC,eAAe;YACxCL;QACF;QAEA,IAAIR,QAAQS,OAAO,EAAE;YACnBG,eAAeE,OAAO,CAACd,QAAQS,OAAO;YACtCD;QACF;QAEA,OAAO;YACL,IAAIR,QAAQS,OAAO,EAAE;gBACnBG,eAAeG,SAAS,CAACf,QAAQS,OAAO;YAC1C;QACF;IACF,GAAG;QAACX;KAAK;IAET,qBACE,sBAACkB;QACCnB,WAAWoB,IAAAA,mBAAE,EAAC,kBAAkBpB,WAAW;YACzC,wBAAwBK;QAC1B;QACAgB,SAAS,IAAMf,UAAU,CAACgB,aAAe,CAACA;;0BAE1C,qBAACH;gBACCnB,WAAWoB,IAAAA,mBAAE,EAAC,wBAAwB;oBACpC,mCAAmCZ,kBAAkB,CAACH;gBACxD;gBACAkB,KAAKpB;0BAEJD,YAAaG,SAASJ,OAAOC,YAAaD;;0BAE7C,qBAACkB;gBAAInB,WAAU;0BACZK,uBAAS,qBAACmB,uBAAS,sBAAM,qBAACC,yBAAW;;;;AAI9C;MAEA,WAAe5B"}

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

@@ -0,0 +1,178 @@
+"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 _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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, _object_spread_props(_object_spread({}, 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 = {};
+
+//# sourceMappingURL=AccordionText.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/UI/AccordionText/AccordionText.stories.js"],"sourcesContent":["import React from 'react';\nimport AccordionText, { text } from './AccordionText';\n\nimport '../../../../../scss/main.scss';\nimport Button from '../Button/Button';\n\nglobal.lng = 'en';\n\nexport default {\n  title: 'UI/AccordionText',\n  component: AccordionText,\n};\n\nconst Template = args => {\n  const {className, onClick} = args;\n  const [text, setText] = React.useState('СЛИШКОМ КОТОРКИЙ ТЕКСТ');\n\nconst jsxWithReactElementWrapper = (\n  <>\n    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>\n    <br />\n    <br />\n    <br />\n    <p>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?</p>\n  </>\n)\n\nconst jsxWithDivWrapper = (\n  <div>\n    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>\n    <br />\n    <br />\n    <br />\n    <p>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?</p>\n  </div>\n)\n\nconst jsxWithSpanWrapper = (\n  <span>\n    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>\n    <br />\n    <br />\n    <br />\n    <p>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?</p>\n  </span>\n)\n\nconst lognTextInDiv = (\n  <div>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?</div>\n)\n\nconst 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?'\n\n  return <div style={{display: 'flex', flexDirection: 'column', rowGap: '2rem'}}>\n    <AccordionText {...args} text={text}  />\n\n    <div style={{display: 'flex', flexDirection: 'column', rowGap: '1rem', width: 'fit-content'}}>\n    <Button onClick={() => setText(jsxWithReactElementWrapper)}>С оберткой контента в виде react element</Button>\n    <Button onClick={() => setText(jsxWithDivWrapper)}>С оберткой контента в виде div и вложенных туда элементов</Button>\n    <Button onClick={() => setText(jsxWithSpanWrapper)}>С оберткой контента в виде span и вложенных туда элементов</Button>\n    <Button onClick={() => setText(lognTextInDiv)}>С оберткой контента в виде div и длинного текста внутри</Button>\n    <Button onClick={() => setText(looongTextWithoutWrapper)}>Длинный текст без оберток</Button>\n    </div>\n  </div>;\n};\n\nexport const AccordionTextTemplate = Template.bind({});\n\nAccordionTextTemplate.args = {};\n"],"names":["AccordionTextTemplate","global","lng","title","component","AccordionText","Template","args","className","onClick","text","setText","React","useState","jsxWithReactElementWrapper","span","br","p","jsxWithDivWrapper","div","jsxWithSpanWrapper","lognTextInDiv","looongTextWithoutWrapper","style","display","flexDirection","rowGap","width","Button","bind"],"mappings":";;;;;;;;;;;IAkEaA,qBAAqB;eAArBA;;IA1Db,OAGE;eAHF;;;;8DARkB;sEACkB;QAE7B;+DACY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEnBC,OAAOC,GAAG,GAAG;MAEb,WAAe;IACbC,OAAO;IACPC,WAAWC,sBAAa;AAC1B;AAEA,MAAMC,WAAWC,CAAAA;IACf,MAAM,EAACC,SAAS,EAAEC,OAAO,EAAC,GAAGF;IAC7B,MAAM,CAACG,MAAMC,QAAQ,GAAGC,cAAK,CAACC,QAAQ,CAAC;IAEzC,MAAMC,2CACJ;;0BACE,qBAACC;0BAAK;;0BACN,qBAACC;0BACD,qBAACA;0BACD,qBAACA;0BACD,qBAACC;0BAAE;;;;IAIP,MAAMC,kCACJ,sBAACC;;0BACC,qBAACJ;0BAAK;;0BACN,qBAACC;0BACD,qBAACA;0BACD,qBAACA;0BACD,qBAACC;0BAAE;;;;IAIP,MAAMG,mCACJ,sBAACL;;0BACC,qBAACA;0BAAK;;0BACN,qBAACC;0BACD,qBAACA;0BACD,qBAACA;0BACD,qBAACC;0BAAE;;;;IAIP,MAAMI,8BACJ,qBAACF;kBAAI;;IAGP,MAAMG,2BAA2B;IAE/B,qBAAO,sBAACH;QAAII,OAAO;YAACC,SAAS;YAAQC,eAAe;YAAUC,QAAQ;QAAM;;0BAC1E,qBAACrB,sBAAa,0CAAKE;gBAAMG,MAAMA;;0BAE/B,sBAACS;gBAAII,OAAO;oBAACC,SAAS;oBAAQC,eAAe;oBAAUC,QAAQ;oBAAQC,OAAO;gBAAa;;kCAC3F,qBAACC,eAAM;wBAACnB,SAAS,IAAME,QAAQG;kCAA6B;;kCAC5D,qBAACc,eAAM;wBAACnB,SAAS,IAAME,QAAQO;kCAAoB;;kCACnD,qBAACU,eAAM;wBAACnB,SAAS,IAAME,QAAQS;kCAAqB;;kCACpD,qBAACQ,eAAM;wBAACnB,SAAS,IAAME,QAAQU;kCAAgB;;kCAC/C,qBAACO,eAAM;wBAACnB,SAAS,IAAME,QAAQW;kCAA2B;;;;;;AAG9D;AAEO,MAAMtB,wBAAwBM,SAASuB,IAAI,CAAC,CAAC;AAEpD7B,sBAAsBO,IAAI,GAAG,CAAC"}