@mirweb/mir-web-components 1.15.3 → 2.0.1

package/dist/components/blocks/promo/promo.vue

@@ -0,0 +1,403 @@
+<template>
+  <div
+    :class="[
+      'promo__wrapper',
+      selectedVariant,
+      teaser ? 'promo__wrapper--teaser' : '',
+      multiply ? 'promo__wrapper--multiply' : '',
+    ]"
+  >
+    <div class="promo__content">
+      <div
+        v-if="mediaType === 'image'"
+        :class="[
+          'promo__image',
+          reverse ? 'promo__image--reverse' : 'promo__image--default',
+        ]"
+      >
+        <atom-image
+          ><slot
+            name="promo-image"
+            v-bind="{ src: src, width: 1920, alt: alt, height: 1080 }"
+          ></slot
+        ></atom-image>
+      </div>
+      <div
+        v-if="mediaType === 'video'"
+        :class="[
+          'promo__video',
+          reverse ? 'promo__video--reverse' : 'promo__video--default',
+        ]"
+      >
+        <atom-video
+          :src="src"
+          local-video
+          :aria-label="alt"
+          :controls="false"
+          autoplay
+          loop
+          muted
+          play
+          :poster="fallbackImage"
+        >
+        </atom-video>
+      </div>
+      <div
+        :class="[
+          'promo__text',
+          reverse ? 'promo__text--reverse' : 'promo__text--default',
+        ]"
+      >
+        <atom-label
+          v-if="label"
+          :text="label"
+          :label-dark="variant === 'dark'"
+        ></atom-label>
+        <div
+          :class="[
+            'promo__title',
+            variant === 'dark' ? 'promo__title--dark' : '',
+          ]"
+        >
+          <slot name="promo-headline"></slot>
+        </div>
+        <atom-link
+          v-if="linkType === 'link'"
+          :link-type="
+            variant === 'dark'
+              ? 'regular_dark'
+              : variant === 'light'
+                ? 'regular_light'
+                : 'regular_light'
+          "
+          arrow
+          ><slot name="promo-link"></slot
+        ></atom-link>
+        <atom-link
+          v-if="linkType === 'button'"
+          :link-type="
+            variant === 'dark'
+              ? 'secondary_dark'
+              : variant === 'light'
+                ? 'secondary'
+                : 'secondary'
+          "
+          ><slot name="promo-link"></slot
+        ></atom-link>
+      </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 AtomLabel from "../../atoms/label/label.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+const VARIANTS = {
+  dark: "promo__wrapper--dark",
+  light: "promo__wrapper--light",
+  default: "promo__wrapper--default",
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  label?: string;
+  linkText?: string;
+  mediaType?: "image" | "video";
+  src: string;
+  alt: string;
+  fallbackImage: string;
+  reverse?: boolean;
+  variant?: Variant;
+  linkType?: string;
+  teaser?: boolean;
+  multiply: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "",
+  linkText: "",
+  mediaType: "image",
+  reverse: false,
+  variant: "default",
+  linkType: "link",
+  teaser: false,
+  multiply: false,
+});
+
+const selectedVariant = computed(() => VARIANTS[props.variant]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.promo {
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    :deep(video) {
+      outline: 4px solid $white;
+      outline-offset: -4px;
+    }
+
+    &--multiply {
+      :deep(video) {
+        mix-blend-mode: multiply;
+      }
+    }
+
+    &--dark {
+      background-color: $blue-900;
+      margin: 30px 0px;
+
+      @include sm {
+        padding: 60px 0px;
+        margin: 60px 0px;
+      }
+      :deep(video) {
+        outline: 4px solid $blue-900;
+        outline-offset: -4px;
+      }
+    }
+    &--light {
+      background-color: $blue-000;
+      margin: 30px 0px;
+
+      @include sm {
+        padding: 60px 0px;
+        margin: 60px 0px;
+      }
+      :deep(video) {
+        outline: 4px solid $blue-000;
+        outline-offset: -4px;
+      }
+    }
+    &--default {
+      @include sm {
+        padding: 60px 0px;
+      }
+    }
+
+    &--teaser {
+      margin: 0px 0px;
+    }
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: fit-content(1fr 1fr);
+    grid-template-columns: 1fr;
+    overflow-x: clip;
+
+    @include sm {
+      grid-template-columns: fit-content(repeat(2, 1fr auto));
+      grid-template-rows: 1fr;
+      padding-bottom: 30px;
+    }
+
+    @include md {
+      grid-template-columns: 1fr 984px 1fr;
+    }
+
+    @include lg {
+      grid-template-columns: minmax(0, 1fr) 164px 984px 164px minmax(0, 1fr);
+    }
+  }
+
+  &__image {
+    height: 441px;
+
+    &--default {
+      grid-area: 1 / 1;
+      margin-right: 0;
+
+      @include sm {
+      }
+
+      @include md {
+        grid-area: 1 / 1 / 2 / 3;
+        margin-right: 328px;
+      }
+
+      @include lg {
+        grid-area: 1 / 2 / 2 / 4;
+      }
+
+      :slotted(img) {
+        clip-path: polygon(
+          0 0,
+          100% 0,
+          100% calc(100% - 43px),
+          calc(100% - 43px) 100%,
+          0 100%
+        );
+      }
+    }
+
+    &--reverse {
+      grid-area: 1 / 1;
+      margin-left: 0;
+
+      @include sm {
+        margin-left: 328px;
+      }
+
+      @include md {
+        grid-area: 1 / 2 / 3 / 4;
+      }
+
+      @include lg {
+        grid-area: 1 / 3 / 2 / 5;
+      }
+
+      :slotted(img) {
+        clip-path: polygon(
+          0 0,
+          100% 0,
+          100% calc(100% - 43px),
+          calc(100% - 43px) 100%,
+          0 100%
+        );
+
+        @include sm {
+          clip-path: polygon(
+            0 0,
+            100% 0,
+            100% 100%,
+            43px 100%,
+            0 calc(100% - 43px)
+          );
+        }
+      }
+    }
+
+    :slotted(img) {
+      object-position: center;
+      object-fit: cover;
+      height: 100%;
+    }
+  }
+
+  &__video {
+    display: flex;
+
+    &--default {
+      grid-area: 1 / 1;
+      margin-right: 0;
+
+      @include sm {
+      }
+
+      @include md {
+        grid-area: 1 / 1 / 2 / 3;
+        margin-right: 328px;
+      }
+
+      @include lg {
+        grid-area: 1 / 2 / 2 / 4;
+      }
+    }
+
+    &--reverse {
+      grid-area: 1 / 1;
+      margin-left: 0;
+
+      @include sm {
+        margin-left: 328px;
+      }
+
+      @include md {
+        grid-area: 1 / 2 / 3 / 4;
+      }
+
+      @include lg {
+        grid-area: 1 / 3 / 2 / 5;
+      }
+    }
+
+    :deep(video) {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+    margin-top: 41px;
+    margin-bottom: 41px;
+
+    &--default {
+      padding-left: 30px;
+      padding-right: 30px;
+
+      @include sm {
+        grid-area: 1 / 2;
+        width: 328px;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      @include md {
+        grid-area: 1 / 2;
+        justify-self: flex-end;
+        padding-right: 0;
+      }
+
+      @include lg {
+        grid-area: 1 / 3;
+      }
+    }
+
+    &--reverse {
+      padding-left: 30px;
+      padding-right: 30px;
+      grid-area: 2 / 1;
+
+      @include sm {
+        width: 328px;
+        padding-right: 41px;
+        grid-area: 1 / 1;
+        margin-top: 0;
+      }
+
+      @include md {
+        padding-left: 0;
+        grid-area: 1 / 2;
+      }
+
+      @include lg {
+        grid-area: 1 / 3;
+      }
+    }
+  }
+
+  &__title {
+    margin: 30px 0px;
+
+    :deep(p) {
+      word-wrap: break-word;
+      font-weight: 300;
+      font-family: $font-oscine;
+      font-size: $font-size-md;
+      line-height: $line-height-md;
+    }
+
+    &--dark {
+      color: $white;
+
+      :deep(p) {
+        color: $white;
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/quote/quote.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="quote__wrapper">
+    <div class="quote__content">
+      <p class="quote__quote-mark">“</p>
+      <div class="quote__quote">
+        <p class="quote__quote-text">
+          {{ quote }}
+        </p>
+        <div class="quote__author">
+          <div v-if="authorImage" class="quote__image">
+            <atom-image>
+              <slot
+                name="author-image"
+                v-bind="{
+                  src: authorImage + '/100x100',
+                  width: 60,
+                  height: 60,
+                }"
+              ></slot>
+            </atom-image>
+          </div>
+
+          <div class="quote__text">
+            <p class="quote__author-name">
+              {{ author }}
+            </p>
+            <p class="quote__author-title">
+              {{ authorTitle }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+
+defineProps({
+  quote: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: true,
+  },
+  authorTitle: {
+    type: String,
+    required: true,
+  },
+  authorImage: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.quote {
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__content {
+    max-width: 656px;
+    margin: 0 auto;
+    padding: 60px 30px;
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+
+    @include md {
+      padding: 60px 0px;
+    }
+  }
+
+  &__quote {
+    display: flex;
+    flex-direction: column;
+
+    &-mark {
+      font-family: $font-oscine;
+      font-weight: 700;
+      font-size: $font-size-xlg;
+      line-height: $line-height-lg;
+      margin-right: 15px;
+    }
+    &-text {
+      font-size: $font-size-md;
+      line-height: $line-height-lg;
+    }
+  }
+
+  &__author {
+    margin-top: 15px;
+    gap: 15px;
+    align-items: center;
+    flex-direction: row;
+    display: flex;
+    flex-wrap: wrap;
+
+    &-name {
+      font-weight: 600;
+      font-size: $font-size-xsm;
+    }
+    &-title {
+      font-size: $font-size-xsm;
+    }
+  }
+
+  &__image {
+    width: 60px;
+    height: 60px;
+
+    :slotted(img) {
+      height: 60px;
+      width: 60px;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

package/dist/components/blocks/rich-text/rich-text-columns.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="rich-text">
+    <div class="rich-text__wrapper">
+      <div class="rich-text__content rich-text__content--left-aligned">
+        <div class="rich-text__body">
+          <div>
+            <slot name="rich-text-content-left" />
+          </div>
+          <div>
+            <slot name="rich-text-content-right" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+
+.rich-text {
+  width: 100%;
+
+  &__wrapper {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: 0 30px 30px;
+    :deep(img) {
+      width: 100%;
+    }
+    @include md {
+      padding: 0 0 30px 0px;
+    }
+  }
+
+  &__headline {
+    margin-bottom: 30px;
+    width: 100%;
+    max-width: 658px;
+
+    &--centered {
+      margin: 0px auto 15px auto;
+
+      @media screen and (max-width: 942px) {
+        margin: 0px 0 15px 0;
+      }
+    }
+  }
+
+  &__body {
+    max-width: 658px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 0px;
+
+    @include md {
+      flex-wrap: nowrap;
+      gap: 30px;
+    }
+
+    @include sm {
+      gap: 30px;
+    }
+
+    :deep(.content-left) {
+      width: 314px;
+    }
+
+    :deep(.content-right) {
+      width: 314px;
+    }
+
+    :deep(h2) {
+      margin: 1.375rem 0;
+      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;
+      }
+    }
+  }
+
+  &__content {
+    margin: 0px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0;
+
+    &--left-aligned {
+      margin-left: 0;
+    }
+
+    @media screen and (min-width: 942px) {
+      flex-direction: row;
+      gap: 41px;
+    }
+  }
+}
+</style>