@mirweb/mir-web-components 1.15.2 → 2.0.0

package/dist/components/molecules/address/address.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="address__wrapper">
+    <div class="address__content">
+      <div class="address__flag">
+        <slot name="address-flag" />
+      </div>
+      <div class="address__address">
+        <p class="address__name">
+          {{ name }}
+        </p>
+        <p>{{ company }}</p>
+        <p>{{ addressLine1 }}</p>
+        <p>{{ addressLine2 }}</p>
+        <p v-if="addressLine3">
+          {{ addressLine3 }}
+        </p>
+      </div>
+      <div class="address__contact">
+        <atom-link v-if="website" underline="false" link-type="regular">
+          <a :href="'https://' + website" class="address__website">{{
+            website
+          }}</a>
+        </atom-link>
+        <atom-link
+          v-for="number in phoneNumbers"
+          :key="number"
+          underline="false"
+          link-type="regular"
+        >
+          <a :href="'tel:' + number" class="address__phone">{{ number }}</a>
+        </atom-link>
+        <a :href="'mailto:' + email" class="address__email">{{ email }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLink from "../../atoms/link/link.vue";
+
+export type Props = {
+  name: string;
+  company: string;
+  addressLine1: string;
+  addressLine2: string;
+  addressLine3?: string;
+  website?: string;
+  phoneNumbers: string[];
+  email: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  addressLine3: undefined,
+  website: undefined,
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.address {
+  &__wrapper {
+    max-width: 332px;
+    width: 100%;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    p {
+      font-size: $font-size-xsm;
+    }
+  }
+
+  &__flag {
+    :deep(img) {
+      width: 30px;
+      height: 22px;
+      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  &__name {
+    color: $grey-600;
+  }
+
+  &__contact {
+    display: flex;
+    flex-direction: column;
+    line-height: $line-height-xsm;
+    font-size: $font-size-xsm;
+  }
+
+  &__website {
+    color: $blue-600;
+  }
+
+  &__phone {
+    color: $blue-600;
+    position: relative;
+    display: inline-block;
+    padding: 0;
+    margin: -2px;
+    padding: 2px;
+    background-color: transparent;
+    pointer-events: auto;
+    margin-bottom: 5px;
+  }
+
+  &__email {
+    color: $blue-600;
+    position: relative;
+    display: inline-block;
+    padding: 0;
+    margin: -2px;
+    padding: 2px;
+    background-color: transparent;
+    pointer-events: auto;
+    margin-top: 5px;
+  }
+}
+</style>

package/dist/components/molecules/bullet-list/bullet-list.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="bullet-list__wrapper">
+    <div :class="['bullet-list', variant]">
+      <ul>
+        <li v-for="item in list" :key="item">
+          <i class="checkmark"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  list: {
+    type: Array<string>,
+    required: true,
+    validator(value: Array<string>) {
+      return value.length <= 5;
+    },
+  },
+  variant: {
+    type: String,
+    required: false,
+    default: "light",
+    validator(value: string) {
+      return ["light"].includes(value);
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.bullet-list {
+  width: 100%;
+  position: relative;
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - 43px),
+    calc(100% - 43px) 100%,
+    0 100%
+  );
+
+  @media screen and (min-width: 942px) {
+    width: 328px;
+  }
+
+  &.light {
+    background-color: $blue-200;
+    color: $blue-900;
+  }
+
+  // Dark variant
+  /*   &.dark {
+    background-color: $blue-900;
+    color: $blue-200;
+
+    ul li::before {
+      filter: brightness(100);
+    }
+  } */
+
+  ul {
+    padding: 30px 30px 50px 30px;
+    font-family: $font-opensans;
+    font-size: $font-size-xsm;
+    font-weight: 600;
+    gap: 30px;
+    display: flex;
+    flex-flow: column wrap;
+
+    li {
+      position: relative;
+      padding-left: 19px;
+      min-height: 21px;
+      display: flex;
+      align-items: center;
+      line-height: 20px;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        top: 4px;
+        width: 11px;
+        height: 13px;
+        background-image: url("https://a.storyblok.com/f/230581/11x13/a8e35b7bda/checkmark.svg?cv=1695125825950");
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+      }
+    }
+  }
+}
+</style>

package/dist/components/molecules/card/card.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="card__wrapper">
+    <div
+      class="card"
+      :class="[
+        theme === 'dark' ? 'card--dark' : 'card--light',
+        orientation === 'vertical' ? 'vertical' : 'horizontal',
+        selectedSize.class,
+        cardClass,
+        variant === 'product' ? 'card--product' : 'card--article',
+      ]"
+      :style="[variant === 'product' ? 'font-weight: 700' : 'font-weight: 300']"
+      @mouseover="isPlaying = true"
+      @mouseout="isPlaying = false"
+      @focus="isPlaying = true"
+      @blur="isPlaying = false"
+    >
+      <atom-image v-if="mediaType === 'image'"
+        ><slot
+          name="card-image"
+          v-bind="{
+            src: imgSrc,
+            width: '596',
+            height: '335',
+            alt: alt,
+            loading: 'auto',
+            sizes: '(min-width: 581px) 582px, 100vw',
+          }"
+          :srcset="srcSet"
+        ></slot
+      ></atom-image>
+
+      <div
+        v-else
+        class="video-card__wrapper"
+        :class="isPlaying === true ? 'vimeoPlaying' : ''"
+      >
+        <AtomVideo
+          :play="isPlaying"
+          :local-video="true"
+          :src="videoSrc"
+          :aria-label="arialabel"
+          :controls="false"
+          :poster="imgSrc"
+          :width="selectedSize.width"
+          :height="selectedSize.height"
+          :autoplay="true"
+          :loop="true"
+          :muted="true"
+        />
+      </div>
+      <div v-if="slots['card-label']">
+        <slot name="card-label"></slot>
+      </div>
+      <div
+        v-if="variant === 'product'"
+        :class="[
+          'card__headline',
+          theme === 'dark' ? 'regular-dark' : 'regular-blue',
+        ]"
+        style="font-weight: 700"
+      >
+        {{ headline }}
+      </div>
+      <div
+        v-else
+        :class="[
+          'card__headline',
+          theme === 'dark' ? 'regular-dark' : 'regular-dark-blue',
+        ]"
+      >
+        {{ headline }}
+      </div>
+      <p v-if="variant === 'product'">
+        {{ paragraph }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// TO DO: Gather classes for card sizes in a computed property to avoid repetition as seen from line 5 to 29
+
+import { ref, useSlots, computed } from "vue";
+import AtomImage from "../../atoms/image/image.vue";
+import AtomVideo from "../../atoms/video/video.vue";
+
+const slots = useSlots();
+
+let isPlaying = ref(false);
+
+const SIZES = {
+  xsmall: {
+    class: "card--xsmall",
+    width: "241",
+    height: "135",
+  },
+  small: {
+    class: "card--small",
+    width: "298",
+    height: "186",
+  },
+  medium: {
+    class: "card--medium",
+    width: "432",
+    height: "243",
+  },
+  large: {
+    class: "card--large",
+    width: "596",
+    height: "335",
+  },
+};
+
+type Size = keyof typeof SIZES;
+
+export type Props = {
+  variant?: "product" | "article";
+  theme?: "light" | "dark";
+  linkType?: "link" | "button";
+  headline?: string;
+  paragraph?: string;
+  size?: Size;
+  mediaType?: "image" | "video";
+  orientation?: "horizontal" | "vertical";
+  srcSet?: string;
+  url?: string;
+  imgSrc?: string;
+  videoSrc?: string;
+  arialabel?: string;
+  poster?: string;
+  labelText?: string;
+  alt?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "product",
+  theme: "light",
+  linkType: "link",
+  headline: "",
+  paragraph: "",
+  size: "small",
+  mediaType: "image",
+  orientation: "horizontal",
+  srcSet: "",
+  url: "",
+  imgSrc: "",
+  videoSrc: "",
+  arialabel: "",
+  poster: "",
+  labelText: "",
+  alt: "",
+});
+
+const selectedSize = computed(() => SIZES[props.size]);
+const cardClass = computed(() => {
+  if (props.variant === "article" || props.variant === "product") {
+    return `card--${props.size}-${props.variant}`;
+  }
+  return `card--${props.variant}`;
+});
+
+defineEmits(["clicked"]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.card {
+  border-radius: $border-radius;
+  transition: $transition-box-shadow;
+  height: 100%;
+  display: grid;
+
+  @include sm {
+    padding: 15px;
+    &:hover,
+    &:focus,
+    &:active,
+    &:target {
+      box-shadow: $box-shadow;
+      outline: none;
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+
+  p {
+    margin-top: 5px;
+  }
+
+  &__headline {
+    font-family: $font-oscine;
+    font-weight: 300;
+  }
+  &--light {
+    background: none;
+    p {
+      color: $blue-900;
+    }
+  }
+
+  &--dark {
+    background: none;
+    p {
+      color: $white;
+    }
+  }
+
+  &--xsmall {
+    min-width: 241px;
+    width: 100%;
+    @include sm {
+      width: 241px;
+    }
+  }
+
+  &--small {
+    min-width: 270px;
+    width: 100%;
+    @include sm {
+      width: 328px;
+    }
+  }
+
+  &--medium {
+    min-width: 328px;
+    max-width: 492px;
+    width: 100%;
+  }
+
+  &--large {
+    min-width: 328px;
+    max-width: 656px;
+    width: 100%;
+  }
+
+  &--small-article {
+    .card__headline {
+      margin: 15px 0px;
+      font-size: $font-size-md;
+      line-height: $line-height-md;
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+
+  &--xsmall-article {
+    .card__headline {
+      margin: 15px 0px;
+      font-size: $font-size-sm;
+      line-height: $line-height-sm;
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+  &--product .card__headline {
+    font-size: $font-size-md;
+    line-height: $line-height-md;
+  }
+
+  &--large-article .card__headline {
+    font-size: $font-size-lg;
+    line-height: $line-height-lg;
+  }
+
+  :slotted(.card__label) {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    margin-top: 15px;
+  }
+}
+:slotted(img) {
+  object-fit: cover;
+  width: 100%;
+}
+.vertical {
+  :slotted(img) {
+    aspect-ratio: 9 / 16;
+  }
+}
+.horizontal {
+  :slotted(img) {
+    aspect-ratio: 16 / 9;
+  }
+}
+span {
+  margin: 15px 0px 10px 0px;
+}
+.regular-blue {
+  color: $blue-800;
+}
+.regular-dark {
+  color: $white;
+}
+.regular-dark-blue {
+  color: $blue-900;
+}
+</style>

package/dist/components/molecules/column-card/column-card.vue

@@ -0,0 +1,178 @@
+<template>
+  <div :class="['column-card', selectedBgColor]">
+    <div class="column-card__content">
+      <div
+        v-if="image.filename"
+        :class="['column-card__image', { cover: imageFit, contain: !imageFit }]"
+      >
+        <slot
+          name="column-card-image"
+          v-bind="{
+            src: image.filename,
+            alt: image.alt,
+          }"
+        ></slot>
+      </div>
+      <h3 class="column-card__headline">
+        {{ headline }}
+      </h3>
+      <div class="column-card__bodytext">
+        <slot name="column-card-body"></slot>
+      </div>
+      <atom-link
+        v-if="linkType === 'link'"
+        :link-type="
+          bgColor === 'dark'
+            ? 'regular_dark'
+            : bgColor === 'light'
+              ? 'regular_light'
+              : 'regular_light'
+        "
+        arrow
+        ><slot name="column-link"></slot
+      ></atom-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+const BGCOLORS = {
+  white: "",
+  light: "column__wrapper--light",
+  dark: "column__wrapper--dark mirsaic--dark",
+} as const;
+
+type bgColor = "white" | "light" | "dark";
+
+export type Props = {
+  headline: string;
+  bodytext: string;
+  image: {
+    filename: string;
+    alt: string;
+  };
+  imageFit: boolean;
+  bgColor?: bgColor;
+  linkText?: string;
+  linkType?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  bgColor: "white",
+  linkText: "",
+  linkType: "link",
+});
+
+const selectedBgColor = computed(
+  () => BGCOLORS[(props.bgColor as keyof typeof BGCOLORS) || "white"],
+);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.column-card {
+  max-width: 500px;
+  min-width: 235px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+
+  &__image {
+    :deep(img) {
+      width: 100%;
+
+      max-width: 500px;
+      padding-bottom: 15px;
+    }
+    &.cover {
+      :deep(img) {
+        object-fit: cover;
+        min-height: 235px;
+        aspect-ratio: 1/1;
+      }
+    }
+    &.contain {
+      :deep(img) {
+        object-fit: contain;
+      }
+    }
+  }
+
+  &__headline {
+    margin-top: 0;
+    margin-bottom: 15px;
+    font-family: $font-opensans;
+  }
+  &__bodytext {
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+    font-family: $font-opensans;
+    color: $blue-900;
+    font-weight: 300;
+    margin-top: 0;
+
+    :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: $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;
+        color: $blue-900;
+      }
+    }
+  }
+}
+</style>