@lightspeed/crane 2.0.5 → 3.0.0

package/template/reference/sections/intro-slider/settings/content.ts

@@ -1,30 +1,27 @@
+import { content } from '@lightspeed/crane-api';
+
 export default {
-  section_title: {
-    type: 'TEXTAREA',
+  section_title: content.textarea({
     label: '$label.section_title.label',
     placeholder: '$label.section_title.placeholder',
-  },
-  section_description: {
-    type: 'TEXTAREA',
+  }),
+  section_description: content.textarea({
     label: '$label.section_description.label',
     placeholder: '$label.section_description.placeholder',
-  },
-  section_tagline: {
-    type: 'INPUTBOX',
+  }),
+  section_tagline: content.inputbox({
     label: '$label.section_tagline.label',
     placeholder: '$label.section_tagline.placeholder',
-  },
-  section_button: {
-    type: 'BUTTON',
+  }),
+  section_button: content.button({
     label: '$label.section_button.label',
     defaults: {
       title: '$label.section_button.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
     },
-  },
-  slider: {
-    type: 'DECK',
+  }),
+  slider: content.deck({
     label: '$label.slider.title',
     addButtonLabel: '$label.slider.add_slide',
     maxCards: 6,
@@ -32,34 +29,34 @@ export default {
       defaultCardContent: {
         label: '$label.slider.slide_title',
         settings: {
-          image_content: {
-            type: 'IMAGE',
+          image_content: content.image({
             label: '$label.slide_content.label',
-            imageData: {
-              set: {
-                MOBILE_WEBP_LOW_RES: {
-                  url: 'category_4.jpg',
-                },
-                MOBILE_WEBP_HI_RES: {
-                  url: 'category_4@2x.jpg',
-                },
-                WEBP_LOW_RES: {
-                  url: 'category_4@2x.jpg',
-                },
-                WEBP_HI_2X_RES: {
-                  url: 'category_4@2x.jpg',
+            defaults: {
+              imageData: {
+                set: {
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_4.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_4@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_4@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_4@2x.jpg',
+                  },
                 },
+                borderInfo: {},
               },
-              borderInfo: {},
             },
-          },
-          image_text: {
-            type: 'TEXTAREA',
+          }),
+          image_text: content.textarea({
             label: '$label.slide_text.label',
             placeholder: '$label.slide_text.label',
-          },
+          }),
         },
       },
     },
-  },
-} as const;
+  }),
+};

package/template/reference/sections/intro-slider/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: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     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: '#000000',
       visible: true,
     },
-  },
-  section_description: {
-    type: 'TEXT',
+  }),
+  section_description: design.text({
     label: '$label.section_description.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -26,9 +26,8 @@ export default {
       color: '#000000',
       visible: true,
     },
-  },
-  section_tagline: {
-    type: 'TEXT',
+  }),
+  section_tagline: design.text({
     label: '$label.section_tagline.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -40,9 +39,8 @@ export default {
       color: '#C8D9FF',
       visible: true,
     },
-  },
-  section_button: {
-    type: 'BUTTON',
+  }),
+  section_button: design.button({
     label: '$label.section_button.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     defaults: {
@@ -52,18 +50,16 @@ export default {
       color: '#000000',
       visible: true,
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     defaults: {
       style: 'COLOR',
       color: '#F4EFE3',
     },
-  },
-  image_text: {
-    type: 'TEXT',
+  }),
+  image_text: design.text({
     label: '$label.section_image_text.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     sizes: [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28],
@@ -75,14 +71,13 @@ export default {
       color: '#FFFFFF',
       visible: true,
     },
-  },
-  image_content: {
-    type: 'IMAGE',
+  }),
+  image_content: design.image({
     label: '$label.section_image.label',
     colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
     defaults: {
       overlay: 'GRADIENT',
       color: ['#000000', '#000000'],
     },
-  },
-} as const;
+  }),
+};

package/template/reference/sections/intro-slider/settings/layout.ts

@@ -1,12 +1,14 @@
+import { layout } from '@lightspeed/crane-api';
+
 export default [
-  {
+  layout.init({
     layoutId: 'Narrow_Title_And_Images_With_Border_Radius',
     selectedContentSettings: [],
     selectedDesignSettings: [],
-  },
-  {
+  }),
+  layout.init({
     layoutId: 'Wide_Title_And_Images_Without_Border_Radius',
     selectedContentSettings: [],
     selectedDesignSettings: [],
-  },
+  }),
 ];

package/template/reference/sections/intro-slider/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',
@@ -50,4 +52,4 @@ export default {
     '$label.showcase_2.highlighted_text_2.text': 'vélos hybrides',
     '$label.showcase_2.highlighted_text_3.text': 'vélos pliants',
   },
-} as const;
+});

package/template/reference/sections/intro-slider/showcases/1.ts

@@ -1,4 +1,6 @@
-export default {
+import { content, design, showcase } from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   layoutId: 'Narrow_Title_And_Images_With_Border_Radius',
   previewImage: {
@@ -10,35 +12,28 @@ export default {
   },
   blockName: '$label.showcase_1.blockName',
   content: {
-    section_title: {
-      type: 'TEXTAREA',
+    section_title: content.default.textarea({
       text: '$label.showcase_1.section_title.text',
-    },
-    section_description: {
-      type: 'TEXTAREA',
+    }),
+    section_description: content.default.textarea({
       text: '$label.showcase_1.section_description.text',
-    },
-    section_tagline: {
-      type: 'INPUTBOX',
+    }),
+    section_tagline: content.default.inputbox({
       text: '$label.showcase_1.section_tagline.text',
-    },
-    section_button: {
-      type: 'BUTTON',
+    }),
+    section_button: content.default.button({
       title: '$label.showcase_1.section_button.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
-    },
-    slider: {
-      type: 'DECK',
+    }),
+    slider: content.default.deck({
       cards: [
         {
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_1.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -56,17 +51,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_2.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -84,17 +77,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_3.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -112,17 +103,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_4.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -140,18 +129,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
-
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_5.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -169,17 +155,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            image_text: {
-              type: 'INPUTBOX',
+            image_text: content.default.inputbox({
               text: '$label.showcase_1.slide_text_6.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -197,62 +181,55 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
       ],
-    },
+    }),
   },
   design: {
-    section_title: {
-      type: 'TEXT',
+    section_title: design.default.text({
       font: 'noto_serif',
       size: 48,
       bold: true,
       italic: false,
       color: '#000000',
-    },
-    section_description: {
-      type: 'TEXT',
+    }),
+    section_description: design.default.text({
       font: 'inter',
       size: 16,
       bold: true,
       italic: false,
       color: '#000000',
-    },
-    section_tagline: {
-      type: 'TEXT',
+    }),
+    section_tagline: design.default.text({
       font: 'noto_serif',
       size: 16,
       bold: false,
       italic: false,
       color: '#C8D9FF',
-    },
-    section_button: {
-      type: 'BUTTON',
+    }),
+    section_button: design.default.button({
       font: 'inter',
       appearance: 'SOLID',
       size: 'LARGE',
       shape: 'PILL',
       color: '#000000',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: '#F4EFE3',
-    },
-    image_text: {
-      type: 'TEXT',
+    }),
+    image_text: design.default.text({
       font: 'noto_serif',
       size: 24,
       bold: true,
       italic: false,
       color: '#FFFFFF',
-    },
-    image_content: {
-      type: 'IMAGE',
+    }),
+    image_content: design.default.image({
       overlay: 'GRADIENT',
       color: ['#000000', '#000000'],
-    },
+    }),
   },
-} as const;
+});