@mirweb/mir-web-components 1.15.3 → 2.0.0

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

@@ -0,0 +1,296 @@
+<template>
+  <div
+    :class="[
+      'rich-text',
+      bgColor === 'blue' ? 'rich-text--blue' : 'rich-text--white',
+    ]"
+  >
+    <div class="rich-text__wrapper">
+      <atom-label v-if="label" :text="label" :label-dark="false" />
+      <h2
+        v-if="headline"
+        :class="[
+          'rich-text__headline',
+          leftAligned
+            ? 'rich-text__headline--left-aligned'
+            : bulletList || image
+              ? 'rich-text__headline--left-aligned'
+              : 'rich-text__headline--centered',
+        ]"
+      >
+        {{ headline }}
+      </h2>
+      <div
+        :class="[
+          'rich-text__content',
+          leftAligned
+            ? 'rich-text__content--left-aligned'
+            : bulletList || image
+              ? 'rich-text__content--left-aligned'
+              : 'rich-text__content--centered',
+        ]"
+      >
+        <div
+          :class="[
+            'rich-text__body',
+            bulletList || image ? 'rich-text__body--content-right' : '',
+          ]"
+        >
+          <slot name="rich-text-content" />
+          <div v-if="links" class="rich-text__links">
+            <slot name="rich-text-links" />
+          </div>
+        </div>
+        <div v-if="bulletList" class="rich-text__bullet-list">
+          <slot name="rich-text-bullet-list" />
+        </div>
+        <div
+          v-if="image"
+          :class="[
+            'rich-text__image',
+            imageClip ? 'rich-text__image--clip' : '',
+          ]"
+        >
+          <atom-image>
+            <slot name="rich-text-image" v-bind="{ width: 865, height: 307 }" />
+          </atom-image>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+import AtomLabel from "../../atoms/label/label.vue";
+
+export type Props = {
+  headline?: string;
+  leftAligned?: boolean;
+  links?: boolean;
+  bulletList?: boolean;
+  image?: boolean;
+  imageClip?: boolean;
+  bgColor?: string;
+  label?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  headline: "",
+  leftAligned: false,
+  links: false,
+  bulletList: false,
+  image: false,
+  imageClip: true,
+  bgColor: "white",
+  label: "",
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.rich-text {
+  width: 100%;
+
+  &--blue {
+    background-color: $blue-100;
+  }
+
+  &--white {
+    background-color: none;
+  }
+
+  &__wrapper {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: 30px 30px;
+    :deep(img) {
+      width: 100%;
+    }
+    @include md {
+      padding: 30px 0px;
+    }
+
+    :deep(.label__wrapper) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__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;
+    width: 100%;
+
+    &--content-right {
+      max-width: 658px;
+
+      @include sm {
+        max-width: 499px;
+      }
+
+      @media screen and (max-width: 942px) {
+        max-width: 658px;
+      }
+    }
+
+    :deep(h2) {
+      margin: 1.375rem 0;
+      font-weight: 300;
+    }
+
+    :deep(h3) {
+      margin: 1rem 0;
+      font-weight: 300;
+    }
+
+    :deep(p) {
+      padding-bottom: 1rem;
+    }
+
+    :deep(b),
+    :deep(strong) {
+      font-weight: 600;
+    }
+
+    :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;
+      }
+    }
+
+    :deep(h2),
+    :deep(h3),
+    :deep(p),
+    :deep(ol),
+    :deep(ul) {
+      a {
+        color: $blue-600;
+        text-decoration: 0.3px underline;
+        font-weight: 500;
+
+        &:hover {
+          color: $blue-800;
+          transition: $transition-color;
+        }
+      }
+    }
+  }
+
+  &__bullet-list {
+    margin: 30px -30px -30px -30px;
+
+    @media screen and (min-width: 942px) {
+      margin: 0;
+    }
+  }
+
+  &__image {
+    margin: 30px -30px -30px -30px;
+
+    @include sm {
+      height: 307px;
+      width: 100%;
+      margin: 30px auto -30px auto;
+    }
+
+    @media screen and (min-width: 942px) {
+      margin: 0;
+    }
+
+    &--clip {
+      :slotted(img) {
+        clip-path: polygon(
+          0 0,
+          calc(100% - 43px) 0,
+          100% 43px,
+          100% 100%,
+          0 100%
+        );
+      }
+    }
+
+    :slotted(img) {
+      object-position: center;
+      object-fit: cover;
+      height: 100%;
+    }
+  }
+
+  &__content {
+    margin: 0px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0;
+
+    &--left-aligned {
+      margin-left: 0;
+    }
+
+    &--centered {
+      justify-content: center;
+    }
+
+    @media screen and (min-width: 942px) {
+      flex-direction: row;
+      gap: 41px;
+    }
+  }
+
+  &__links {
+    margin: 30px auto 0px auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 30px;
+  }
+}
+</style>

