@lightspeed/crane 2.0.5 → 3.1.0

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

@@ -1,6 +1,7 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'TEXT',
+  section_title: design.text({
     label: '$label.section_title.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],
@@ -12,9 +13,8 @@ export default {
       color: '#313131',
       visible: true,
     },
-  },
-  section_description: {
-    type: 'TEXT',
+  }),
+  section_description: design.text({
     label: '$label.section_description.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -26,13 +26,11 @@ export default {
       color: '#313131',
       visible: true,
     },
-  },
-  divider: {
-    type: 'DIVIDER',
+  }),
+  divider: design.divider({
     label: '$label.divider.label',
-  },
-  image_text: {
-    type: 'TEXT',
+  }),
+  image_text: design.text({
     label: '$label.image_text.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -44,23 +42,29 @@ export default {
       color: '#FFFFFF',
       visible: true,
     },
-  },
-  image_content: {
-    type: 'IMAGE',
+  }),
+  image_content: design.image({
     label: '$label.image_content.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       overlay: 'COLOR',
       color: '#333',
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  info: design.info({
+    label: '$label.info.design.label',
+    description: '$label.info.design.description',
+    button: {
+      label: '$label.info.design.button.label',
+      link: 'https://example.com',
+    },
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
     defaults: {
       style: 'COLOR',
       color: 'global.color.background',
     },
-  },
-} as const;
+  }),
+};

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

@@ -1,22 +1,23 @@
+import { layout } from '@lightspeed/crane-api';
+
 export default [
-  {
+  layout.init({
     layoutId: 'Caption_On_Image',
     selectedContentSettings: [],
     selectedDesignSettings: [],
-  },
-  {
+  }),
+  layout.init({
     layoutId: 'Caption_Under_Image',
     selectedContentSettings: [],
     selectedDesignSettings: [
-      {
+      layout.designOverride.text({
         fieldName: 'section_title',
-      },
-      {
+      }),
+      layout.designOverride.text({
         fieldName: 'section_description',
-      },
-      {
+      }),
+      layout.designOverride.text({
         fieldName: 'image_text',
-        type: 'TEXT',
         defaults: {
           font: 'global.fontFamily.body',
           size: 16,
@@ -25,10 +26,13 @@ export default [
           color: '#000000',
           visible: true,
         },
-      },
-      {
+      }),
+      layout.designOverride.background({
         fieldName: 'background',
-      },
+      }),
+      layout.designOverride.info({
+        fieldName: 'info',
+      }),
     ],
-  },
-] as const;
+  }),
+];

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

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.section_title.label': 'Main title',
     '$label.section_title.placeholder': 'This will be the main title for this section',
@@ -43,6 +45,10 @@ export default {
     '$label.info.label': 'Content.ts: Info',
     '$label.info.description': 'Content.ts: This is info section where you can provide some useful tips regarding custom section usage',
     '$label.info.button.label': 'Content.ts: Learn more',
+
+    '$label.info.design.label': 'Design.ts: Info',
+    '$label.info.design.description': 'Design.ts: This is info section where you can provide some useful tips regarding custom section usage',
+    '$label.info.design.button.label': 'Design.ts: Learn more',
   },
 
   nl: {
@@ -85,6 +91,10 @@ export default {
     '$label.info.label': 'Informatie',
     '$label.info.description': 'Dit is een informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
     '$label.info.button.label': 'Meer informatie',
+
+    '$label.info.design.label': 'Design.ts: Informatie',
+    '$label.info.design.description': 'Design.ts: Dit is een informatiedeel waar je enkele nuttige tips kunt geven over het gebruik van aangepaste secties',
+    '$label.info.design.button.label': 'Design.ts: Meer informatie',
   },
 
   fr: {
@@ -128,5 +138,10 @@ export default {
     '$label.info.description': 'Content.ts: Ceci est une section d\'information où vous '
       + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
     '$label.info.button.label': 'En savoir plus',
+
+    '$label.info.design.label': 'Design.ts: Info',
+    '$label.info.design.description': 'Design.ts: Ceci est une section d\'information où vous '
+      + 'pouvez fournir des conseils utiles sur l\'utilisation de la section personnalisée',
+    '$label.info.design.button.label': 'Design.ts: En savoir plus',
   },
-} as const;
+});

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

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   previewImage: {
     set: {
@@ -10,27 +16,20 @@ export default {
   blockName: '$label.showcase_1.blockName',
   layoutId: 'Caption_On_Image',
   content: {
-    section_title: {
-      type: 'INPUTBOX',
+    section_title: content.default.inputbox({
       text: '$label.showcase_1.section_title.text',
-    },
-    section_description: {
-      type: 'TEXTAREA',
+    }),
+    section_description: content.default.textarea({
       text: '$label.showcase_1.section_description.text',
-    },
-
-    images: {
-      type: 'DECK',
+    }),
+    images: content.default.deck({
       cards: [
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_1.image_text_1.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -48,24 +47,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_1.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_1.image_text_2.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -83,24 +76,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_1.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_1.image_text_3.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -118,24 +105,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_1.image_link_1.text',
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_1.image_text_4.text',
-            },
-
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -153,58 +134,53 @@ 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_1.info.text',
       button: {
         title: '$label.showcase_1.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: 'global.fontFamily.body',
       size: 44,
       bold: true,
       italic: false,
       color: '#333',
-    },
-    image_text: {
-      type: 'TEXT',
+    }),
+    image_text: design.default.text({
       size: 20,
       bold: false,
       italic: false,
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: 'global.color.background',
-    },
-    image_content: {
-      type: 'IMAGE',
+    }),
+    image_content: design.default.image({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
-    },
+    }),
+    info: design.default.info({
+      description: '$label.showcase_1.info.design.text',
+    }),
   },
-} as const;
+});

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

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '2',
   previewImage: {
     set: {
@@ -9,22 +15,17 @@ export default {
   },
   blockName: '$label.showcase_2.blockName',
   content: {
-    section_title: {
-      type: 'INPUTBOX',
+    section_title: content.default.inputbox({
       text: '$label.showcase_2.section_title.text',
-    },
-
-    images: {
-      type: 'DECK',
+    }),
+    images: content.default.deck({
       cards: [
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_2.image_text_1.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -42,21 +43,18 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
-            image_link: {
-              type: 'INPUTBOX',
+            }),
+            image_link: content.default.inputbox({
               text: '$label.showcase_2.image_link_1.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_2.image_text_2.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -74,18 +72,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_2.image_text_3.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -103,18 +98,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
-
         {
           settings: {
-            image_text: {
-              type: 'TEXTAREA',
+            image_text: content.default.textarea({
               text: '$label.showcase_2.image_text_4.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -132,59 +124,54 @@ 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_2.info.text',
       button: {
         title: '$label.showcase_1.info.button.title',
         link: 'https://example.com',
       },
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: content.default.button({
       title: '$label.showcase_2.button.defaults.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
-    },
+    }),
   },
   design: {
-    section_title: {
-      type: 'TEXT',
+    section_title: design.default.text({
       font: 'global.fontFamily.body',
       size: 44,
       bold: true,
       italic: false,
       color: '#333',
-    },
-    image_text: {
-      type: 'TEXT',
+    }),
+    image_text: design.default.text({
       size: 20,
       bold: false,
       italic: false,
       color: '#FFFFFF',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: 'global.color.background',
-    },
-    image_content: {
-      type: 'IMAGE',
+    }),
+    image_content: design.default.image({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
-    },
+    }),
+    info: design.default.info({
+      description: '$label.showcase_2.info.design.text',
+    }),
   },
-} as const;
+});