@lightspeed/crane 1.1.2 → 1.2.0

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

@@ -0,0 +1,51 @@
+<template>
+  <h1 class="title">
+    {{ titleContent.value }}
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+import {
+  useInputboxElementContent,
+  useTextElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+const titleContent = useInputboxElementContent<Content>('section_title');
+const titleDesign = useTextElementDesign<Design>('section_title');
+
+const titleStyle = computed<CSSProperties>(() => ({
+  fontSize: `${titleDesign.size}px`,
+  fontFamily: titleDesign.font,
+  color: (titleDesign.color as Color).hex,
+  fontStyle: titleDesign.italic ? 'italic' : 'normal',
+  fontWeigh: titleDesign.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.title {
+  --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.fontWeigh);
+
+  --font-size-multiplier: calc(2/3);
+
+  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 (min-width: 700px) {
+    --font-size-multiplier: 0.75;
+  }
+
+  @media screen and (min-width: 1200px) {
+    --font-size-multiplier: 1;
+  }
+}
+</style>

package/template/reference/sections/tag-lines/composables/highlighted-text-image-list.ts

@@ -0,0 +1,34 @@
+import { computed } from 'vue';
+import {
+  EditorTypes,
+  ImageContent,
+  TextAreaContent,
+  useDeckElementContent,
+  useTextElementDesign,
+} from '@lightspeed/crane';
+import { Content, Design } from '../type.ts';
+
+export type Highlight = {
+  text?: TextAreaContent;
+  image?: ImageContent;
+  design: TextDesignData;
+}
+
+export function useHighlightedTextElementList() {
+  const design = computed<TextDesignData[]>(() => [
+    useTextElementDesign<Design>('highlighted_text_1') as TextDesignData,
+    useTextElementDesign<Design>('highlighted_text_2') as TextDesignData,
+    useTextElementDesign<Design>('highlighted_text_3') as TextDesignData,
+  ]);
+  const content = useDeckElementContent<Content>('highlighted_text');
+
+  const highlightedTextElements = computed<Highlight[]>(() => content.cards?.map((card, index) => ({
+    text: content.getReactiveRef(card, EditorTypes.INPUTBOX, 'text') as unknown as TextAreaContent | undefined,
+    image: content.getReactiveRef(card, EditorTypes.IMAGE, 'image_content') as ImageContent,
+    design: design.value[index],
+  })) ?? []);
+
+  return {
+    highlightedTextElements,
+  };
+}

package/template/reference/sections/tag-lines/server.ts

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

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

@@ -0,0 +1,37 @@
+export default {
+  section_tagline: {
+    type: 'INPUTBOX',
+    label: '$label.content.tagline.label',
+    placeholder: '$label.content.tagline.placeholder',
+  },
+  section_title: {
+    type: 'INPUTBOX',
+    label: '$label.content.section_title.label',
+    placeholder: '$label.content.section_title.placeholder',
+  },
+  highlighted_text: {
+    type: 'DECK',
+    label: '$label.content.highlighted_text_title.label',
+    addButtonLabel: '$label.content.deck.highlighted_text.add_button',
+    maxCards: 3,
+    cards: {
+      defaultCardContent: {
+        label: '$label.content.highlighted_text.label',
+        settings: {
+          text: {
+            type: 'INPUTBOX',
+            label: '$label.content.deck.highlighted_text.label',
+          },
+          image_content: {
+            type: 'IMAGE',
+            label: '$label.content.deck.highlighted_text_image_on_hover.label',
+          },
+        },
+      },
+    },
+  },
+  section_image: {
+    type: 'IMAGE',
+    label: '$label.content.image_title.label',
+  },
+} as const;

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

@@ -0,0 +1,81 @@
+export default {
+  background: {
+    type: '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',
+    label: '$label.design.tagline.label',
+    colors: ['#FFFFFF', '#000000', '#F4EFE3', '#FFBF24', '#6281C5', '#C5629A', '#BAA33E', '#8A91D0', '#C3455C'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'noto_serif',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#F4EFE3',
+      visible: true,
+    },
+  },
+  section_title: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#000000',
+      visible: true,
+    },
+  },
+  highlighted_text_1: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFBF24',
+      visible: true,
+    },
+  },
+  highlighted_text_2: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#6281C5',
+      visible: true,
+    },
+  },
+  highlighted_text_3: {
+    type: '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],
+    defaults: {
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#C5629A',
+      visible: true,
+    },
+  },
+} as const;

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

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

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

