@lightspeed/crane 1.1.1 → 1.1.2

package/template/headers/example-header/component/Account.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-if="externalContent?.account">
+    <a :href="externalContent.account?.url" :target="externalContent.account?.target">
+      <img :src="accountIcon" alt="account icon" />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Design } from '../type.ts';
+import accountIcon from '../assets/account_icon.svg';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const externalContent: ExternalContentData = computed(() => baseProps.externalContent).value as ExternalContentData;
+</script>
+
+<style lang="scss" scoped>
+</style>

package/template/headers/example-header/component/Logo.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="logoDesign.visible"
+    class="logo-section"
+  >
+    <div
+      v-if="logoContent.type === 'TEXT'"
+      class="logo-section__text-frame"
+      :style="logoFrameStyle"
+    >
+      <h1
+        :style="logoTextStyle"
+      >
+        {{ logoTextContent }}
+      </h1>
+    </div>
+    <div
+      v-if="logoContent.type === 'IMAGE'"
+      class="logo-section-image"
+    >
+      <img
+        v-if="logoContent.image?.lowResolutionDesktopImage !== undefined"
+        class="logo-section-image__content"
+        :src="logoContent.image?.lowResolutionDesktopImage"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLogoElementContent, useLogoElementDesign } from '@lightspeed/crane';
+import { computed } from 'vue';
+
+function getColor(color: Color | undefined) {
+  if (typeof color === 'undefined') {
+    return '';
+  }
+  return color.hex;
+}
+
+const logoContent = useLogoElementContent();
+const logoDesign = useLogoElementDesign();
+
+const logoTextContent = computed(() => {
+  if (logoContent.text !== undefined) {
+    if (logoDesign.value.capitalization === 'all') {
+      return logoContent.text.toUpperCase();
+    }
+    if (logoDesign.value.capitalization === 'small') {
+      return logoContent.text.toLowerCase();
+    }
+  }
+  return logoContent.text;
+});
+
+const logoTextStyle = computed(() => ({
+  fontSize: `${logoDesign.value.size}px`,
+  fontFamily: logoDesign.value.font,
+  color: getColor(logoDesign.value.color),
+  'font-style': logoDesign.value.italic ? 'italic' : 'normal',
+  'font-weight': logoDesign.value.bold ? 'bold' : 'normal',
+  'letter-spacing': `${logoDesign.value.spacing ?? 0}px`,
+}));
+
+const logoFrameStyle = computed(() => ({
+  'border-style': logoDesign.value.frame?.visible ? 'solid' : 'hidden',
+  'border-width': `${logoDesign.value.frame?.width ?? 1}px`,
+  'border-color': getColor(logoDesign.value.frame?.color),
+}));
+</script>
+
+<style lang="scss" scoped>
+.logo-section {
+  height: 100%;
+  width: 300px;
+  text-align: center;
+}
+
+.logo-section__text-frame {
+  text-align: center;
+  border-radius: 3px;
+}
+
+.logo-section-image {
+  height: 100%;
+  width: 100%;
+  display:block;
+
+  &__content {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+}
+</style>

package/template/headers/example-header/component/NavigationMenu.vue

@@ -0,0 +1,53 @@
+<template>
+  <nav
+    v-if="navigationMenu.hasContent"
+    role="navigation"
+  >
+    <ul>
+      <li
+        v-for="item in navigationMenu.items"
+        :key="item.id"
+      >
+        <a @click="item.performAction">
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { useNavigationMenuElementContent } from '@lightspeed/crane';
+
+const navigationMenu = useNavigationMenuElementContent();
+</script>
+
+<style lang="scss" scoped>
+ul {
+  gap: 16px;
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  height: 48px;
+}
+
+li {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-width: fit-content;
+}
+
+a {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  color: #080d12;
+  text-decoration: none;
+  transition: color 0.35s ease;
+
+  &:hover {
+    color: #0056b3
+  }
+}
+</style>

package/template/headers/example-header/settings/content.ts

@@ -1 +1,9 @@
-export default {} as const;
+export default {
+  menu: {
+    type: 'NAVIGATION_MENU',
+  },
+  logo: {
+    type: 'LOGO',
+    label: '$label.logo.label',
+  },
+} as const;

package/template/headers/example-header/settings/design.ts

@@ -1 +1,23 @@
-export default {} as const;
+export default {
+  logo: {
+    type: 'LOGO',
+    label: '$label.logo.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 20,
+      bold: true,
+      italic: false,
+      color: '#313131',
+      visible: true,
+      spacing: 2,
+      capitalization: 'all',
+      frame: {
+        visible: true,
+        width: 3,
+        color: '#313131',
+      },
+    },
+  },
+} as const;

package/template/headers/example-header/settings/translations.ts

@@ -1,5 +1,9 @@
 export default {
-  en: {},
+  en: {
+    '$label.logo.label': 'Logo',
+  },
 
-  nl: {},
+  nl: {
+    '$label.logo.label': 'Logo',
+  },
 } as const;

package/template/headers/example-header/showcases/1.ts

