@lightspeed/crane 1.1.2 → 1.1.3

package/template/reference/templates/reference-template-apparel.ts

@@ -0,0 +1,44 @@
+export default {
+  metadata: {
+    name: 'Reference Template — Apparel',
+    description: 'This is a reference template geared towards apparel merchants to aid development and act as a starting point for your custom template.',
+    preview_url: 'https://reference-template-apparel.company.site/',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'reference_template_apparel_cover_image.jpg',
+        },
+      },
+    },
+  },
+  sections: [
+    {
+      type: 'default',
+      id: 'header',
+    },
+    {
+      type: 'custom',
+      id: 'intro-slider',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'tag-lines',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'about-us',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '1',
+    },
+    {
+      type: 'default',
+      id: 'footer',
+    },
+  ],
+};

package/template/reference/templates/reference-template-bike.ts

@@ -0,0 +1,44 @@
+export default {
+  metadata: {
+    name: 'Reference Template — Bike',
+    description: 'This is a reference template geared towards bike shops to aid development and act as a starting point for your custom template.',
+    preview_url: 'https://reference-template-bike.company.site/',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'reference_template_bike_cover_image.jpg',
+        },
+      },
+    },
+  },
+  sections: [
+    {
+      type: 'default',
+      id: 'header',
+    },
+    {
+      type: 'custom',
+      id: 'intro-slider',
+      showcase_id: '2',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '3',
+    },
+    {
+      type: 'custom',
+      id: 'tag-lines',
+      showcase_id: '2',
+    },
+    {
+      type: 'custom',
+      id: 'about-us',
+      showcase_id: '2',
+    },
+    {
+      type: 'default',
+      id: 'footer',
+    },
+  ],
+};

package/template/sections/example-section/ExampleSection.vue

@@ -1,14 +1,12 @@
 <template>
-  <div
-    class="custom-block"
+  <SectionWrapper
+    class="example-section"
     :style="backgroundStyle"
   >
-    <div>
-      <CustomSectionExampleTitle />
-      <div class="custom-block__blank_space" />
-      <CustomSectionExampleImagesGrid />
-    </div>
-  </div>
+    <CustomSectionExampleTitle />
+    <div class="example-section__blank_space" />
+    <CustomSectionExampleImagesGrid />
+  </SectionWrapper>
 </template>
 
 <script setup lang="ts">
@@ -17,6 +15,7 @@ import { computed } from 'vue';
 import { Design } from './type.ts';
 import CustomSectionExampleTitle from './component/title/Title.vue';
 import CustomSectionExampleImagesGrid from './component/image/ImagesGrid.vue';
