ZeenSpeakerBadge

Компонент бейджа, принимает в себя: картинку, заголовок, текст, маленький бейдж, кнопку, социальные иконки

Примеры:

• Стандартный пример, набор всего с дефолтными значениями

• Пример без кнопки

• Пример без кнопки

• Пример без кнопки (работает пока что не совсем верно, нужен компонент ZeenSvgIcron)

props

Название	Тип	Обязательный	По умолчанию	Описание
modalName	string	+	-	Ключевое имя для открытия модального окна
pictureAttrs	object	+	Некоторые значения объекта могут быть заданы автоматически, но ключ объекта src должен быть передан обязательно	Объект с значениями ключами которыми являются реальные значения пропсов вложенных компонентов. Объект отвечает за поведение картинки
headlineAttrs	object	-	Некоторые значения объекта могут быть заданы автоматически	Объект с значениями ключами которыми являются реальные значения пропсов вложенных компонентов. Объект отвечает за поведение заголовка
textAttrs	object	-	Некоторые значения объекта могут быть заданы автоматически	Объект с значениями ключами которыми являются реальные значения пропсов вложенных компонентов. Объект отвечает за поведение текста
socialIconAttrs	object	-	Некоторые значения объекта могут быть заданы автоматически	Объект с значениями ключами которыми являются реальные значения пропсов вложенных компонентов. Объект отвечает за поведение svg иконки
buttonAttrs	object	-	Некоторые значения объекта могут быть заданы автоматически	Объект с значениями ключами которыми являются реальные значения пропсов вложенных компонентов. Объект отвечает за поведение кнопки
textButton	string	-	-	Текст кнопки

Slots

Название	Описание
name-speaker	Заголовок бейджа
about-speaker	Текст под заголовком

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

<template>
  <client-only>
    <ZeenModal :name="modalName">
      <div class="speaker-badge">
        <div class="speaker-badge__header">
          <ZeenPicture v-bind="setPictureAttrs" />
          <div class="speaker-badge__header-content">
            <div>
              <ZeenSmallBadge> Small badge Сбербанк </ZeenSmallBadge>
            </div>
            <ZeenHeadline v-bind="setHeadlineAttrs">
              <slot name="name-speaker" />
            </ZeenHeadline>
            <!-- Надо передавать объект с именами иконками и через v-for его выводить, пока что реализация топорная-->
            <div class="speaker-badge__social-icons-container">
              <ZeenSocialLinkIcon v-bind="setSocialIconAttrs">
                <slot name="email-social-icon" />
              </ZeenSocialLinkIcon>
              <ZeenSocialLinkIcon v-bind="setSocialIconAttrs">
                <slot name="facebook-social-icon" />
              </ZeenSocialLinkIcon>
              <ZeenSocialLinkIcon v-bind="setSocialIconAttrs">
                <slot name="telegram-social-icon" />
              </ZeenSocialLinkIcon>
              <ZeenSocialLinkIcon v-bind="setSocialIconAttrs">
                <slot name="vk-social-icon" />
              </ZeenSocialLinkIcon>
              <ZeenSocialLinkIcon v-bind="setSocialIconAttrs">
                <slot name="youtube-social-icon" />
              </ZeenSocialLinkIcon>
            </div>
          </div>
        </div>
        <div class="speaker-badge__body">
          <ZeenText v-bind="setTextAttrs">
            <slot name="about-speaker" />
          </ZeenText>
        </div>
        <div v-if="textButton" class="speaker-badge__footer">
          <ZeenButton v-bind="buttonAttrs">{{ this.textButton }}</ZeenButton>
        </div>
      </div>
    </ZeenModal>
  </client-only>
</template>

<script>
import ZeenPicture from '../ZeenPicture/ZeenPicture'
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenText from '../ZeenText/ZeenText'
import ZeenSocialLinkIcon from '../ZeenSocialLinklIcon/ZeenSocialLinkIcon'
import ZeenButton from '../ZeenButton/ZeenButton'
import ZeenModal from '../ZeenModal/ZeenModal'
import ZeenSmallBadge from '../ZeenSmallBadge/ZeenSmallBadge'

export default {
  name: 'ZeenSpeakerBadge',
  components: {
    ZeenSmallBadge,
    ZeenModal,
    ZeenButton,
    ZeenSocialLinkIcon,
    ZeenText,
    ZeenHeadline,
    ZeenPicture,
  },
  inheritAttrs: false,
  props: {
    modalName: {
      type: String,
      require: true,
    },
    pictureAttrs: {
      type: Object,
      require: true,
    },
    headlineAttrs: {
      type: Object,
      require: false,
      default: () => {},
    },
    textAttrs: {
      type: Object,
      require: false,
      default: () => {},
    },
    socialIconAttrs: {
      type: Object,
      require: false,
      default: () => {},
    },
    buttonAttrs: {
      type: Object,
      require: false,
      default: () => {},
    },
    textButton: {
      type: String,
      require: false,
      default: () => {},
    },
  },
  computed: {
    setPictureAttrs() {
      let attrs = {}
      if (!this.pictureAttrs.boarderRadius) {
        attrs.boarderRadius = 1000
      }
      if (!this.pictureAttrs.maxWidth) {
        attrs.maxWidth = 110
      }
      if (!this.pictureAttrs.maxHeight) {
        attrs.maxHeight = 110
      }
      if (!this.pictureAttrs.alt) {
        attrs.alt = 'Фотография спикера'
      }
      return {...attrs, ...this.pictureAttrs}
    },
    setHeadlineAttrs() {
      let attrs = {}
      if (this.headlineAttrs) {
        attrs = {...attrs, ...this.headlineAttrs}
      }
      if (!this.headlineAttrs || !this.headlineAttrs.tag) {
        attrs.tag = 'h3'
      }
      if (!this.headlineAttrs || !this.headlineAttrs.type) {
        attrs.type = 'dark-24'
      }
      return {...attrs}
    },
    setTextAttrs() {
      let attrs = {}
      if (this.textAttrs) {
        attrs = {...attrs, ...this.textAttrs}
      }
      if (!this.textAttrs || !this.textAttrs.type) {
        attrs.type = 'dark-16'
      }
      return {...attrs}
    },
    setSocialIconAttrs() {
      let attrs = {}
      if (this.socialIconAttrs) {
        attrs = {...attrs, ...this.socialIconAttrs}
      }
      if (!this.socialIconAttrs || !this.socialIconAttrs.theme) {
        attrs.theme = 'main-outline'
      }
      if (!this.socialIconAttrs || !this.socialIconAttrs.width) {
        attrs.width = 30
      }
      if (!this.socialIconAttrs || !this.socialIconAttrs.height) {
        attrs.height = 30
      }
      if (!this.socialIconAttrs || !this.socialIconAttrs.ariaLabel) {
        attrs.ariaLabel = 'Ссылка на социальную сеть'
      }
      return {...attrs}
    },
  },
}
</script>

<style lang="scss" scoped>
.speaker-badge {
  &__header {
    display: flex;
    align-items: center;

    .zeen-picture {
      margin-right: 30px;
    }

    &-content {
      max-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .zeen-headline {
        margin-top: 10px;
        margin-bottom: 15px;
      }
    }
  }

  &__social-icons-container {
    display: flex;

    .social-link-icon:not(:last-child) {
      margin-right: 10px;
    }
  }

  &__body {
    .zeen-text {
      margin-top: 47px;
      margin-bottom: 40px;
    }
  }
}
</style>