Разделы компонентов

- Кнопки
- Ссылка назад
- Элементы форм
- Фильтр
- Сортровка
- Header
- Карта
- Звездный рейтинг
- Форма отзыва
- Ревью
- Последнее ревью
- Случайные товары
- Карточка товара
- Лоадер
- Ошибка загрузки страницы
- footer
- hero
- 1+1 не найдено
- Избранное без контента

# Компоненты, используемые на проекте

## Название компонента или группы компонентов

Информация о компоненте (подсказки \ предупреждение \ важная информация)

Класс компонента \ модификаторы

    p Пример кода

## Карточки товара

Карточка товара маленькая с плашкой Новинка и выбранным избранным

.card-item \ .card-item__favorites .card-item__favorites--active

Новинка

### Торт Голубика

    +cardItem({
      img: {
        path: "content",
        name: "blueberry-cake",
        format: "jpg",
        width: "241",
        height: "245",
        altText: "Торт голубика."
      },
      isNew: true,
      isFavorite: true,
      title: "Торт Голубика"
    })

Карточка товара маленькая без плашки Новинка и не выбранной кнопкой Избранное

.card-item

### Торт Голубика

    +cardItem({
      img: {
        path: "content",
        name: "blueberry-cake",
        format: "jpg",
        width: "241",
        height: "245",
        altText: "Торт голубика."
      },
      title: "Торт Голубика"
    })

Карточка товара большая

.card-item \ .card-item--big

9 300 p

### Торт Голубика

    +cardItem({
      img: {
        path: "content",
        name: "blueberry-cake",
        format: "jpg",
        width: "326",
        height: "332",
        altText: "Торт голубика."
      },
      isBig: true,
      price: "9 300",
      title: "Торт Голубика"
    })

## Рейтинг

.star-rating

    +star-rating({
      activeStars: "3",
    })

.star-rating \ isBig

    +star-rating({
      activeStars: "3",
      isBig: true
    })

.star-rating \ count

26

    +star-rating({
      activeStars: "3",
      count: "26"
    })

## Форма отзыва

.review-form

## оставить отзыв

Достоинства
Недостатки

    +review-form({
      inputs: [
        {
          inputLabel: "Достоинства",
          inputName: "advantages",
          inputPlaceholder: "Достоинства",
          isRequired: true,
        },
          {
          inputLabel: "Недостатки",
          inputName: "disadvantages",
          inputPlaceholder: "Недостатки"
          isRequired: true,
        }
      ]
    })

## Ревью

.review

15.05 Уважаемый(-ая) Кот

Отличный сервис! Очень вкусный, сочный и яркий торт. Удобная коробка для транспортировки. Свежие фрукты и съедобный дизайн.

Недостатков нет, обязательно будем заказывать и приходить в Кексик

    +review({
      starsData: {
        activeStars: "5"
      },
      datetime: "2023-05-15",
      author: "Кот",
      texts: [
        "Отличный сервис! Очень вкусный, сочный и яркий торт. Удобная коробка для транспортировки. Свежие фрукты и съедобный дизайн.",
        "Недостатков нет, обязательно будем заказывать и приходить в Кексик"
      ],
      img: {
        path: "content",
        image: "review-1",
        format: "jpg",
        width: "162",
        height: "162",
        altText: "Кот"
      }
    })

## Последнее ревью

.last-review

## последний отзыв

15.05 Уважаемый(-ая) Кот

Отличный сервис! Очень вкусный, сочный и яркий торт. Удобная коробка для транспортировки. Свежие фрукты и съедобный дизайн.

Недостатков нет, обязательно будем заказывать и приходить в Кексик

    +last-review({
      review: {
        starsData: {
          activeStars: "5"
        },
        datetime: "2023-05-15",
        author: "Кот",
        hasBorder: true,
        texts: [
          "Отличный сервис! Очень вкусный, сочный и яркий торт. Удобная коробка для транспортировки. Свежие фрукты и съедобный дизайн.",
          "Недостатков нет, обязательно будем заказывать и приходить в Кексик"
        ],
        img: {
          path: "content",
          image: "review-1",
          format: "jpg",
          width: "162",
          height: "162",
          altText: "Кот"
        }
      }
    })

## Случайные товары

.random-main

## кексы

- Новинка

  ### Торт Голубика

- ### Шоколадный Кекс

- Новинка

  ### Лимонный Чизкейк

