@lightspeed/crane 2.0.4 → 3.0.0

package/template/reference/sections/about-us/component/Image.vue

@@ -61,34 +61,34 @@ const overlayStyle = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .image-section {
   height: 100%;
   position: relative;
   width: 100%;
   display: flex;
   z-index: 999;
+}
 
-  &__overlay {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
+.image-section__overlay {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
-    &--border-radius {
-      border-radius: 24px;
+.image-section__overlay--border-radius {
+  border-radius: 24px;
 
-      @media screen and (min-width: 900px) {
-        border-radius: 32px;
-      }
-    }
+  @media screen and (min-width: 900px) {
+    border-radius: 32px;
   }
+}
 
-  &__content {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    z-index: -1;
-  }
+.image-section__content {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  z-index: -1;
 }
 </style>

package/template/reference/sections/about-us/component/Stats.vue

@@ -71,7 +71,7 @@ const isCaptionVisible = computed<boolean>(() => captionDesign.visible ?? false)
 const valueStyle = computed<CSSProperties>(() => ({
   fontSize: `${valueDesign.size}px`,
   fontFamily: valueDesign.font,
-  color: (valueDesign.color as Color).hex,
+  color: (valueDesign.color as Color)?.hex,
   fontStyle: valueDesign.italic ? 'italic' : 'normal',
   fontWeight: valueDesign.bold ? 'bold' : 'normal',
 }));
@@ -79,13 +79,13 @@ const valueStyle = computed<CSSProperties>(() => ({
 const captionStyle = computed<CSSProperties>(() => ({
   fontSize: `${captionDesign.size}px`,
   fontFamily: captionDesign.font,
-  color: (captionDesign.color as Color).hex,
+  color: (captionDesign.color as Color)?.hex,
   fontStyle: captionDesign.italic ? 'italic' : 'normal',
   fontWeight: captionDesign.bold ? 'bold' : 'normal',
 }));
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .stats {
   --value-font-size: v-bind(valueStyle.fontSize);
   --value-font-family: v-bind(valueStyle.fontFamily);
@@ -105,51 +105,51 @@ const captionStyle = computed<CSSProperties>(() => ({
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin: 20px 0;
+}
 
-  &__element {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
+.stats__element {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
 
-  &__button {
-    align-self: start;
-    margin-top: 20px;
-    width: fit-content;
-    max-width: 360px;
+.stats__button {
+  align-self: start;
+  margin-top: 20px;
+  width: fit-content;
+  max-width: 360px;
 
-    @media screen and (max-width: 700px) {
-      align-self: center;
-    }
+  @media screen and (max-width: 700px) {
+    align-self: center;
   }
+}
 
-  &__number {
-    --value-font-modifier: 0.8;
-
-    max-width: 100%;
-    margin-bottom: 8px;
-    overflow: hidden;
-    word-wrap: break-word;
-    font-size: var(--value-font-size);
-    font-family: calc(var(--value-font-family) * var(--value-font-modifier));
-    color: var(--value-color);
-    font-style: var(--value-font-style);
-    font-weight: var(--value-font-weight);
-
-    @media screen and (min-width: 700px) {
-      --value-font-modifier: 1;
-    }
+.stats__number {
+  --value-font-modifier: 0.8;
+
+  max-width: 100%;
+  margin-bottom: 8px;
+  overflow: hidden;
+  word-wrap: break-word;
+  font-size: var(--value-font-size);
+  font-family: calc(var(--value-font-family) * var(--value-font-modifier));
+  color: var(--value-color);
+  font-style: var(--value-font-style);
+  font-weight: var(--value-font-weight);
+
+  @media screen and (min-width: 700px) {
+    --value-font-modifier: 1;
   }
+}
 
-  &__caption {
-    max-width: 100%;
-    overflow: hidden;
-    word-wrap: break-word;
-    font-size: var(--caption-font-size);
-    font-family: calc(var(--caption-font-family) * var(--caption-font-modifier));
-    color: var(--caption-color);
-    font-style: var(--caption-font-style);
-    font-weight: var(--caption-font-weight);
-  }
+.stats__caption {
+  max-width: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  font-size: var(--caption-font-size);
+  font-family: calc(var(--caption-font-family) * var(--caption-font-modifier));
+  color: var(--caption-color);
+  font-style: var(--caption-font-style);
+  font-weight: var(--caption-font-weight);
 }
 </style>

package/template/reference/sections/about-us/component/Title.vue

@@ -25,7 +25,7 @@ const titleStyle = computed<CSSProperties>(() => ({
 }));
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .section-title {
   margin-bottom: 20px;
 }

package/template/reference/sections/about-us/settings/content.ts

@@ -1,11 +1,11 @@
+import { content } from '@lightspeed/crane-api';
+
 export default {
-  title: {
-    type: 'INPUTBOX',
+  title: content.inputbox({
     label: '$label.section_title.label',
     placeholder: '$label.section_title.placeholder',
-  },
-  stats: {
-    type: 'DECK',
+  }),
+  stats: content.deck({
     label: '$label.stats.deck_title',
     addButtonLabel: '$label.stats.add_card_button',
     maxCards: 5,
@@ -13,37 +13,33 @@ export default {
       defaultCardContent: {
         label: '$label.images.card_title',
         settings: {
-          stat_value: {
-            type: 'INPUTBOX',
+          stat_value: content.inputbox({
             label: '$label.stat_value.label',
             placeholder: '$label.stat_value.placeholder',
             defaults: {
               text: '$label.stat_value.default.text',
             },
-          },
-          stat_caption: {
-            type: 'INPUTBOX',
+          }),
+          stat_caption: content.inputbox({
             label: '$label.stat_caption.label',
             placeholder: '$label.stat_caption.placeholder',
             defaults: {
               text: '$label.stat_caption.default.text',
             },
-          },
+          }),
         },
       },
     },
-  },
-  button: {
-    type: 'BUTTON',
+  }),
+  button: content.button({
     label: '$label.button_content.label',
     defaults: {
       title: '$label.button_content.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
     },
-  },
-  image: {
-    type: 'IMAGE',
+  }),
+  image: content.image({
     label: '$label.image_content.label',
     defaults: {
       imageData: {
@@ -64,5 +60,5 @@ export default {
         borderInfo: {},
       },
     },
-  },
-} as const;
+  }),
+};

package/template/reference/sections/about-us/settings/design.ts

@@ -1,15 +1,15 @@
+import { design } from '@lightspeed/crane-api';
+
 export default {
-  image: {
-    type: 'IMAGE',
+  image: design.image({
     label: '$label.image_content.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     defaults: {
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
     },
-  },
-  title: {
-    type: 'TEXT',
+  }),
+  title: design.text({
     label: '$label.section_title.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -21,9 +21,8 @@ export default {
       color: '#333333',
       visible: true,
     },
-  },
-  caption: {
-    type: 'TEXT',
+  }),
+  caption: design.text({
     label: '$label.caption.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     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,
     },
-  },
-  value: {
-    type: 'TEXT',
+  }),
+  value: design.text({
     label: '$label.value.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
@@ -49,18 +47,16 @@ export default {
       color: '#6281C5',
       visible: true,
     },
-  },
-  background: {
-    type: 'BACKGROUND',
+  }),
+  background: design.background({
     label: '$label.background.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     defaults: {
       style: 'COLOR',
       color: '#C8D9FF',
     },
-  },
-  button: {
-    type: 'BUTTON',
+  }),
+  button: design.button({
     label: '$label.button.label',
     colors: ['#000000', '#FFFFFF', '#333333', '#6281C5', '#C8D9FF', '#878787', '#101010'],
     defaults: {
@@ -70,5 +66,5 @@ export default {
       color: '#000000',
       visible: true,
     },
-  },
+  }),
 } as const;

package/template/reference/sections/about-us/settings/layout.ts

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

package/template/reference/sections/about-us/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.caption.label': 'Caption',
@@ -148,4 +150,4 @@ export default {
     '$label.showcase_2.stat_caption_4.default.text': 'Fietsen die teamleden hebben',
     '$label.showcase_2.button_content.title': 'Meer informatie',
   },
-} as const;
+});

package/template/reference/sections/about-us/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,12 +16,10 @@ export default {
   layoutId: 'Images_With_Border_Radius',
   blockName: '$label.showcase_1.blockName',
   content: {
-    title: {
-      type: 'INPUTBOX',
+    title: content.default.inputbox({
       text: '$label.showcase_1.section_title.text',
-    },
-    image: {
-      type: 'IMAGE',
+    }),
+    image: content.default.image({
       imageData: {
         set: {
           MOBILE_WEBP_LOW_RES: {
@@ -33,121 +37,103 @@ export default {
         },
         borderInfo: {},
       },
-    },
-    stats: {
-      type: 'DECK',
+    }),
+    stats: content.default.deck({
       cards: [
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_1.stat_value.default_1.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_1.stat_caption_1.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_1.stat_value.default_2.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_1.stat_caption_2.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_1.stat_value.default_3.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_1.stat_caption_3.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_1.stat_value.default_4.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_1.stat_caption_4.default.text',
-            },
+            }),
           },
         },
         {
           settings: {
-            stat_value: {
-              type: 'INPUTBOX',
+            stat_value: content.default.inputbox({
               text: '$label.showcase_1.stat_value.default_5.text',
-            },
-            stat_caption: {
-              type: 'INPUTBOX',
+            }),
+            stat_caption: content.default.inputbox({
               text: '$label.showcase_1.stat_caption_5.default.text',
-            },
+            }),
           },
         },
       ],
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: content.default.button({
       title: '$label.showcase_1.button_content.title',
       buttonType: 'HYPER_LINK',
       link: 'https://www.example.com',
-    },
+    }),
   },
   design: {
-    image: {
-      type: 'IMAGE',
+    image: design.default.image({
       overlay: 'GRADIENT',
       color: ['#FFFFFF', '#000000'],
-    },
-    title: {
-      type: 'TEXT',
+    }),
+    title: design.default.text({
       font: 'noto_serif',
       size: 44,
       bold: true,
       italic: false,
       color: '#333333',
-    },
-    caption: {
-      type: 'TEXT',
+    }),
+    caption: design.default.text({
       font: 'inter',
       size: 16,
       bold: true,
       italic: false,
       color: '#000000',
-    },
-    value: {
-      type: 'TEXT',
+    }),
+    value: design.default.text({
       font: 'noto_serif',
       size: 40,
       bold: true,
       italic: false,
       color: '#6281C5',
-    },
-    background: {
-      type: 'BACKGROUND',
+    }),
+    background: design.default.background({
       style: 'COLOR',
       color: '#C8D9FF',
-    },
-    button: {
-      type: 'BUTTON',
+    }),
+    button: design.default.button({
       font: 'inter',
       appearance: 'OUTLINE',
       size: 'LARGE',
       shape: 'PILL',
       color: '#000000',
-    },
+    }),
   },
-} as const;
+});