adata-ui 0.1.0 → 0.1.4

package/src/components/Footer/Footer.vue

@@ -0,0 +1,233 @@
+<template>
+  <footer class="footer" :class="[{'paddinged': hasBottomMenu}]">
+    <div class="footer__top">
+      <ul class="nav">
+        <a class="logo adata-logo" href="https://adata.kz">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
+            <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
+            <path d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
+          </svg>
+        </a>
+        <div class="social">
+          <a target="_blank" href="https://www.facebook.com/adata.kz">
+            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="social__icon">
+              <path d="M13.6562 0H2.34375C1.05151 0 0 1.05151 0 2.34375V13.6562C0 14.9485 1.05151 16 2.34375 16H7.0625V10.3438H5.1875V7.53125H7.0625V5.625C7.0625 4.0741 8.3241 2.8125 9.875 2.8125H12.7188V5.625H9.875V7.53125H12.7188L12.25 10.3438H9.875V16H13.6562C14.9485 16 16 14.9485 16 13.6562V2.34375C16 1.05151 14.9485 0 13.6562 0Z" fill="#2C3E50"></path>
+            </svg>
+          </a>
+          <a target="_blank" href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els">
+            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="social__icon">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M3.01562 0.0166016C1.35877 0.0166016 0.015625 1.35975 0.015625 3.0166V13.001C0.015625 14.6578 1.35877 16.001 3.01562 16.001H13C14.6569 16.001 16 14.6578 16 13.001V3.0166C16 1.35975 14.6569 0.0166016 13 0.0166016H3.01562ZM14.3891 3.20021C14.3891 3.6416 14.0313 3.99943 13.5899 3.99943C13.1485 3.99943 12.7906 3.6416 12.7906 3.20021C12.7906 2.75881 13.1485 2.40099 13.5899 2.40099C14.0313 2.40099 14.3891 2.75881 14.3891 3.20021ZM8.01132 11.5982C9.99761 11.5982 11.6078 9.98805 11.6078 8.00176C11.6078 6.01548 9.99761 4.40528 8.01132 4.40528C6.02504 4.40528 4.41484 6.01548 4.41484 8.00176C4.41484 9.98805 6.02504 11.5982 8.01132 11.5982ZM8.01132 12.7971C10.6597 12.7971 12.8066 10.6501 12.8066 8.00176C12.8066 5.35339 10.6597 3.20645 8.01132 3.20645C5.36295 3.20645 3.21601 5.35339 3.21601 8.00176C3.21601 10.6501 5.36295 12.7971 8.01132 12.7971Z" fill="#2C3E50"></path>
+            </svg>
+          </a>
+          <a target="_blank" href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/about">
+            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="social__icon">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2ZM13.7528 4.98132C13.6144 4.46732 13.2092 4.06205 12.6952 3.92367C11.7561 3.66667 7.99997 3.66667 7.99997 3.66667C7.99997 3.66667 4.24381 3.66667 3.30477 3.91378C2.80066 4.05217 2.3855 4.46732 2.24712 4.98132C2 5.92036 2 7.86764 2 7.86764C2 7.86764 2 9.82479 2.24712 10.7539C2.3855 11.268 2.79077 11.6732 3.30477 11.8116C4.2537 12.0686 7.99997 12.0686 7.99997 12.0686C7.99997 12.0686 11.7561 12.0686 12.6952 11.8215C13.2092 11.6831 13.6144 11.2778 13.7528 10.7638C13.9999 9.82479 13.9999 7.87752 13.9999 7.87752C13.9999 7.87752 14.0098 5.92036 13.7528 4.98132ZM6.80392 9.59801L9.92747 7.799L6.80392 6V9.59801Z" fill="#2C3E50"></path>
+            </svg>          </a>
+          <a target="_blank" href="https://www.tiktok.com/@adata.kz?lang=ru-RU" >
+            <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="social__icon">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.895431 0 2V14C0 15.1046 0.895431 16 2 16H14C15.1046 16 16 15.1046 16 14V2C16 0.895431 15.1046 0 14 0H2ZM8.27136 9.89447C8.27136 10.8688 7.54987 11.506 6.65988 11.506C5.76988 11.506 5.04839 10.7845 5.04839 9.89447C5.04839 9.0988 5.7895 8.37096 6.68689 8.40404C6.86305 8.40404 7.06987 8.44599 7.15006 8.47436V6.62331C5.55588 6.30091 3.14893 7.62001 3.14893 9.89447C3.14893 11.506 4.38899 13.3333 6.65988 13.3333C8.93076 13.3333 10.1985 11.506 10.1985 9.89447V6.23373C10.5643 6.52374 11.6152 7.04631 12.8511 7.04631V5.229C11.406 5.25812 10.0956 3.98482 10.204 2.66667H8.27136V9.89447Z" fill="#2C3E50"></path>
+            </svg>
+          </a>
+        </div>
+        <li class="nav__item">
+          <a href="https://adata.kz/tariffs" class="nav__link">Тарифы</a>
+        </li>
+        <li class="nav__item">
+          <a href="https://adata.kz/about" class="nav__link">О сервисе</a>
+        </li>
+        <li class="nav__item">
+          <a href="https://adata.kz/apiInfo" class="nav__link">Описание API</a>
+        </li>
+        <li class="nav__item">
+          <a href="https://adata.kz/user-agreements" class="nav__link">Пользовательское соглашение</a>
+        </li>
+        <li class="nav__item">
+          <a href="https://adata.kz/vacancy" class="nav__link">Вакансии</a>
+        </li>
+        <li class="nav__item">
+          <a href="https://adata.kz/contacts" class="nav__link">Контакты</a>
+        </li>
+      </ul>
+    </div>
+    <div class="footer__bottom"><span>2022 © ТОО "Alldata"</span></div>
+  </footer>
+</template>
+
+<script>
+export default {
+  props: {
+    name: "Footer",
+    hasBottomMenu: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+ul, li {
+  list-style: none;
+  text-decoration: none;
+}
+
+a {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+* {
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.footer {
+  background: #BDC7CE4C;
+  font-size: 14px;
+  margin-top: 20px;
+  @media(max-width: 1025px) {
+    background: #F6F6F7;
+    &.paddinged {
+      padding-bottom: 60px;
+    }
+  }
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    max-width: 900px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 20px 24px;
+    @media(max-width: 1025px) {
+      flex-direction: column;
+      padding: 16px 16px;
+    }
+
+    .adata-logo {
+      display: none;
+      @media(max-width: 1025px) {
+          display: flex;
+          width: 77px;
+          height: 24px;
+      }
+    }
+
+    .nav {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @media(max-width: 1025px) {
+        display: grid;
+        grid-template-columns: 0.7fr 1fr;
+        column-gap: 15px;
+        row-gap: 15px;
+      }
+
+      &__link {
+        line-height: 19px;
+        color: #2c3e50;
+        @media(max-width: 1025px) {
+          font-size: 12px;
+        }
+
+        &:hover {
+          color: #9da3ac;
+        }
+
+        &:active {
+          color: #c4c4c4;
+        }
+      }
+    }
+
+    .social {
+      $self: &;
+      display: flex;
+      align-items: center;
+      margin-left: 15px;
+      order: 1;
+      @media (max-width: 1025px) {
+        margin-left: 0;
+        order: 0;
+      }
+      a {
+        display: flex;
+        align-items: center;
+        line-height: 19px;
+        text-decoration-line: none;
+        color: #007aff;
+        .social__icon {
+          margin: 2px 10px 2px 2px;
+          @media (max-width: 1025px) {
+            margin: 0 8px 0 0;
+          }
+        }
+        @media(max-width: 1025px) {
+          margin-left: 0;
+          &:not(:first-child) {
+            margin-left: 8px;
+          }
+        }
+        &:hover {
+          text-decoration: underline;
+        }
+
+        &:active {
+          color: #0055bb;
+          text-decoration-line: none;
+        }
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: #2C3E50;
+        @media(max-width: 1025px) {
+          width: 20px;
+          height: 20px;
+        }
+
+        &#{$self}__icon {
+          cursor: pointer;
+        }
+
+        &:hover {
+          fill: #9da3ac !important;
+        }
+
+        &:active {
+          fill: #c4c4c4 !important;
+        }
+      }
+    }
+  }
+
+  &__bottom {
+    text-align: center;
+    padding: 11.5px 0 13px;
+    border: 1px solid #BDC7CE;
+    @media(max-width: 1025px) {
+      background: #EFEFF0;
+      border: none;
+      border-top: 1px solid #bdc7ce;
+    }
+    span {
+      font-size: 10px;
+      line-height: 12px;
+      color: #71757a;
+      @media(max-width: 1025px) {
+        font-size: 10px;
+        line-height: 16px;
+      }
+    }
+  }
+}
+
+.mobile-head-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

package/src/components/Header/Header.vue

@@ -0,0 +1,135 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__inner">
+        <div class="header__left">
+          <NuxtLink class="logo" to="/">
+            <BaseIcon class="adata-logo">logo</BaseIcon>
+          </NuxtLink>
+          <div class="right mobile">
+            <div class="right-mobile">
+              <div v-if="currentCountry === 'kz' && checkRuRate" class="country-button-arrow"
+                   @click="isGeoOpen = !isGeoOpen">
+                <BaseIcon class="ic-18">kz</BaseIcon>
+              </div>
+              <div v-if="currentCountry === 'ru' && checkRuRate" class="country-button-arrow"
+                   @click="isGeoOpen = !isGeoOpen">
+                <BaseIcon class="ic-18">ru</BaseIcon>
+              </div>
+              <MobileToggle v-slot:default="{ animationClass }">
+                <div class="geo__filters" :class="animationClass" v-show="isGeoOpen">
+                  <slot>
+                    <div class="geo-button">
+                      <div class="geo-button-text">
+                        Выбор страны
+                      </div>
+                      <div class="geo-button-arrow" @click="isGeoOpen = false">
+                        <BaseIcon class="ic-18">cross</BaseIcon>
+                      </div>
+                    </div>
+                    <div class="country-button" @click="selectCountry('kz')">
+                      <div class="country-button-arrow" @click="isGeoOpen = false">
+                        <BaseIcon class="ic-18">kz</BaseIcon>
+                      </div>
+                      <div class="country-button-text">
+                        Казахстан
+                      </div>
+                    </div>
+                    <div class="country-button" @click="selectCountry('ru')">
+                      <div class="country-button-arrow" @click="isGeoOpen = false">
+                        <BaseIcon class="ic-18">ru</BaseIcon>
+                      </div>
+                      <div class="country-button-text">
+                        Россия
+                      </div>
+                    </div>
+                  </slot>
+                </div>
+              </MobileToggle>
+              <Profile v-bind:profileDropDown="profileDropDown"/>
+            </div>
+            <svg @click="changeValue">
+              <use
+                  :xlink:href="require('@/assets/icons/sprite.svg') + '#icon_hamburger'"
+              />
+            </svg>
+          </div>
+          <div class="menu desktop" v-if="subheaderItems.length > 0">
+            <div
+                v-for="(item, index) in subheaderItems"
+                :key="index"
+                class="menu__wrapper"
+            >
+              <nuxt-link
+                  class="menu__items"
+                  :class="{active: isMain && item.name === 'Контрагенты'}"
+                  active-class="active"
+                  :to="item.url"
+                  v-if="isExternalLink(item.url)"
+              >
+                {{ item.name }}
+              </nuxt-link>
+              <a :href="item.url" class="menu__items" v-else>
+                {{ item.name }}
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header__right desktop">
+          <Profile v-bind:profileDropDown="profileDropDown"/>
+        </div>
+      </div>
+    </div>
+    <MobileToggle v-slot="{ animationClass }">
+      <div
+          class="menu_mobile"
+          :class="animationClass"
+          v-show="subheaderItems.length > 0 && isOpen"
+      >
+        <div class="mobile-table-head">
+          <svg @click.stop="changeValue">
+            <use :xlink:href="require('@/assets/icons/sprite.svg') + '#close_hamburger'"></use>
+          </svg>
+        </div>
+        <div class="bb">
+          <div
+              v-for="(item, index) in subheaderItems"
+              :key="index"
+              class="menu_mobile-wrapper"
+          >
+            <div
+                @click="goToPage(item.url)"
+                class="menu_mobile-accordion"
+                :class="{'active-burger-tab': isActiveTab(item.url)}"
+            >
+              <span class="menu_mobile-items">
+                    {{ item.name }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MobileToggle>
+    <SubHeader :list="subheaderItems" class="desktop"/>
+    <SubHeaderMobile :list="subheaderItems" class="mobile" v-if="isProfilePage || isFinesPage"/>
+    <Navbar :options="searchDetailSidebar" :type_id="1" v-if="isCompanyPage && isMobile" class="mobile"/>
+    <Navbar :options="searchDetailSidebarRU" :type_id="1" v-if="isRussianPage && isMobile " class="mobile"/>
+    <Navbar :options="individualNavbarItems" :type_id="2" v-if="isIndividualPage && isMobile" class="mobile"/>
+  </header>
+</template>
+
+<script>
+export default {
+  name: "Header",
+  props: {
+    isMobile: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/PasswordField/PasswordField.stories.js

@@ -0,0 +1,16 @@
+import PasswordField from "./PasswordField.vue";
+
+export default {
+    title: 'PasswordField',
+    component: PasswordField,
+    template: "<text-field label='Example'></text-field>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { PasswordField },
+    props: Object.keys(argTypes),
+    template: '<password-field v-bind="$props"></password-field>'
+})
+
+export const BasePasswordField = Template.bind({});
+BasePasswordField.args = {label: 'Password'}

package/src/components/PasswordField/PasswordField.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+        ref="input"
+        :type="type"
+        :value="value"
+        required
+        @input="$emit('input', $event.target.value)"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label">{{ label }}</label>
+      <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
+          <path
+              d="M510.096 249.937c-4.032-5.867-100.928-143.275-254.101-143.275-131.435 0-248.555 136.619-253.483 142.443-3.349 3.968-3.349 9.792 0 13.781C7.44 268.71 124.56 405.329 255.995 405.329S504.549 268.71 509.477 262.886c3.094-3.669 3.371-8.981.619-12.949zM255.995 383.996c-105.365 0-205.547-100.48-230.997-128 25.408-27.541 125.483-128 230.997-128 123.285 0 210.304 100.331 231.552 127.424-24.534 26.645-125.291 128.576-231.552 128.576z"></path>
+          <path
+              d="M255.995 170.662c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333 85.333-38.272 85.333-85.333-38.272-85.333-85.333-85.333zm0 149.334c-35.285 0-64-28.715-64-64s28.715-64 64-64 64 28.715 64 64-28.715 64-64 64z"></path>
+        </svg>
+      </div>
+      <div v-else @click="showPassword = true" class="adt-text-block__icon desktop">
+        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closedEye">
+          <path
+              d="M316.332 195.662c-4.16-4.16-10.923-4.16-15.083 0s-4.16 10.944 0 15.083c12.075 12.075 18.752 28.139 18.752 45.248 0 35.285-28.715 64-64 64-17.109 0-33.173-6.656-45.248-18.752-4.16-4.16-10.923-4.16-15.083 0-4.16 4.139-4.16 10.923 0 15.083 16.085 16.128 37.525 25.003 60.331 25.003 47.061 0 85.333-38.272 85.333-85.333 0-22.807-8.874-44.247-25.002-60.332zm-45.462-23.531c-4.843-.853-9.792-1.472-14.869-1.472-47.061 0-85.333 38.272-85.333 85.333 0 5.077.619 10.027 1.493 14.869.917 5.163 5.419 8.811 10.475 8.811.619 0 1.237-.043 1.877-.171 5.781-1.024 9.664-6.571 8.64-12.352-.661-3.627-1.152-7.317-1.152-11.157 0-35.285 28.715-64 64-64 3.84 0 7.531.491 11.157 1.131 5.675 1.152 11.328-2.859 12.352-8.64 1.024-5.781-2.858-11.328-8.64-12.352z"></path>
+          <path
+              d="M509.462 249.102c-2.411-2.859-60.117-70.208-139.712-111.445-5.163-2.709-11.669-.661-14.379 4.587-2.709 5.227-.661 11.669 4.587 14.379 61.312 31.744 110.293 81.28 127.04 99.371-25.429 27.541-125.504 128-230.997 128-35.797 0-71.872-8.64-107.264-25.707-5.248-2.581-11.669-.341-14.229 4.971-2.581 5.291-.341 11.669 4.971 14.229 38.293 18.496 77.504 27.84 116.523 27.84 131.435 0 248.555-136.619 253.483-142.443 3.369-3.969 3.348-9.793-.023-13.782zM325.996 118.947c-24.277-8.171-47.829-12.288-69.995-12.288-131.435 0-248.555 136.619-253.483 142.443-3.115 3.669-3.371 9.003-.597 12.992 1.472 2.112 36.736 52.181 97.856 92.779a10.48 10.48 0 005.888 1.792c3.435 0 6.827-1.664 8.875-4.8 3.264-4.885 1.92-11.52-2.987-14.763-44.885-29.845-75.605-65.877-87.104-80.533 24.555-26.667 125.291-128.576 231.552-128.576 19.861 0 41.131 3.755 63.189 11.157 5.589 2.005 11.648-1.088 13.504-6.699 1.878-5.589-1.109-11.626-6.698-13.504z"></path>
+          <path
+              d="M444.865 67.128c-4.16-4.16-10.923-4.16-15.083 0L67.116 429.795c-4.16 4.16-4.16 10.923 0 15.083a10.716 10.716 0 007.552 3.115c2.731 0 5.461-1.045 7.531-3.115L444.865 82.211c4.16-4.16 4.16-10.923 0-15.083z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PasswordField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: [String, null],
+      required: true,
+    }
+  },
+  data() {
+    return {
+      showPassword: false
+    }
+  },
+  computed: {
+    type() {
+      return this.showPassword ? "text" : "password";
+    }
+  }
+}
+</script>
+

package/src/components/TextField/TextField.stories.js

@@ -0,0 +1,17 @@
+import TextField from "./TextField.vue";
+
+export default {
+    title: 'TextField',
+    component: TextField,
+    data: () => ({ value: "" }),
+    template: "<text-field @input='(val) => {this.value = val}' label='Example'></text-field>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { TextField },
+    props: Object.keys(argTypes),
+    template: '<text-field v-bind="$props"></text-field>'
+})
+
+export const Clearable = Template.bind({});
+Clearable.args = {label: 'Clearable', clearable: true}