adata-ui 0.1.2 → 0.1.6

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.stories.js

@@ -0,0 +1,55 @@
+import Header from './Header.vue'
+import {action} from "@storybook/addon-actions";
+
+export default {
+    title: 'Header',
+    component: Header,
+    template: '<Header></Header>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { Header },
+    props: Object.keys(argTypes),
+    template: '<Header @menuOpen="openMenu' +
+        '" @showBalanceModal="showBalance"' +
+        ' @setShowModal="showModal"' +
+        ' @logout="logoutClick"' +
+        ' @setIsReplenishModal="setReplenishModal" v-bind="$props"' +
+        '></Header>',
+    methods: {
+        openMenu(val) {
+            console.log(val);
+        },
+        showBalance(val) {
+            console.log(val);
+        },
+        showModal(val) {
+            console.log(val);
+        },
+        logoutClick() {
+            console.log("logout");
+        },
+        setReplenishModal(val) {
+            console.log(val);
+        },
+    }
+});
+
+export const MainHeader = Template.bind({});
+
+export const devHeader = Template.bind({});
+devHeader.args = {
+    isDev: true
+}
+
+export const headerAuthenticated = Template.bind({});
+headerAuthenticated.args = {
+    isDev: true,
+    isAuthenticated: true,
+    requestCount: 1000,
+    daysRemaining: "остаток дней: 29",
+    email: "sboranbayeva@gmail.com",
+    loginUrl: "https://id.adtdev.kz/auth/signin?url=https://pk.adata.kz/auth",
+    activeTabKey: 'counterparty',
+    balance: 1954900
+}

package/src/components/Header/Header.vue

