ecomlab-components-next 0.1.28 → 0.1.30

package/dist/components/ConstructorComponents/HeaderMain/Header.scss

@@ -0,0 +1,551 @@
+.header {
+    flex-wrap: wrap;
+    width: 100%;
+    min-height: 96px;
+    height: auto;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    row-gap: 24px;
+    column-gap: 40px;
+    justify-content: space-between;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    .panel-btn {
+        display: flex;
+        gap: 20px;
+    }
+
+    .btn-box {
+        display: none;
+    }
+
+
+    &__content {
+        display: flex;
+        display: flex;
+        padding: 16px;
+        width: 100%;
+        flex-direction: column;
+        gap: 14px;
+        border-radius: 14px;
+        border: 1px #D0D0D0 solid;
+
+        .nav-group {
+            width: 100%;
+            justify-content: space-between;
+            align-items: center;
+            column-gap: 32px;
+            row-gap: 16px;
+            display: flex;
+        }
+    }
+
+    &__btn-green,
+    &__btn-tg,
+    &__wa-tg {
+        display: flex;
+        height: 40px;
+        padding: 8px 12px;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+        border-radius: 4px;
+        border: 1px #00B45E solid;
+        background: #FFF;
+        color: #00B45E;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:hover {
+            transition: 0.5s;
+            color: #fff;
+            background-color: #00B45E;
+
+            svg {
+                path {
+                    stroke: #fff;
+                    fill: #fff;
+                }
+
+                circle {
+                    fill: #fff;
+                }
+            }
+        }
+    }
+
+    &__btn-tg {
+        border: 1px #2295FF solid;
+
+        &:hover {
+            background-color: #2295FF;
+        }
+    }
+
+    &__wa-tg {
+        border: 1px solid #1DDC5E;
+
+        &:hover {
+            background-color: #1DDC5E;
+        }
+    }
+
+
+    .btn-and-text {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: 4px;
+
+        .text {
+            font-size: 18px;
+            white-space: nowrap;
+        }
+
+        .btn__green {
+            font-size: 14x;
+            min-width: 200px;
+            max-width: 200px;
+            min-height: 36px;
+            margin: 0;
+        }
+
+        .btn-burger,
+        .btn-close {
+            display: none;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        row-gap: 16px;
+        column-gap: 8px;
+        position: relative;
+    }
+
+    .menu-items-wrap,
+    .menu-items-wrap_active {
+        // position: relative;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        border-bottom: 2px solid #ffffff;
+        cursor: pointer;
+
+        &:hover,
+        &:focus,
+        &_active {
+
+            .drop-list-menu-container {
+                opacity: 1;
+                visibility: visible;
+                transition: 0.5s;
+                transform: translate(0px, 0px)
+            }
+        }
+    }
+
+    // .menu-items-wrap {
+    //     display: flex;
+    //     align-items: center;
+    //     gap: 10px;
+    //     // position: relative;
+    //     padding-bottom: 20px;
+    //     padding-left: 20px;
+    //     padding-right: 20px;
+    //     border-bottom: 2px solid #ffffff;
+    //     cursor: pointer;
+
+    //     &:nth-child(1) {
+    //         padding-left: 0;
+    //     }
+
+    //     &:hover,
+    //     &:focus {
+    //         border-bottom: 2px solid #88306D;
+    //         transition: 0.3s;
+    //         outline: none;
+
+    //         .drop-list-menu,
+    //         .drop-list-menu_service,
+    //         .drop-list-menu_services {
+    //             opacity: 1;
+    //             visibility: visible;
+    //             transition: 0.5s;
+    //             transform: translate(0px, 0px);
+    //             max-width: 100vw;
+    //         }
+    //     }
+    // }
+
+    &__nav-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    &__main {
+        width: 100%;
+        justify-content: center;
+        display: flex;
+        background-color: #FFDE95;
+        gap: 24px;
+        padding: 24px;
+    }
+
+    &__title-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        max-width: 545px;
+        height: auto;
+
+        .title {
+            text-align: left;
+            font-size: 40px;
+            font-weight: 500;
+        }
+
+        .text {
+            margin-top: 30px;
+            font-size: 20px;
+            line-height: 24.2px;
+        }
+    }
+
+    .language-selection {
+        display: flex;
+        height: 40px;
+        padding: 8px 12px;
+        justify-content: center;
+        align-items: center;
+        gap: 6px;
+        border-radius: 4px;
+        border: 1px #00B45E solid;
+        background: #FFF;
+        color: #00B45E;
+        font-family: "Golos Text";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        white-space: nowrap;
+        cursor: pointer;
+        position: relative;
+
+        &:hover,
+        &:focus {
+            transition: 0.5s;
+            color: #fff;
+            background-color: #00B45E;
+
+            svg {
+                path {
+                    stroke: #fff;
+                    fill: #fff;
+                }
+
+                circle {
+                    fill: #fff;
+                }
+            }
+        }
+
+        img {
+            width: 16px;
+            height: 16px;
+        }
+
+        .text {
+            color: #00B45E;
+            font-family: "Golos Text";
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 24px;
+            white-space: nowrap;
+        }
+
+        .text.opened {
+            color: #00B45E;
+            font-family: "Golos Text";
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 24px;
+            white-space: nowrap;
+
+            &::after {
+                transform: rotate(180deg);
+            }
+        }
+
+        .select-language {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            left: calc(0px);
+            width: 62px;
+            min-width: 62px;
+            height: auto;
+            z-index: 1;
+            top: calc(100% + 8px);
+            border-radius: 4px;
+            border: 1px #00B45E solid;
+            background: #FFF;
+            overflow: hidden;
+
+            .btn__language {
+                border: none;
+                position: relative;
+                cursor: pointer;
+                width: 100%;
+                background-color: inherit;
+                color: #00B45E;
+                font-family: "Golos Text";
+                font-size: 16px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 24px;
+                white-space: nowrap;
+                height: 32px;
+
+                &:hover {
+                    transition: 0.5s;
+                    background-color: #00B45E;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+
+.input-field {
+    border: 1px solid #F0F0F0;
+    height: 32px;
+    border-radius: 4px;
+    max-width: 400px;
+    width: 100%;
+    min-width: 200px;
+    padding: 0.63em 0.63em 0.63em 2.3em;
+    background-image: url("./img/search.svg");
+    background-repeat: no-repeat;
+    background-position: 15px center;
+    font-family: 'Inter';
+    font-size: 0.9em;
+    color: black;
+    cursor: pointer;
+
+    &::placeholder {
+        font-family: 'Inter';
+        font-size: 0.9em;
+        color: #D9D9D9;
+    }
+
+    &:focus {
+        outline: 1px solid grey;
+
+        &::placeholder {
+            color: #000000;
+            transition: 0.5;
+        }
+    }
+
+    &:hover {
+        &::placeholder {
+            color: #000000;
+            transition: 0.5;
+        }
+    }
+}
+
+.search {
+    position: relative;
+    width: 110px;
+    height: 36px;
+    border-radius: 22px;
+    padding: 10px;
+    transition-duration: 1000ms;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    font-size: 14px;
+    color: transparent;
+    border: 1px solid #ffffff;
+    overflow: hidden;
+    background-image: url('./img/search.svg');
+    background-color: white;
+    background-size: 16px;
+    background-position: right 10px center;
+    padding-left: 30px;
+    transition: 0s;
+
+    &:focus {
+        transition: 1s;
+        width: 490px;
+        cursor: pointer;
+        padding-left: 16px;
+        color: var(--unnamed, #3B2C37);
+        /* Меню/Главный текст меню */
+        font-family: Montserrat;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        outline: none;
+        border: 1px solid #ffffff;
+        background-position: right 10px center;
+        border-radius: 16px;
+        border: 1px solid var(--5, rgba(59, 44, 55, 0.05));
+        /* Тень выпадающий список */
+        box-shadow: 0px 0px 10px 0px rgba(0, 42, 80, 0.10);
+    }
+
+    &::placeholder {
+        color: var(--30, rgba(59, 44, 55, 0.30));
+        font-family: Montserrat;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    }
+}
+
+@media(max-width: 1345px) {
+    .header {
+        &__nav-item {
+            font-size: 14px;
+        }
+    }
+}
+
+@media(max-width: 1240px) {
+    .header {
+        .nav-group {
+            gap: 16px;
+        }
+    }
+}
+
+
+@media(max-width: 1200px) {
+    .header {
+        padding: 24px;
+
+        .panel-btn {
+            display: flex;
+            gap: 12px;
+        }
+
+        .btn-box {
+            display: flex;
+        }
+
+        .nav-group {
+            gap: 12px;
+        }
+
+        .search {
+            &::placeholder {
+                color: white;
+            }
+
+            &:focus {
+                width: 100%;
+
+                &::placeholder {
+                    color: rgba(59, 44, 55, 0.30);
+                }
+            }
+        }
+
+        .btn-and-text {
+            justify-content: end;
+            width: 100%;
+            margin-left: auto;
+
+            .btn__green {
+                display: none;
+            }
+
+            .btn-burger,
+            .btn-close {
+                display: flex;
+                display: flex;
+                width: 16px;
+                height: 16px;
+                border: none;
+                background-color: inherit;
+                background-image: url('./img/burger.svg');
+                background-position: center;
+                background-repeat: no-repeat;
+                cursor: pointer;
+                // margin-right: 24px;
+            }
+
+            .btn-close {
+                background-image: url('./img/close.svg');
+            }
+        }
+
+        // .language-selection {
+        //     .text {
+        //         &::before {
+        //             display: none;
+        //         }
+        //     }
+        // }
+    }
+}
+
+@media(max-width: 1200px) {
+    .header {
+        padding: 10px 16px;
+
+        .panel-btn {
+            // display: none;
+            gap: 12px;
+        }
+
+        .btn-box {
+            display: flex;
+        }
+
+        &__nav {
+            display: none;
+        }
+    }
+}
+
+@media(max-width: 670px) {
+    .header {
+        padding: 10px 12px;
+
+        .panel-btn {
+            gap: 12px;
+        }
+
+        .btn-box {
+            display: flex;
+        }
+
+        &__btn-tg, &__link-box {
+            display: none;
+        }
+    }
+}

package/dist/components/ConstructorComponents/HeaderMain/HeaderMain.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HeaderMainTest = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Header = _interopRequireDefault(require("./Header"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'HeaderMain',
+  component: _Header["default"]
+};
+var HeaderMainTest = exports.HeaderMainTest = function HeaderMainTest() {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], null);
+};

package/dist/components/ConstructorComponents/HeaderMain/Logo/Logo.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogoBox = void 0;
+var _link = _interopRequireDefault(require("next/link"));
+var _Logo = _interopRequireDefault(require("./img/Logo.svg"));
+var _image = _interopRequireDefault(require("next/image"));
+require("./Logo.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+//import {  ReactComponent as Logo} from './img/Logo.svg'
+
+var LogoBox = exports.LogoBox = function LogoBox() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "logo",
+    onClick: function onClick(e) {
+      var _window;
+      (_window = window) === null || _window === void 0 || _window.scrollTo(0, 0);
+    }
+  }, /*#__PURE__*/React.createElement(_link["default"], {
+    className: "logo__link",
+    href: "/"
+  }, "ECOMRU.RU"));
+};

package/dist/components/ConstructorComponents/HeaderMain/Logo/Logo.scss

@@ -0,0 +1,15 @@
+.logo  {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+   
+    &__link {
+        color: #333;
+        text-align: center;
+        font-family: "Golos Text";
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 32px;
+    }
+}