- ### Все кексы

    +random-main({
      items: [
        {
          img: {
            path: "content",
            name: "blueberry-cake",
            format: "jpg",
            width: "241",
            height: "245",
            altText: "Торт голубика."
          },
          isNew: true,
          isFavorite: true,
          title: "Торт Голубика"
        },
        {
          img: {
            path: "content",
            name: "chocolate-pie",
            format: "jpg",
            width: "241",
            height: "245",
            altText: "Шоколадный кекс."
          },
          title: "Шоколадный Кекс"
        },
        {
          img: {
            path: "content",
            name: "lemon-pie",
            format: "jpg",
            width: "241",
            height: "245",
            altText: "Лимонный чизкейк."
          },
          isNew: true,
          title: "Лимонный Чизкейк"
        }
      ]
    })

## Карточка товара

.item-details

## Чизкейк Лимонный

4 100 р
1 300 грамм
Новинка
26
Цитрусовый десерт с тонким сливочным вкусом, лёгкой свежестью и низким содержанием калорий сд

    +item-details({
      name: "Чизкейк Лимонный",
      price: "4 100 р",
      weight: "1 300 грамм",
      text: "Цитрусовый десерт с тонким сливочным вкусом, лёгкой свежестью и низким содержанием калорий сд",
      label: "Новинка",
      starsData: {
        isBig: true,
        activeStars: "5",
        count: "26"
      },
      img: {
        path: "content",
        image: "lemon-pie",
        format: "jpg",
        width: "393",
        height: "407",
        altText: "Чизкейк лимонный"
      }
    })

.item-details \ .item-details--form-open

## Чизкейк Лимонный

4 100 р
1 300 грамм
Новинка
26
Цитрусовый десерт с тонким сливочным вкусом, лёгкой свежестью и низким содержанием калорий сд

    +item-details({
      name: "Чизкейк Лимонный",
      price: "4 100 р",
      weight: "1 300 грамм",
      text: "Цитрусовый десерт с тонким сливочным вкусом, лёгкой свежестью и низким содержанием калорий сд",
      label: "Новинка",
      starsData: {
        isBig: true,
        activeStars: "5",
        count: "26"
      },
      img: {
        path: "content",
        image: "lemon-pie",
        format: "jpg",
        width: "393",
        height: "407",
        altText: "Чизкейк лимонный"
      }
    })

## Лоадер

.loader

    +loader()

## Кнопки

.btn \ default \ button

    +btn({text: "Текст", href: "#"})

.btn \ .btn \ link

Текст

    +btn({text: "Текст disabled", href: "#", isExternal: true})(aria-label="Просто ссылка")

.btn \ .is-disabled \ link \ disabled

Текст

    +btn({text: "Текст", href: "#", isExternal: true})(aria-label="Просто disabled ссылка").is-disabled

.btn \ disabled \ button

    +btn({text: "Текст"})(disabled)

.btn .btn--large \ default \ button

    +btn({text: "Кнопка"}).btn--large

.btn .btn--second \ default \ button

    +btn({text: "Кнопка третий вариант"}).btn--second

.btn .btn--third \ default \ button

    +btn({text: "Кнопка"}).btn--third

## Элемент - ссылка назад

.back-link

Назад

    +back-link()

## Элементы форм

Валидация на форме не предусмотрена, только состояния

.custom-input \ type="text"

Введите ваше имя

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
    })

.custom-input \ type="text" \ disabled

Введите ваше имя

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
      stateDisabled: true,
    })

.custom-input \ type="email" \ required

Введите вашу почту

    +custom-input({
      inputType: "email",
      inputLabel: "Введите вашу почту",
      inputName: "user-mail",
      isRequired: true,
    })

.custom-input \ type="password"

Введите ваш пароль

    +custom-input({
      inputType: "password",
      inputLabel: "Введите ваш пароль",
      inputName: "user-password",
      inputPlaceholder: "Пароль",
    })

.custom-input \ type="text" \ сообщение

Введите ваше имя осталось 470 символов

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
      inputValue: "Отличный десерт. Очень свежи",
      inputMessage: "осталось 470 символов",
    })

.custom-input.is-invalid \ type="text" \ сообщение - ошибка

Введите ваше имя заполните поле

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
      inputValue: "Отличный десерт. Очень свежи"
    }).is-invalid

.custom-input \ type="email" \ успешно провалидировано

Введите вашу почту

    +custom-input({
      inputType: "email",
      inputLabel: "Введите вашу почту",
      inputName: "user-mail",
      inputValue: "keks@academy.ru",
    }).is-valid

.custom-input \ type="file" accept="image/jpeg" \ default

Введите ваше имя

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
      inputType: "file",
      inputPlaceholder: "Аватар",
      inputAccept: "image/jpeg"
    })