@@ -0,0 +1,315 @@
+<template>
+  <header class="header">
+    <div class="container">
+      <div class="header__left">
+        <a class="logo" :href="toAdtdev('https://adata.kz')">
+          <svg class="adata-logo" 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="menu" v-if="subheaderItems.length > 0">
+          <div v-for="(item, index) in subheaderItems"
+               :key="index"
+               class="menu__wrapper menu__items"
+               :class="{active: locationUrl.includes(item.url)}"
+               @click="handleClick(item.url)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div class="header__right">
+        <slot name="chooseCountry"></slot>
+        <slot name="profile"></slot>
+        <Profile
+            v-bind:profileDropDown="profileDropDown"
+            :isDev="isDev"
+            :isAuthenticated="isAuthenticated"
+            :requestCount="requestCount"
+            :daysRemaining="daysRemaining"
+            :email="email"
+            :loginUrl="loginUrl"
+            @showBalanceModal="(val) => { $emit('showBalanceModal', val) }"
+            @setShowModal="(val) => { $emit('setShowModal', val) }"
+            @logout="$emit('logout')"
+            @setIsReplenishModal="(val) => { $emit('setIsReplenishModal', val) }"
+        />
+        <div class="menu_mobile--switcher" @click="changeValue">
+          <!-- icon_hamburger -->
+          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
+                  fill="#2C3E50"></path>
+          </svg>
+        </div>
+      </div>
+    </div>
+    <MobileToggle v-slot="{ animationClass }">
+      <div
+          class="menu_mobile"
+          :class="animationClass"
+          v-show="subheaderItems.length > 0 && isOpen"
+      >
+        <div @click.stop="changeValue" class="mobile-table-head">
+          <!-- close_hamburger -->
+          <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
+                  fill="#2C3E50"></path>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
+                  fill="#2C3E50"></path>
+          </svg>
+        </div>
+        <div
+            v-for="(item, index) in subheaderItems"
+            :key="index"
+            class="menu_mobile-wrapper"
+            :class="{'active-burger-tab': locationUrl.includes(item.url)}"
+            @click="handleClick(item.url)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </MobileToggle>
+  </header>
+</template>
+
+<script>
+import Profile from "./Profile";
+import { menuList } from "../../configs/navigationBarConfig";
+import { profileDropDown } from "../../configs/profileDropDown"
+import MobileToggle from "../transitions/VerticalMobileToggle";
+
+export default {
+  components: {
+    Profile,
+    MobileToggle,
+  },
+  props: {
+    isDev: {
+      type: Boolean,
+      default: false
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+    requestCount: {
+      type: Number,
+      default: null
+    },
+    daysRemaining: {
+      type: String,
+      default: null
+    },
+    email: {
+      type: String,
+      default: ""
+    },
+    loginUrl: {
+      type: String,
+      default: "",
+      required: true
+    },
+    activeTabKey: {
+      type: String,
+      default: 'counterparty'
+    },
+    balance: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      profileDropDown,
+      subheaderItems: [],
+      isOpen: false
+    };
+  },
+  mounted() {
+    this.setBalance(this.balance);
+    this.subheaderItems = menuList;
+  },
+  computed: {
+    locationUrl() {
+      return window.location.href;
+    }
+  },
+  methods: {
+    changeValue() {
+      this.isOpen = !this.isOpen
+      this.$emit('menuOpen', this.isOpen)
+    },
+    toAdtdev(url) {
+      return this.isDev ? url.replace("adata", "adtdev") : url;
+    },
+    setBalance(balance) {
+      if (balance !== 0) {
+        this.profileDropDown[2].name = 'Текущий баланс: ' + this.thousandSeparator(balance) + ' ₸';
+      }
+    },
+    thousandSeparator(val) {
+      return val ?  val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "): '';
+    },
+    handleClick(url) {
+      window.open(this.toAdtdev(url), "_self");
+    }
+  },
+  watch: {
+    balance(newBalance) {
+      this.setBalance(newBalance);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  font-family: "Open Sans", sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1180px;
+  width: 100%;
+  padding: 0 20px;
+  margin: 0 auto;
+}
+
+.header {
+  width: 100%;
+  background: #ffffff;
+  max-height: 62px;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  @media (max-width: 1025px) {
+    border-bottom: 1px solid #2C3E5026;
+    height: 40px;
+  }
+
+  & > .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+
+    .menu {
+      display: flex;
+      align-items: center;
+      @media (max-width: 1025px) {
+        display: none;
+      }
+
+      &__items {
+        margin-right: 8px;
+        align-items: center;
+        padding: 20px 8px 20px 0;
+        transition: text-shadow 0.3s;
+        display: block;
+        font-weight: bold;
+        font-size: 16px;
+        line-height: 22px;
+        text-transform: uppercase;
+        color: #71757a;
+        position: relative;
+
+        &::after {
+          content: "";
+          position: absolute;
+          right: -1px;
+          top: 50%;
+          transform: translateY(-50%);
+          height: 22px;
+          width: 1px;
+          background-color: #e5e5e5;
+        }
+
+        &.active {
+          font-weight: bold;
+          font-size: 16px;
+          line-height: 22px;
+          text-transform: uppercase;
+          color: #2c3e50;
+        }
+
+        &:hover {
+          color: #9DA3AC;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .logo {
+      display: block;
+      margin-right: 20px;
+
+      svg {
+        width: 90px;
+        height: 26px;
+        display: block;
+        fill: #2c3e50;
+        @media(max-width: 1025px) {
+          width: 77px;
+          height: 24px;
+        }
+
+        &:hover {
+          fill: #71757a;
+        }
+      }
+    }
+  }
+
+  .menu_mobile {
+    display: none;
+
+    &--switcher {
+      display: none;
+    }
+
+    @media (max-width: 1025px) {
+      display: block;
+      .mobile-table-head {
+        padding: 11px 16px;
+        display: flex;
+        justify-content: flex-end;
+        background: #2c3e500d;
+      }
+      &-wrapper {
+        border-top: 1px solid #9DA3AC4C;
+        padding: 14px 16px;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22px;
+        color: #2c3e50;
+
+        &:last-child {
+          border-bottom: 1px solid #9DA3AC4C;
+        }
+
+        &.active-burger-tab {
+          background: #2c3e500d;
+        }
+      }
+      &--switcher {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+</style>