@mirweb/mir-web-components 1.15.3 → 2.0.1

package/dist/components/blocks/flashcards/flashcards.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    class="flashcards"
+    :class="bgColor === 'light' ? 'flashcards--light' : 'flashcards--white'"
+  >
+    <div class="flashcard-wrapper">
+      <div
+        :class="[
+          { 'no-bodytext': !hasBodytext },
+          'flashcard-wrapper__top-section',
+        ]"
+      >
+        <h2 v-if="headline" class="flashcard-wrapper__headline">
+          {{ headline }}
+        </h2>
+        <div v-if="body" class="flashcard-wrapper__bodytext">
+          <slot name="flashcard-wrapper-body"></slot>
+        </div>
+      </div>
+      <div
+        class="flashcard-wrapper__teaser-list"
+        :class="{
+          sm: cardSize === 'sm',
+          md: cardSize === 'md',
+          lg: cardSize === 'lg',
+        }"
+      >
+        <molecule-flashcard
+          v-for="card in flashcards"
+          :key="card._uid"
+          :name="card.name"
+          :bodytext="card.bodytext"
+          :image="card.image"
+          :namebackside="card.namebackside ? card.namebackside : ''"
+          :bodytextbackside="card.bodytextbackside"
+          :imagebackside="
+            card.imagebackside ? card.imagebackside : { filename: '', alt: '' }
+          "
+          :size="cardSize"
+          :image-fit="card.imageFit"
+          :image-fit-back="card.imageFitBack"
+          ><template #flashcard-front-body="{ bodytext }"
+            ><slot name="flashcard-front-body" v-bind="{ bodytext }"></slot
+          ></template>
+          <template #flashcard-front-image="{ src, alt }"
+            ><slot
+              name="flashcard-front-image"
+              v-bind="{ src, alt }"
+            ></slot></template
+          ><template #flashcard-back-body="{ bodytextbackside }"
+            ><slot
+              name="flashcard-back-body"
+              v-bind="{ bodytextbackside }"
+            ></slot
+          ></template>
+          <template #flashcard-back-image="{ src, alt }"
+            ><slot name="flashcard-back-image" v-bind="{ src, alt }"></slot
+          ></template>
+        </molecule-flashcard>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MoleculeFlashcard from "../../molecules/flashcard/flashcard.vue";
+import { computed } from "vue";
+
+export type Props = {
+  headline: string;
+  body: string;
+  bgColor: string;
+  flashcards: Array<{
+    name: string;
+    bodytext: string;
+    image: {
+      filename: string;
+      alt: string;
+    };
+    namebackside: string;
+    bodytextbackside: string;
+    imagebackside: {
+      filename: string;
+      alt: string;
+    };
+    imageFit: boolean;
+    imageFitBack: boolean;
+    _uid: string;
+  }>;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const hasBodytext = computed(() => props.body.trim().length > 0);
+
+const cardSize = computed(() => {
+  const count = props.flashcards?.length;
+  if (count === 4 || count === 5) {
+    return "sm";
+  } else if (count === 6) {
+    return "md";
+  } else if (count === 3) {
+    return "md";
+  } else if (count === 2) {
+    return "lg";
+  }
+  return "sm";
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.flashcards {
+  width: 100%;
+
+  &--light {
+    background-color: $blue-000;
+  }
+
+  &--white {
+    background-color: $white;
+  }
+}
+
+.flashcard-wrapper {
+  margin: 30px 30px;
+  max-width: $screen-lg-min;
+
+  @include md {
+    margin: 30px 0;
+    margin: 0 auto;
+  }
+
+  &__top-section {
+    display: grid;
+    margin: 0 auto;
+    padding-top: 60px;
+    padding-bottom: 60px;
+  }
+
+  &__headline {
+    padding-bottom: 30px;
+  }
+
+  &__bodytext {
+    font-size: 16px;
+    line-height: 24px;
+    font-family: $font-opensans;
+    color: $blue-900;
+    font-weight: 300;
+    max-width: 658px;
+  }
+
+  &__teaser-list {
+    display: grid;
+    gap: 30px;
+    padding-bottom: 60px;
+
+    &.sm {
+      grid-template-columns: repeat(auto-fit, minmax(223px, 1fr));
+      @media screen and (max-width: $screen-lg-min) {
+        grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
+      }
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: auto;
+      }
+    }
+
+    &.md {
+      grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: auto;
+      }
+    }
+
+    &.lg {
+      grid-template-columns: repeat(auto-fit, minmax(477px, 1fr));
+      @media screen and (max-width: $screen-lg-min) {
+        grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
+      }
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: auto;
+      }
+    }
+  }
+
+  :deep(.flashcard-front, .flashcard-back) {
+    transition: $transition-box-shadow;
+  }
+
+  :hover:deep(.flashcard-front) {
+    box-shadow: 0px 0px 20px $blue-300;
+  }
+
+  :hover:deep(.flashcard-back) {
+    box-shadow: 0px 0px 20px $blue-300;
+  }
+
+  :hover:deep(.flashcard-front:not(:hover)) {
+    box-shadow: 0px 0px 5px $blue-300;
+  }
+
+  :hover:deep(.flashcard-back:not(:hover)) {
+    box-shadow: 0px 0px 5px $blue-300;
+  }
+}
+
+.no-bodytext {
+  padding-bottom: 0px;
+}
+</style>

