@mirweb/mir-web-components 1.15.3 → 2.0.1

package/dist/components/atoms/textarea/textarea.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="textarea-wrapper">
+    <label :for="id" :class="{ required: required }"
+      >{{ labelText }}{{ required ? " *" : "" }}</label
+    >
+    <div
+      :class="
+        modelValue !== undefined && modelValue.length === maxLength
+          ? 'textarea-wrapper__inner'
+          : ''
+      "
+    >
+      <textarea
+        :id="id"
+        rows="10"
+        cols="50"
+        :name="name"
+        :placeholder="placeholder"
+        :required="required"
+        :disabled="disabled"
+        :maxlength="maxLength"
+        :value="modelValue"
+        :class="
+          modelValue !== undefined && modelValue.length === maxLength
+            ? 'reached-meter-limit'
+            : 'border'
+        "
+        @input="
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
+      />
+    </div>
+    <div class="textarea-info">
+      <div>
+        <p v-if="modelValue !== undefined && modelValue.length === maxLength">
+          Too many characters. Please make it shorter
+        </p>
+      </div>
+      <p
+        :class="
+          modelValue !== undefined && modelValue.length === maxLength
+            ? 'reached-meter-limit-meter'
+            : ''
+        "
+      >
+        {{
+          maxLength !== undefined &&
+          modelValue !== undefined &&
+          maxLength - modelValue.length >= 0
+            ? modelValue.length
+            : 0
+        }}
+        / {{ maxLength }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type Props = {
+  id: string;
+  name: string;
+  placeholder: string;
+  required: boolean;
+  disabled: boolean;
+  labelText: string;
+  maxLength: number;
+  modelValue: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  id: "",
+  name: "",
+  placeholder: "",
+  required: false,
+  disabled: false,
+  labelText: "",
+  maxLength: undefined,
+  modelValue: undefined,
+});
+
+defineEmits(["update:modelValue"]);
+</script>
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-weight: 300;
+
+  .textarea-wrapper__inner {
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      width: 21px;
+      height: 21px;
+      background: center / contain no-repeat
+        url("https://a.storyblok.com/f/230581/22x22/ff2897a955/info-red.svg?cv=1695125825848");
+    }
+  }
+
+  textarea {
+    width: 100%;
+    resize: none;
+    border-radius: $border-radius;
+    padding: 15px;
+    font-family: $font-opensans;
+    font-size: $font-size-xsm;
+    position: relative;
+
+    &::placeholder {
+      color: $grey-400;
+    }
+
+    &:disabled {
+      background-color: #f5f6f6;
+      border: 1px solid #ced4da;
+      color: #ced4da;
+    }
+  }
+
+  .textarea-info {
+    width: 100%;
+    display: grid;
+    grid: 1fr / 1fr 1fr;
+    margin-top: 7px;
+    font-size: $font-size-xsm;
+
+    p {
+      font-size: $font-size-xsm;
+
+      &:first-child {
+        justify-self: left;
+        color: $warning;
+        font-weight: 700;
+      }
+
+      &:last-child {
+        justify-self: right;
+      }
+    }
+  }
+
+  label {
+    margin-bottom: 7px;
+    font-weight: 300;
+  }
+
+  .border {
+    border: 1px solid $grey-400;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &:target {
+      box-shadow: 0 0 15px #cfeffb;
+      border: 1px solid $blue-500;
+      transition: $transition-box-shadow;
+      transition: $transition-border;
+    }
+  }
+
+  .reached-meter-limit {
+    border: 1px solid $warning;
+    box-shadow: 0 0 15px $grey-400;
+    transition: $transition-box-shadow;
+    transition: $transition-border;
+  }
+
+  .reached-meter-limit-meter {
+    color: $warning;
+    font-weight: 700;
+  }
+}
+</style>