+import SectionWrapper from '../../shared/components/SectionWrapper.vue';
 
 const backgroundDesign = useBackgroundElementDesign<Design>('background');
 const background = computed(() => ({
@@ -35,17 +34,7 @@ const backgroundStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.custom-block {
-  padding: 50px;
-
-  @media screen and (min-width: 700px) {
-    padding: 75px;
-  }
-
-  @media screen and (min-width: 1200px) {
-    padding: 100px;
-  }
-
+.example-section {
   &__blank_space {
     height: 40px;
   }

package/template/sections/example-section/settings/translations.ts

@@ -36,17 +36,49 @@ export default {
     '$label.section_description.label': 'Lange beschrijving',
     '$label.section_description.placeholder': 'Deze beschrijving wordt onder de titel weergegeven',
     '$label.image_text.label': 'Bijschrift afbeelding',
-    '$label.image_text_1.label': 'Onderschrift afbeelding',
     '$label.image_text.placeholder': 'Dit bijschrift wordt op of onder de afbeelding weergegeven',
     '$label.image_content.label': 'Afbeeldingsinhoud',
-    '$label.image_content_1.label': 'Afbeelding',
-    '$label.image_link_1.label': 'Afbeelding link',
     '$label.image_link.placeholder': 'Voer een optionele URL in voor de afbeelding',
     '$label.background.label': 'Achtergrond',
+    '$label.image_text_1.label': 'Content.ts: Onderschrift afbeelding',
+    '$label.image_content_1.label': 'Content.ts: Afbeelding',
+    '$label.image_link_1.label': 'Content.ts: Afbeelding link',
+    '$label.images.deck_title': 'Content.ts: Afbeeldingsinstellingen',
+    '$label.images.add_card_button': 'Content.ts: Afbeeldingsinstellingen toevoegen',
+    '$label.images.card_title': 'Content.ts: Afbeeldingsinstellingen',
+    '$label.images.default.image_text': 'Standaard van Content.ts: Standaard afbeeldingstekst',
+    '$label.images.default.image_link.text': 'Standaard van Content.ts: Standaard afbeeldingslinktekst',
+    '$label.images.default.button_title': 'Standaard van Content.ts: Standaard knoptitel',
+    '$label.images.toggle.label': 'Content.ts: Afbeelding schakelen',
+    '$label.images.selectbox.label': 'Content.ts: Afbeelding selecteren',
+    '$label.images.selectbox_option_1.label': 'Content.ts: Afbeelding selecteren optie 1',
+    '$label.images.selectbox_option_2.label': 'Content.ts: Afbeelding selecteren optie 2',
+    '$label.images.button.label': 'Content.ts: Afbeelding knoplabel',
+  },
 
-    '$label.images.deck_title': 'Afbeeldingsinstellingen',
-    '$label.images.add_card_button': 'Afbeeldingsinstellingen toevoegen',
-    '$label.images.card_title': 'Afbeeldingsinstellingen',
-    '$label.images.image_text_default': 'Standaardtekst',
+  fr: {
+    '$label.section_title.label': 'Titre principal',
+    '$label.section_title.placeholder': 'Ce sera le titre principal de cette section',
+    '$label.section_description.label': 'Description longue',
+    '$label.section_description.placeholder': 'Cette description sera affichée sous le titre',
+    '$label.image_text.label': 'Légende de l\'image',
+    '$label.image_text.placeholder': 'Cette légende sera affichée sur ou sous l\'image',
+    '$label.image_content.label': 'Contenu de l\'image',
+    '$label.image_link.placeholder': 'Entrez une URL facultative pour l\'image',
+    '$label.background.label': 'Arrière-plan',
+    '$label.image_text_1.label': 'Content.ts: Légende de l\'image',
+    '$label.image_content_1.label': 'Content.ts: Image',
+    '$label.image_link_1.label': 'Content.ts: Lien de l\'image',
+    '$label.images.deck_title': 'Content.ts: Paramètres de l\'image',
+    '$label.images.add_card_button': 'Content.ts: Ajouter de nouveaux paramètres d\'image',
+    '$label.images.card_title': 'Content.ts: Paramètres de l\'image',
+    '$label.images.default.image_text': 'Par défaut de Content.ts: Texte de l\'image par défaut',
+    '$label.images.default.image_link.text': 'Par défaut de Content.ts: Texte du lien de l\'image par défaut',
+    '$label.images.default.button_title': 'Par défaut de Content.ts: Titre du bouton par défaut',
+    '$label.images.toggle.label': 'Content.ts: Basculer l\'image',
+    '$label.images.selectbox.label': 'Content.ts: Sélectionner l\'image',
+    '$label.images.selectbox_option_1.label': 'Content.ts: Option de sélection de l\'image 1',
+    '$label.images.selectbox_option_2.label': 'Content.ts: Option de sélection de l\'image 2',
+    '$label.images.button.label': 'Content.ts: Étiquette du bouton de l\'image',
   },
 } as const;

package/template/sections/example-section/showcases/3.ts

@@ -0,0 +1,198 @@
+export default {
+  showcaseId: '3',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_3_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_3.blockName',
+  layoutId: 'Caption_On_Image',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_3.section_title.text',
+    },
+
+    images: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_1.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_new_arrivals_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_new_arrivals_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_new_arrivals_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_2.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'fixed_gears_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'fixed_gears_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'fixed_gears_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_3.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'repair_service_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'repair_service_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'repair_service_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+
+            image_link: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_3.image_link_1.text',
+            },
+          },
+        },
+
+        {
+          settings: {
+            image_text: {
+              type: 'TEXTAREA',
+              text: '$label.showcase_3.image_text_4.text',
+            },
+
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_accessories_high.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_accessories_low.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_accessories_high.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    image_text: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'GRADIENT',
+      color: ['#131313', '#292929'],
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#000000', '#00000033'],
+    },
+  },
+} as const;

package/template/sections/example-section/showcases/translations.ts

