Гайд по верстке

rules.md

Для верстки в Bravado есть несколько принципов, которых следует придерживаться

Нейминг по БЭМу

В каждом компоненте есть родительский див, совпадающий с названием компонента: component-name

Дочерние компоненты именуются через 2 нижних подчеркивания component-name__child-name

.logs {
  &__tabs {
    // стили
  }
}
Можно сохранить родителя в переменную если много вложенности
.logs {
  $this: &;

  #{$this}__tabs {
    // стили
  } 
}

Storybook

В проекте используется библиотека компонентов. Например, для текста используется компонент-обертка BravadoText

Для кнопок BravadoButton (на момент написания, последняя версия BravadoButtonV3)

Для каждого компонента есть настройка размеров и стилизация в виде пропсов. Например, size='md'

Для BravadoText настройка variant отображена в макете под заголовком tag: BravadoText variant="semibold"

Темы и переменные

В Bravado используется 2 темы: светлая и темная. Цвета переключаются между темами автоматически, для этого нужно задать название цвета через переменные с префиксом --theme-:

  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  color: var(--theme-sub_text);
  background: var(--theme-over_card);
  background: var(--theme-background);

Обычно в макете используются цвета, бордеры и бэкраунды для обеих тем из стандартных переменных. В противном случае их надо добавить

Есть множество переменных-хелперов, которые расставляют отступы, тени или задают адаптивность:

  @include mq('sm')
  @include elevation-01;

Добавить свою переменную для двух тем можно в компоненте BravadoTheme.vue, в переменных $baseLight, $baseDark

Pixel Perfect

QA в Bravado проверяет верстку через расширение PixelPerfect

Через него нужно проверять свою верстку

Картинки и SVG

Картинки и SVG необходимо сжимать

Для разных размеров экрана используются разные размеры картинок: :srcset="${require(./images/man-in-saleshat.webp)}, ${require(./images/man-in-saleshat@2x.webp)} 2x, ${require(./images/man-in-saleshat@3x.webp)} 3x"

Чтобы динамически менять цвет иконки, нужно скачать ее в svg и поменять fill на fill="currentColor". Затем импортировать ее, как vue component.

    TrashIcon: () =>
      import(
        /* webpackChunkName: "TrashIcon" */
        './assets/trash.vue.svg'
      ),
  },

И поменять цвет стилями:

<trash-icon class="jobs-back-office-note__delete-btn--color" />

Computed

Выносить из шаблона все по-максимуму в computed:

:class="{ 
        'jobs-back-office-profile-companies__table-head': true
}

  :class="tableClass" 

Выносить условия больше 1 в computed:

v-if="rowsCondition.active || showDisabledRows"

v-if="activeAndDisabled"

Линтеры

В корне проекта лежит lefthook.yml, где прописаны линтеры. Они срабатывают при коммите и фиксят измененные файлы

Если не работают, то просто установи lefthook:

yarn add @arkweid/lefthook

Для совместимости с TS используется class components

Декораторы

В проекте используем nuxt-property-decorators

import { Component, Vue, Prop } from 'nuxt-property-decorator';