package/dist/components/atoms/video/video.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="video__wrapper">
+    <video
+      v-if="localVideo"
+      ref="videoRef"
+      :aria-label="ariaLabel"
+      :controls="controls"
+      :poster="poster"
+      :width="width"
+      :height="height"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      type="video/mp4"
+      playsinline
+      :src="src"
+    ></video>
+    <iframe
+      v-else
+      :src="src"
+      :aria-label="ariaLabel"
+      :title="title"
+      :width="width"
+      :height="height"
+      frameborder="0"
+      allow="autoplay; fullscreen"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from "vue";
+
+export type Props = {
+  play?: boolean;
+  src: string;
+  localVideo?: boolean;
+  ariaLabel: string;
+  title?: string;
+  controls?: boolean;
+  poster?: string;
+  width?: string | number;
+  height?: string | number;
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  play: false,
+  localVideo: false,
+  ariaLabel: "",
+  title: "",
+  controls: true,
+  poster: "",
+  width: "100%",
+  height: "auto",
+  autoplay: false,
+  loop: false,
+  muted: false,
+});
+
+let videoRef = ref<HTMLVideoElement | null>(null);
+
+watchEffect(() => {
+  if (!videoRef.value) {
+    return;
+  }
+  if (props.play) {
+    videoRef.value.play();
+  } else if (!props.play) {
+    videoRef.value.pause();
+  }
+});
+
+const resetVideo = () => {
+  if (videoRef.value) {
+    videoRef.value.currentTime = 0;
+    videoRef.value.play();
+  }
+};
+
+defineExpose({
+  resetVideo,
+});
+</script>
+
+<style scoped lang="scss">
+.video__wrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/dist/components/blocks/accordion/accordion.vue

