@lightspeed/crane 1.1.2 → 1.2.0

package/template/reference/sections/intro-slider/component/Title.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="titleClass">
+    <h1 v-if="showTitle">
+      {{ titleContent.value }}
+    </h1>
+    <p v-if="showDescription">
+      {{ descriptionContent.value }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+import {
+  useLayoutElementDesign,
+  useTextareaElementContent, useTextareaElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+const titleContent = useTextareaElementContent<Content>('section_title');
+const descriptionContent = useTextareaElementContent<Content>('section_description');
+
+const titleDesign = useTextareaElementDesign<Design>('section_title');
+const descriptionDesign = useTextareaElementDesign<Design>('section_description');
+
+const showTitle = computed<boolean>(() => titleDesign.visible && titleContent.hasContent);
+const showDescription = computed<boolean>(() => descriptionDesign.visible && descriptionContent.hasContent);
+
+const layoutDesign = useLayoutElementDesign();
+const titleClass = computed(() => [
+  'title',
+  {
+    'title--narrow': layoutDesign.layout === 'Narrow_Title_And_Images_With_Border_Radius',
+  },
+]);
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  fontStyle: titleDesign.italic ? 'italic' : 'normal',
+  fontWeight: titleDesign.bold ? 'bold' : 'normal',
+}));
+
+const descriptionStyle = computed<CSSProperties>(() => ({
+  fontSize: `${descriptionDesign.size}px`,
+  fontFamily: descriptionDesign.font,
+  color: (descriptionDesign.color as Color).hex,
+  fontStyle: descriptionDesign.italic ? 'italic' : 'normal',
+  fontWeight: descriptionDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.title {
+  text-align: center;
+  white-space: break-spaces;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  padding: 0 20px;
+
+  &--narrow {
+    max-width: 660px;
+  }
+
+  h1 {
+    --font-size: v-bind(titleStyle.fontSize);
+    --font-family: v-bind(titleStyle.fontFamily);
+    --color: v-bind(titleStyle.color);
+    --font-style: v-bind(titleStyle.fontStyle);
+    --font-weight: v-bind(titleStyle.fontWeight);
+    --font-size-multiplier: 1;
+
+    font-size: calc(var(--font-size) * var(--font-size-multiplier));
+    font-family: var(--font-family);
+    color: var(--color);
+    font-style: var(--font-style);
+    font-weight: var(--font-weight);
+    line-height: 1.3;
+    margin-bottom: 24px;
+
+    @media screen and (max-width: 768px) {
+      --font-size-multiplier: 0.7;
+    }
+  }
+
+  p {
+    --font-size: v-bind(descriptionStyle.fontSize);
+    --font-family: v-bind(descriptionStyle.fontFamily);
+    --color: v-bind(descriptionStyle.color);
+    --font-style: v-bind(descriptionStyle.fontStyle);
+    --font-weight: v-bind(descriptionStyle.fontWeight);
+    --font-size-multiplier: 1;
+
+    font-size: calc(var(--font-size) * var(--font-size-multiplier));
+    font-family: var(--font-family);
+    color: var(--color);
+    font-style: var(--font-style);
+    font-weight: var(--font-weight);
+
+    @media screen and (max-width: 768px) {
+      --font-size-multiplier: 1.25;
+    }
+  }
+}
+</style>

package/template/reference/sections/intro-slider/entity/color.ts

@@ -0,0 +1,4 @@
+export enum ColorType {
+    SOLID = 'solid',
+    GRADIENT = 'gradient',
+}

package/template/reference/sections/intro-slider/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane';
+import ExampleSection from './IntroSlider.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(ExampleSection);

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

@@ -0,0 +1,43 @@
+export default {
+  section_title: {
+    type: 'TEXTAREA',
+    label: '$label.section_title.label',
+    placeholder: '$label.section_title.placeholder',
+  },
+  section_description: {
+    type: 'TEXTAREA',
+    label: '$label.section_description.label',
+    placeholder: '$label.section_description.placeholder',
+  },
+  section_tagline: {
+    type: 'INPUTBOX',
+    label: '$label.section_tagline.label',
+    placeholder: '$label.section_tagline.placeholder',
+  },
+  section_button: {
+    type: 'BUTTON',
+    label: '$label.section_button.label',
+    title: '$label.section_button.title',
+  },
+  slider: {
+    type: 'DECK',
+    label: '$label.slider.title',
+    addButtonLabel: '$label.slider.add_slide',
+    maxCards: 6,
+    cards: {
+      defaultCardContent: {
+        label: '$label.slider.slide_title',
+        settings: {
+          image_content: {
+            type: 'IMAGE',
+            label: '$label.slide_content.label',
+          },
+          image_text: {
+            type: 'TEXTAREA',
+            label: '$label.slide_text.label',
+          },
+        },
+      },
+    },
+  },
+} as const;

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

@@ -0,0 +1,88 @@
+export default {
+  section_title: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  section_description: {
+    type: 'TEXT',
+    label: '$label.section_description.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  section_tagline: {
+    type: 'TEXT',
+    label: '$label.section_tagline.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'noto_serif',
+      size: 16,
+      bold: false,
+      italic: false,
+      color: '#C8D9FF',
+      visible: true,
+    },
+  },
+  section_button: {
+    type: 'BUTTON',
+    label: '$label.section_button.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    defaults: {
+      appearance: 'SOLID',
+      size: 'MEDIUM',
+      style: 'pill',
+      color: '#000000',
+      visible: true,
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: ['#000000', '#FFFFFF', '#C8D9FF', '#FFB92E', '#F4EFE3'],
+    defaults: {
+      style: 'COLOR',
+      color: '#F4EFE3',
+    },
+  },
+  image_text: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+      visible: true,
+    },
+  },
+  image_content: {
+    type: '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

@@ -0,0 +1,12 @@
+export default [
+  {
+    layoutId: 'Narrow_Title_And_Images_With_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+  {
+    layoutId: 'Wide_Title_And_Images_Without_Border_Radius',
+    selectedContentSettings: [],
+    selectedDesignSettings: [],
+  },
+];

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

@@ -0,0 +1,53 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder': 'This will be the main title for this section',
+    '$label.section_description.label': 'Description',
+    '$label.section_description.placeholder': 'This description will be displayed below the title',
+    '$label.section_tagline.label': 'Tagline',
+    '$label.section_tagline.placeholder': 'This label will be displayed above the title',
+    '$label.section_button.label': 'Button',
+    '$label.section_image_text.label': 'Image title',
+    '$label.section_image.label': 'Image',
+
+    '$label.slider.title': 'Slider',
+    '$label.slider.slide_title': 'Slide',
+    '$label.slider.add_slide': 'Add slide',
+    '$label.slide_text.label': 'Text on a slide',
+    '$label.slide_content.label': 'Slide image',
+
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Hoe we werken',
+    '$label.showcase_1.section_tagline.text': 'Seizoensgebonden',
+    '$label.showcase_1.section_title.text': 'De herfst is hier:',
+    '$label.showcase_1.highlighted_text_1.text': 'trui weer',
+    '$label.showcase_1.highlighted_text_2.text': 'shop chelsea boots',
+    '$label.showcase_1.highlighted_text_3.text': 'ontdek onze vakantiecadeaugids',
+
+    '$label.showcase_2.blockName': 'Hoe we werken',
+    '$label.showcase_2.section_tagline.text': 'Onze fietsen',
+    '$label.showcase_2.section_title.text': 'Wat we verkopen:',
+    '$label.showcase_2.highlighted_text_1.text': 'mountain- en racefietsen',
+    '$label.showcase_2.highlighted_text_2.text': 'hybride fietsen',
+    '$label.showcase_2.highlighted_text_3.text': 'vouwfietsen',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Comment nous travaillons',
+    '$label.showcase_1.section_tagline.text': 'Saisonnier',
+    '$label.showcase_1.section_title.text': 'L\'automne est là:',
+    '$label.showcase_1.highlighted_text_1.text': 'temps des pulls',
+    '$label.showcase_1.highlighted_text_2.text': 'achetez des bottes chelsea',
+    '$label.showcase_1.highlighted_text_3.text': 'découvrez notre guide des cadeaux de vacances',
+
+    '$label.showcase_2.blockName': 'Comment nous travaillons',
+    '$label.showcase_2.section_tagline.text': 'Nos vélos',
+    '$label.showcase_2.section_title.text': 'Ce que nous vendons:',
+    '$label.showcase_2.highlighted_text_1.text': 'vélos de montagne et de route',
+    '$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

@@ -0,0 +1,275 @@
+export default {
+  showcaseId: '1',
+  layoutId: 'Narrow_Title_And_Images_With_Border_Radius',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_1_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    section_title: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.section_title.text',
+    },
+    section_description: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.section_description.text',
+    },
+    section_tagline: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_tagline.text',
+    },
+    section_button: {
+      type: 'BUTTON',
+      title: '$label.showcase_1.section_button.title',
+      buttonType: 'HYPER_LINK',
+    },
+    slider: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_1.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_1.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_1.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_1@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_1@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_1@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_2.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_2.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_2.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_2@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_2@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_2@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_3.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_3.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_3.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_3@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_3@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_3@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_4.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_4.jpg',
+                  },
+                  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: {},
+              },
+            },
+          },
+        },
+        {
+
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_5.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_5.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_5.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_5@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_5@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_5@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.slide_text_6.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'category_6.png',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'category_6.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'category_6@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'category_6@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'category_6@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#000000',
+    },
+    section_description: {
+      type: 'TEXT',
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#000000',
+    },
+    section_tagline: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 16,
+      bold: false,
+      italic: false,
+      color: '#C8D9FF',
+    },
+    section_button: {
+      type: 'BUTTON',
+      font: 'inter',
+      appearance: 'SOLID',
+      size: 'LARGE',
+      shape: 'PILL',
+      color: '#000000',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: '#F4EFE3',
+    },
+    image_text: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#000000', '#000000'],
+    },
+  },
+} as const;