package/dist/components/blocks/form-script/form-script.vue

@@ -0,0 +1,172 @@
+<template>
+  <div :class="['form__wrapper', selectedVariant]">
+    <div class="form__content">
+      <div class="form__information">
+        <h2 class="form__headline">
+          {{ headline }}
+        </h2>
+        <div class="form__body">
+          <slot name="form-body" />
+        </div>
+        <atom-link
+          v-if="linkType === 'link'"
+          :link-type="
+            variant === 'dark'
+              ? 'regular_dark'
+              : variant === 'light'
+                ? 'regular_light'
+                : 'regular_light'
+          "
+          arrow
+          ><slot name="form-link"></slot
+        ></atom-link>
+      </div>
+      <div class="form__script">
+        <slot name="form-script" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+const VARIANTS = {
+  dark: "form__wrapper--dark",
+  light: "form__wrapper--light",
+  default: "form__wrapper--default",
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  headline?: string;
+  linkText?: string;
+  variant?: Variant;
+  linkType?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  headline: "",
+  linkText: "",
+  variant: "default",
+  linkType: "link",
+});
+
+const selectedVariant = computed(() => VARIANTS[props.variant]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.form {
+  &__wrapper {
+    width: 100%;
+    background-color: $blue-000;
+    padding: 60px 30px;
+
+    @include md {
+      padding: 60px 0;
+    }
+  }
+
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    display: flex;
+    gap: 60px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__information {
+    max-width: 410px;
+    width: 100%;
+    min-width: 328px;
+  }
+
+  &__headline {
+    margin-bottom: 30px;
+  }
+
+  &__body {
+    font-family: $font-opensans;
+    line-height: $line-height-sm;
+    font-size: $font-size-sm;
+    font-weight: 300;
+
+    :deep(h3) {
+      margin: 1rem 0;
+      font-weight: 300;
+    }
+
+    :deep(p) {
+      padding-bottom: 1rem;
+
+      a {
+        color: $blue-600;
+        text-decoration: 0.3px underline;
+        font-weight: 500;
+
+        &:hover {
+          color: $blue-800;
+          transition: $transition-color;
+        }
+      }
+    }
+    :deep(ol) {
+      padding-left: 1rem;
+      list-style-type: decimal;
+      font-family: $font-opensans;
+      font-weight: 300;
+
+      li {
+        margin: 5px 0;
+        p {
+          padding-bottom: 0px;
+        }
+      }
+    }
+
+    :deep(ul) {
+      list-style-type: none;
+      font-family: $font-opensans;
+      font-weight: 300;
+      padding-left: 1rem;
+
+      li {
+        margin: 5px 0;
+        list-style: none;
+        position: relative;
+        left: 0;
+
+        p {
+          padding-bottom: 0px;
+        }
+      }
+
+      li::before {
+        content: "\2022";
+        position: absolute;
+        left: -0.8em;
+        font-size: 1.1em;
+      }
+    }
+  }
+
+  &__script {
+    background-color: $white;
+    padding: 15px 15px 0 15px;
+    max-width: 492px;
+    width: 100%;
+    border-radius: $border-radius;
+    margin: 0 auto;
+    box-shadow: $box-shadow;
+
+    @include md {
+      margin: 0;
+    }
+  }
+}
+</style>

package/dist/components/blocks/frontpage-hero/frontpage-hero.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="academy-overview" :style="bgStyle">
+    <div class="academy-overview__content-wrapper">
+      <div class="academy-overview__content">
+        <div>
+          <h1 class="academy-overview__title">{{ hero.headline }}</h1>
+          <div class="academy-overview__description">
+            <slot name="academy-description"></slot>
+          </div>
+          <div class="academy-overview__button-wrapper">
+            <slot name="button"></slot>
+          </div>
+        </div>
+
+        <div v-if="hero.showStats" class="academy-overview__stats">
+          <div class="academy-overview__stats-row">
+            <div class="academy-overview__stat">
+              <div class="academy-overview__value">{{ hero.lessonValue }}</div>
+              <div class="academy-overview__label">{{ hero.lessonLabel }}</div>
+            </div>
+            <div class="academy-overview__stat">
+              <div class="academy-overview__value">{{ hero.pointsValue }}</div>
+              <div class="academy-overview__label">{{ hero.pointsLabel }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Hero {
+  headline: string;
+  cover?: string;
+  lessonValue: number;
+  lessonLabel: string;
+  pointsValue: number;
+  pointsLabel: string;
+  showStats: boolean;
+}
+export type Props = {
+  hero: Hero;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  hero: () => ({
+    headline: "Welcome back",
+    cover: "",
+    lessonValue: 0,
+    lessonLabel: "Lessons Completed",
+    pointsValue: 0,
+    pointsLabel: "Points",
+    showStats: false,
+  }),
+});
+
+const mirsaicUrl =
+  "https://a.storyblok.com/f/230581/1202x489/e76c5d687c/mirsaic-dark.svg?cv=1695126163753";
+
+const bgStyle = computed(() => {
+  if (props.hero.cover) {
+    return {
+      backgroundImage: `url("${mirsaicUrl}"), url(${props.hero.cover})`,
+    };
+  } else {
+    return {
+      backgroundImage: `url("${mirsaicUrl}"), linear-gradient(155deg, #143a67 0%, #0c0931 100%)`,
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+
+.academy-overview {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 422px;
+  justify-content: center;
+  width: 100%;
+  background-repeat: repeat-x, no-repeat;
+  background-size: 984px, cover;
+  background-position: center top;
+  color: $white;
+  align-self: center;
+  font-family: $font-oscine;
+
+  &__content-wrapper {
+    position: relative;
+    display: flex;
+    width: 100%;
+    padding: 30px 0 60px 0px;
+    max-width: 100%;
+    margin: auto;
+    @include md {
+      max-width: $max-width;
+    }
+  }
+  &__content {
+    position: relative;
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 60px;
+    padding: 60px 30px;
+
+    @include md {
+      padding: 60px 0px;
+    }
+
+    @include sm {
+      flex-direction: row;
+    }
+  }
+  &__title {
+    color: $white;
+  }
+  &__description {
+    max-width: 540px;
+    margin-top: 30px;
+    color: $white;
+
+    :deep(p) {
+      padding-bottom: 1rem;
+      color: $white;
+    }
+
+    :deep(b),
+    :deep(strong) {
+      font-weight: 600;
+      color: $white;
+    }
+
+    :deep(ul) {
+      list-style-type: none;
+      font-family: $font-opensans;
+      font-weight: 300;
+      padding-left: 1rem;
+      color: $white;
+
+      li {
+        margin: 5px 0;
+        list-style: none;
+        position: relative;
+        left: 0;
+        color: $white;
+
+        p {
+          padding-bottom: 0px;
+        }
+      }
+
+      li::before {
+        content: "\2022";
+        position: absolute;
+        left: -0.8em;
+        font-size: 1.1em;
+      }
+    }
+  }
+  &__stats {
+    @include sm {
+      border-bottom: 0;
+      border-left: 0.5px solid $blue-600;
+      align-self: stretch;
+      padding-left: 60px;
+    }
+  }
+  &__stats-row {
+    gap: 30px;
+    display: flex;
+    flex-direction: column;
+  }
+  &__stat {
+    display: flex;
+    flex-direction: column;
+    line-height: normal;
+    flex-grow: 1;
+    color: $white;
+    font-weight: 300;
+    text-align: center;
+  }
+  &__value,
+  &__label {
+    align-self: center;
+    font-family: $font-oscine;
+    max-width: 120px;
+  }
+  &__value {
+    line-height: 52px;
+    font-weight: 300;
+    font-size: 40px;
+    @include md {
+      font-size: 60px;
+    }
+  }
+  &__label {
+    margin-top: 10px;
+    font-size: $font-size-md;
+    font-weight: 300;
+    line-height: $line-height-sm;
+  }
+  &__button-wrapper {
+    margin-top: 60px;
+  }
+}
+</style>

package/dist/components/blocks/headline/headline.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="headline__wrapper">
+    <div
+      :class="{
+        'headline__content--article-and-submenu': article && subMenu,
+        'headline__content--article': article && !subMenu,
+        'headline__content--default headline__content--submenu':
+          !article && subMenu,
+        'headline__content--default': !article && !subMenu,
+      }"
+    >
+      <h1 class="headline__h1">
+        {{ headline }}
+      </h1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  headline: {
+    type: String,
+    required: true,
+  },
+  article: {
+    type: Boolean,
+    required: false,
+  },
+  subMenu: {
+    type: Boolean,
+    required: false,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.headline {
+  &__wrapper {
+    width: 100%;
+  }
+  &__content {
+    &--default {
+      max-width: $max-width;
+      margin: 30px auto 0 auto;
+      padding: 60px 30px 30px 30px;
+
+      @include md {
+        padding: 60px 0px 30px 0px;
+      }
+    }
+
+    &--article {
+      max-width: 658px;
+      margin: 30px auto 0px auto;
+      padding-top: 60px;
+
+      @media screen and (max-width: 942px) {
+        margin: 30px 30px 0 30px;
+      }
+    }
+
+    &--submenu {
+      padding: 132px 30px 30px 30px;
+
+      @include md {
+        padding: 132px 0px 30px 0px;
+      }
+    }
+
+    &--article-and-submenu {
+      max-width: 658px;
+      margin: 30px auto 0px auto;
+      padding-top: 132px;
+
+      @media screen and (max-width: 942px) {
+        margin: 30px 30px 0 30px;
+      }
+    }
+  }
+  &__h1 {
+    font-size: 44px;
+    line-height: 52px;
+    font-family: $font-oscine;
+    font-weight: 300;
+
+    @include sm {
+      font-size: $font-size-xlg;
+      line-height: $line-height-xlg;
+    }
+  }
+}
+</style>