@mirweb/mir-web-components 1.15.3 → 2.0.1

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="hero__wrapper">
+    <div class="hero__content">
+      <div class="hero__top">
+        <div class="hero__elements">
+          <div class="hero__headline">
+            <h1>{{ headline }}</h1>
+          </div>
+          <div class="hero__link">
+            <atom-link link-type="regular_light" arrow>
+              <slot name="hero-link"></slot>
+            </atom-link>
+          </div>
+        </div>
+      </div>
+
+      <div class="hero__video">
+        <div class="hero__gradient"></div>
+        <div class="hero__video__video">
+          <slot name="hero-video" />
+        </div>
+        <div class="hero__image">
+          <slot name="hero-image" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLink from "../../atoms/link/link.vue";
+
+defineProps({
+  headline: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.hero {
+  &__wrapper {
+    width: 100%;
+    background-color: $blue-100;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 30px;
+    @include md {
+      margin-bottom: 60px;
+    }
+  }
+
+  &__content {
+    display: grid;
+    position: relative;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 1fr;
+    overflow-x: clip;
+    max-height: 100%;
+
+    @include sm {
+      grid-template-columns: fit-content(repeat(2, 1fr auto));
+      grid-template-rows: 1fr;
+    }
+
+    @include md {
+      grid-template-columns: 1fr 984px 1fr;
+    }
+
+    @include lg {
+      grid-template-columns: minmax(0, 1fr) 164px 984px 164px minmax(0, 1fr);
+    }
+  }
+
+  &__top {
+    grid-area: 2;
+    padding: 30px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    @include sm {
+      position: absolute;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      margin-left: 30px;
+      grid-area: auto;
+      padding: 0;
+    }
+    @include md {
+      grid-area: 1 / 2 / 2 / 4;
+      margin: 0px;
+    }
+
+    @include lg {
+      grid-area: 1 / 3 / 2 / 5;
+    }
+  }
+
+  &__elements {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    gap: 30px;
+    justify-content: center;
+    width: 100%;
+
+    @include sm {
+      max-width: 45%;
+
+      text-align: left;
+    }
+  }
+
+  &__headline {
+    h1 {
+      font-size: $font-size-lg;
+      line-height: $line-height-lg;
+
+      @include md {
+        font-size: $font-size-xlg;
+        line-height: $line-height-xlg;
+      }
+    }
+  }
+
+  &__gradient {
+    @include sm {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+          to right,
+          $blue-100 0%,
+          rgb(249, 253, 255, 0.75) 45%,
+          transparent 70%
+        ),
+        linear-gradient(to left, $blue-100 0%, transparent 35%),
+        linear-gradient(to bottom, $blue-100 0%, transparent 25%),
+        linear-gradient(to top, $blue-100 0%, transparent 25%);
+      z-index: 1;
+    }
+  }
+
+  &__video {
+    grid-area: 1 / 1 / 2 / 5;
+    height: auto;
+    width: 100%;
+
+    :deep(video) {
+      width: 100%;
+      height: auto;
+      outline: 4px solid $blue-100;
+      outline-offset: -4px;
+      position: relative;
+      z-index: 0;
+
+      @include sm {
+        outline: none;
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/image/image.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="image__wrapper">
+    <div class="image__content">
+      <div class="image__image">
+        <atom-image>
+          <slot
+            name="image"
+            v-bind="{
+              width: 984,
+              height: fullHeight ? '100%' : 554,
+              src: src,
+              alt: alt,
+              class: fullHeight ? 'full-height' : 'default',
+            }"
+          ></slot>
+        </atom-image>
+      </div>
+      <p class="image__caption">
+        {{ caption }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+
+defineProps({
+  caption: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  src: {
+    type: String,
+    required: true,
+  },
+  alt: {
+    type: String,
+    required: true,
+  },
+  fullHeight: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.image {
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    padding: $padding-mobile;
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__image {
+    :slotted(.full-height) {
+      object-fit: contain;
+      max-height: 100%;
+    }
+    :slotted(.default) {
+      object-fit: cover;
+      max-height: 554px;
+    }
+  }
+
+  &__caption {
+    font-size: $font-size-xsm;
+    margin-top: 15px;
+    padding: 0px 30px;
+
+    @include md {
+      padding: 0px;
+    }
+  }
+}
+</style>

package/dist/components/blocks/image-gallery/image-gallery.vue

@@ -0,0 +1,289 @@
+<template>
+  <div :class="['gallery__wrapper', selectedBgColor]">
+    <div
+      :class="[
+        'gallery__content',
+        flipHorizontal
+          ? 'gallery__content--reverse'
+          : 'gallery__content--default',
+      ]"
+    >
+      <div class="gallery__large">
+        <div
+          v-if="mediaLarge && mediaType === 'image'"
+          class="image image--large"
+        >
+          <atom-image
+            ><slot
+              name="image-large"
+              v-bind="{
+                height: 530,
+                src: mediaLarge.src,
+                alt: mediaLarge.alt,
+              }"
+            ></slot
+          ></atom-image>
+        </div>
+        <div v-if="mediaLarge && mediaType === 'video'" class="video">
+          <atom-video
+            :src="mediaLarge.src"
+            local-video
+            :aria-label="mediaLarge.alt"
+            :controls="false"
+            height="530"
+            width="617"
+            autoplay
+            loop
+            muted
+            play
+          ></atom-video>
+        </div>
+      </div>
+      <div
+        :style="[mediaSmall.length === 2 ? 'grid-gap: 38px;' : '']"
+        :class="[
+          'gallery__small',
+          flipVertical ? 'gallery__small--reverse' : 'gallery__small--default',
+        ]"
+      >
+        <div
+          v-for="img in mediaSmall"
+          :key="img.src + img.alt"
+          class="image image--small"
+        >
+          <atom-image
+            ><slot
+              name="image-small"
+              v-bind="{
+                height: 246,
+                src: img.src,
+                alt: img.alt,
+              }"
+            ></slot
+          ></atom-image>
+        </div>
+        <div
+          v-if="mediaSmall.length < 2"
+          class="body"
+          :class="bgColor === 'dark' ? 'body--dark' : ''"
+        >
+          <p>{{ body }}</p>
+          <atom-link
+            v-if="linkType === 'link'"
+            :link-type="
+              bgColor === 'dark'
+                ? 'regular_dark'
+                : bgColor === 'light'
+                  ? 'regular_light'
+                  : 'regular_light'
+            "
+            arrow
+            ><slot name="gallery-link"></slot
+          ></atom-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import AtomImage from "../../atoms/image/image.vue";
+import AtomVideo from "../../atoms/video/video.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+interface Media {
+  src: string;
+  alt: string;
+}
+
+const BGCOLORS = {
+  white: "",
+  light: "gallery__wrapper--light",
+  dark: "gallery__wrapper--dark mirsaic--dark",
+} as const;
+
+type BgColor = keyof typeof BGCOLORS;
+
+export type Props = {
+  mediaLarge: Media;
+  mediaType?: "image" | "video";
+  mediaSmall: Media[];
+  body?: string;
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  bgColor?: BgColor;
+  linkText?: string;
+  linkType?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  mediaType: "image",
+  body: "",
+  flipHorizontal: false,
+  flipVertical: false,
+  bgColor: "white",
+  linkText: "",
+  linkType: "link",
+});
+
+const selectedBgColor = computed(() => BGCOLORS[props.bgColor]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.gallery {
+  &__wrapper {
+    width: 100%;
+    padding: $padding-mobile;
+    margin: $extra-margin-mobile-bg;
+    background-color: $white;
+    @include md {
+      padding: $padding-desktop;
+      margin: $extra-margin-desktop-bg;
+    }
+
+    &--light {
+      background-color: $blue-100;
+    }
+
+    &--dark {
+      background-color: $blue-900;
+      color: $white;
+    }
+  }
+
+  &__content {
+    max-width: $max-width;
+    grid-template-columns: auto;
+    display: grid;
+
+    @include md {
+      margin: 0 auto;
+      grid-template-columns: auto auto;
+      grid-gap: 41px;
+    }
+
+    .image {
+      &--large {
+        width: 100%;
+        max-height: 530px;
+        height: 100%;
+      }
+      &--small {
+        width: 328px;
+        height: 246px;
+      }
+
+      :slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    &--reverse {
+      :nth-child(1) {
+        order: 2;
+      }
+      .body {
+        flex-direction: column-reverse;
+        margin-bottom: 30px;
+        @include md {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &--default {
+      .body {
+        flex-direction: column;
+        margin-top: 30px;
+        @include md {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  &__large {
+    max-width: 100%;
+    max-height: 530px;
+
+    @include md {
+      margin: 0;
+      max-width: 617px;
+      height: 530px;
+      width: 100%;
+    }
+  }
+
+  &__small {
+    width: 100%;
+
+    @include md {
+      display: grid;
+      grid-template-rows: auto auto;
+    }
+
+    &--reverse {
+      .image {
+        display: none;
+        @include md {
+          display: block;
+        }
+        &--small {
+          order: 2;
+        }
+        .body {
+          flex-direction: column-reverse;
+        }
+      }
+
+      :nth-child(2) {
+        order: 1;
+      }
+    }
+
+    &--default {
+      .image {
+        display: none;
+        @include md {
+          display: block;
+        }
+        &--small {
+          order: 1;
+        }
+      }
+      :nth-child(2) {
+        order: 2;
+      }
+      .body {
+        flex-direction: column;
+      }
+    }
+
+    .body {
+      display: flex;
+      gap: 15px;
+      justify-content: center;
+      @include md {
+        width: 328px;
+        height: 284px;
+      }
+
+      p {
+        font-size: $font-size-lg;
+        line-height: $line-height-lg;
+      }
+
+      &--dark {
+        color: $white;
+        p {
+          color: $white;
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/logo-wall/logo-wall.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="logo-wall__wrapper">
+    <div class="logo-wall__content">
+      <div v-if="headline || body" class="logo-wall__text">
+        <h2 v-if="headline">{{ headline }}</h2>
+        <p v-if="body">{{ body }}</p>
+      </div>
+      <div class="logo-wall__logos">
+        <div
+          v-for="logo in logos"
+          :key="logo.src + logo.alt"
+          class="logo-wall__logo"
+        >
+          <atom-image
+            ><slot
+              name="logo-wall-logo"
+              v-bind="{
+                width: 130,
+                height: 130,
+                src: logo.src,
+                alt: logo.alt,
+              }"
+            ></slot
+          ></atom-image>
+        </div>
+      </div>
+      <div class="logo-wall__link">
+        <atom-link link-type="regular_light" :arrow="true"
+          ><slot name="logo-wall-link"></slot
+        ></atom-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+interface Logo {
+  src: string;
+  alt: string;
+}
+
+defineProps({
+  headline: {
+    type: String,
+    default: "",
+  },
+  body: {
+    type: String,
+    default: "",
+  },
+  logos: {
+    type: Array as () => Logo[],
+    required: true,
+    validator: (logos: Logo[]) => logos.length <= 5,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.logo-wall {
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    gap: 30px;
+    flex-direction: column;
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: $padding-mobile;
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__text {
+    max-width: 658px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  &__logos {
+    @include sm {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-column-gap: 60px;
+    }
+
+    @media screen and (max-width: 723px) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+    }
+  }
+
+  &__logo {
+    max-width: 100%;
+    height: auto;
+
+    :deep(.image__wrapper) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+    }
+
+    @include sm {
+      //height: 123px;
+    }
+  }
+
+  &__link {
+    margin: 0 auto;
+    padding-top: 30px;
+  }
+}
+</style>