adata-ui 0.1.0 → 0.1.4

package/src/components/TextField/TextField.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="adt-text-block">
+    <div class="adt-text-block__field">
+      <input
+          v-if="!mask"
+          ref="input"
+          :type="type"
+          :value="value"
+          :placeholder="placeholder"
+          required
+          @input="$emit('input', $event.target.value)"
+          class="adt-text-block__input"
+          :class="{ error: !!errorText }"
+      />
+      <TheMask
+          v-else
+          ref="maskInput"
+          :value="value"
+          :mask="mask"
+          :type="type"
+          :masked="false"
+          :placeholder="inputPlaceholder"
+          required
+          @input.native="$emit('input', $event.target.value)"
+          @focus.native="showPlaceholder = true"
+          @blur.native="showPlaceholder = false"
+          class="adt-text-block__input"
+          :class="{ error: !!errorText }"
+      />
+      <label class="adt-text-block__label">{{ label }}<span v-if="required" class="adt-text-block__required">*</span></label>
+      <div class="adt-text-block__icon desktop" v-if="clearable && value && value.length > 0" @click="$emit('input', '')">
+        <svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="clearIcon">
+          <path d="M2 2l12 12m0-12L2 14" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="adt-text-block__error" v-if="!!errorText">
+      {{ errorText }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { TheMask } from 'vue-the-mask';
+
+export default {
+  name: "TextField",
+  props: {
+    errorText: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    mask: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    TheMask
+  },
+  data() {
+    return {
+      showPlaceholder: false
+    }
+  },
+  computed: {
+    inputPlaceholder() {
+      return this.showPlaceholder ? this.placeholder : ""
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+*:focus {
+  outline: none;
+}
+
+.adt-text-block {
+  $self: &;
+  position: relative;
+  width: 100%;
+
+  &.magnifier {
+    #{$self}__input {
+      padding: 19px 40px 5px 40px;
+    }
+
+    #{$self}__label {
+      left: 40px;
+    }
+  }
+
+  &.magnifier-mobile {
+    #{$self}__magnifier {
+      display: block;
+    }
+
+    #{$self}__input {
+      padding: 19px 8px 5px 11px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      -webkit-appearance: none;
+    }
+
+    #{$self}__label {
+      left: 12px;
+    }
+  }
+
+  &__input-mob-search {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    -webkit-appearance: none;
+  }
+
+  &__error {
+    text-align: left;
+    font-size: var(--fs-content-micro);
+    line-height: 14px;
+    color: #ff2e43;
+    margin-top: 6px;
+  }
+
+  &__field {
+    position: relative;
+    overflow: hidden;
+    @media(max-width: 1025px) {
+      width: 100%;
+      display: flex;
+    }
+  }
+
+  &__input {
+    background: #ffffff;
+    border: 1px solid #c4c4c4;
+    box-sizing: border-box;
+    border-radius: 2px;
+    width: 100%;
+    height: 40px;
+    font-size: var(--fs-form);
+    color: #1A2030;
+    padding: 19px 40px 5px 16px;
+    transition: 0.3s all;
+    @media(max-width: 1025px) {
+      padding: 19px 36px 7px 12px;
+      height: 40px;
+      border: 1px solid #71757A;
+      font-size: var(--fs-content-mini);
+    }
+
+    &:focus ~ #{$self}__label,
+    &:not(:focus):valid ~ #{$self}__label {
+      top: 12px;
+      font-size: var(--fs-content-micro);
+      color: #71757A;
+      @media(max-width: 1025px) {
+        font-size: var(--fs-content-nano);
+      }
+    }
+
+    &:focus {
+      border: 1px solid #2c3e50;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+    }
+
+    &.error {
+      background: #ff2e431f;
+    }
+  }
+
+  &__label {
+    position: absolute;
+    pointer-events: none;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 40px;
+    transition: 0.3s;
+    color: #71757A;
+    font-size: var(--fs-form-placeholder);
+    @media(max-width: 1025px) {
+      left: 12px;
+      font-size: var(--fs-content-micro);
+      line-height: 16px;
+      color: #71757A;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    right: 16px;
+    height: 100%;
+    top: 0;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__required {
+    color: #FF000087;
+  }
+
+  &__options {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    width: 100%;
+    background: #fff;
+    z-index: 1000;
+    border-radius: 2px;
+    border: 1px solid #71757A;
+    padding: 12px 0;
+    @media(max-width: 1025px) {
+      overflow: auto;
+    }
+
+    #searchVariant {
+      background: #eef0f5;
+    }
+  }
+
+  .search-options {
+    &__item {
+      padding: 5px 16px;
+      line-height: 16px;
+      font-size: 14px;
+      color: var(--newGray);
+      transition: 0.3s all;
+      cursor: pointer;
+      @media(max-width: 1025px) {
+        font-size: 10px;
+      }
+
+      &:hover {
+        background: #eef0f5;
+      }
+    }
+  }
+
+  .mobile-magnifier {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 40px;
+    min-width: 40px;
+    border: 1px solid #71757A;
+    border-radius: 0 2px 2px 0;
+    border-left: none;
+    background: #FFCD33;
+  }
+
+  &__input-mob-filter {
+    background: #ffffff;
+    border: 1px solid #71757A;
+    border-bottom: none;
+    box-sizing: border-box;
+    border-radius: 2px;
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    color: #1A2030;
+    padding: 19px 40px 5px 16px;
+    transition: 0.3s all;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus ~ #{$self}__label-mob-filter,
+    &:not(:focus):valid ~ #{$self}__label-mob-filter {
+      top: 11px;
+      font-size: 10px;
+      color: #71757A;
+      @media(max-width: 1025px) {
+        font-size: 7px;
+      }
+    }
+
+    &:focus {
+      border: 1px solid #2c3e50;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+    }
+
+    &.error {
+      background: #ff2e431f;
+    }
+  }
+
+  &__label-mob-filter {
+    position: absolute;
+    pointer-events: none;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 40px;
+    transition: 0.3s;
+    color: #71757A;
+    @media(max-width: 1025px) {
+      left: 16px;
+      font-size: 14px;
+      line-height: 16px;
+      color: #71757A;
+    }
+
+    &__red {
+      color: rgba(255, 0, 0, 0.53);
+    }
+  }
+  &__magnifier {
+    left: 8px;
+    width: fit-content;
+  }
+}
+</style>

