intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/FormElements/UserContacts/partial/AnyOuterClass.scss

@@ -0,0 +1,21 @@
+@import 'https://fonts.googleapis.com/css2?family=Sarabun&display=swap';
+
+.any-outer-class__user-contacts {
+  .user-contacts__email,
+  .user-contacts__phone,
+  .user-contacts__contacts {
+    font-family: Sarabun, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    text-decoration: none;
+    letter-spacing: 0.2px;
+
+    color: #1f7499;
+  }
+
+  .user-contacts__contacts {
+    color: #3b414b;
+  }
+}

package/dist/src/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js

@@ -0,0 +1,107 @@
+"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 _utils = require("../../../Functions/utils");
+const _VariantsListRadioItem = /*#__PURE__*/ _interop_require_default(require("./partials/VariantsListRadioItem"));
+require("./VariantsListRadio.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 RC = "variants-list-radio";
+const VariantsListRadio = ({ items: outerItems, value: outerValue, onChange = ()=>{}, isWithBorders, itemsContentRenderMode, isRadioPositionReverse, isUseAsOptionsList, disabled, isDisabled, id, className, testId = "variants-list-radio", attributesOfNativeInput, isMixWithPersonalAttributes })=>{
+    const [items, setItems] = (0, _react.useState)(outerItems);
+    const [value, setValue] = (0, _react.useState)(outerValue);
+    const componentnId = id || "variantsListRadio";
+    const mode = itemsContentRenderMode === "col" ? "col" : "row";
+    const isElementDisabled = disabled || isDisabled;
+    const handleChange = (newValue)=>{
+        setValue(newValue);
+        onChange(newValue);
+    };
+    (0, _react.useEffect)(()=>{
+        if (!(0, _utils.compare)(outerItems, items)) setItems(outerItems);
+    }, [
+        outerItems
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (value !== outerValue) setValue(outerValue);
+    }, [
+        outerValue
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        id: componentnId,
+        "data-testid": testId,
+        className: (0, _classnames.default)(RC, `${RC}_items-content-${mode}`, className, {
+            [`${RC}_with-borders`]: isWithBorders && !isUseAsOptionsList,
+            [`${RC}_radio-position-reverse`]: isRadioPositionReverse
+        }),
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_VariantsListRadioItem.default, {
+                RC: RC,
+                parentId: componentnId,
+                item: {
+                    ...item,
+                    isDisabled: item.disabled || item.isDisabled || isElementDisabled || false
+                },
+                value: value,
+                onChange: handleChange,
+                attributesOfNativeInput: attributesOfNativeInput,
+                isMixWithPersonalAttributes: isMixWithPersonalAttributes,
+                parentDisabled: disabled,
+                isUseAsOptionsList: isUseAsOptionsList
+            }, `variants-list-radio-id-${componentnId}-item-id-${item.value}`))
+    });
+};
+const _default = VariantsListRadio;

package/dist/src/Atomic/FormElements/VariantsListRadio/VariantsListRadio.scss

