intelicoreact 1.5.32 → 1.5.34

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

@@ -0,0 +1,177 @@
+@import 'https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap';
+
+.range-slider {
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  max-width: 270px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+
+    margin-bottom: 2px;
+
+    &__label {
+      font-family: Sarabun, sans-serif;
+      font-size: 12px;
+      font-weight: 500;
+      font-style: normal;
+      line-height: 18px;
+      letter-spacing: 0.2px;
+
+      color: #757f8c;
+    }
+
+    &__selected-range {
+      display: flex;
+      align-items: center;
+
+      padding: 0 4px 0 8px;
+
+      border-radius: 16px;
+      background: #eaf2ff;
+
+      &--text {
+        margin-right: 2px;
+
+        font-family: Sarabun, sans-serif;
+        font-size: 12px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 18px;
+        letter-spacing: 0.2px;
+
+        color: #3b414b;
+      }
+
+      &--reset {
+        display: flex;
+        align-items: center;
+
+        cursor: pointer;
+
+        color: #9aa0b9;
+        border-left: 1px solid #cde1ff;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  &__inputs {
+    display: flex;
+
+    &--from {
+      margin-right: 4px;
+    }
+
+    &--to {
+      margin-left: 4px;
+    }
+
+    .input__wrap {
+      box-sizing: border-box;
+      height: auto;
+      max-height: 40px;
+      padding: 9px 16px;
+
+      border: 1px solid #e1e8f1;
+      border-radius: 6px;
+      background: #fff;
+
+      &_focus {
+        border-color: #166c92;
+        filter: none;
+      }
+
+      input {
+        box-sizing: border-box;
+        padding: 0;
+
+        font-family: Sarabun, sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        font-style: normal;
+        line-height: 22px;
+        letter-spacing: 0.2px;
+
+        color: #171d33;
+      }
+    }
+  }
+
+  &__track {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    height: 16px;
+    margin-top: 2px;
+    padding: 0 8px;
+
+    &__line {
+      position: absolute;
+      left: 0;
+
+      box-sizing: border-box;
+      width: 100%;
+      height: 4px;
+
+      border-radius: 4px;
+      background: #d6d9e4;
+    }
+
+    &__range {
+      position: relative;
+
+      display: flex;
+      justify-content: space-between;
+
+      height: 4px;
+
+      border-radius: 4px;
+      background: #1f7499;
+
+      &-triggers {
+        position: absolute;
+
+        width: 100%;
+
+        &--trigger {
+          position: absolute;
+          z-index: 3;
+          top: 50%;
+
+          box-sizing: border-box;
+          width: 16px;
+          height: 16px;
+
+          cursor: move;
+
+          border: 1px solid #1f7499;
+          border-radius: 50%;
+          background: #fff;
+          box-shadow: 0 4px 26px rgb(0 67 96 / 10%);
+
+          &-left {
+            transform: translate(-50%, -50%);
+          }
+
+          &-right {
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+  }
+}
+
+.moving-cursor {
+  cursor: move !important;
+}

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

@@ -0,0 +1,401 @@
+"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, {
+    RangeSliderTemplate: function() {
+        return RangeSliderTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _RangeSlider = /*#__PURE__*/ _interop_require_default(require("./RangeSlider"));
+require("./RangeSlider.stories.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: 'Form Elements/RangeSlider',
+    component: _RangeSlider.default,
+    argTypes: {
+        min: {
+            name: 'min',
+            type: {
+                name: 'number',
+                required: true
+            },
+            description: 'Minimal value of Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        max: {
+            name: 'max',
+            type: {
+                name: 'number',
+                required: true
+            },
+            description: 'Maximal value of Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 100
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        minRange: {
+            name: 'minRange',
+            type: {
+                name: 'number',
+                required: false
+            },
+            description: 'Minimal Range',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        precision: {
+            name: 'precision',
+            type: {
+                name: 'number',
+                required: false
+            },
+            description: 'Number of Symbols After Comma',
+            table: {
+                type: {
+                    summary: 'number'
+                },
+                defaultValue: {
+                    summary: 0
+                }
+            },
+            control: {
+                type: 'number'
+            }
+        },
+        value: {
+            name: 'value',
+            type: {
+                name: 'object',
+                required: false
+            },
+            description: 'Incoming Value',
+            defaultValue: {
+                from: 0,
+                to: 100
+            },
+            table: {
+                type: {
+                    summary: 'object'
+                },
+                defaultValue: {
+                    summary: JSON.stringify({
+                        from: 0,
+                        to: 100
+                    }, null, 2)
+                }
+            },
+            control: {
+                type: 'object',
+                value: {
+                    from: 0,
+                    to: 100
+                }
+            }
+        },
+        unit: {
+            name: 'unit',
+            type: {
+                name: 'string',
+                required: false
+            },
+            description: 'Unit for RangeSlider Values',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: ''
+                }
+            },
+            control: {
+                type: 'text'
+            }
+        },
+        label: {
+            name: 'label',
+            type: {
+                name: 'string',
+                required: true
+            },
+            description: 'Label Text for RangeSlider',
+            table: {
+                type: {
+                    summary: 'string'
+                },
+                defaultValue: {
+                    summary: 'Label'
+                }
+            },
+            control: {
+                type: 'text'
+            }
+        },
+        onChange: {
+            name: 'onChange',
+            type: {
+                name: 'function',
+                required: false
+            },
+            description: 'Callback function for onChange Event',
+            table: {
+                type: {
+                    summary: 'function'
+                },
+                defaultValue: {
+                    summary: `({from, to}) => {}`
+                }
+            },
+            control: {
+                type: 'function'
+            }
+        }
+    }
+};
+const Template = (args)=>{
+    args = {
+        0: {
+            ...args
+        },
+        1: {
+            min: 5,
+            max: 18.9,
+            label: 'APR range',
+            unit: '%',
+            minRange: 1,
+            precision: 1
+        },
+        2: {
+            min: 0,
+            max: 10,
+            label: 'Merchant Fee range',
+            unit: '%',
+            minRange: 1,
+            precision: 2
+        }
+    };
+    const [values1, setValues1] = (0, _react.useState)({
+        from: 0,
+        to: 1500
+    });
+    const [values2, setValues2] = (0, _react.useState)({
+        from: 5,
+        to: 18.9
+    });
+    const [values3, setValues3] = (0, _react.useState)({
+        from: 0,
+        to: 10
+    });
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            display: 'flex',
+            maxWidth: '900px',
+            padding: '48px',
+            margin: '16px auto',
+            justifyContent: 'space-between'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
+                        ...args[0],
+                        value: values1,
+                        onChange: (v)=>{
+                            console.log(v);
+                            setValues1(v);
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "desc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Value:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(values1, null, 2)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Arguments:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(args[0], null, 2)
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
+                        ...args[1],
+                        value: values2,
+                        onChange: setValues2
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "desc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Value:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(values2, null, 2)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Arguments:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(args[1], null, 2)
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_RangeSlider.default, {
+                        ...args[2],
+                        value: values3,
+                        onChange: setValues3
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "desc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Value:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(values3, null, 2)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("code", {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h4", {
+                                        children: "Arguments:"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
+                                        children: JSON.stringify(args[2], null, 2)
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const RangeSliderTemplate = Template.bind({});
+RangeSliderTemplate.args = {
+    min: 0,
+    max: 15000,
+    rangeSymbol: '$',
+    label: 'Period range (months)',
+    minRange: 6,
+    precision: 0,
+    noLabel: false,
+    required: true,
+    noTrack: false
+};