@lancom/shared 0.0.62 → 0.0.66

package/components/product/layouts/product_gallery/product-gallery.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="ProductGallery__wrapper">
+    <transition
+      appear
+      name="fade">
+      <div
+        :key="currentIndex"
+        class="ProductGallery__current"
+        :style="{
+          'background-color': color && color.rgb
+        }">
+        <img v-if="current" :src="current" />
+        <spinner v-else />
+      </div>
+    </transition>
+    <div
+      v-for="thumbnail in thumbnails"
+      :key="thumbnail.index"
+      class="ProductGallery__thumbnail ripple"
+      :class="{ active: currentIndex === thumbnail.index }"
+      :style="{
+        'background-color': color && color.rgb
+      }"
+      @click="select(thumbnail.index)">
+      <img :src="thumbnail.url" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { getProductColorImages } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  name: 'ProductGallery',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    color: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0
+    };
+  },
+  computed: {
+    images() {
+      return getProductColorImages(this.product, this.color);
+    },
+    current() {
+      if (!this.images[this.currentIndex]) {
+        return null;
+      }
+      return staticLink(this.images[this.currentIndex].large);
+    },
+    thumbnails() {
+      return this.images
+        .map(({ small }, index) => ({
+          url: staticLink(small),
+          index
+        }))
+        .slice(0, 4);
+    }
+  },
+  methods: {
+    select(index) {
+      this.currentIndex = index;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-gallery';
+</style>

package/components/product/layouts/product_labels_customization/product-labels-customization.scss

@@ -0,0 +1,61 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.ProductLabelsCustomization {
+  &__header {
+    padding-bottom: 50px;
+  }
+  &__table {
+    th, td {
+      @extend .lc_medium16;
+      color: $black;
+    }
+    &.fixed {
+      table-layout: fixed;
+    }
+  }
+  &__icon {
+    height: 275px;
+    margin: 35px 0;
+  }
+  &__tee {
+    &-with {
+      &-2-labels {
+        width: 100%;
+        height: 200px;
+        background-image: url(../../../../static/images/tee_with_2_labels.svg);
+        background-size: cover;
+        &-container {
+          width: 285px;
+        }
+      }
+      &-no-labels {
+        background-image: url(../../../../static/images/tee_with_no_labels.svg);
+      }
+      &-1-label {
+        background-image: url(../../../../static/images/tee_with_1_label.svg);
+      }
+      &-no-labels,
+      &-1-label {
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        width: 100%;
+        height: 150px;
+        &-container {
+          width: 150px;
+          padding: 0 !important;
+        }
+      }
+    }
+    &-label {
+      width: 40px;
+      &-container {
+        padding: 12px 0;
+      }
+    }
+  }
+  &__section-header {
+    padding-bottom: 20px;
+  }
+}

package/components/product/layouts/product_labels_customization/product-labels-customization.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="ProductLabelsCustomization__wrapper">
+    <div class="ProductLabelsCustomization__header">
+      <h2 class="lc_h2">
+        Labels customization
+      </h2>
+    </div>
+    <div class="ProductLabelsCustomization__content row">
+      <div class="col-sm-6 col-12">
+        <div class="ProductLabelsCustomization__section-header">
+          <h5 class="lc_semibold20 lc_black">
+            Label:
+          </h5>
+        </div>
+        <table class="lc_table bordered fixed ProductLabelsCustomization__table">
+          <tbody class="centered">
+            <tr>
+              <td>
+                <span class="lc_grey1">
+                  Type
+                </span>
+                <br />
+                <br />
+                2 label stiched
+              </td>
+              <td
+                colspan="2"
+                class="ProductLabelsCustomization__tee-with-2-labels-container">
+                <div class="ProductLabelsCustomization__tee-with-2-labels"></div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                label 1
+              </td>
+              <td>
+                Manufacturer’s
+                <br />
+                logo
+              </td>
+              <td>
+                <div class="ProductLabelsCustomization__tee-label-container">
+                  <img
+                    class="ProductLabelsCustomization__tee-label"
+                    src="~static/images/tee_label_1.svg" />
+                  <br />
+                  <span class="lc_regular14 lc_grey1">
+                    eg
+                  </span>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                label 2
+              </td>
+              <td>
+                Size &
+                <br />
+                care information
+              </td>
+              <td>
+                <div class="ProductLabelsCustomization__tee-label-container">
+                  <img
+                    class="ProductLabelsCustomization__tee-label"
+                    src="~static/images/tee_label_2.svg" />
+                  <br />
+                  <span class="lc_regular14 lc_grey1">
+                    cg
+                  </span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="col-sm-6 col-12">
+        <div class="ProductLabelsCustomization__section-header">
+          <h5 class="lc_semibold20 lc_black">
+            Label Customization:
+          </h5>
+        </div>
+        <table class="lc_table bordered ProductLabelsCustomization__table">
+          <tbody class="centered cell-padding">
+            <tr>
+              <td colspan="2">
+                Remove both logo & care label:
+                <br />
+                <br />
+                <p class="lc_regular14 lc_grey1">
+                  These service involves unstiching the collar removing
+                  & discarding both care & size label & restiching of the collor
+                </p>
+              </td>
+              <td class="ProductLabelsCustomization__tee-with-no-labels-container">
+                <div class="ProductLabelsCustomization__tee-with-no-labels"></div>
+              </td>
+              <td>
+                60
+                <span class="lc_regular14 lc_grey1">
+                  minimum quantity
+                </span>
+              </td>
+              <td>
+                $1.00
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                Removing only brand label:
+                <br />
+                <br />
+                <p class="lc_regular14 lc_grey1">
+                  These service involves unstiching the collar removing
+                  & discarding both care & size label & restiching of the collor
+                </p>
+              </td>
+              <td class="ProductLabelsCustomization__tee-with-1-label-container">
+                <div class="ProductLabelsCustomization__tee-with-1-label"></div>
+              </td>
+              <td>
+                60
+                <span class="lc_regular14 lc_grey1">
+                  minimum quantity
+                </span>
+              </td>
+              <td>
+                $0.80
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductLabelsCustomization'
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-labels-customization';
+</style>

package/components/product/layouts/product_main_info/product-main-info.scss

@@ -0,0 +1,22 @@
+@import "@/assets/scss/variables";
+.ProductMainInfo {
+  &__description {
+    margin-top: 50px;
+    &-label {
+      display: flex;
+    }
+    &-body {
+      margin-top: 20px;
+      color: $grey_1;
+    }
+  }
+  &__info {
+    font-size: 16px;
+    color: $green;
+    cursor: pointer;
+  }
+  &__additional-info {
+    display: flex;
+    margin-top: 16px;
+  }
+}

package/components/product/layouts/product_main_info/product-main-info.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="ProductMainInfo__wrapper">
+    <h2 class="lc_h2 ProductMainInfo__title">
+      {{ product.name }}
+    </h2>
+    <div class="ProductMainInfo__description">
+      <span class="lc_semibold20 lc_black ProductMainInfo__description-label">
+        Details:
+        <v-popover
+          trigger="hover"
+          :delay="{ hide: 400 }"
+          class="ProductMoreInfoModal__popuver">
+          <i class="icon-info-circled ProductMainInfo__info"></i>
+          <template slot="popover">
+            <p>
+              You can find more
+              <br />
+              info on the FAQ page
+            </p>
+            <div
+              class="learn-more-link"
+              @click="goToFAQ('5e7b099a7ea3708ba329a890')">
+              Learn more
+            </div>
+          </template>
+        </v-popover>
+      </span>
+      <p
+        class="lc_regular16 ProductMainInfo__description-body"
+        v-html="product.description || '&mdash;'">
+      </p>
+      <div class="ProductMainInfo__additional-info">
+        <span class="lc_medium16">
+          &bull;
+          Shoulder to shoulder tape
+        </span>
+        <v-popover
+          trigger="hover"
+          :delay="{ hide: 400 }"
+          class="ProductMoreInfoModal__popuver">
+          <i class="icon-info-circled ProductMainInfo__info"></i>
+          <template slot="popover">
+            <p>
+              You can find more
+              <br />
+              info on the FAQ page
+            </p>
+            <div
+              class="learn-more-link"
+              @click="goToFAQ('5e7b099a7ea3708ba329a890')">
+              Learn more
+            </div>
+          </template>
+        </v-popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProductMainInfo',
+  props: {
+    product: {
+      type: Object,
+      require: true
+    }
+  },
+  methods: {
+    goToFAQ(id) {
+      this.$router.push(`/faq?q=${id}`);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-main-info';
+</style>

package/components/product/layouts/product_model_measurements/product-model-measurements.scss

@@ -0,0 +1,18 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.ProductModelMeasurements {
+  &__table {
+    td {
+      @extend .lc_regular14;
+      color: $black;
+    }
+  }
+  &__icon {
+    height: 100%;
+    margin-top: 24px;
+    &-container {
+      padding: 24px 0
+    }
+  }
+}

package/components/product/layouts/product_model_measurements/product-model-measurements.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="ProductModelMeasurements__wrapper">
+    <div class="ProductModelMeasurements__content">
+      <table class="lc_table bordered ProductModelMeasurements__table">
+        <tbody class="centered">
+          <tr>
+            <td rowspan="3" class="ProductModelMeasurements__icon-container">
+              <img
+                src="~static/images/measurements_model.svg"
+                class="ProductModelMeasurements__icon" />
+              <div class="form-actions center">
+                <!-- <btn
+                  btn-class="green-link"
+                  btn-label="Show model image"
+                  @click="showModel">
+                </btn> -->
+              </div>
+            </td>
+            <td>
+              Model height
+              <br />
+              (cm)
+            </td>
+            <td>
+              175 cm
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Model weigth
+              <br />
+              (kg)
+            </td>
+            <td>
+              75 kg
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Model wearly
+              <br />
+              (size)
+            </td>
+            <td>
+              L size
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductModelMeasurements',
+  methods: {
+    showModel() {}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-model-measurements';
+</style>

package/components/product/layouts/product_packaging/product-packaging.scss

@@ -0,0 +1,32 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.ProductPackaging {
+  &__header {
+    display: flex;
+  }
+  &__content {
+    padding-top: 20px;
+  }
+  &__table {
+    & + & {
+      border-top: 0;
+    }
+    th {
+      @extend .lc_medium16;
+      color: $black;
+    }
+    td {
+      @extend .lc_regular14;
+      color: $black;
+    }
+  }
+  &__icon {
+    width: 50px;
+    height: 50px;
+    margin: 25px;
+    &-container {
+      width: 100px;
+    }
+  }
+}

package/components/product/layouts/product_packaging/product-packaging.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="ProductPackaging__wrapper">
+    <div class="ProductPackaging__header">
+      <h5 class="lc_semibold20 lc_black">
+        Packaging
+      </h5>
+    </div>
+    <div class="ProductPackaging__content">
+      <table class="lc_table bordered ProductPackaging__table">
+        <tbody class="centered">
+          <tr>
+            <td rowspan="2" class="ProductPackaging__icon-container">
+              <img
+                src="~static/images/packaging_size.svg"
+                class="ProductPackaging__icon" />
+            </td>
+            <td>
+              <span class="lc_medium16 lc_black">
+                Carton Measurements
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <span class="lc_regular16 lc_grey1">
+                58cm W x 28cm H x 43cm L
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2" class="ProductPackaging__icon-container">
+              <img
+                src="~static/images/packaging_quantity.svg"
+                class="ProductPackaging__icon" />
+            </td>
+            <td>
+              <span class="lc_medium16 lc_black">
+                Quantity per Carton
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <span class="lc_regular16 lc_grey1">
+                {{ units }} units
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td rowspan="2" class="ProductPackaging__icon-container">
+              <img
+                src="~static/images/packaging_weight.svg"
+                class="ProductPackaging__icon" />
+            </td>
+            <td>
+              <span class="lc_medium16 lc_black">
+                Carton Weight
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <span class="lc_regular16 lc_grey1">
+                {{ packageWeight }}kg
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ProductPackaging',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      packageWeight: 13
+    };
+  },
+  computed: {
+    units() {
+      return parseInt(this.packageWeight / this.product.weight);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-packaging';
+</style>

package/components/product/layouts/product_size_table/product-size-table.scss

@@ -0,0 +1,23 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.ProductSizeTable {
+  &__table {
+    table-layout: fixed;
+    th {
+      @extend .lc_medium16;
+      color: $black;
+      &:first-of-type {
+        width: 160px;
+      }
+    }
+    td {
+      @extend .lc_regular14;
+      color: $black;
+    }
+  }
+  &__icon {
+    height: 275px;
+    margin: 35px 0;
+  }
+}