@mirweb/mir-web-components 1.15.3 → 2.0.0

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="event__wrapper">
+    <atom-label :label-dark="false" :text="eventType ? eventType : ''" />
+    <div class="event__headline">
+      {{ headline }}
+    </div>
+    <div class="event__date-location">
+      {{ dateTime }}
+      <br />
+      <div v-if="info" class="event__info">{{ info }}</div>
+      {{ location }}
+    </div>
+    <div class="event__exhibitor">{{ exhibitor }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLabel from "../../atoms/label/label.vue";
+
+defineProps({
+  eventType: {
+    type: String,
+    required: true,
+  },
+  headline: {
+    type: String,
+    required: true,
+  },
+  dateTime: {
+    type: String,
+    required: true,
+  },
+  location: {
+    type: String,
+    required: true,
+  },
+  exhibitor: {
+    type: String,
+    required: true,
+  },
+  info: {
+    type: String,
+    required: false,
+    default: null,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.event {
+  &__wrapper {
+    min-height: 180px;
+    height: 100%;
+    min-width: 285px;
+    width: 100%;
+    font-family: $font-opensans;
+    border-radius: $border-radius;
+    transition: $transition-box-shadow;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px 15px 30px 15px;
+
+    @include sm {
+      width: 100%;
+
+      @at-root a {
+        &:hover,
+        &:focus,
+        &:active,
+        &:target {
+          .event__wrapper {
+            box-shadow: $box-shadow;
+          }
+        }
+      }
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        box-shadow: $box-shadow;
+      }
+    }
+  }
+
+  &__headline {
+    font-size: $font-size-md;
+    font-family: $font-oscine;
+    font-weight: 700;
+    line-height: $line-height-md;
+  }
+
+  &__date-location,
+  &__exhibitor,
+  &__info {
+    font-size: $font-size-sm;
+    font-weight: 300;
+    line-height: $line-height-md;
+  }
+
+  &__date-location,
+  &__exhibitor {
+    text-transform: capitalize;
+  }
+
+  &__info {
+    text-transform: none;
+  }
+}
+</style>

package/dist/components/molecules/flashcard/flashcard.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="flashcard-container" @click="toggleFlip">
+    <div
+      class="flashcard"
+      :class="{
+        flipped: isFlipped,
+        'flashcard--sm': size === 'sm',
+        'flashcard--md': size === 'md',
+        'flashcard--lg': size === 'lg',
+      }"
+    >
+      <div class="flashcard-side flashcard-front">
+        <div v-if="name || bodytext?.length > 0" class="content">
+          <h3 v-if="name">{{ name }}</h3>
+          <div v-if="bodytext" class="flashcard-body">
+            <slot
+              name="flashcard-front-body"
+              v-bind="{ bodytext: bodytext }"
+            ></slot>
+          </div>
+          <img
+            class="flip-icon"
+            src="https://a.storyblok.com/f/230581/22x21/23d87eccc4/icon_reverse_blue.svg"
+          />
+        </div>
+        <div
+          v-else
+          class="flashcard-image"
+          :class="{
+            contain: imageFit,
+            cover: !imageFit,
+          }"
+        >
+          <slot
+            name="flashcard-front-image"
+            v-bind="{ src: image?.filename, alt: image?.alt }"
+          ></slot>
+          <img
+            class="flip-icon"
+            src="https://a.storyblok.com/f/230581/22x21/23d87eccc4/icon_reverse_blue.svg"
+          />
+        </div>
+      </div>
+      <div
+        class="flashcard-side flashcard-back"
+        :class="
+          imagebackside?.filename
+            ? 'flashcard-back--image'
+            : 'flashcard-back--no-image'
+        "
+      >
+        <div v-if="namebackside || bodytextbackside.length > 0" class="content">
+          <h3 v-if="namebackside">{{ namebackside }}</h3>
+          <div v-if="bodytextbackside" class="flashcard-body">
+            <slot
+              name="flashcard-back-body"
+              v-bind="{ bodytextbackside }"
+            ></slot>
+          </div>
+          <img
+            class="flip-icon"
+            src="https://a.storyblok.com/f/230581/22x22/50edea5341/icon_reverse_white.svg"
+          />
+        </div>
+        <div
+          v-else
+          class="flashcard-image"
+          :class="{
+            contain: imageFitBack,
+            cover: !imageFitBack,
+          }"
+        >
+          <slot
+            name="flashcard-back-image"
+            v-bind="{ src: imagebackside?.filename, alt: imagebackside?.alt }"
+          >
+          </slot>
+          <img
+            class="flip-icon"
+            src="https://a.storyblok.com/f/230581/22x22/50edea5341/icon_reverse_white.svg"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+export type Props = {
+  name: string;
+  bodytext: string;
+  image: {
+    filename: string;
+    alt: string;
+  };
+  namebackside: string;
+  bodytextbackside: string;
+  imagebackside: {
+    filename: string;
+    alt: string;
+  };
+  size: string;
+  imageFit: boolean;
+  imageFitBack: boolean;
+};
+withDefaults(defineProps<Props>(), {});
+
+const isFlipped = ref(false);
+
+function toggleFlip() {
+  isFlipped.value = !isFlipped.value;
+}
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+
+.flashcard-container {
+  perspective: 1000px;
+
+  .flashcard {
+    width: 100%;
+    height: 100%;
+    transition: transform 0.3s ease;
+    transform-style: preserve-3d;
+    cursor: pointer;
+    position: relative;
+
+    &--sm {
+      min-height: 223px;
+    }
+
+    &--md {
+      min-height: 308px;
+    }
+
+    &--lg {
+      min-height: 477px;
+    }
+
+    &.flipped {
+      transform: rotateY(180deg);
+    }
+
+    .flashcard-side {
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+
+      .flashcard-image {
+        .flip-icon {
+          width: 21px;
+          height: 21px;
+          position: absolute;
+          right: 15px;
+          bottom: 15px;
+          object-fit: cover;
+        }
+
+        :deep(img) {
+          width: 100%;
+          height: 100%;
+        }
+
+        &.contain {
+          :deep(img) {
+            object-fit: contain;
+          }
+        }
+
+        &.cover {
+          :deep(img) {
+            object-fit: cover;
+          }
+        }
+      }
+    }
+
+    .flashcard-front {
+      background-color: $white;
+      box-shadow: $box-shadow;
+
+      .flashcard-body {
+        :deep(p) {
+          padding-bottom: 1rem;
+        }
+        :deep(ul) {
+          text-align: left;
+          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;
+          }
+        }
+      }
+    }
+
+    .flashcard-back {
+      transform: rotateY(180deg);
+
+      box-shadow: $box-shadow;
+
+      &--image {
+        background-color: $white;
+      }
+
+      &--no-image {
+        background-color: $blue-600;
+      }
+
+      h3 {
+        color: $white;
+      }
+
+      .flashcard-body {
+        :deep(p) {
+          padding-bottom: 1rem;
+          color: $white;
+        }
+        :deep(ul) {
+          text-align: left;
+          list-style-type: none;
+          font-family: $font-opensans;
+          font-weight: 300;
+          padding-left: 1rem;
+          color: $white;
+
+          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: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+.content {
+  font-family: $font-opensans;
+  text-align: center;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .flip-icon {
+    width: 21px;
+    height: 21px;
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+  }
+}
+</style>

package/dist/components/molecules/modal/modal.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="modal__wrapper">
+    <!-- Vue transition component that wraps modal. It applies transition effects to the modal when it is being shown or hidden -->
+    <Transition :duration="300" name="nested">
+      <!-- The modal and overlay. It is only shown if the 'show' property is true -->
+      <dialog
+        v-show="show"
+        :class="['overlay', searchBar ? 'overlay-search' : 'overlay-default']"
+        ariaLabel="modal"
+        role="dialog"
+        @click="toggleShow"
+      >
+        <!-- The modal itself -->
+        <div id="modal" :class="[searchBar ? 'search' : '']" @click.stop>
+          <!-- stopPropagation is used here to prevent the modal from closing when it is clicked -->
+          <!-- The button for closing the modal -->
+          <div>
+            <AtomButton
+              v-if="!searchBar"
+              aria-label="close"
+              variant="close"
+              @click="toggleShow"
+            />
+          </div>
+          <!-- A slot for injecting custom content into the modal -->
+          <slot></slot>
+        </div>
+      </dialog>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomButton from "../../atoms/button/button.vue";
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean;
+    searchBar: boolean;
+  }>(),
+  {
+    show: false,
+    searchBar: false,
+  },
+);
+
+const emit = defineEmits(["update:show"]);
+
+const toggleShow = () => {
+  emit("update:show", !props.show);
+};
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.overlay {
+  /* Styling for the overlay that is shown when the modal is visible */
+  background: rgba(0, 48, 135, 0.2); // $blue-800 with 20% opacity
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 100;
+
+  &-default {
+    align-items: center;
+  }
+
+  &-search {
+    padding: 150px 15px 0;
+    align-items: flex-start;
+  }
+}
+
+#modal {
+  /* Styling for the modal */
+  background: $white;
+  padding: 30px 15px;
+  min-height: 100px;
+  min-width: 200px;
+  position: relative;
+  max-width: 566px;
+  box-shadow: 1px 3px 12px rgba(0, 0, 0, 0.06);
+  border-radius: $border-radius;
+
+  button {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+  }
+
+  &.search {
+    padding: 0;
+    max-width: 100%;
+    min-height: 72px;
+  }
+}
+
+.nested-enter-active,
+.nested-leave-active {
+  /* Define the CSS transition that is applied to the modal when it is being shown or hidden */
+  transition: all 0.2s ease-out;
+}
+
+.nested-enter-from,
+.nested-leave-to {
+  /* Define the starting and ending states of the transition */
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <div class="text__wrapper">
+    <atom-label :label-dark="false" :text="label ? label : ''" />
+    <div class="text__headline">
+      {{ headline }}
+    </div>
+    <div class="text__paragraph">
+      <p>{{ paragraph }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLabel from "../../atoms/label/label.vue";
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  headline: {
+    type: String,
+    required: true,
+  },
+  paragraph: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.text {
+  &__wrapper {
+    height: 100%;
+    max-width: 328px;
+    width: 100%;
+    font-family: $font-opensans;
+    border-radius: $border-radius;
+    transition: $transition-box-shadow;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px;
+
+    @include sm {
+      width: 100%;
+    }
+    @at-root a {
+      &:hover,
+      &:focus,
+      &:active,
+      &:target {
+        .event__wrapper {
+          box-shadow: $box-shadow;
+        }
+      }
+    }
+    &:hover,
+    &:focus,
+    &:active,
+    &:target {
+      box-shadow: $box-shadow;
+    }
+  }
+  &__headline {
+    font-size: $font-size-md;
+    font-family: $font-oscine;
+    font-weight: 700;
+    line-height: $line-height-md;
+  }
+}
+</style>

package/dist/components/organisms/404/404.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="not-found__wrapper">
+    <div class="not-found__content">
+      <h1 class="not-found__headline">
+        {{ headline }}
+      </h1>
+      <div class="not-found__body">
+        <slot name="not-found-body" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  headline: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "../../../assets/scss/variables.scss" as *;
+.not-found {
+  &__wrapper {
+    width: 100%;
+    padding: 30px 30px;
+
+    @include md {
+      padding: 30px 0px;
+    }
+  }
+
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+  }
+
+  &__headline {
+    padding: 30px 0px 60px 0px;
+  }
+
+  &__body {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    :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(img) {
+      mix-blend-mode: darken;
+      width: 656px;
+      max-width: 100%;
+    }
+
+    :deep(.not-found__links) {
+      display: flex;
+      gap: 30px;
+      flex-direction: column;
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>