@mirweb/mir-web-components 1.15.2 → 2.0.0

package/dist/components/blocks/pallet-jack/pallet-jack.vue

@@ -0,0 +1,440 @@
+<template>
+  <div
+    :class="[
+      'promo__wrapper',
+      selectedVariant,
+      teaser ? 'promo__wrapper--teaser' : '',
+    ]"
+  >
+    <div class="promo__content">
+      <div
+        :class="[
+          'promo__video',
+          reverse ? 'promo__video--reverse' : 'promo__video--default',
+        ]"
+      >
+        <div class="pallet-jack__media-wrap">
+          <div class="pallet-jack-link">
+            <slot name="pallet-jack-link" />
+          </div>
+          <div class="pallet-jack__media-wrap__inner-wrap">
+            <slot name="pallet-jack-video" />
+          </div>
+
+          <div class="pallet-jack__media-wrap__content-wrap">
+            <h3 class="regular-blue">{{ headline }}</h3>
+            <p>
+              {{ shortDescription }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        :class="[
+          'promo__text',
+          reverse ? 'promo__text--reverse' : 'promo__text--default',
+        ]"
+      >
+        <atom-label
+          v-if="label"
+          :text="label"
+          :label-dark="variant === 'dark'"
+        ></atom-label>
+        <div
+          :class="[
+            'promo__title',
+            variant === 'dark' ? 'promo__title--dark' : '',
+          ]"
+        >
+          <slot name="promo-text"></slot>
+        </div>
+        <atom-link
+          v-if="linkType === 'link'"
+          :link-type="
+            variant === 'dark'
+              ? 'regular_dark'
+              : variant === 'light'
+                ? 'regular_light'
+                : 'regular_light'
+          "
+          arrow
+          ><slot name="promo-link"></slot
+        ></atom-link>
+        <atom-link
+          v-if="linkType === 'button'"
+          :link-type="
+            variant === 'dark'
+              ? 'secondary_dark'
+              : variant === 'light'
+                ? 'secondary'
+                : 'secondary'
+          "
+          ><slot name="promo-link"></slot
+        ></atom-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import AtomLabel from "../../atoms/label/label.vue";
+import AtomLink from "../../atoms/link/link.vue";
+
+const VARIANTS = {
+  dark: "promo__wrapper--dark",
+  light: "promo__wrapper--light",
+  default: "promo__wrapper--default",
+} as const;
+
+type Variant = keyof typeof VARIANTS;
+
+export type Props = {
+  label?: string;
+  headline: string;
+  linkText?: string;
+  reverse?: boolean;
+  variant?: Variant;
+  linkType?: string;
+  teaser?: boolean;
+  shortDescription?: string;
+  text?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "",
+  linkText: "",
+  reverse: false,
+  variant: "default",
+  linkType: "link",
+  teaser: false,
+  shortDescription: "",
+  text: "",
+});
+
+const selectedVariant = computed(() => VARIANTS[props.variant]);
+</script>
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.promo {
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    :deep(video) {
+      outline: 4px solid transparent;
+      outline-offset: -4px;
+    }
+
+    &--default {
+      padding: 0px 0px 30px;
+      max-width: 984px;
+      margin: auto;
+
+      @include sm {
+        padding: 0px 0px;
+      }
+    }
+
+    &--teaser {
+      margin: 0px 0px;
+    }
+  }
+
+  &__content {
+    display: grid;
+    grid-template-rows: fit-content(1fr 1fr);
+    grid-template-columns: 1fr;
+
+    @include sm {
+      grid-template-columns: fit-content(repeat(2, 1fr auto));
+      grid-template-rows: 1fr;
+    }
+
+    @include md {
+      grid-template-columns: 1fr 984px 1fr;
+    }
+
+    @include lg {
+      grid-template-columns: minmax(0, 1fr) auto 984px auto minmax(0, 1fr);
+    }
+  }
+
+  &__image {
+    height: 500px;
+
+    &--default {
+      grid-area: 1 / 1;
+      margin-right: 0;
+
+      @include sm {
+      }
+
+      @include md {
+        grid-area: 1 / 1 / 2 / 3;
+        margin-right: 328px;
+      }
+
+      @include lg {
+        grid-area: 1 / 2 / 2 / 4;
+      }
+
+      :slotted(img) {
+        clip-path: polygon(
+          0 0,
+          100% 0,
+          100% calc(100% - 43px),
+          calc(100% - 43px) 100%,
+          0 100%
+        );
+      }
+    }
+
+    &--reverse {
+      grid-area: 1 / 1;
+      margin-left: 0;
+
+      @include sm {
+        margin-left: 328px;
+      }
+
+      @include md {
+        grid-area: 1 / 2 / 3 / 4;
+      }
+
+      @include lg {
+        grid-area: 1 / 3 / 2 / 5;
+      }
+
+      :slotted(img) {
+        clip-path: polygon(
+          0 0,
+          100% 0,
+          100% calc(100% - 43px),
+          calc(100% - 43px) 100%,
+          0 100%
+        );
+
+        @include sm {
+          clip-path: polygon(
+            0 0,
+            100% 0,
+            100% 100%,
+            43px 100%,
+            0 calc(100% - 43px)
+          );
+        }
+      }
+    }
+
+    :slotted(img) {
+      object-position: center;
+      object-fit: contain;
+      height: 100%;
+    }
+  }
+
+  &__video {
+    display: flex;
+    border-radius: $border-radius;
+    transition: $transition-box-shadow;
+
+    &--default {
+      grid-area: 1 / 1;
+      margin-right: 0;
+      margin: 0px 15px;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        box-shadow: none;
+      }
+
+      @include sm {
+        margin-left: 30px;
+        &:hover,
+        &:focus,
+        &:active,
+        &:target {
+          box-shadow: $box-shadow;
+        }
+      }
+
+      @include md {
+        grid-area: 1 / 1 / 2 / 3;
+        margin-right: 328px;
+        margin-left: 0px;
+      }
+
+      @include lg {
+        grid-area: 1 / 2 / 2 / 4;
+      }
+    }
+
+    &--reverse {
+      grid-area: 1 / 1;
+      margin-left: 0;
+
+      @include sm {
+        margin-left: 328px;
+      }
+
+      @include md {
+        grid-area: 1 / 2 / 3 / 4;
+      }
+
+      @include lg {
+        grid-area: 1 / 3 / 2 / 5;
+      }
+    }
+
+    :deep(video) {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    box-sizing: border-box;
+
+    &--default {
+      padding-left: 30px;
+      padding-right: 30px;
+      margin-bottom: 30px;
+
+      @include sm {
+        grid-area: 1 / 2;
+        width: 328px;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      @include md {
+        grid-area: 1 / 2;
+        justify-self: flex-end;
+        padding-right: 0;
+        padding-left: 30px;
+        padding-right: 30px;
+      }
+
+      @include lg {
+        grid-area: 1 / 3;
+      }
+    }
+
+    &--reverse {
+      padding-left: 30px;
+      padding-right: 30px;
+      grid-area: 2 / 1;
+
+      @include sm {
+        width: 328px;
+        padding-right: 41px;
+        grid-area: 1 / 1;
+        margin-top: 0;
+      }
+
+      @include md {
+        padding-left: 0;
+        grid-area: 1 / 2;
+      }
+
+      @include lg {
+        grid-area: 1 / 3;
+      }
+    }
+  }
+
+  &__title {
+    margin: 30px 0px;
+
+    :deep(p) {
+      word-wrap: break-word;
+      font-weight: 300;
+      font-family: $font-oscine;
+      font-size: $font-size-md;
+      line-height: $line-height-md;
+    }
+
+    &--dark {
+      color: $white;
+
+      :deep(p) {
+        color: $white;
+      }
+    }
+  }
+}
+.pallet-jack__media-wrap {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  padding: 15px;
+  grid-gap: 15px;
+  @include md {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-gap: 0px;
+  }
+  .pallet-jack__media-wrap__inner-wrap {
+    mix-blend-mode: multiply;
+    z-index: 2;
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    @include md {
+      grid-row: 1 / -1;
+      grid-column: 1 / -1;
+    }
+  }
+  .pallet-jack__media-wrap__content-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: left;
+    flex-direction: column;
+    z-index: 2;
+    grid-row: 2 / -1;
+    grid-column: 2 / -1;
+    @include md {
+      grid-row: 1 / -1;
+      grid-column: 1 / -1;
+    }
+    h3 {
+      font-weight: 700;
+      font-size: $font-size-md;
+      line-height: $line-height-md;
+      font-family: $font-oscine;
+      margin-block-start: 0em;
+      margin-block-end: 0em;
+    }
+    p {
+      max-width: 328px;
+      font-family: $font-opensans;
+      font-size: $font-size-sm;
+      line-height: $line-height-sm;
+      margin-top: 5px;
+
+      @include sm {
+        max-width: 260px;
+      }
+    }
+  }
+}
+.regular-blue {
+  color: $blue-800;
+}
+.pallet-jack-link {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  z-index: 9;
+  :deep(a) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

package/dist/components/blocks/policy/policy.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="policy__wrapper">
+    <div class="policy__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.policy {
+  &__wrapper {
+    max-width: 984px;
+    margin: 0 auto;
+    padding: 30px 30px;
+    :deep(img) {
+      width: 100%;
+    }
+    @include md {
+      padding: 30px 0px;
+    }
+  }
+
+  &__content {
+    max-width: 658px;
+
+    :deep(h2) {
+      margin: 1.375rem 0;
+      font-weight: 300;
+    }
+
+    :deep(h3) {
+      margin: 1rem 0;
+      font-weight: 500;
+    }
+
+    :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;
+    }
+
+    :deep(u) {
+      text-decoration: underline;
+      text-decoration-thickness: 0.3px;
+    }
+
+    :deep(em),
+    :deep(i) {
+      font-style: italic;
+    }
+
+    :deep(ol) {
+      padding-left: 1rem;
+      list-style-type: decimal;
+      font-family: $font-opensans;
+      font-weight: 300;
+
+      li {
+        margin: 5px 0;
+      }
+    }
+
+    :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;
+      }
+
+      li::before {
+        content: "\2022";
+        position: absolute;
+        left: -0.8em;
+        font-size: 1.1em;
+      }
+
+      p {
+        padding-bottom: 0px;
+      }
+    }
+  }
+}
+</style>