@@ -1,11 +1,40 @@
 export default {
+  showcaseId: '1',
   previewImage: {
     set: {
       ORIGINAL: {
-        url: 'example_header_showcase_1_preview.jpg',
+        url: 'example_header_showcase_1_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    logo: {
+      type: 'LOGO',
+      logoType: 'TEXT',
+      text: '$label.showcase_1.logo.text',
+    },
+    menu: {
+      type: 'NAVIGATION_MENU',
+      text: '$label.showcase_1.menu.text',
+    },
+  },
+  design: {
+    logo: {
+      type: 'LOGO',
+      font: 'global.fontFamily.body',
+      size: 20,
+      bold: true,
+      italic: true,
+      color: '#313131',
+      visible: true,
+      spacing: 2,
+      capitalization: 'none',
+      frame: {
+        visible: true,
+        width: 3,
+        color: '#313131',
       },
     },
   },
-  content: {},
-  design: {},
 } as const;

package/template/headers/example-header/showcases/2.ts

@@ -0,0 +1,42 @@
+export default {
+  showcaseId: '2',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_2_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    menu: {
+      type: 'NAVIGATION_MENU',
+      text: '$label.showcase_2.menu.text',
+    },
+    logo: {
+      type: 'LOGO',
+      logoType: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          WEBP_LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'lightspeed_logo.png',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+  },
+  design: {},
+} as const;

package/template/headers/example-header/showcases/translations.ts

@@ -1,5 +1,17 @@
 export default {
-  en: {},
+  en: {
+    '$label.showcase_1.blockName': 'Custom Header',
+    '$label.showcase_1.menu.text': 'Navigation Menu',
+    '$label.showcase_2.blockName': 'Custom Header',
+    '$label.showcase_2.menu.text': 'Navigation Menu',
+    '$label.showcase_1.logo.text': 'Example Text Logo',
+  },
 
-  nl: {},
+  nl: {
+    '$label.showcase_1.blockName': 'Custom Header',
+    '$label.showcase_1.menu.text': 'Navigatie Menu',
+    '$label.showcase_2.blockName': 'Custom Header',
+    '$label.showcase_2.menu.text': 'Navigatie Menu',
+    '$label.showcase_1.logo.text': 'Voorbeeld Tekst Logo',
+  },
 } as const;

package/template/package.json

@@ -7,7 +7,7 @@
     "deploy": "crane build && crane deploy"
   },
   "dependencies": {
-    "@lightspeed/crane": "1.1.1",
+    "@lightspeed/crane": "1.1.2",
     "@lightspeed/eslint-config-crane": "1.0.2",
     "vue": "^3.4.0",
     "@ecwid/sdk": "^0.8.0"

package/template/shared/LanguageSelector.vue

@@ -0,0 +1,75 @@
+<template>
+  <client-only>
+    <div :key="sortedLanguages.length" class="language-selector language-selector--row">
+      <template v-for="language in sortedLanguages" :key="`${language.code}-${language.selected}`">
+        <a
+          tabindex="0"
+          role="button"
+          :aria-label="language.code.toUpperCase()"
+          :class="[
+            'language-selector-link',
+            { 'language-selector-link--active': language.selected },
+          ]"
+          @click="navigateToTranslationPage(language)"
+        >
+          {{ language.code.toUpperCase() }}
+        </a>
+      </template>
+    </div>
+  </client-only>
+</template>
+
+<script setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Design } from '../headers/example-header/type.ts';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const externalContent = computed(() => baseProps.externalContent?.value as ExternalContentData);
+const isPreviewMode = computed(() => externalContent.value?.isPreviewMode ?? false);
+const sortedLanguages = computed(() => (externalContent.value?.languages
+  ? [...externalContent.value.languages].sort((a, b) => {
+    if (a.main && !b.main) return -1;
+    if (!a.main && b.main) return 1;
+    return 0;
+  })
+  : []));
+
+const navigateToTranslationPage = (language: Language) => {
+  if (language.selected || isPreviewMode.value) {
+    return;
+  }
+  if (language.url !== undefined) {
+    window.open(language.url, '_self');
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.language-selector {
+  display: flex;
+}
+
+.language-selector-link {
+  padding: 8px;
+  color: black;
+  cursor: pointer;
+  text-decoration: none;
+  letter-spacing: 0.5px;
+}
+
+.language-selector-link--active {
+  cursor: default;
+  font-weight: bold;
+  color: black;
+  text-decoration: underline;
+}
+
+.language-selector-link:not(:last-child)::after {
+  content: " ·";
+  position: absolute;
+  width: 0;
+  padding-left: 5px;
+  font-family: unset;
+}
+</style>

package/template/templates/template.ts

@@ -42,75 +42,66 @@ export default {
                 settings: {
                   image_text: {
                     type: 'TEXTAREA',
-                    text: '$label.showcase_1.image_text_1.text',
+                    text: '$label.showcase_2.image_text_1.text',
                   },
-
                   image_content: {
                     type: 'IMAGE',
                     imageData: {
                       set: {
                         LOW_RES: {
-                          url: 'new_arrivals_mobile_low.jpeg',
+                          url: 'new_tshirts_collection_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_LOW_RES: {
-                          url: 'new_arrivals_mobile_low.jpeg',
+                          url: 'new_tshirts_collection_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_HI_RES: {
-                          url: 'new_arrivals_mobile_high.jpeg',
+                          url: 'new_tshirts_collection_mobile_high.jpeg',
                         },
                         WEBP_LOW_RES: {
-                          url: 'new_arrivals_pc_low.jpeg',
+                          url: 'new_tshirts_collection_pc_low.jpeg',
                         },
                         WEBP_HI_2X_RES: {
-                          url: 'new_arrivals_pc_high.jpeg',
+                          url: 'new_tshirts_collection_pc_high.jpeg',
                         },
                       },
                       borderInfo: {},
                     },
                   },
-
                   image_link: {
                     type: 'INPUTBOX',
-                    text: '$label.showcase_1.image_link_1.text',
+                    text: '$label.showcase_2.image_link_1.text',
                   },
                 },
               },
-
               {
                 settings: {
                   image_text: {
                     type: 'TEXTAREA',
-                    text: '$label.showcase_1.image_text_2.text',
+                    text: '$label.showcase_2.image_text_2.text',
                   },
-
                   image_content: {
                     type: 'IMAGE',
                     imageData: {
                       set: {
                         LOW_RES: {
-                          url: 'sport_look_mobile_low.jpeg',
+                          url: 'autumn_looks_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_LOW_RES: {
-                          url: 'sport_look_mobile_low.jpeg',
+                          url: 'autumn_looks_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_HI_RES: {
-                          url: 'sport_look_mobile_high.jpeg',
+                          url: 'autumn_looks_mobile_high.jpeg',
                         },
                         WEBP_LOW_RES: {
-                          url: 'sport_look_pc_low.jpeg',
+                          url: 'autumn_looks_pc_low.jpeg',
                         },
                         WEBP_HI_2X_RES: {
-                          url: 'sport_look_pc_high.jpeg',
+                          url: 'autumn_looks_pc_high.jpeg',
                         },
                       },
                       borderInfo: {},
                     },
                   },
-
-                  image_link: {
-                    type: 'INPUTBOX',
-                    text: '$label.showcase_1.image_link_1.text',
-                  },
                 },
               },
 
@@ -118,37 +109,31 @@ export default {
                 settings: {
                   image_text: {
                     type: 'TEXTAREA',
-                    text: '$label.showcase_1.image_text_3.text',
+                    text: '$label.showcase_2.image_text_3.text',
                   },
-
                   image_content: {
                     type: 'IMAGE',
                     imageData: {
                       set: {
                         LOW_RES: {
-                          url: 'summer_accessories_mobile_low.jpeg',
+                          url: 'bianka_wardrobe_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_LOW_RES: {
-                          url: 'summer_accessories_mobile_low.jpeg',
+                          url: 'bianka_wardrobe_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_HI_RES: {
-                          url: 'summer_accessories_mobile_high.jpeg',
+                          url: 'bianka_wardrobe_mobile_high.jpeg',
                         },
                         WEBP_LOW_RES: {
-                          url: 'summer_accessories_pc_low.jpeg',
+                          url: 'bianka_wardrobe_pc_low.jpeg',
                         },
                         WEBP_HI_2X_RES: {
-                          url: 'summer_accessories_pc_high.jpeg',
+                          url: 'bianka_wardrobe_pc_high.jpeg',
                         },
                       },
                       borderInfo: {},
                     },
                   },
-
-                  image_link: {
-                    type: 'INPUTBOX',
-                    text: '$label.showcase_1.image_link_1.text',
-                  },
                 },
               },
 
@@ -156,27 +141,26 @@ export default {
                 settings: {
                   image_text: {
                     type: 'TEXTAREA',
-                    text: '$label.showcase_1.image_text_4.text',
+                    text: '$label.showcase_2.image_text_4.text',
                   },
-
                   image_content: {
                     type: 'IMAGE',
                     imageData: {
                       set: {
                         LOW_RES: {
-                          url: 'trending_footwear_mobile_low.jpeg',
+                          url: 'story_of_jane_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_LOW_RES: {
-                          url: 'trending_footwear_mobile_low.jpeg',
+                          url: 'story_of_jane_mobile_low.jpeg',
                         },
                         MOBILE_WEBP_HI_RES: {
-                          url: 'trending_footwear_mobile_high.jpeg',
+                          url: 'story_of_jane_mobile_high.jpeg',
                         },
                         WEBP_LOW_RES: {
-                          url: 'trending_footwear_pc_low.jpeg',
+                          url: 'story_of_jane_pc_low.jpeg',
                         },
                         WEBP_HI_2X_RES: {
-                          url: 'trending_footwear_pc_high.jpeg',
+                          url: 'story_of_jane_pc_high.jpeg',
                         },
                       },
                       borderInfo: {},
@@ -214,7 +198,7 @@ export default {
           },
         },
         layoutId: 'Caption_Under_Image',
-        blockName: '$label.showcase_1.blockName',
+        blockName: '$label.showcase_2.blockName',
       },
     },
     {