Michael3468/BookingService

pug

Closed this issue · 4 comments

romansilivestrov commented

Все импорты (include) следует перенести в начало файла.


Радио-кнопки логичнее передавать как массив объектов, что упростит и сам миксин, и его использование:
image

type Radio = { 
    value: string;
    label: string;
    isChecked: boolean;
}

Т.к. pug базируется на JavaScript, к нему частично применяются стайлгайд airbnb и best-practices:

  • деструктурирование параметров и значения по умолчанию: 
    mixin radio-buttons({ leftCaption = "", name = "", items = [] })
  • template strings: 
    input.radio-buttons__input(id=`params.inpId${index}`)
  • форматирование (длина строк кода, пробелы, отступы)
romansilivestrov commented

Если на странице больше одного листа id будут повторяться:
image

romansilivestrov commented

Компонент button

  1. Обычно всё, что ведёт на другую страницу - это ссылка, а кнопки вызывают сценарии на текущей странице.

  2. По миксину

  • тип кнопкам по умолчанию следует задать button
  • модификаторы лучше задавать явно каждой кнопке, не задавая умолчаний при деструктуризации
  • image условие не нужно, т.к. есть значение по умолчанию
  • тут можно обойтись без шаблонной строки:
    image
    или, если её использовать: 
      class=`button js-button ${classes}`
  // или всё в одну строку
  class=`button js-button ${mods.map(mod => `button_${mod}`).join(' ')}`
  • image переменной tIndex в миксине нет
  • опционально вместо параметра value в миксине можно задать место для вложенных элементов block. Можно будет вкладывать в кнопку не только текст.
romansilivestrov commented

Компонент checkbox-buttons / rich-checkbox-buttons

Стоит выделить стилизованный чекбокс как отдельный компонет и использовать его в миксинах списков. Миксины упростятся, уменьшится повторение стилей.

Про id и label есть пункт в best-practices.

romansilivestrov commented

В компоненте button следует заменить для ссылки oncklick на href.