@mirweb/mir-web-components 1.15.3 → 2.0.0

package/dist/components/organisms/filter/filter.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="filter__wrapper">
+    <div class="filter__content">
+      <div class="filter__dropdowns">
+        <slot name="filter-dropdowns" />
+      </div>
+      <div class="filter__chips">
+        <slot name="filter-chips" />
+        <button
+          v-if="hasChips"
+          class="filter__clear"
+          @click="$emit('clearFilters')"
+        >
+          {{ removeAll }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(["clearFilters"]);
+
+defineProps({
+  hasChips: {
+    type: Boolean,
+    default: false,
+  },
+  removeAll: {
+    type: String,
+    default: "Remove all filters",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.filter {
+  &__wrapper {
+    width: 100%;
+    padding: 0px 30px;
+
+    @include md {
+      padding: 0px;
+    }
+  }
+
+  &__content {
+    max-width: $max-width;
+    margin: 0 auto;
+    gap: 25px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__dropdowns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+
+    :slotted(.select__wrapper) {
+      flex: 1;
+      min-width: 125px;
+
+      @include sm {
+        flex: none;
+      }
+    }
+  }
+
+  &__chips {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-bottom: 30px;
+  }
+
+  &__clear {
+    cursor: pointer;
+    color: $blue-600;
+
+    &:hover,
+    &:focus {
+      color: $blue-700;
+    }
+  }
+}
+</style>

package/dist/components/organisms/footer/footer.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="footer__wrapper">
+    <footer class="footer__content">
+      <img
+        v-if="language === 'zh'"
+        src="https://mobile-industrial-robots.com/logo/mir-main-logo.svg"
+        style="margin: 0 auto"
+        width="101"
+        height="45"
+      />
+      <div class="footer__sections">
+        <div
+          v-for="section in footerSections"
+          :key="section.title"
+          class="section"
+        >
+          <span class="section__title">{{ section.title }}</span>
+          <nav>
+            <ul class="section__list">
+              <slot name="section-links" :links="section.links"></slot>
+            </ul>
+          </nav>
+        </div>
+        <div class="section">
+          <span v-if="language === 'zh'" class="section__title"
+            >名傲移动机器人（上海）有限公司</span
+          >
+          <span v-else class="section__title"
+            >Mobile Industrial Robots A/S</span
+          >
+          <address>
+            <span v-if="language === 'zh'">上海浦东新区金桥出口加工区</span>
+            <span v-else>Energivej 51</span>
+            <span v-if="language === 'zh'">桂桥路1201号10栋2楼</span>
+            <span v-else>5260 Odense S</span>
+            <span v-if="language !== 'zh'">CVR: 35251235</span>
+            <br />
+            <atom-link
+              class="footer__contact"
+              link-type="regular_light"
+              underline="false"
+              ><a v-if="language === 'zh'" href="mailto:china@mir-robots.com"
+                >china@mir-robots.com</a
+              ><a v-else href="mailto:mail@mir-robots.com"
+                >mail@mir-robots.com</a
+              >
+            </atom-link>
+            <atom-link
+              class="footer__contact"
+              link-type="regular_light"
+              underline="false"
+              ><a v-if="language === 'zh'" href="tel:+8613661856951"
+                >+86 13661856951（微信同号）</a
+              >
+              <a v-else href="tel:+4520377577">+45 20 377 577</a>
+            </atom-link>
+          </address>
+        </div>
+      </div>
+      <div class="footer__bottom">
+        <p class="copyright">
+          © Mobile Industrial Robots {{ new Date().getFullYear() }}
+        </p>
+        <div class="footer__policy">
+          <button
+            class="footer__language-switcher"
+            @click="$emit('changeRegionClicked')"
+          >
+            <span><i class="change-region"></i>{{ changeRegion }}</span>
+          </button>
+
+          <slot name="footer-privacy-link"></slot>
+          <slot name="footer-cookie-link"></slot>
+        </div>
+        <div v-if="language !== 'zh'" class="footer__social">
+          <atom-link
+            v-for="link in socialMedia"
+            :key="link.title"
+            underline="false"
+            link-type="regular"
+          >
+            <a :href="link.url" target="_blank" :aria-label="link.title">
+              <i
+                width="19"
+                height="14"
+                class="footer__social--icon"
+                :class="[link.title ? 'bg-' + link.title : '']"
+              ></i>
+            </a>
+          </atom-link>
+        </div>
+        <div v-else class="footer__social">
+          <atom-link
+            v-for="link in socialMediaChina"
+            :key="link.title"
+            underline="false"
+            link-type="regular"
+          >
+            <a :href="link.url" target="_blank" :aria-label="link.title">
+              <i
+                width="19"
+                height="14"
+                class="footer__social--icon"
+                :class="[link.title ? 'bg-' + link.title : '']"
+              ></i>
+            </a>
+          </atom-link>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AtomLink from "../../atoms/link/link.vue";
+
+interface Link {
+  title: string;
+  url: string;
+  target?: string;
+  underline?: string;
+  rel?: string;
+  linkType?: string;
+  disabled?: boolean;
+  arrow?: boolean;
+}
+
+interface FooterSection {
+  title: string;
+  links: Link[];
+}
+
+export type Props = {
+  language?: string;
+  footerSections?: FooterSection[];
+  privacyPolicy?: Link;
+  cookiePolicy?: Link;
+  socialMedia?: Link[];
+  socialMediaChina?: Link[];
+  changeRegion?: string;
+};
+
+withDefaults(defineProps<Props>(), {
+  language: "",
+  footerSections: () => [],
+  privacyPolicy: undefined,
+  cookiePolicy: undefined,
+  socialMedia: () => [],
+  socialMediaChina: () => [],
+  changeRegion: "",
+});
+
+defineEmits(["changeRegionClicked"]);
+</script>
+
+<style scoped lang="scss">
+@use "../../../assets/scss/variables.scss" as *;
+.footer {
+  &__wrapper {
+    width: 100%;
+    background-color: $blue-100;
+    margin-top: 60px;
+  }
+
+  &__content {
+    font-size: $font-size-xsm;
+    max-width: $max-width;
+    margin: 0 auto;
+    display: flex;
+    gap: 30px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 60px 30px;
+
+    @include md {
+      padding: 60px 0px;
+    }
+  }
+
+  &__sections {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    width: 100%;
+    gap: 30px;
+
+    li {
+      display: flex;
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      width: 100%;
+      max-width: 268px;
+
+      address {
+        display: flex;
+        flex: 1;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        gap: 10px;
+        white-space: nowrap;
+
+        span {
+          font-size: $font-size-xsm;
+          font-weight: 300;
+          font-family: $font-opensans;
+          line-height: 16px;
+        }
+      }
+
+      &__title {
+        margin-bottom: 10px;
+        font-weight: 600;
+        line-height: $line-height-xsm;
+        font-family: $font-opensans;
+        font-size: $font-size-xsm;
+      }
+
+      &__list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        white-space: nowrap;
+        font-weight: 300;
+
+        :slotted(li div div) {
+          align-items: center;
+          display: flex;
+
+          .hiring-label {
+            background-color: $blue-600;
+            padding: 3px 5px;
+            border-radius: 3px;
+            color: $white;
+            font-family: $font-opensans;
+            font-weight: 300;
+            font-size: 10px;
+            margin-left: 9px;
+          }
+        }
+      }
+    }
+  }
+
+  &__contact {
+    display: flex;
+    background-color: $blue-100;
+
+    div a {
+      font-weight: 600;
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 30px;
+    justify-content: space-between;
+    align-items: baseline;
+    background-color: $blue-100;
+    margin-top: 52px;
+    width: 100%;
+    height: 100%;
+
+    .copyright {
+      font-size: $font-size-xsm;
+      margin-right: 30px;
+    }
+  }
+
+  &__language-switcher {
+    color: $blue-600;
+    cursor: pointer;
+  }
+  &__language-switcher:hover {
+    color: #105aa8;
+    transition: color 0.3s ease;
+  }
+
+  &__policy {
+    display: flex;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 30px;
+    color: $blue-600;
+
+    div div a,
+    :slotted(div div a) {
+      font-weight: 600;
+    }
+    &:hover {
+      color: $blue-700;
+      transition: color 0.3s ease;
+    }
+
+    .change-region {
+      background-image: url("https://a.storyblok.com/f/230581/21x21/23f034f389/world.svg?cv=1695125825717");
+      background-position: left center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      padding-left: 30px;
+      height: 21px;
+    }
+  }
+
+  &__social {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    flex-wrap: wrap;
+
+    //Todo: Missing hover state on social media icons
+
+    &--icon {
+      background: center / contain no-repeat;
+      display: block;
+      height: 14px;
+      width: 19px;
+    }
+
+    .bg {
+      &-linkedin {
+        background-image: url("https://a.storyblok.com/f/230581/15x14/12341a35e0/linkedin.svg?cv=1695125566502");
+      }
+
+      &-facebook {
+        background-image: url("https://a.storyblok.com/f/230581/8x14/80c6d8d43f/facebook.svg?cv=1695125566490");
+      }
+
+      &-instagram {
+        background-image: url("https://a.storyblok.com/f/230581/15x14/234c77d9b1/instagram.svg?cv=1695125566502");
+      }
+
+      &-twitter {
+        background-image: url("https://a.storyblok.com/f/230581/18x14/8858215cf4/x.svg?cv=1709635053927");
+      }
+
+      &-youtube {
+        background-image: url("https://a.storyblok.com/f/230581/20x14/9fc8110408/youtube.svg?cv=1695125566462");
+      }
+
+      &-wechat {
+        background-image: url("https://a.storyblok.com/f/230581/20x14/8eeae45abe/wechat.svg");
+      }
+    }
+  }
+}
+</style>