package/dist/components/blocks/product-hero/product-hero.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="product-hero__wrapper">
+    <div class="product-hero__content">
+      <div class="product-hero__headline">
+        {{ headline }}
+      </div>
+      <div class="product-hero__video">
+        <AtomVideo
+          v-if="videoSrc !== ''"
+          play
+          :local-video="true"
+          :src="videoSrc"
+          :aria-label="ariaLabel"
+          :controls="false"
+          :poster="imgSrc"
+          autoplay
+          loop
+          muted
+        />
+        <AtomImage v-else>
+          <slot name="product-hero-image"></slot>
+        </AtomImage>
+
+        <div class="product-hero__insignia">
+          <div v-if="logoSrc" class="product-hero__logo">
+            <AtomImage>
+              <slot name="product-hero-logo"></slot>
+            </AtomImage>
+          </div>
+
+          <div v-if="isCertified" class="product-hero__certification">
+            <AtomImage>
+              <slot name="product-hero-certification"></slot>
+            </AtomImage>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomImage from "../../atoms/image/image.vue";
+import AtomVideo from "../../atoms/video/video.vue";
+
+defineProps({
+  headline: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  videoSrc: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  ariaLabel: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  imgSrc: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  logoSrc: {
+    type: String,
+    default: "",
+    required: false,
+  },
+  isCertified: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.product-hero {
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    mix-blend-mode: multiply;
+  }
+
+  &__content {
+    max-width: 984px;
+    margin: 0 auto;
+    padding: $padding-mobile;
+
+    @include md {
+      padding: $padding-desktop;
+    }
+  }
+
+  &__headline {
+    font-size: 44px;
+    line-height: 52px;
+    font-family: $font-oscine;
+    font-weight: 300;
+
+    @include sm {
+      font-size: $font-size-xlg;
+      line-height: $line-height-xlg;
+    }
+  }
+
+  &__video {
+    width: 100%;
+    aspect-ratio: 16/9;
+    position: relative;
+
+    :deep(video) {
+      width: 100%;
+      height: auto;
+      outline: 4px solid $white;
+      outline-offset: -4px;
+    }
+  }
+  &__insignia {
+    mix-blend-mode: multiply;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 20%;
+  }
+  &__certification {
+    @include sm {
+      padding: 0 15px;
+    }
+    @include md {
+      padding: 0 30px;
+    }
+  }
+}
+</style>