Zeen Component Library

# ZeenTestCard

Карточка

# Примеры:

Размеры:

zeenCard

zeen-card-border-radius

zeen-card-border

zeen-card-padding-vertical

zeen-card-padding-horizontal

zeen-card-button-icon-margin-left

zeen-card-transition

zeen-card-title-margin-bottom

zeen-card-title-line-height

zeen-card-type-margin-top

zeen-card-type-icon-margin-right

zeen-card-icon-size

zeen-card-icon-margin-bottom

По умолчанию наследуется от zeen-card-part-margin-bottom

zeen-card-part-margin-bottom

zeen-card-tags-margin-bottom

zeen-card-progress-padding-vertical

zeen-card-progress-padding-horizontal

zeen-card-progress-radius

zeen-card-progress-font-weight

zeen-card-progress-line-height

zeen-card-picture-margin-bottom

zeen-card-information-margin-bottom

zeen-card-icon-border-radius

zeen-card-type-font-size

zeen-card-type-line-height

Цвета:

zeen-card-background

По умолчанию наследуется от main-light

zeen-card-type-fill

По умолчанию наследуется от gray-1

zeen-card-type-color

По умолчанию наследуется от main-text-color

zeen-card-progress-color

По умолчанию наследуется от main-color

zeen-card-progress-max-points-color

По умолчанию наследуется от gray-4

zeen-card-progress-title-color

По умолчанию наследуется от main-text-color

Научный аспект искусственного интеллекта

Какой-то сопроводительный текст, описывающий тест, который очень длинный.
Аудиоквест

# props

Название Тип Обязательный По умолчанию Описание
picture String - - url картинки
buttonText Object - Пройти тест, Тест пройден Текст кнопки
testComplite Boolean - false пройден тест или нет
cardWithPicture Boolean - true показывает карточку с картинкой, если false, то будет карточка с иконкой
cardWithTags Boolean - false отвечает за показ тэгов
tags Array - 'количество вопросов' массив с тэгами
progress Object - title, points, maxPoints объект прогресса, включает в себя тайтл, заработанное количество баллов и максимальное количество баллов
quizType Boolean - Аудиоквест текст плашки с типом квиза и отвечает за показ типа аудиоквиза

# slots

Название Описание
title слот для заголовка
description слот для описания
tags слот для тэгов
type слот для типа
progress слот для прогресса
progress-point слот для баллов прогресса
progress-icon слот для иконки прогресса
action слот для кнопки

# emits

Название Описание
test-click Событие по кнопке

# Source Code - исходный код компонента

