@mirweb/mir-web-components 1.15.3 → 2.0.1

package/dist/components/blocks/column-grid/column-grid.vue

@@ -0,0 +1,201 @@
+<template>
+  <div
+    class="column-grid"
+    :class="
+      bgColor === 'dark'
+        ? 'column-grid--dark'
+        : bgColor === 'light'
+          ? 'column-grid--light'
+          : 'column-grid--white'
+    "
+  >
+    <div class="column-grid__top-section">
+      <h2 v-if="headline" class="column-grid__headline">{{ headline }}</h2>
+      <div v-if="bodytext" class="column-grid__bodytext">
+        <slot name="column-grid-body"></slot>
+        <atom-link
+          v-if="linkType === 'link'"
+          :link-type="
+            bgColor === 'dark'
+              ? 'regular_dark'
+              : bgColor === 'light'
+                ? 'regular_light'
+                : 'regular_light'
+          "
+          arrow
+          ><slot name="column-grid-body-link"></slot
+        ></atom-link>
+      </div>
+    </div>
+    <div class="column-grid__teaser-list">
+      <MoleculeColumnCard
+        v-for="card in columns"
+        :key="card._uid"
+        :headline="card.headline"
+        :bodytext="card.bodytext"
+        :link="card.link"
+        :link-text="card.linkText"
+        :image="card.image"
+        :image-fit="card.imageFit"
+        ><template #column-card-body>
+          <slot name="column-card-body" v-bind="{ body: card.bodytext }"></slot>
+        </template>
+        <template #column-link>
+          <slot
+            name="column-link"
+            v-bind="{
+              link: card.link,
+              linkText: card.linkText,
+            }"
+          ></slot>
+        </template>
+        <template #column-card-image>
+          <slot
+            v-if="card.image"
+            name="column-card-image"
+            v-bind="{
+              src: card.image.filename,
+              alt: card.image.alt,
+              style: { 'object-fit': card.imageFit ? 'cover' : 'contain' },
+            }"
+          ></slot
+        ></template>
+      </MoleculeColumnCard>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MoleculeColumnCard from "../../molecules/column-card/column-card.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+export type Props = {
+  headline?: string;
+  bgColor: string;
+  bodytext?: string;
+  linkText?: string;
+  linkType?: string;
+  columns: Array<{
+    headline: string;
+    bodytext: string;
+    link: string;
+    linkText: string;
+    image: {
+      filename: string;
+      alt: string;
+    };
+    imageFit: boolean;
+    _uid: string;
+  }>;
+};
+
+withDefaults(defineProps<Props>(), {
+  headline: "",
+  bodytext: "",
+  linkText: "",
+  linkType: "link",
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.column-grid {
+  margin-bottom: 30px;
+  padding: 0px 30px 30px 30px;
+
+  @include md {
+    padding: 0 0 60px 0;
+  }
+
+  &--light {
+    background-color: $blue-000;
+    color: $blue-900;
+    :deep(.grid-card__bodytext > p) {
+      color: $blue-900;
+    }
+  }
+
+  &--white {
+    background-color: transparent;
+    color: $blue-900;
+    :deep(.grid-card__bodytext > p) {
+      color: $blue-900;
+    }
+  }
+
+  &--dark {
+    background-color: $blue-900;
+    .column-grid__headline,
+    .column-grid__bodytext :deep(p) {
+      color: $white;
+    }
+
+    :deep(.column-card__headline, .grid-card__bodytext) {
+      color: $white;
+    }
+
+    :deep(.column-card__bodytext p) {
+      color: $white;
+    }
+
+    :deep(.column-card__bodytext li::before) {
+      color: $white;
+    }
+
+    :deep(.column-card__bodytext ol) {
+      color: $white;
+    }
+  }
+
+  &__headline {
+    padding-bottom: 30px;
+    font-family: $font-oscine;
+  }
+  &__top-section {
+    display: grid;
+    margin: 0 auto;
+    padding-left: 0px;
+    max-width: $screen-lg-min;
+    padding-top: 60px;
+  }
+  &__bodytext {
+    font-size: 16px;
+    font-weight: 300;
+    max-width: 658px;
+    font-family: $font-opensans;
+    margin-bottom: 60px;
+
+    :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(b),
+    :deep(strong) {
+      font-weight: 600;
+    }
+  }
+  &__teaser-list {
+    display: grid;
+    grid-gap: 30px;
+    margin: 0 auto;
+    max-width: $screen-lg-min;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
+
+.no-bodytext {
+  padding-bottom: 0px;
+}
+</style>

package/dist/components/blocks/facts/facts.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="facts__wrapper">
+    <div class="facts__content">
+      <h2 class="facts__headline">{{ headline }}</h2>
+      <div class="facts">
+        <div v-for="fact in facts" :key="fact.value + fact.metric" class="fact">
+          <div class="fact__value">
+            <span>{{ fact.value }}</span>
+          </div>
+          <div class="fact__metric">
+            <span>{{ fact.metric }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="link" class="facts__link">
+        <atom-link link-type="regular_light" arrow>
+          <slot name="facts-link"></slot>
+        </atom-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLink from "../../atoms/link/link.vue";
+
+interface Fact {
+  value: string;
+  metric: string;
+}
+
+interface Link {
+  title: string;
+  url: string;
+}
+
+export type Props = {
+  headline: string;
+  facts: Fact[];
+  link: Link;
+};
+
+withDefaults(defineProps<Props>(), {
+  headline: "",
+  facts: () => [
+    {
+      value: "",
+      metric: "",
+    },
+    {
+      value: "",
+      metric: "",
+    },
+    {
+      value: "",
+      metric: "",
+    },
+  ],
+  link: () => ({
+    title: "",
+    url: "",
+  }),
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.facts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  &__wrapper {
+    width: 100%;
+  }
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: $padding-mobile;
+
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__headline {
+    font-weight: 300;
+    margin-bottom: 30px;
+  }
+
+  &__link {
+    text-align: center;
+    margin-top: 30px;
+  }
+}
+
+.fact {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-family: $font-oscine;
+  font-weight: 300;
+  flex: 1;
+  padding: 7px;
+  white-space: nowrap;
+
+  @include sm {
+    padding: 15px;
+  }
+
+  &:not(:last-child) {
+    @include md {
+      border-bottom: 0;
+    }
+    @include sm {
+      border-bottom: 0;
+      border-right: 0.5px solid $grey-100;
+      align-self: stretch;
+    }
+  }
+
+  &__value {
+    font-size: $font-size-md;
+    line-height: $line-height-md;
+    font-weight: 400;
+
+    @include sm {
+      font-weight: 300;
+      font-size: $font-size-lg;
+      line-height: $line-height-lg;
+    }
+
+    @include md {
+      font-size: $font-size-xlg;
+      line-height: $line-height-xlg;
+    }
+  }
+
+  &__metric {
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+
+    @include sm {
+      font-size: $font-size-md;
+      line-height: $line-height-md;
+    }
+
+    @include md {
+      font-size: $font-size-lg;
+      line-height: $line-height-lg;
+    }
+  }
+}
+</style>

package/dist/components/blocks/features/features.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="features__wrapper">
+    <div class="features__content">
+      <div v-if="headline" class="features__headline">
+        <h2>{{ headline }}</h2>
+      </div>
+      <div v-if="hasBody" class="features__body">
+        <slot name="features-body"></slot>
+      </div>
+      <div
+        class="features__elements"
+        :class="[elements.length === 6 ? 'features__elements--grid-6' : '']"
+      >
+        <div
+          v-for="element in elements"
+          :key="element.headline"
+          class="features__element"
+        >
+          <atom-image class="element__icon"
+            ><slot
+              name="features-icon"
+              v-bind="{
+                src: element.icon.src,
+                height: 30,
+                width: 30,
+                alt: element.icon.alt,
+              }"
+            ></slot
+          ></atom-image>
+          <p class="element__headline">{{ element.headline }}</p>
+          <p class="element__body">{{ element.body }}</p>
+          <atom-link
+            v-if="element.link && element.linkText"
+            link-type="regular_light"
+            arrow
+            ><slot
+              name="feature-link"
+              v-bind="{ link: element.link, linkText: element.linkText }"
+            ></slot
+          ></atom-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+interface Element {
+  icon: Icon;
+  headline: string;
+  body: string;
+  link?: string;
+  linkText?: string;
+}
+
+interface Icon {
+  src: string;
+  alt: string;
+}
+
+export type Props = {
+  headline: string;
+  hasBody: boolean;
+  elements: Element[];
+};
+
+withDefaults(defineProps<Props>(), {
+  headline: "",
+  body: false,
+  elements: () => [],
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.features {
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    padding: $padding-mobile;
+
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__wrapper {
+    width: 100%;
+    background-color: $blue-100;
+    margin: $extra-margin-mobile-bg;
+    @include md {
+      margin: $extra-margin-desktop-bg;
+    }
+  }
+
+  &__headline {
+    margin-bottom: 30px;
+    font-weight: 300;
+  }
+
+  &__body {
+    margin-bottom: 60px;
+    max-width: 579px;
+
+    :deep(p) {
+      padding-bottom: 1rem;
+
+      a {
+        color: $blue-600;
+        text-decoration: 0.3px underline;
+        font-weight: 500;
+
+        &:hover {
+          color: $blue-800;
+          transition: $transition-color;
+        }
+      }
+    }
+  }
+
+  &__elements {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
+    grid-gap: 30px;
+
+    &--grid-6 {
+      grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
+
+      @include md {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
+    }
+
+    .element {
+      &__icon {
+        margin-bottom: 5px;
+        height: 30px;
+        width: 30px;
+
+        @include md {
+          margin-bottom: 15px;
+        }
+      }
+
+      &__headline {
+        margin-bottom: 2px;
+        font-weight: 600;
+        font-size: $font-size-xsm;
+
+        @include md {
+          margin-bottom: 10px;
+        }
+      }
+
+      &__body {
+        font-size: $font-size-xsm;
+      }
+    }
+  }
+
+  &__element {
+    min-width: 164px;
+    max-width: 600px;
+    word-wrap: break-word;
+
+    :deep(.link__wrapper) {
+      margin-top: 15px;
+    }
+  }
+}
+</style>