package/dist/components/blocks/timeline/timeline.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="timeline__wrapper">
+    <div class="timeline__content">
+      <div class="timeline__items">
+        <div
+          v-for="item in timelineItems"
+          :key="item.year"
+          class="timeline__item faded"
+        >
+          <div class="item__left">
+            {{ item.year }}
+          </div>
+          <div class="item__elements">
+            <div class="circle"></div>
+            <div class="line"></div>
+          </div>
+          <div class="item__right">
+            <atom-image>
+              <slot
+                v-if="item.media.src"
+                name="timeline-image"
+                v-bind="{ src: item.media.src, alt: item.media.alt }"
+              ></slot>
+            </atom-image>
+            <div
+              :style="[!item.media.src ? 'margin-top: 0px' : '']"
+              class="rich-text"
+              v-html="item.text"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import AtomImage from "../../atoms/image/image.vue";
+
+interface TimelineItem {
+  year: string;
+  media: {
+    src?: string;
+    alt?: string;
+  };
+  text: JSON;
+}
+
+defineProps({
+  timelineItems: {
+    type: Array as () => TimelineItem[],
+    required: true,
+  },
+});
+
+onMounted(() => {
+  const items = document.querySelectorAll(".timeline__item");
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+          entry.target.classList.remove("faded");
+          observer.unobserve(entry.target);
+        }
+      });
+    },
+    {
+      threshold: 1,
+    },
+  );
+  items.forEach((item) => {
+    observer.observe(item);
+  });
+});
+</script>
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.timeline {
+  &__wrapper {
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    max-width: $max-width;
+    margin: 0 auto;
+    flex-direction: column;
+    align-items: center;
+
+    padding: 0 30px;
+
+    @include md {
+      padding: 0;
+    }
+  }
+
+  &__items {
+    width: 100%;
+
+    &:last-child {
+      margin-bottom: 60px;
+    }
+  }
+
+  &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    gap: 30px;
+    width: 100%;
+    transition: all 0.6s ease;
+
+    &:first-child {
+      margin-top: 120px;
+    }
+
+    @include sm {
+      gap: 60px;
+    }
+
+    &.visible {
+      opacity: 1;
+      color: $blue-900;
+      .circle {
+        background-color: $blue-900;
+      }
+
+      .line {
+        background-color: $blue-900;
+      }
+    }
+    &.faded {
+      opacity: 0.3;
+      color: $blue-300;
+      .circle {
+        background-color: $white;
+        border: 2px solid $blue-900;
+      }
+
+      .line {
+        background-color: $blue-300;
+      }
+    }
+
+    .item {
+      &__left {
+        text-align: right;
+        font-size: $font-size-lg;
+        font-family: $font-oscine;
+        line-height: $line-height-md;
+        font-weight: 300;
+        min-width: 62px;
+
+        @include sm {
+          font-size: $font-size-xlg;
+          line-height: $line-height-lg;
+          min-width: 125px;
+        }
+      }
+
+      &__elements {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: center;
+        position: relative;
+
+        .circle {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+        }
+
+        .line {
+          width: 1px;
+          height: calc(100% - 12px);
+          margin: 0 auto;
+        }
+      }
+
+      &__right {
+        display: flex;
+        flex-direction: column;
+        max-width: 328px;
+        width: 100%;
+
+        :deep(ul) {
+          list-style-type: none;
+          font-family: $font-opensans;
+          font-weight: 300;
+          padding-left: 1rem;
+
+          li {
+            position: relative;
+            left: 0;
+            margin: 5px 0;
+
+            p {
+              padding-bottom: 0px;
+            }
+
+            &::before {
+              content: "\2022";
+              position: absolute;
+              left: -0.8em;
+              font-size: 1.1em;
+            }
+          }
+        }
+
+        .media {
+          img {
+            max-width: 297px;
+            width: 100%;
+            height: auto;
+            max-height: 354px;
+            margin-bottom: 30px;
+          }
+        }
+
+        .rich-text {
+          margin-top: 30px;
+          margin-bottom: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/vimeo/vimeo.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vimeo">
+    <div class="vimeo__wrapper">
+      <h2 v-if="headline" class="vimeo__headline">
+        {{ headline }}
+      </h2>
+      <slot name="vimeo-content" />
+      <p v-if="description" class="vimeo__description">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  headline: {
+    type: String,
+    default: "",
+  },
+  description: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.vimeo {
+  width: 100%;
+
+  &__wrapper {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: $padding-mobile;
+
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__headline {
+    margin-bottom: 30px;
+  }
+
+  &__description {
+    font-size: $font-size-xsm;
+    margin-top: 15px;
+  }
+}
+</style>

package/dist/components/index.ts

@@ -0,0 +1,51 @@
+export { default as AtomButton } from "./atoms/button/button.vue";
+export { default as AtomCheckbox } from "./atoms/checkbox/checkbox.vue";
+export { default as AtomChip } from "./atoms/chip/chip.vue";
+export { default as AtomDropdown } from "./atoms/dropdown/dropdown.vue";
+export { default as AtomImage } from "./atoms/image/image.vue";
+export { default as AtomLabel } from "./atoms/label/label.vue";
+export { default as AtomLink } from "./atoms/link/link.vue";
+export { default as AtomRadioButton } from "./atoms/radio-button/radio-button.vue";
+export { default as AtomSelect } from "./atoms/select/select.vue";
+export { default as AtomSelectMultiple } from "./atoms/select-multiple/select-multiple.vue";
+export { default as AtomSlider } from "./atoms/slider/slider.vue";
+export { default as AtomTextarea } from "./atoms/textarea/textarea.vue";
+export { default as AtomTextField } from "./atoms/text-field/text-field.vue";
+export { default as AtomVideo } from "./atoms/video/video.vue";
+export { default as MoleculeAddress } from "./molecules/address/address.vue";
+export { default as MoleculeBulletList } from "./molecules/bullet-list/bullet-list.vue";
+export { default as MoleculeCard } from "./molecules/card/card.vue";
+export { default as MoleculeColumnCard } from "./molecules/column-card/column-card.vue";
+export { default as MoleculeEventCard } from "./molecules/event-card/event-card.vue";
+export { default as MoleculeFlashcard } from "./molecules/flashcard/flashcard.vue";
+export { default as MoleculeModal } from "./molecules/modal/modal.vue";
+export { default as MoleculeTextCard } from "./molecules/text-card/text-card.vue";
+export { default as BlockAccordion } from "./blocks/accordion/accordion.vue";
+export { default as BlockCardDisplay } from "./blocks/card-display/card-display.vue";
+export { default as BlockColumnGrid } from "./blocks/column-grid/column-grid.vue";
+export { default as BlockFacts } from "./blocks/facts/facts.vue";
+export { default as BlockFeatures } from "./blocks/features/features.vue";
+export { default as BlockFlashcards } from "./blocks/flashcards/flashcards.vue";
+export { default as BlockFormScript } from "./blocks/form-script/form-script.vue";
+export { default as BlockHeadline } from "./blocks/headline/headline.vue";
+export { default as BlockHero } from "./blocks/hero/hero.vue";
+export { default as BlockImage } from "./blocks/image/image.vue";
+export { default as BlockImageGallery } from "./blocks/image-gallery/image-gallery.vue";
+export { default as BlockLogoWall } from "./blocks/logo-wall/logo-wall.vue";
+export { default as BlockMicroStories } from "./blocks/micro-stories/micro-stories.vue";
+export { default as BlockPolicy } from "./blocks/policy/policy.vue";
+export { default as BlockProductHero } from "./blocks/product-hero/product-hero.vue";
+export { default as BlockPromo } from "./blocks/promo/promo.vue";
+export { default as BlockQuote } from "./blocks/quote/quote.vue";
+export { default as BlockRichText } from "./blocks/rich-text/rich-text.vue";
+export { default as BlockRichTextColumns } from "./blocks/rich-text/rich-text-columns.vue";
+export { default as BlockTimeline } from "./blocks/timeline/timeline.vue";
+export { default as BlockVimeo } from "./blocks/vimeo/vimeo.vue";
+export { default as BlockFrontPageHero } from "./blocks/frontpage-hero/frontpage-hero.vue";
+export { default as Organism404 } from "./organisms/404/404.vue";
+export { default as OrganismFilter } from "./organisms/filter/filter.vue";
+export { default as OrganismFooter } from "./organisms/footer/footer.vue";
+export { default as OrganismHeader } from "./organisms/header/header.vue";
+export { default as OrganismLanguageSwitcher } from "./organisms/language-switcher/language-switcher.vue";
+export { default as OrganismPagination } from "./organisms/pagination/pagination.vue";
+export { default as OrganismSearch } from "./organisms/search/search.vue";