.custom-input.file-selected \ type="file" accept="image/jpeg" \ файл выбран

Введите ваше имя

    +custom-input({
      inputLabel: "Введите ваше имя",
      inputName: "user-name-1",
      inputType: "file",
      inputPlaceholder: "Аватар",
      inputAccept: "image/jpeg"
    }).file-selected

Элемент фильтра первого порядка — основы

.btn \ .btn--filter-first-level \ default

    +btn({text:"Чизкейк"}).btn--filter-first-level

Элемент фильтра первого порядка — основы (active)

.btn \ .btn--filter-first-level.is-active \ active

    +btn({text:"Чизкейк"}).btn--filter-first-level.is-active

Элемент фильтра второго порядка — начинки и украшения

+custom-toggle \ .custom-toggle--checkbox

Шоколадный

    +custom-toggle({
      inputLabel: "Шоколадный",
      inputName: "user-agreement",
      inputValue: "user-agreement-2",
      inputId: "user-agreement-id-2",
      inputChecked: false
    }).custom-toggle--checkbox

+input-star-rating

    +input-star-rating()

## Header

header, пользователь неавторизован - headerMods = "", favouriteCount = ""

.header

Регистрация
Войти

header, пользователь авторизован ,без избранных товаров - headerMods = "header--authorized", favouriteCount = ""

.header / .header--authorized

keks@academy.ru

Избранное
Выйти

header, пользователь авторизован ,избранное -2 товара - headerMods = "header--authorized", favouriteCount = "2"

.header / .header--authorized

keks@academy.ru

2 Избранное
Выйти

## Footer

.footer

    +footer()

## Hero

.hero

Твоя пушистая кондитерская

кекс

Скорее смотреть

    +hero({subtitle: "Твоя пушистая кондитерская", title: "кекс"})

## Catalog

Блок каталога с шестью карточками товаров и кнопкой "Показать еще"

.catalog

## Каталог

- Новинка
  9 300 p

  ### Торт Голубика

- 1 100 p

  ### Тарт Голубика

- Новинка
  4 100 p

  ### Чизкейк Лимонный

- 700 p

  ### Кекс Шоколад

- 4 700 p

  ### Чизкейк Вегетарианский

- 3 700 p

  ### Торт Шоколадный

    +catalog({
       itemsData: [
         {
           img: {
             path: "content",
             name: "blueberry-cake",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Торт голубика."
           },
           isBig: true,
           isNew: true,
           price: "9 300",
           isFavorite: true,
           title: "Торт Голубика"
         },
         {
           img: {
             path: "content",
             name: "blueberry-muffin",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Тарт голубика."
           },
           isBig: true,
           price: "1 100",
           title: "Тарт Голубика"
         },
         {
           img: {
             path: "content",
             name: "lemon-cheesecake",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Чизкейк лимонный."
           },
           isBig: true,
           isFavorite: true,
           isNew: true,
           price: "4 100",
           title: "Чизкейк Лимонный"
         },
         {
           img: {
             path: "content",
             name: "cupcake-chocolate",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Кекс шоколад."
           },
           isBig: true,
           price: "700",
           title: "Кекс Шоколад"
         },
         {
           img: {
             path: "content",
             name: "cheesecake-vegetarian",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Чизкейк вегетарианский."
           },
           isBig: true,
           price: "4 700",
           title: "Чизкейк Вегетарианский"
         },
         {
           img: {
             path: "content",
             name: "blueberry-muffin",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Торт шоколадный."
           },
           isBig: true,
           price: "3 700",
           title: "Торт Шоколадный"
         }
       ]
     })

Блок каталога с достаточным количеством карточке товара для одной страницы и кнопкой "В начало"

.catalog

## Каталог

- Новинка
  9 300 p

  ### Торт Голубика

- 1 100 p

  ### Тарт Голубика

- Новинка
  4 100 p

  ### Чизкейк Лимонный

- 700 p

  ### Кекс Шоколад

- 4 700 p

  ### Чизкейк Вегетарианский