@@ -0,0 +1,222 @@
+<template>
+  <section class="accordions">
+    <div class="accordions__wrapper">
+      <div v-for="accordion in accordions" :key="accordion._uid">
+        <div class="accordion">
+          <div
+            class="accordion__header"
+            @click="toggleAccordion(accordion._uid)"
+          >
+            <h3 class="accordion__headline">{{ accordion.headline }}</h3>
+            <span class="accordion__icon"
+              ><img
+                v-if="!isAccordionActive(accordion._uid)"
+                src="https://a.storyblok.com/f/230581/21x21/42c9c3b5ba/icon_add.svg"
+              />
+              <img
+                v-else
+                src="https://a.storyblok.com/f/230581/22x21/adfe5d1742/icon_substract.svg"
+              />
+            </span>
+          </div>
+          <div
+            class="accordion__content"
+            :class="{ 'accordion__content--reverse': accordion.imageFirst }"
+            :style="{
+              display: isAccordionActive(accordion._uid) ? 'flex' : 'none',
+            }"
+          >
+            <div class="accordion__bodytext">
+              <slot
+                name="accordion-body"
+                v-bind="{ body: accordion.bodytext }"
+              ></slot>
+            </div>
+            <atom-image>
+              <slot
+                v-if="accordion.image"
+                name="accordion-image"
+                v-bind="{
+                  src: accordion.image.filename,
+                  alt: accordion.image.alt,
+                  class: 'accordion__image',
+                }"
+              ></slot
+            ></atom-image>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+import { ref } from "vue";
+
+export type Props = {
+  accordions: Array<{
+    headline: string;
+    _uid: string;
+    bodytext: string;
+    image: {
+      filename: string;
+      alt: string;
+    };
+    imageFirst: boolean;
+  }>;
+};
+
+withDefaults(defineProps<Props>(), {});
+
+const activeAccordions = ref<string[]>([]);
+
+const toggleAccordion = (id: string) => {
+  const index = activeAccordions.value.indexOf(id);
+  if (index > -1) {
+    activeAccordions.value.splice(index, 1);
+  } else {
+    activeAccordions.value.push(id);
+  }
+};
+
+const isAccordionActive = (id: string) => {
+  return activeAccordions.value.includes(id);
+};
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.accordions {
+  max-width: $screen-lg-min;
+  margin: 0 auto;
+
+  &__wrapper {
+    margin: 60px 30px;
+    border: 1px solid $grey-400;
+    box-shadow: 0 0 15px $grey-100;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    @include md {
+      margin: 60px 0px;
+    }
+  }
+
+  .accordion {
+    border-bottom: 1px solid $grey-400;
+    transition: $transition-background-color;
+    background-color: $white;
+
+    &__header {
+      padding: 30px 30px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: $transition-background-color;
+      &:hover {
+        background-color: $blue-200;
+      }
+    }
+    &__icon {
+      font-size: 24px;
+      line-height: 0;
+      font-weight: 700;
+
+      :deep(img) {
+        width: 21px;
+        height: 21px;
+      }
+    }
+    &__content {
+      padding: 30px;
+      background-color: white;
+      transition: all 0.3s ease-in-out;
+      display: flex;
+      flex-direction: column;
+      gap: 30px;
+
+      &--reverse {
+        flex-direction: column-reverse;
+      }
+    }
+    &__image {
+      max-width: 100%;
+      height: auto;
+      margin-bottom: 15px;
+    }
+    &__bodytext {
+      margin: 0;
+      font-size: 16px;
+      line-height: 1.5;
+      line-height: 24px;
+      font-family: OpenSans, sans-serif;
+      color: $blue-900;
+      font-weight: 300;
+
+      :deep(b) {
+        font-weight: 700;
+      }
+
+      :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: OpenSans, sans-serif;
+        font-weight: 300;
+
+        li {
+          margin: 5px 0;
+          p {
+            padding-bottom: 0px;
+          }
+        }
+      }
+
+      :deep(ul) {
+        list-style-type: none;
+        font-family: OpenSans, sans-serif;
+        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;
+          color: $blue-900;
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/card-display/card-display.vue

@@ -0,0 +1,125 @@
+<template>
+  <div
+    :class="[
+      'card-display',
+
+      bgColor === 'blue' ? 'card-display--blue' : 'card-display--white',
+    ]"
+  >
+    <div
+      :class="[
+        'card-display__wrapper',
+        isBlock
+          ? 'card-display__wrapper--block'
+          : 'card-display__wrapper--inline',
+      ]"
+    >
+      <div v-if="headline || paragraph" class="card__content">
+        <h2 v-if="headline">
+          {{ headline }}
+        </h2>
+        <p v-if="paragraph">
+          {{ paragraph }}
+        </p>
+      </div>
+      <div class="card__cards">
+        <slot name="card-display-cards" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  headline: {
+    type: String,
+    default: "",
+  },
+  paragraph: {
+    type: String,
+    default: "",
+  },
+  bgColor: {
+    type: String,
+    default: "white",
+  },
+  isBlock: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+<style lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.card__cards a {
+  width: 100%;
+  @include sm {
+    width: auto;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.card {
+  &-display {
+    width: 100%;
+    &--blue {
+      background-color: $blue-100;
+
+      :deep(video) {
+        outline: 4px solid transparent;
+        outline-offset: -4px;
+        mix-blend-mode: multiply;
+      }
+    }
+
+    &--white {
+      background-color: transparent;
+
+      :deep(video) {
+        outline: 4px solid transparent;
+        outline-offset: -4px;
+        mix-blend-mode: multiply;
+      }
+    }
+    &__wrapper {
+      padding: $padding-mobile;
+      max-width: $max-width;
+      margin: auto;
+
+      &--block {
+        @include md {
+          padding: $padding-desktop;
+        }
+      }
+
+      &--inline {
+        @include md {
+          padding: 30px 0px;
+        }
+      }
+    }
+  }
+
+  &__content {
+    max-width: 499px;
+
+    h2,
+    p {
+      margin-bottom: 25px;
+    }
+  }
+
+  &__cards {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 30px;
+
+    @include sm {
+      row-gap: 0px;
+    }
+  }
+}
+</style>