@mirweb/mir-web-components 1.15.3 → 2.0.0

package/dist/components/blocks/micro-stories/micro-stories.vue

@@ -0,0 +1,316 @@
+<template>
+  <div :class="['micro-stories__wrapper', selectedBgColor]">
+    <div class="micro-stories__top">
+      <div v-if="headline" class="micro-stories__headline">
+        <h2>{{ headline }}</h2>
+      </div>
+      <div v-if="body" class="micro-stories__body">
+        <slot name="micro-stories-body" />
+      </div>
+    </div>
+    <div class="micro-stories__splide">
+      <slot name="micro-stories-slides"></slot>
+    </div>
+    <slot name="micro-stories-controls"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const BGCOLORS = {
+  white: "micro-stories__wrapper--white",
+  blue: "micro-stories__wrapper--blue",
+  dark: "micro-stories__wrapper--dark",
+} as const;
+
+type BgColor = keyof typeof BGCOLORS;
+
+export type Props = {
+  bgColor: BgColor;
+  headline: string;
+  body: string;
+};
+
+const selectedBgColor = computed(() => BGCOLORS[props.bgColor]);
+
+const props = withDefaults(defineProps<Props>(), {
+  bgColor: "blue",
+  headline: "",
+  body: "",
+});
+</script>
+
+<style lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.micro-stories {
+  &__wrapper {
+    width: 100%;
+    padding: $padding-mobile;
+    margin: $extra-margin-mobile-bg;
+    @include md {
+      padding: $padding-desktop;
+      margin: $extra-margin-desktop-bg;
+    }
+
+    &--white {
+      background-color: $white;
+
+      video {
+        outline: 6px solid $white;
+        outline-offset: -5px;
+      }
+    }
+
+    &--blue {
+      background-color: $blue-000;
+
+      video {
+        outline: 6px solid $blue-000;
+        outline-offset: -5px;
+      }
+    }
+
+    &--dark {
+      color: $white;
+      background-color: $blue-900;
+
+      video {
+        outline: 6px solid $blue-900;
+        outline-offset: -5px;
+      }
+
+      .micro-stories__headline {
+        color: $white;
+        :slotted(h2) {
+          color: $white;
+        }
+      }
+      .micro-stories__body {
+        color: $white;
+        :slotted(p) {
+          color: $white;
+        }
+        p {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  &__splide {
+    max-width: $max-width;
+    margin: 0 auto;
+  }
+
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    display: grid;
+    gap: 30px;
+    user-select: text;
+
+    @include md {
+      padding: 30px 0px;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+    }
+
+    &--reverse {
+      .micro-stories__media {
+        order: 1;
+
+        @include md {
+          order: 2;
+        }
+      }
+
+      .micro-stories__body {
+        order: 2;
+
+        @include md {
+          order: 1;
+        }
+      }
+    }
+  }
+
+  &__media {
+    order: 1;
+    margin: 0 auto;
+
+    @include md {
+      width: 574px;
+    }
+
+    &--image {
+      width: 100%;
+      height: 100%;
+
+      &.contain {
+        img {
+          object-fit: contain;
+        }
+      }
+
+      &.cover {
+        img {
+          object-fit: cover;
+        }
+      }
+
+      img {
+        aspect-ratio: 16 / 9;
+
+        @include md {
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+
+    &--video {
+      width: 100%;
+      height: 100%;
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &__body {
+    order: 2;
+
+    p {
+      padding-bottom: 1rem;
+
+      a {
+        color: $blue-600;
+        text-decoration: 0.3px underline;
+        font-weight: 500;
+
+        &:hover {
+          color: $blue-800;
+          transition: $transition-color;
+        }
+      }
+    }
+
+    b {
+      font-weight: 600;
+    }
+
+    ol {
+      padding-left: 1rem;
+      list-style-type: decimal;
+      font-family: $font-opensans;
+      font-weight: 300;
+
+      li {
+        margin: 5px 0;
+        p {
+          padding-bottom: 0px;
+        }
+      }
+    }
+
+    ul {
+      list-style-type: none;
+      font-family: $font-opensans;
+      font-weight: 300;
+      padding-left: 1rem;
+
+      li {
+        list-style: none;
+        position: relative;
+        left: 0;
+        margin: 5px 0;
+
+        p {
+          padding-bottom: 0px;
+        }
+      }
+
+      li::before {
+        content: "\2022";
+        position: absolute;
+        left: -0.8em;
+        font-size: 1.1em;
+      }
+    }
+  }
+
+  &__headline {
+    margin-bottom: 15px;
+  }
+
+  &__controls {
+    max-width: $max-width;
+    margin: 0 auto;
+    padding: 0px 0px 30px 0px;
+    order: 3;
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+
+    @include md {
+      padding: 0px 0px 30px 0px;
+    }
+  }
+
+  &__pagination {
+    display: flex;
+    gap: 15px;
+    width: 100%;
+
+    .step {
+      cursor: pointer;
+      flex-grow: 1;
+      height: 3px;
+      border-radius: $border-radius;
+      background-color: $blue-300;
+      transition: $transition-background-color;
+      position: relative;
+
+      &.active {
+        background-color: $blue-600;
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: -10px;
+        bottom: -10px;
+        left: -10px;
+        right: -10px;
+      }
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 15px;
+  }
+
+  &__top {
+    max-width: $max-width;
+    margin: 0 auto;
+
+    .micro-stories__headline {
+      margin-bottom: 30px;
+      font-weight: 300;
+    }
+
+    .micro-stories__body {
+      margin-bottom: 60px;
+      max-width: 579px;
+    }
+  }
+}
+</style>