<template lang="pug">
  .zeen-card
    .zeen-card__picture(
      v-if='picture && cardWithPicture'
      :style="{'background-image': `url(${picture})` }"
    )
    .zeen-card__container
      .zeen-card__information
        ZeenPicture(
          v-if='picture && !cardWithPicture'
          :src='picture'
          class='zeen-card__icon'
        )
        slot(name='tags' :quiz='quiz')
          ZeenTags.zeen-card__tags(:tags='tags' v-if='cardWithTags')
        slot(name='title')
          .zeen-card__title
            ZeenHeadline(type='dark-18' tag='h3' v-html='quiz.title')
        slot(name='description')
          .zeen-card__description
            ZeenText(size='12' v-html='quiz.description')
        slot(name='type' :quiz='quiz')
          .zeen-card__type(v-if='quizType')
            svg(
              height="20" 
              viewBox="0 0 20 20" 
              width="20" 
              xmlns="http://www.w3.org/2000/svg" 
              xmlns:xlink="http://www.w3.org/1999/xlink")
              clipPath(id="a")
                path(d="m0 0h20v20h-20z")
              g(clip-path="url(#a)")
                path(
                  clip-rule="evenodd" 
                  d="m9.99935 2.29297c-4.2572 0-7.70833 3.45114-7.70833 7.70833 0 4.2572 3.45113 7.7083 7.70833 7.7083 4.25715 0 7.70835-3.4511 7.70835-7.7083 0-4.25719-3.4512-7.70833-7.70835-7.70833zm-8.95833 7.70833c0-4.94755 4.01078-8.95833 8.95833-8.95833s8.95835 4.01078 8.95835 8.95833c0 4.9476-4.0108 8.9583-8.95835 8.9583s-8.95833-4.0107-8.95833-8.9583zm9.43558-3.25816c.0164.00993.0327.01988.0491.02984.2393.14552.4755.29682.6879.44597.2419.16982.4997.36977.7538.57709.0129.01048.0257.02092.0384.03132.4149.33837.7879.64257 1.0485.946.2954.34406.4867.73078.4867 1.22794 0 .4972-.1913.884-.4867 1.228-.2606.3034-.6336.6076-1.0485.946l-.0384.0313c-.2541.2074-.5119.4073-.7538.5771-.2124.1492-.4486.3005-.6879.446-.0164.01-.0328.0199-.0491.0298-.404.2459-.78574.4781-1.11981.5981-.1857.0668-.39871.1157-.62795.0987-.24079-.0179-.45643-.1054-.64436-.2465-.38257-.2871-.53622-.703-.61635-1.1165-.07635-.394-.10567-.9014-.13993-1.4944l-.00249-.043c-.02102-.3635-.03469-.7255-.03469-1.0546 0-.32902.01367-.69105.03469-1.0545l.00249-.04302c.03426-.593.06358-1.10044.13993-1.49443.08013-.41352.23378-.82933.61635-1.11652.18793-.14107.40357-.22852.64436-.24641.22924-.01704.44225.0319.62795.09861.33407.12001.71581.35227 1.11981.59811zm-1.6436.55082c-.02048.01567-.08305.07115-.1377.35319-.05843.30151-.0842.72373-.12168 1.37181-.02018.34897-.0326.68535-.0326.98234 0 .2971.01242.6335.0326.9824.03748.6481.06325 1.0703.12168 1.3718.05465.2821.11722.3375.1377.3532.01567-.002.04761-.0082.10118-.0274.19947-.0717.47057-.2329.94205-.5196.22437-.1365.43597-.2724.61907-.4009.2089-.1467.4416-.3266.682-.5228.4655-.3797.7493-.6142.9286-.823.1525-.1775.1851-.286.1851-.4137 0-.12766-.0326-.23608-.1851-.4136-.1793-.20883-.4631-.4433-.9286-.82306-.2404-.19612-.4731-.37601-.682-.52271-.1831-.12854-.3947-.26447-.61908-.40092-.47147-.2867-.74257-.44793-.94203-.51958-.05358-.01925-.08552-.02547-.10119-.02747z"
                  fill-rule="evenodd" 
                  stroke-width=".5"
                )
            span {{ quizType }}
      .zeen-card__footer
        slot(name='progress' :quiz='quiz')
          .zeen-card__progress-wrapper(v-if='cardWithPoints')
            span {{ progress.title }}
            .zeen-card__progress
              slot(name='progress-point' :quiz='quiz')
                span {{ progress.points }}
                span /{{ progress.maxPoints }}
              slot(name='progress-icon')
        slot(name='action' :quiz='quiz')
          .zeen-card__button
            ZeenButton(
              @click='$emit("test-click", quiz)'
            ) {{ testComplete ? buttonText.end : buttonText.start }}
              template(v-slot:rightIcon v-if='!testComplete')
                svg(width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg")
                  path(fill-rule="evenodd" clip-rule="evenodd" d="M3.48994 1.10026C3.90273 0.73334 4.5348 0.77052 4.90172 1.1833L8.59402 5.33715C8.93081 5.71603 8.93081 6.28699 8.59402 6.66588L4.90172 10.8197C4.5348 11.2325 3.90273 11.2697 3.48994 10.9028C3.07716 10.5359 3.03998 9.90378 3.4069 9.491L6.50866 6.00151L3.4069 2.51203C3.03998 2.09925 3.07716 1.46718 3.48994 1.10026Z")
                  
</template>

<script>
import ZeenPicture from '../ZeenPicture/ZeenPicture.vue'
import ZeenButton from '../ZeenButton/ZeenButton'
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenText from '../ZeenText/ZeenText'
import ZeenTags from '../ZeenTags/ZeenTags'

export default {
  name: 'ZeenTestCard',
  components: {
    ZeenPicture,
    ZeenButton,
    ZeenHeadline,
    ZeenText,
    ZeenTags,
  },
  props: {
    cardWithPicture: {
      type: Boolean,
      default: true,
    },
    cardWithPoints: {
      type: Boolean,
      default: false,
    },
    cardWithTags: {
      type: Boolean,
      default: false,
    },
    quiz: {
      type: Object,
      required: true,
    },
    tags: {
      type: Array,
      default: () => {
        return ['Количество вопросов']
      },
    },
    quizType: {
      type: String,
      default: 'Аудиоквест',
    },
    progress: {
      type: Object,
      default: () => {
        return {
          title: 'Ваш прогресс',
          points: 10,
          maxPoints: 200,
        }
      },
    },
    buttonText: {
      type: Object,
      default: () => {
        return {
          start: 'Пройти тест',
          end: 'Тест пройден',
        }
      },
    },
    testComplete: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    picture() {
      if (this.quiz?.picture?.url.includes('assets/default')) {
        return ''
      }
      return this.quiz?.picture?.url
    },
  },
}
</script>

<style lang="scss">
@import '../../styles/mixins.scss';
:root {
  /* Размеры */
  --zeen-card-border-radius: 20px;
  --zeen-card-border: 0;
  --zeen-card-border-radius-hover: var(--zeen-card-border-radius);
  --zeen-card-padding-vertical: 20px;
  --zeen-card-padding-horizontal: 20px;
  --zeen-card-transition: 0.2s;
  --zeen-card-icon-margin-top: 0;
  --zeen-card-icon-margin-right: 0;
  --zeen-card-icon-margin-bottom: var(--zeen-card-part-margin-bottom);
  --zeen-card-icon-margin-left: 0;
  --zeen-card-picture-height: 44%;
  --zeen-card-icon-size: 80px;
  --zeen-card-part-margin-bottom: 16px;
  --zeen-card-picture-margin-bottom: -20px;
  --zeen-card-picture-position: top;
  --zeen-card-progress-font-weight: 700;
  --zeen-card-progress-line-height: 1.4;
  --zeen-card-progress-padding-vertical: 6px;
  --zeen-card-progress-padding-horizontal: 12px;
  --zeen-card-information-margin-bottom: 20px;
  --zeen-card-tags-margin-bottom: 10px;
  --zeen-card-title-margin-bottom: 8px;
  --zeen-card-title-line-height: 1.3;
  --zeen-card-type-margin-top: 12px;
  --zeen-card-type-icon-margin-right: 4px;
  --zeen-card-progress-radius: 51px;
  --zeen-card-progress-title-font-weight: 500;
  --zeen-card-button-icon-margin-left: 8px;
  --zeen-card-icon-border-radius: 12px;
  --zeen-card-type-font-size: 14px;
  --zeen-card-type-line-height: 1.4;
  --zeen-card-type-icon-size: 20px;

  @include phones {
    --zeen-card-padding-vertical: 12px;
    --zeen-card-padding-horizontal: 12px;
    --zeen-card-picture-margin-bottom: -12px;
    --zeen-card-icon-size: 48px;
    --zeen-card-part-margin-bottom: 8px;
    --zeen-card-tags-margin-bottom: 2px;
    --zeen-card-title-margin-bottom: 4px;
    --zeen-card-information-margin-bottom: 16px;
    --zeen-card-type-font-size: 12px;
    --zeen-card-type-icon-size: 16px;
  }

  /* Цвета */
  --zeen-card-background: var(--main-light);
  --zeen-card-type-fill: var(--gray-1);
  --zeen-card-type-color: var(--main-text-color);
  --zeen-card-box-shadow: rgba(111, 117, 135, 0.15);
  --zeen-card-progress-color: var(--main-color);
  --zeen-card-progress-max-points-color: var(--gray-4);
  --zeen-card-progress-title-color: var(--main-text-color);
}
</style>

<style lang="scss" scoped>
@import '../../styles/mixins.scss';

.zeen-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 1 0 auto;
  border-radius: var(--zeen-card-border-radius);
  border: var(--zeen-card-border);
  transition: var(--zeen-card-transition);
  height: 100%;

  &__container {
    padding-top: var(--zeen-card-padding-vertical);
    padding-bottom: var(--zeen-card-padding-vertical);
    padding-left: var(--zeen-card-padding-horizontal);
    padding-right: var(--zeen-card-padding-horizontal);
    background: var(--zeen-card-background);
    border-radius: var(--zeen-card-border-radius);
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    box-shadow: 0px 5px 20px var(--zeen-card-box-shadow);
  }

  &__information {
    margin-bottom: var(--zeen-card-information-margin-bottom);
  }

  &__picture {
    display: block;
    width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--zeen-card-border-radius) var(--zeen-card-border-radius) 0 0;
    z-index: 0;
    margin-bottom: var(--zeen-card-picture-margin-bottom);

    &::after {
      display: block;
      content: '';
      padding-top: 57%;
      height: 100%;
    }
  }

  &__icon {
    --picture-max-width: var(--zeen-card-icon-size);
    --picture-max-height: var(--zeen-card-icon-size);
    --picture-border-radius: var(--zeen-card-icon-border-radius);

    margin: var(--zeen-card-icon-margin-top) var(--zeen-card-icon-margin-right) var(--zeen-card-icon-margin-bottom)
      var(--zeen-card-icon-margin-left);
    width: var(--picture-max-width);
    height: var(--picture-max-height);
  }

  &__tags {
    margin-bottom: var(--zeen-card-tags-margin-bottom);
  }

  &__title {
    margin-bottom: var(--zeen-card-title-margin-bottom);

    --headline-size-line-height: var(--zeen-card-title-line-height);
  }

  &__type {
    display: inline-flex;
    align-items: center;
    color: var(--zeen-card-type-color);
    margin-top: var(--zeen-card-type-margin-top);
    font-size: var(--zeen-card-type-font-size);
    line-height: var(--zeen-card-type-line-height);

    & svg {
      fill: var(--zeen-card-type-fill);
      stroke: var(--zeen-card-type-fill);
      margin-right: var(--zeen-card-type-icon-margin-right);
      height: var(--zeen-card-type-icon-size);
      width: var(--zeen-card-type-icon-size);
    }
  }

  &__footer {
    margin-top: auto;
  }

  &__progress {
    padding: var(--zeen-card-progress-padding-vertical) var(--zeen-card-progress-padding-horizontal);
    box-shadow: 0px 2px 16px var(--zeen-card-box-shadow);
    border-radius: var(--zeen-card-progress-radius);
    font-weight: var(--zeen-card-progress-font-weight);
    font-size: var(--main-small-text);
    line-height: var(--zeen-card-progress-line-height);

    & span {
      color: var(--zeen-card-progress-max-points-color);

      &:first-of-type {
        color: var(--zeen-card-progress-color);
      }
    }

    &-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--zeen-card-part-margin-bottom);

      & span {
        font-weight: var(--zeen-card-progress-title-font-weight);
        font-size: var(--main-small-text);
        line-height: var(--zeen-card-progress-line-height);
        color: var(--zeen-card-progress-title-color);
      }
    }
  }

  &__button {
    & button {
      width: 100%;

      & svg {
        fill: currentColor;
        margin-left: var(--zeen-card-button-icon-margin-left);
      }
    }
  }
}
</style>

← ZeenText →