@@ -0,0 +1,61 @@
+export default {
+  en: {
+    '$label.content.tagline.label': 'Tagline',
+    '$label.content.section_title.label': 'Title',
+    '$label.content.highlighted_text_title.label': 'Highlighted text',
+    '$label.content.image_title.label': 'Section Image',
+    '$label.content.highlighted_text.label': 'Highlighted text',
+    '$label.content.deck.highlighted_text.title': 'Highlighted text',
+    '$label.content.deck.highlighted_text.label': 'Text',
+    '$label.content.deck.highlighted_text_image_on_hover.label': 'Image on hover',
+    '$label.content.deck.highlighted_text.add_button': 'Add new highlighted text',
+
+    '$label.design.background.label': 'Background color',
+    '$label.design.background.placeholder': 'Background color',
+    '$label.design.tagline.label': 'Tagline',
+    '$label.design.section_title.label': 'Title',
+    '$label.design.highlighted_text_1.label': 'Highlighted text 1',
+    '$label.design.highlighted_text_2.label': 'Highlighted text 2',
+    '$label.design.highlighted_text_3.label': 'Highlighted text 3',
+  },
+
+  nl: {
+    '$label.content.tagline.label': 'Slogan',
+    '$label.content.section_title.label': 'Titel',
+    '$label.content.highlighted_text_title.label': 'Gemarkeerde tekst',
+    '$label.content.image_title.label': 'Sectie afbeelding',
+    '$label.content.highlighted_text.label': 'Gemarkeerde tekst',
+    '$label.content.deck.highlighted_text.title': 'Gemarkeerde tekst',
+    '$label.content.deck.highlighted_text.label': 'Tekst',
+    '$label.content.deck.highlighted_text_image_on_hover.label': 'Afbeelding bij hover',
+    '$label.content.deck.highlighted_text.add_button': 'Nieuwe gemarkeerde tekst toevoegen',
+
+    '$label.design.background.label': 'Achtergrondkleur',
+    '$label.design.background.placeholder': 'Achtergrondkleur',
+    '$label.design.tagline.label': 'Slogan',
+    '$label.design.section_title.label': 'Titel',
+    '$label.design.highlighted_text_1.label': 'Gemarkeerde tekst 1',
+    '$label.design.highlighted_text_2.label': 'Gemarkeerde tekst 2',
+    '$label.design.highlighted_text_3.label': 'Gemarkeerde tekst 3',
+  },
+
+  fr: {
+    '$label.content.tagline.label': 'Slogan',
+    '$label.content.section_title.label': 'Titre',
+    '$label.content.highlighted_text_title.label': 'Texte en surbrillance',
+    '$label.content.image_title.label': 'Image de la section',
+    '$label.content.highlighted_text.label': 'Texte en surbrillance',
+    '$label.content.deck.highlighted_text.title': 'Texte en surbrillance',
+    '$label.content.deck.highlighted_text.label': 'Texte',
+    '$label.content.deck.highlighted_text_image_on_hover.label': 'Image au survol',
+    '$label.content.deck.highlighted_text.add_button': 'Ajouter un nouveau texte en surbrillance',
+
+    '$label.design.background.label': 'Couleur de fond',
+    '$label.design.background.placeholder': 'Couleur de fond',
+    '$label.design.tagline.label': 'Slogan',
+    '$label.design.section_title.label': 'Titre',
+    '$label.design.highlighted_text_1.label': 'Texte en surbrillance 1',
+    '$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

@@ -0,0 +1,190 @@
+export default {
+  showcaseId: '1',
+  layoutId: 'Image_With_Border_Radius',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'fall_is_here_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    section_tagline: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_tagline.text',
+    },
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_title.text',
+    },
+    highlighted_text: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.highlighted_text_1.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'sweater_weather.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'sweater_weather.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'sweater_weather.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'sweater_weather.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'sweater_weather.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.highlighted_text_2.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'shop_chelsea_boots.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'shop_chelsea_boots.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'shop_chelsea_boots.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'shop_chelsea_boots.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'shop_chelsea_boots.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_1.highlighted_text_3.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'explore_our_holiday_gift_guide.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'explore_our_holiday_gift_guide.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'explore_our_holiday_gift_guide.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'explore_our_holiday_gift_guide.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'explore_our_holiday_gift_guide.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+    section_image: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'fall_is_here.jpg',
+          },
+          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: {},
+      },
+    },
+  },
+  design: {
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: '#FFFFFF',
+    },
+    section_tagline: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#F4EFE3',
+    },
+    section_title: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#000000',
+    },
+    highlighted_text_1: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFBF24',
+    },
+    highlighted_text_2: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#6281C5',
+    },
+    highlighted_text_3: {
+      type: 'TEXT',
+      font: 'noto_serif',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#C5629A',
+    },
+  },
+} as const;

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

@@ -0,0 +1,190 @@
+export default {
+  showcaseId: '2',
+  layoutId: 'Image_Without_Border_Radius',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'what_we_sell_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    section_tagline: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_2.section_tagline.text',
+    },
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_2.section_title.text',
+    },
+    highlighted_text: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.highlighted_text_1.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'mountain_and_road_bikes.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'mountain_and_road_bikes.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'mountain_and_road_bikes.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'mountain_and_road_bikes.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'mountain_and_road_bikes.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.highlighted_text_2.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'hybrid_bikes.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'hybrid_bikes.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'hybrid_bikes.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'hybrid_bikes.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'hybrid_bikes.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.highlighted_text_3.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'folding_bikes.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'folding_bikes.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'folding_bikes.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'folding_bikes.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'folding_bikes.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+    section_image: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'what_we_sell.jpg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'what_we_sell.jpg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'what_we_sell.jpg',
+          },
+          WEBP_LOW_RES: {
+            url: 'what_we_sell.jpg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'what_we_sell.jpg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+  },
+  design: {
+    background: {
+      type: 'BACKGROUND',
+      style: 'GRADIENT',
+      color: ['#131313', '#292929'],
+    },
+    section_tagline: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#F4EFE3',
+    },
+    section_title: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    highlighted_text_1: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#BAA33E',
+    },
+    highlighted_text_2: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#8A91D0',
+    },
+    highlighted_text_3: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#C3455C',
+    },
+  },
+} as const;