@lightspeed/crane 2.0.4 → 3.0.0

package/template/reference/sections/intro-slider/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 — Slider',
 
@@ -85,4 +87,4 @@ export default {
     '$label.showcase_2.slide_text_5.text': 'Nom du vélo 5',
     '$label.showcase_2.slide_text_6.text': 'Nom du vélo 6',
   },
-} as const;
+});

package/template/reference/sections/tag-lines/TagLines.vue

@@ -94,65 +94,59 @@ const {
 
 </script>
 
-<style lang="scss" scoped>
-.tag-lines-section {
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 24px;
-
-    @media screen and (min-width: 900px) {
-      flex-direction: row;
-      justify-content: space-between;
-    }
+<style scoped>
+.tag-lines-section__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  @media screen and (min-width: 900px) {
+    flex-direction: row;
+    justify-content: space-between;
   }
+}
 
-  &__info {
-    width: 100%;
+.tag-lines-section__info {
+  width: 100%;
 
-    @media screen and (min-width: 900px) {
-      width: unset;
-      max-width: 530px;
-    }
+  @media screen and (min-width: 900px) {
+    width: unset;
+    max-width: 530px;
   }
+}
 
-  &__tagline {
-    margin-bottom: 24px;
-  }
+.tag-lines-section__tagline {
+  margin-bottom: 24px;
+}
 
-  &__image {
-    width: 100%;
+.tag-lines-section__image {
+  width: 100%;
 
-    @media screen and (min-width: 900px) {
-      max-width: 479px;
-    }
+  @media screen and (min-width: 900px) {
+    max-width: 479px;
   }
+}
 
-  &::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) {
-    & .tag-lines-section__highlighted-text {
-      opacity: 0.2;
+.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text {
+  opacity: 0.2;
+}
 
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
+.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text:hover {
+  opacity: 1;
+}
 
-  &__highlighted-text {
-    transition: opacity ease-in-out 0.3s;
-  }
+.tag-lines-section__highlighted-text {
+  transition: opacity ease-in-out 0.3s;
+}
 
-  &:has(.tag-lines-section__highlighted-text:hover) {
-    &::v-deep(.section-image__element) {
-      opacity: 0;
-    }
-  }
+.tag-lines-section:has(.tag-lines-section__highlighted-text:hover)::v-deep(.section-image__element) {
+  opacity: 0;
+}
 
-  &:has(.tag-lines-section__highlighted-text--1:hover)::v-deep(.section-image__element--1),
-  &:has(.tag-lines-section__highlighted-text--2:hover)::v-deep(.section-image__element--2),
-  &:has(.tag-lines-section__highlighted-text--3:hover)::v-deep(.section-image__element--3) {
-    opacity: 1;
-  }
+.tag-lines-section:has(.tag-lines-section__highlighted-text--1:hover)::v-deep(.section-image__element--1),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--2:hover)::v-deep(.section-image__element--2),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--3:hover)::v-deep(.section-image__element--3) {
+  opacity: 1;
 }
 </style>

package/template/reference/sections/tag-lines/component/HighlightedText.vue

@@ -14,13 +14,13 @@ const props = defineProps<{
 const textStyle = computed<CSSProperties>(() => ({
   fontSize: props.design.size ? `${props.design.size}px` : undefined,
   fontFamily: props.design.font,
-  color: props.design.color ? (props.design.color as Color).hex : undefined,
+  color: props.design.color ? (props.design.color as Color)?.hex : undefined,
   fontStyle: props.design.italic ? 'italic' : 'normal',
   fontWeight: props.design.bold ? 'bold' : 'normal',
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .highlighted-text {
   --font-size: v-bind(textStyle.fontSize);
   --font-family: v-bind(textStyle.fontFamily);

package/template/reference/sections/tag-lines/component/SectionImage.vue

@@ -47,32 +47,32 @@ const imageClass = computed(() => [
 ]);
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .section-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 0.785;
+}
 
-  &--with-border-radius {
-    border-radius: 24px;
+.section-image--with-border-radius {
+  border-radius: 24px;
 
-    @media screen and (min-width: 1200px) {
-      border-radius: 32px;
-    }
+  @media screen and (min-width: 1200px) {
+    border-radius: 32px;
   }
+}
 
-  &__element {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: opacity 0.3s ease-in-out;
+.section-image__element {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.3s ease-in-out;
+}
 
-    &--highlighted {
-      opacity: 0;
-    }
-  }
+.section-image__element--highlighted {
+  opacity: 0;
 }
 </style>

package/template/reference/sections/tag-lines/component/Title.vue

@@ -18,13 +18,13 @@ const titleDesign = useTextElementDesign<Design>('section_title');
 const titleStyle = computed<CSSProperties>(() => ({
   fontSize: `${titleDesign.size}px`,
   fontFamily: titleDesign.font,
-  color: (titleDesign.color as Color).hex,
+  color: (titleDesign.color as Color)?.hex,
   fontStyle: titleDesign.italic ? 'italic' : 'normal',
   fontWeigh: titleDesign.bold ? 'bold' : 'normal',
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .title {
   --font-size: v-bind(titleStyle.fontSize);
   --font-family: v-bind(titleStyle.fontFamily);

package/template/reference/sections/tag-lines/settings/content.ts

@@ -1,16 +1,15 @@
+import { content } from '@lightspeed/crane-api';
+
 export default {
-  section_tagline: {
-    type: 'INPUTBOX',
+  section_tagline: content.inputbox({
     label: '$label.content.tagline.label',
     placeholder: '$label.content.tagline.placeholder',
-  },
-  section_title: {
-    type: 'INPUTBOX',
+  }),
+  section_title: content.inputbox({
     label: '$label.content.section_title.label',
     placeholder: '$label.content.section_title.placeholder',
-  },
-  highlighted_text: {
-    type: 'DECK',
+  }),
+  highlighted_text: content.deck({
     label: '$label.content.highlighted_text_title.label',
     addButtonLabel: '$label.content.deck.highlighted_text.add_button',
     maxCards: 3,
@@ -18,21 +17,56 @@ export default {
       defaultCardContent: {
         label: '$label.content.highlighted_text.label',
         settings: {
-          text: {
-            type: 'INPUTBOX',
+          text: content.inputbox({
             label: '$label.content.deck.highlighted_text.label',
             placeholder: '$label.content.deck.highlighted_text.label',
-          },
-          image_content: {
-            type: 'IMAGE',
+          }),
+          image_content: content.image({
             label: '$label.content.deck.highlighted_text_image_on_hover.label',
-          },
+            defaults: {
+              imageData: {
+                set: {
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'fall_is_here.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'fall_is_here_preview.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'fall_is_here.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'fall_is_here_preview.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          }),
         },
       },
     },
-  },
-  section_image: {
-    type: 'IMAGE',
+  }),
+  section_image: content.image({
     label: '$label.content.image_title.label',
-  },
-} as const;
+    defaults: {
+      imageData: {
+        set: {
+          MOBILE_WEBP_LOW_RES: {
+            url: 'fall_is_here.jpg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'fall_is_here.jpg',
+          },
+          WEBP_LOW_RES: {
+            url: 'fall_is_here.jpg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'fall_is_here.jpg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+  }),
+};

package/template/reference/sections/tag-lines/settings/design.ts

@@ -1,15 +1,15 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  background: {
-    type: 'BACKGROUND',
+  background: design.background({
     label: '$label.design.background.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     defaults: {
       style: 'COLOR',
       color: '#FFFFFF',
     },
-  },
-  section_tagline: {
-    type: 'TEXT',
+  }),
+  section_tagline: design.text({
     label: '$label.design.tagline.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     sizes: [12, 13, 14, 15, 16, 17, 18, 20],
@@ -21,9 +21,8 @@ export default {
       color: '#F4EFE3',
       visible: true,
     },
-  },
-  section_title: {
-    type: 'TEXT',
+  }),
+  section_title: design.text({
     label: '$label.design.section_title.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -35,9 +34,8 @@ export default {
       color: '#000000',
       visible: true,
     },
-  },
-  highlighted_text_1: {
-    type: 'TEXT',
+  }),
+  highlighted_text_1: design.text({
     label: '$label.design.highlighted_text_1.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -49,9 +47,8 @@ export default {
       color: '#FFBF24',
       visible: true,
     },
-  },
-  highlighted_text_2: {
-    type: 'TEXT',
+  }),
+  highlighted_text_2: design.text({
     label: '$label.design.highlighted_text_2.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -63,9 +60,8 @@ export default {
       color: '#6281C5',
       visible: true,
     },
-  },
-  highlighted_text_3: {
-    type: 'TEXT',
+  }),
+  highlighted_text_3: design.text({
     label: '$label.design.highlighted_text_3.label',
     colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -77,5 +73,5 @@ export default {
       color: '#C5629A',
       visible: true,
     },
-  },
-} as const;
+  }),
+};

package/template/reference/sections/tag-lines/settings/layout.ts

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

package/template/reference/sections/tag-lines/settings/translations.ts

@@ -1,4 +1,6 @@
-export default {
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
   en: {
     '$label.content.tagline.label': 'Tagline',
     '$label.content.section_title.label': 'Title',
@@ -58,4 +60,4 @@ export default {
     '$label.design.highlighted_text_2.label': 'Texte en surbrillance 2',
     '$label.design.highlighted_text_3.label': 'Texte en surbrillance 3',
   },
-} as const;
+});

package/template/reference/sections/tag-lines/showcases/1.ts

@@ -1,4 +1,10 @@
-export default {
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
   showcaseId: '1',
   layoutId: 'Image_With_Border_Radius',
   previewImage: {
@@ -10,25 +16,20 @@ export default {
   },
   blockName: '$label.showcase_1.blockName',
   content: {
-    section_tagline: {
-      type: 'INPUTBOX',
+    section_tagline: content.default.inputbox({
       text: '$label.showcase_1.section_tagline.text',
-    },
-    section_title: {
-      type: 'INPUTBOX',
+    }),
+    section_title: content.default.inputbox({
       text: '$label.showcase_1.section_title.text',
-    },
-    highlighted_text: {
-      type: 'DECK',
+    }),
+    highlighted_text: content.default.deck({
       cards: [
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_1.highlighted_text_1.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -46,17 +47,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_1.highlighted_text_2.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -74,17 +73,15 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
         {
           settings: {
-            text: {
-              type: 'INPUTBOX',
+            text: content.default.inputbox({
               text: '$label.showcase_1.highlighted_text_3.text',
-            },
-            image_content: {
-              type: 'IMAGE',
+            }),
+            image_content: content.default.image({
               imageData: {
                 set: {
                   MOBILE_WEBP_LOW_RES: {
@@ -102,13 +99,12 @@ export default {
                 },
                 borderInfo: {},
               },
-            },
+            }),
           },
         },
       ],
-    },
-    section_image: {
-      type: 'IMAGE',
+    }),
+    section_image: content.default.image({
       imageData: {
         set: {
           MOBILE_WEBP_LOW_RES: {
@@ -126,53 +122,47 @@ export default {
         },
         borderInfo: {},
       },
-    },
+    }),
   },
   design: {
-    background: {
-      type: 'BACKGROUND',
+    background: design.default.background({
       style: 'COLOR',
       color: '#FFFFFF',
-    },
-    section_tagline: {
-      type: 'TEXT',
+    }),
+    section_tagline: design.default.text({
       font: 'noto_serif',
       size: 16,
       bold: true,
       italic: false,
       color: '#F4EFE3',
-    },
-    section_title: {
-      type: 'TEXT',
+    }),
+    section_title: design.default.text({
       font: 'noto_serif',
       size: 48,
       bold: true,
       italic: false,
       color: '#000000',
-    },
-    highlighted_text_1: {
-      type: 'TEXT',
+    }),
+    highlighted_text_1: design.default.text({
       font: 'noto_serif',
       size: 48,
       bold: true,
       italic: false,
       color: '#FFBF24',
-    },
-    highlighted_text_2: {
-      type: 'TEXT',
+    }),
+    highlighted_text_2: design.default.text({
       font: 'noto_serif',
       size: 48,
       bold: true,
       italic: false,
       color: '#6281C5',
-    },
-    highlighted_text_3: {
-      type: 'TEXT',
+    }),
+    highlighted_text_3: design.default.text({
       font: 'noto_serif',
       size: 48,
       bold: true,
       italic: false,
       color: '#C5629A',
-    },
+    }),
   },
-} as const;
+});