package/src/components/index.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
-import HelloWorld from "./HelloWorld";
+import AButton from './Button/BaseButton'
+import ATextField from './TextField/TextField'
+import APasswordField from './PasswordField/PasswordField'
+import AAlert from './Alert/Alert'
 
 const Components = {
-    HelloWorld
+    AButton,
+    ATextField,
+    APasswordField,
+    AAlert
 };
 
 Object.keys(Components).forEach(name => {

package/src/stories/Button.stories.js

@@ -0,0 +1,46 @@
+import MyButton from './Button.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyButton },
+  template: '<my-button @onClick="onClick" v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/src/stories/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'storybook-button': true,
+        'storybook-button--primary': this.primary,
+        'storybook-button--secondary': !this.primary,
+        [`storybook-button--${this.size}`]: true,
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/stories/Header.stories.js

@@ -0,0 +1,21 @@
+import MyHeader from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyHeader },
+  template:
+    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

package/src/stories/Header.vue

@@ -0,0 +1,59 @@
+<template>
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
+        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
+        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import './header.css';
+import MyButton from './Button.vue';
+
+export default {
+  name: 'my-header',
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+
+  methods: {
+    onLogin() {
+      this.$emit('onLogin');
+    },
+    onLogout() {
+      this.$emit('onLogout');
+    },
+    onCreateAccount() {
+      this.$emit('onCreateAccount');
+    },
+  },
+};
+</script>