@lightspeed/crane 2.0.5 → 3.1.0

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

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '3',
   previewImage: {
     set: {
@@ -10,23 +16,17 @@ export default {
   blockName: '$label.showcase_3.blockName',
   layoutId: 'Caption_On_Image',
   content: {
-    section_title: {
-      type: 'INPUTBOX',
+    section_title: content.default.inputbox({
       text: '$label.showcase_3.section_title.text',
-    },
-
-    images: {
-      type: 'DECK',
+    }),
+    images: content.default.deck({
       cards: [
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_3.image_text_1.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -44,24 +44,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_3.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_3.image_text_2.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -79,24 +73,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_3.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_3.image_text_3.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -114,24 +102,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_3.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_3.image_text_4.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -149,60 +131,55 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
       ],
-    },
-    toggle: {
-      type: 'TOGGLE',
+    }),
+    toggle: content.default.toggle({
       enabled: true,
-    },
-    selectbox: {
-      type: 'SELECTBOX',
+    }),
+    selectbox: content.default.selectbox({
       value: 'one',
-    },
-    info: {
-      type: 'INFO',
+    }),
+    info: content.default.info({
       text: '$label.showcase_3.info.text',
       button: {
         title: '$label.showcase_3.info.button.title',
         link: 'https://example.com',
       },
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: content.default.button({
       title: '$label.showcase_1.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
-    },
+    }),
   },
   design: {
-    section_title: {
-      type: 'TEXT',
+    section_title: design.default.text({
       font: 'pt_mono',
       size: 48,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    image_text: {
-      type: 'TEXT',
+    }),
+    image_text: design.default.text({
       font: 'pt_mono',
       size: 24,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'GRADIENT',
       color: ['#131313', '#292929'],
-    },
-    image_content: {
-      type: 'IMAGE',
+    }),
+    image_content: design.default.image({
       overlay: 'GRADIENT',
       color: ['#000000', '#00000033'],
-    },
+    }),
+    info: design.default.info({
+      description: '$label.showcase_3.info.design.text',
+    }),
   },
-} as const;
+});

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

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.showcase_1.blockName': 'Reference Section — Retail',
     '$label.showcase_1.section_title.text': 'Trending collections',
@@ -32,6 +34,9 @@ export default {
     '$label.showcase_3.info.text': 'Showcase 3: This is info section where you can provide some useful tips regarding custom section usage',
     '$label.showcase_1.info.button.title': 'Showcase 1: Learn',
     '$label.showcase_3.info.button.title': 'Showcase 3: More',
+    '$label.showcase_1.info.design.text': 'Design.ts: Showcase 1 info description for design settings',
+    '$label.showcase_2.info.design.text': 'Design.ts: Showcase 2 info description for design settings',
+    '$label.showcase_3.info.design.text': 'Design.ts: Showcase 3 info description for design settings',
     '$label.showcase_1.button.defaults.title': 'Button Title',
     '$label.showcase_2.button.defaults.title': 'Button Title',
   },
@@ -68,6 +73,9 @@ export default {
     '$label.showcase_2.info.text': 'Hier is een gebied voor nuttige tips over het gebruik van aangepaste secties',
     '$label.showcase_1.info.button.title': 'Leren',
     '$label.showcase_3.info.button.title': 'Meer',
+    '$label.showcase_1.info.design.text': 'Showcase 1 infobeschrijving voor ontwerpinstellingen',
+    '$label.showcase_2.info.design.text': 'Showcase 2 infobeschrijving voor ontwerpinstellingen',
+    '$label.showcase_3.info.design.text': 'Showcase 3 infobeschrijving voor ontwerpinstellingen',
     '$label.showcase_1.button.defaults.title': 'Knoptitel',
     '$label.showcase_2.button.defaults.title': 'Knoptitel',
   },
@@ -107,7 +115,10 @@ export default {
       + 'l\'utilisation de la section personnalisée',
     '$label.showcase_1.info.button.title': 'Showcase 1: Apprendre',
     '$label.showcase_3.info.button.title': 'Showcase 3: Plus',
+    '$label.showcase_1.info.design.text': 'Description info du showcase 1 pour les paramètres de design',
+    '$label.showcase_2.info.design.text': 'Description info du showcase 2 pour les paramètres de design',
+    '$label.showcase_3.info.design.text': 'Description info du showcase 3 pour les paramètres de design',
     '$label.showcase_1.button.defaults.title': 'Titre du bouton',
     '$label.showcase_2.button.defaults.title': 'Titre du bouton',
   },
-} as const;
+});

package/template/shared/components/LanguageSelector.vue

@@ -45,7 +45,7 @@ const navigateToTranslationPage = (language: Language) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .language-selector {
   display: flex;
 }

package/template/shared/components/SectionWrapper.vue

@@ -6,7 +6,7 @@
   </section>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .section {
   padding: 60px 20px;
 
@@ -17,10 +17,10 @@
   @media screen and (min-width: 1200px) {
     padding: 100px;
   }
+}
 
-  &__wrapper {
-    max-width: 1120px;
-    margin: 0 auto;
-  }
+.section__wrapper {
+  max-width: 1120px;
+  margin: 0 auto;
 }
 </style>