@@ -0,0 +1,306 @@
+.variants-list-radio {
+  //item
+  --variants-list-radio--item-padding: 10px 16px;
+  --variants-list-radio--item-border-radius: 6px;
+  --variants-list-radio--margin-after-item: 2px;
+  --variants-list-radio--item-background-color: #fff;
+  --variants-list-radio--item-highlight-background-color: #f7f8fa;
+  --variants-list-radio--item-with-borders-highlight-background-color: transparent;
+  --variants-list-radio--disabled-item-highlight-background-color: transparent;
+  --variants-list-radio--disabled-item-with-borders-highlight-background-color: #f7f8fa;
+  --variants-list-radio--item-border-color: rgba(58, 72, 122, 0.15);
+  --variants-list-radio--item-border-color-active: #1f7499;
+
+  // radio
+  --variants-list-radio--radio-margin: 8px;
+  --variants-list-radio--radio-diameter: 16px;
+  --variants-list-radio--radio-mark-diameter: 8px;
+  --variants-list-radio--radio-container-min-height: 20px;
+  --variants-list-radio--radio-color: #a6aab4;
+  --variants-list-radio--radio-color-active: var(--variants-list-radio--item-border-color-active);
+
+  // content
+  //    label
+  --variants-list-radio--label-font-family: sarabun;
+  --variants-list-radio--label-font-size: 16px;
+  --variants-list-radio--label-font-style: normal;
+  --variants-list-radio--label-font-weight: 400;
+  --variants-list-radio--label-line-height: 24px;
+  --variants-list-radio--label-letter-spacing: 0.2px;
+  --variants-list-radio--label-color: #171d33;
+
+  //    description
+  --variants-list-radio--description-font-family: sarabun;
+  --variants-list-radio--description-font-size: 14px;
+  --variants-list-radio--description-font-style: normal;
+  --variants-list-radio--description-font-weight: 400;
+  --variants-list-radio--description-line-height: 20px;
+  --variants-list-radio--description-letter-spacing: 0.2px;
+  --variants-list-radio--description-color: #757f8c;
+
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  background-color: transparent;
+
+  // default mod - row
+  &__item {
+    display: flex;
+    flex-flow: row-reverse nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    box-sizing: border-box;
+    width: 100%;
+    margin-bottom: var(--variants-list-radio--margin-after-item);
+    padding: var(--variants-list-radio--item-padding);
+
+    cursor: pointer;
+
+    border-radius: var(--variants-list-radio--item-border-radius);
+    background-color: var(--variants-list-radio--item-background-color);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.variants-list-radio__item_as-option {
+      padding: 0;
+    }
+
+    &-radio-container {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: center;
+
+      box-sizing: border-box;
+      width: var(--variants-list-radio--radio-diameter);
+      min-height: var(--variants-list-radio--radio-container-min-height);
+      margin-left: var(--variants-list-radio--radio-margin);
+    }
+
+    &-radio {
+      position: relative;
+
+      box-sizing: border-box;
+      width: var(--variants-list-radio--radio-diameter);
+      height: var(--variants-list-radio--radio-diameter);
+
+      border: 1px solid var(--variants-list-radio--radio-color);
+      border-radius: 50%;
+      background: #fff;
+
+      & > input {
+        display: none;
+      }
+
+      &-mark {
+        position: absolute;
+        top: calc(50% - (var(--variants-list-radio--radio-mark-diameter) / 2));
+        left: calc(50% - (var(--variants-list-radio--radio-mark-diameter) / 2));
+
+        width: var(--variants-list-radio--radio-mark-diameter);
+        height: var(--variants-list-radio--radio-mark-diameter);
+
+        border-radius: 50%;
+        background: transparent;
+      }
+    }
+
+    &-content {
+      display: flex;
+      overflow: hidden;
+      flex-grow: 1;
+
+      box-sizing: border-box;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &-wrapper {
+        display: flex;
+        overflow: hidden;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: center;
+
+        box-sizing: border-box;
+        width: fit-content;
+
+        vertical-align: middle;
+      }
+
+      &-label,
+      &-description {
+        overflow: hidden;
+
+        box-sizing: border-box;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &-label {
+        font-family: var(--variants-list-radio--label-font-family);
+        font-size: var(--variants-list-radio--label-font-size);
+        font-weight: var(--variants-list-radio--label-font-weight);
+        font-style: var(--variants-list-radio--label-font-style);
+        line-height: var(--variants-list-radio--label-line-height);
+        letter-spacing: var(--variants-list-radio--label-letter-spacing);
+
+        color: var(--variants-list-radio--label-color);
+      }
+
+      &-description {
+        font-family: var(--variants-list-radio--description-font-family);
+        font-size: var(--variants-list-radio--description-font-size);
+        font-weight: var(--variants-list-radio--description-font-weight);
+        font-style: var(--variants-list-radio--description-font-style);
+        line-height: var(--variants-list-radio--description-line-height);
+        letter-spacing: var(--variants-list-radio--description-letter-spacing);
+
+        color: var(--variants-list-radio--description-color);
+      }
+    }
+
+    &:hover {
+      .variants-list-radio {
+        &__item-radio {
+          border-color: var(--variants-list-radio--radio-color-active);
+        }
+      }
+    }
+
+    &_active {
+      background-color: var(--variants-list-radio--item-highlight-background-color);
+
+      .variants-list-radio__item {
+        &-radio {
+          border-color: var(--variants-list-radio--radio-color-active);
+
+          &-mark {
+            background-color: var(--variants-list-radio--radio-color-active);
+          }
+        }
+      }
+
+      &.variants-list-radio__item_as-option {
+        background-color: var(--variants-list-radio--item-background-color);
+      }
+    }
+
+    &_disabled {
+      pointer-events: none;
+
+      background-color: var(--variants-list-radio--item-background-color);
+
+      .variants-list-radio {
+        &__item-radio {
+          border-color: #a6aab4;
+          background-color: #e8e9ec;
+        }
+      }
+
+      &.variants-list-radio__item_active {
+        background-color: var(--variants-list-radio--disabled-item-highlight-background-color);
+
+        .variants-list-radio__item-radio-mark {
+          background-color: #757f8c;
+        }
+
+        &.variants-list-radio__item_as-option {
+          .variants-list-radio__item-content-label {
+            color: #3b414b;
+          }
+        }
+      }
+
+      &.variants-list-radio__item_as-option {
+        .variants-list-radio__item-content-label {
+          color: #757f8c;
+        }
+      }
+    }
+  }
+
+  &_items-content-row {
+    .variants-list-radio__item {
+      height: 40px;
+
+      &-content {
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: stretch;
+
+        &-wrapper {
+          &:first-child {
+            margin-right: 4px;
+          }
+          &:last-child {
+            flex-grow: 1;
+
+            width: 0;
+            padding-top: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  &_items-content-col {
+    .variants-list-radio__item {
+      height: fit-content;
+
+      &-content {
+        flex-flow: column nowrap;
+        justify-content: flex-start;
+        align-items: stretch;
+
+        &-wrapper {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  &_radio-position-reverse {
+    .variants-list-radio {
+      &__item {
+        flex-flow: row nowrap;
+
+        &-radio-container {
+          margin-right: var(--variants-list-radio--radio-margin);
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &_with-borders {
+    .variants-list-radio {
+      &__item {
+        border: solid 1px var(--variants-list-radio--item-border-color);
+
+        &_active {
+          border-color: var(--variants-list-radio--item-border-color-active);
+          background-color: var(--variants-list-radio--item-with-borders-highlight-background-color);
+        }
+
+        &_disabled {
+          &.variants-list-radio__item_active {
+            border-color: var(--variants-list-radio--item-border-color);
+            background-color: var(
+              --variants-list-radio--disabled-item-with-borders-highlight-background-color
+            );
+          }
+        }
+      }
+    }
+  }
+}

package/dist/src/Atomic/FormElements/VariantsListRadio/VariantsListRadio.stories.js

@@ -0,0 +1,193 @@
+"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, {
+    Radio: function() {
+        return Radio;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _VariantsListRadio = /*#__PURE__*/ _interop_require_default(require("./VariantsListRadio"));
+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: 'Form Elements/VariantsListRadio',
+    component: _VariantsListRadio.default,
+    argTypes: {
+        items: {
+            description: 'List items array (of objects). '
+        },
+        isWithBorders: {
+            description: 'boolean, how render items?'
+        },
+        itemsContentRenderMode: {
+            description: 'string "row" or "col" ("row" is default), how render item labels and description?'
+        },
+        isRadioPositionReverse: {
+            description: 'boolean, if true, the radio element in items is positioned on the left'
+        },
+        isUseAsOptionsList: {
+            description: 'boolean, it looks like a list of options, descriptions are not displayed, dominates the isWithBorders property'
+        },
+        disabled: {
+            description: 'boolean, disable all radio items'
+        },
+        isDisabled: {
+            description: 'like disabled'
+        },
+        id: {
+            description: 'string. optional'
+        },
+        testId: {
+            description: 'string. optional'
+        },
+        className: {
+            description: 'string. optional'
+        },
+        onChange: {
+            description: 'function'
+        },
+        attributesOfNativeInput: {
+            description: 'Object. Optional. This is list of attributes to add in native input, format { ..., [atribut_key]: atribut_value, ... }'
+        },
+        isMixWithPersonalAttributes: {
+            description: 'boolean, if true then personal attributesOfNativeInput of item must be mixed by an common attributesOfNativeInput'
+        }
+    }
+};
+const containerStyles = {
+    boxSizing: 'border-box',
+    width: '180px'
+};
+const buttonStyles = {
+    border: '1px solid black',
+    padding: '5px'
+};
+const Template = (args)=>{
+    const [value, setValue] = (0, _react.useState)(args.value);
+    (0, _react.useEffect)(()=>{
+        if (value !== args.value) setValue(args.value);
+    }, [
+        args.value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: containerStyles,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariantsListRadio.default, {
+                ...args,
+                id: 'test-VariantsListRadio',
+                value: value,
+                onChange: (value)=>setValue(value),
+                className: ''
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                style: buttonStyles,
+                onClick: ()=>{
+                    setValue(args.items[0].value);
+                },
+                children: [
+                    "Change value to ",
+                    args.items[0].label
+                ]
+            })
+        ]
+    });
+};
+const Radio = Template.bind({});
+Radio.args = {
+    items: [
+        {
+            value: '1',
+            label: 'First',
+            description: 'bla',
+            disabled: true
+        },
+        {
+            value: '2',
+            label: 'Second',
+            description: 'bla-bla',
+            isDisabled: true
+        },
+        {
+            value: '3',
+            label: 'Third',
+            description: 'bla-bla-bla',
+            attributesOfNativeInput: {
+                'data-test1': 'Дратути!'
+            }
+        }
+    ],
+    value: '',
+    isWithBorders: false,
+    itemsContentRenderMode: 'row',
+    isRadioPositionReverse: false,
+    isUseAsOptionsList: false,
+    disabled: false,
+    isDisabled: false,
+    id: 'storybook-VariantsListRadio',
+    className: '',
+    testId: 'storybook-VariantsListRadio',
+    attributesOfNativeInput: {
+        'data-test2': 'И снова Дратути!'
+    },
+    isMixWithPersonalAttributes: false
+};