@@ -13,7 +13,7 @@ export default {
 
     '$label.card_button_title': 'Card button',
 
-    '$label.showcase_2.blockName': 'Reference section — Apparel',
+    '$label.showcase_2.blockName': 'Reference Section — Apparel',
     '$label.showcase_2.section_title.text': 'Trending collections',
     '$label.showcase_2.image_text_1.text': 'New t-shirts collection',
     '$label.showcase_2.image_text_2.text': 'Autumn looks',
@@ -21,6 +21,14 @@ export default {
     '$label.showcase_2.image_text_4.text': 'Story of Jane',
     '$label.showcase_2.image_link_1.text': '/products',
     '$label.template_standard_showcase_1.section_title.text': 'Something really catchy',
+
+    '$label.showcase_3.blockName': 'Reference Section — Bike Shop',
+    '$label.showcase_3.section_title.text': 'New arrivals',
+    '$label.showcase_3.image_text_1.text': 'New Arrivals',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Fixed-gears',
+    '$label.showcase_3.image_text_3.text': 'Repair service',
+    '$label.showcase_3.image_text_4.text': 'Bike accessories',
   },
 
   nl: {
@@ -43,5 +51,45 @@ export default {
     '$label.showcase_2.image_text_4.text': 'Verhaal van Jane',
     '$label.showcase_2.image_link_1.text': '/products',
     '$label.template_standard_showcase_1.section_title.text': 'Iets heel pakkends',
+
+    '$label.showcase_3.blockName': 'Referentiesectie — Fietsenwinkel',
+    '$label.showcase_3.section_title.text': 'Nieuw binnen',
+    '$label.showcase_3.image_text_1.text': 'Nieuw binnen',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Vaste versnellingen',
+    '$label.showcase_3.image_text_3.text': 'Reparatieservice',
+    '$label.showcase_3.image_text_4.text': 'Fietsaccessoires',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de référence — Vente au détail',
+    '$label.showcase_1.section_title.text': 'Collections tendance',
+    '$label.showcase_1.section_description.text': 'Découvrez nos pièces préférées de cette saison et offrez-vous ces '
+      + 'pièces intemporelles adaptées à toutes les occasions. Nous offrons la livraison et les retours gratuits, ainsi '
+      + 'que des conseils de mode 24/7 via notre application mobile.',
+    '$label.showcase_1.image_text_1.text': 'Nouveautés',
+    '$label.showcase_1.image_text_2.text': 'Look sportif',
+    '$label.showcase_1.image_text_3.text': 'Accessoires d\'été',
+    '$label.showcase_1.image_text_4.text': 'Chaussures tendance',
+    '$label.showcase_1.image_link_1.text': '/products',
+
+    '$label.card_button_title': 'Bouton de carte',
+
+    '$label.showcase_2.blockName': 'Section de référence — Vêtements',
+    '$label.showcase_2.section_title.text': 'Collections tendance',
+    '$label.showcase_2.image_text_1.text': 'Nouvelle collection de t-shirts',
+    '$label.showcase_2.image_text_2.text': 'Looks d\'automne',
+    '$label.showcase_2.image_text_3.text': 'Garde-robe de Bianka',
+    '$label.showcase_2.image_text_4.text': 'Histoire de Jane',
+    '$label.showcase_2.image_link_1.text': '/products',
+    '$label.template_standard_showcase_1.section_title.text': 'Quelque chose de vraiment accrocheur',
+
+    '$label.showcase_3.blockName': 'Section de référence — Magasin de vélos',
+    '$label.showcase_3.section_title.text': 'Nouveautés',
+    '$label.showcase_3.image_text_1.text': 'Nouveautés',
+    '$label.showcase_3.image_link_1.text': '/products',
+    '$label.showcase_3.image_text_2.text': 'Vélos à pignon fixe',
+    '$label.showcase_3.image_text_3.text': 'Service de réparation',
+    '$label.showcase_3.image_text_4.text': 'Accessoires pour vélos',
   },
 } as const;

package/template/shared/{LanguageSelector.vue → components/LanguageSelector.vue}

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { useVueBaseProps } from '@lightspeed/crane';
 import { computed } from 'vue';
-import { Design } from '../headers/example-header/type.ts';
+import { Design } from '../../headers/example-header/type.ts';
 
 const baseProps = useVueBaseProps<unknown, Design>();
 const externalContent = computed(() => baseProps.externalContent?.value as ExternalContentData);

package/template/shared/components/SectionWrapper.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="section">
+    <div class="section__wrapper">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.section {
+  padding: 60px 20px;
+
+  @media screen and (min-width: 700px) {
+    padding: 75px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding: 100px;
+  }
+
+  &__wrapper {
+    max-width: 1120px;
+    margin: 0 auto;
+  }
+}
+</style>

package/template/templates/template.ts

@@ -18,7 +18,8 @@ export default {
     },
     {
       type: 'default',
-      id: 'slider_001',
+      id: 'slider',
+      showcase_id: '001',
     },
     {
       type: 'custom',