- 3 700 p

  ### Торт Шоколадный

    +catalog({
       itemsData: [
         {
           img: {
             path: "content",
             name: "blueberry-cake",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Торт голубика."
           },
           isBig: true,
           isNew: true,
           price: "9 300",
           isFavorite: true,
           title: "Торт Голубика"
         },
         {
           img: {
             path: "content",
             name: "blueberry-muffin",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Тарт голубика."
           },
           isBig: true,
           price: "1 100",
           title: "Тарт Голубика"
         },
         {
           img: {
             path: "content",
             name: "lemon-cheesecake",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Чизкейк лимонный."
           },
           isBig: true,
           isFavorite: true,
           isNew: true,
           price: "4 100",
           title: "Чизкейк Лимонный"
         },
         {
           img: {
             path: "content",
             name: "cupcake-chocolate",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Кекс шоколад."
           },
           isBig: true,
           price: "700",
           title: "Кекс Шоколад"
         },
         {
           img: {
             path: "content",
             name: "cheesecake-vegetarian",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Чизкейк вегетарианский."
           },
           isBig: true,
           price: "4 700",
           title: "Чизкейк Вегетарианский"
         },
         {
           img: {
             path: "content",
             name: "blueberry-muffin",
             format: "jpg",
             width: "326",
             height: "332",
             altText: "Торт шоколадный."
           },
           isBig: true,
           price: "3 700",
           title: "Торт Шоколадный"
         }
       ],
       textButton: "В начало"
     })

## Фильтр

.catalog-filter / отрисовывается фильтр первого порядка — основы (выбор сделан) и фильтр второго порядка — начинки и украшения (выбор не сделан)

### основы

### начинки

- Шоколадный
- Вегетарианский
- Нью-Йорк
- Лимонный
- Ваниль

    +catalog-filter({
      firstLevelTitle: "основы",
      secondLevelTitle: "начинки",
      firstLevelInputs: [
       {
         text: "Бисквит",
         isActive: false
       },
       {
         text: "Десерт",
         isActive: false
       },
       {
         text: "Чизкейк",
         isActive: true
       },
       {
         text: "Песочное",
         isActive: false
       }
      ],
      secondLevelInputs: [
        {
          inputType: "checkbox",
          inputLabel: "Шоколадный",
          inputName: "catalog-second-level",
          inputValue: "chocolate",
          inputId: "catalog-second-level-id-1",
          inputChecked: false
        },
        {
          inputType: "checkbox",
          inputLabel: "Вегетарианский",
          inputName: "catalog-second-level",
          inputValue: "vegetarian",
          inputId: "catalog-second-level-id-2",
          inputChecked: false
        },
        {
          inputType: "checkbox",
          inputLabel: "Нью-Йорк",
          inputName: "catalog-second-level",
          inputValue: "new-york",
          inputId: "catalog-second-level-id-3",
          inputChecked: false
        },
        {
          inputType: "checkbox",
          inputLabel: "Лимонный",
          inputName: "catalog-second-level",
          inputValue: "citric",
          inputId: "catalog-second-level-id-4",
          inputChecked: false
        },
        {
          inputType: "checkbox",
          inputLabel: "Ваниль",
          inputName: "catalog-second-level",
          inputValue: "vanilla",
          inputId: "catalog-second-level-id-5",
          inputChecked: false
        }
      ],
    })

.catalog-filter / отрисовыается фильтр первого порядка — основы / выбор не сделан

### основы

    +catalog-filter({
      firstLevelTitle: "основы",
      secondLevelTitle: "",
      firstLevelInputs: [
       {
         text: "Бисквит",
         isActive: false
       },
       {
         text: "Десерт",
         isActive: false
       },
       {
         text: "Чизкейк",
         isActive: false
       },
       {
         text: "Песочное",
         isActive: false
       }
      ],
      secondLevelInputs: [],
    })

## Сортировка

.filter-sort . Любой

### Показать с рейтингом

- Любой
- Высокий
- Низкий

### Сортировать по дате

.filter-sort / высокий

### Показать с рейтингом

- Любой
- Высокий
- Низкий

### Сортировать по дате

.filter-sort / Низкий

### Показать с рейтингом

- Любой
- Высокий
- Низкий

### Сортировать по дате

## 1+1 не найдено

Не найдено

.not-found

## Каталог выбранные товары

Все выбранные кексы съели.

Мы уже печём новые.

    +not-found({
      warnings: [
        {
          text: "Все выбранные кексы съели.",
        },
        {
          text: "Мы уже печём новые."
        }
      ]
    })

## Карта

Карта

.map

## адреса

- Кондитерская 1
- Кондитерская 2
- Производство

    +map()

## Ошибка загрузки страницы

Ошибка загрузки страницы

.error-loading

## Что-то пошло не так...

Попробуйте перезагрузить страницу или обратитесь к администратору сайта.

    +error-loading()

## Избранное без контента

Избранное без контента

.empty-favorites

## Избранные товары

Кажется, пока вы не добавили ни одного кекса

К кексам

    +empty-favorites({
      warning: "Кажется, пока вы не добавили ни одного кекса",
      buttonText: "К кексам"
    })