@lightspeed/crane 3.5.1-rc.0 → 3.5.1-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/crane",
-  "version": "3.5.1-rc.0",
+  "version": "3.5.1-rc.2",
   "type": "module",
   "bin": "bin/crane.js",
   "main": "./dist/app.mjs",

package/template/announcement-bars/example-announcement-bar/ExampleAnnouncementBar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { getContrastTextColor, useBackgroundElementDesign, useInputboxElementContent } from '@lightspeed/crane-api';
+import { computed } from 'vue';
+
+import type { Content, Design } from './type.ts';
+
+const messageContent = useInputboxElementContent<Content>('message');
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+
+const backgroundColor = computed(() => backgroundDesign.background?.solid?.color?.hex ?? '#1F2937');
+const textColor = computed(() => getContrastTextColor(backgroundColor.value, '#1F2937', '#FFFFFF'));
+</script>
+
+<template>
+  <div
+    class="announcement-bar"
+    :style="{ backgroundColor, color: textColor }"
+  >
+    <span class="text">{{ messageContent.value }}</span>
+  </div>
+</template>
+
+<style scoped>
+.announcement-bar {
+  width: 100%;
+  padding: 10px 16px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.text {
+  display: inline-block;
+}
+</style>

package/template/announcement-bars/example-announcement-bar/client.ts

@@ -0,0 +1,6 @@
+import { createVueClientApp } from '@lightspeed/crane-api';
+
+import ExampleAnnouncementBar from './ExampleAnnouncementBar.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(ExampleAnnouncementBar);

package/template/announcement-bars/example-announcement-bar/server.ts

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

package/template/announcement-bars/example-announcement-bar/settings/content.ts

@@ -0,0 +1,8 @@
+import { content } from '@lightspeed/crane-api';
+
+export default {
+  message: content.inputbox({
+    label: '$label.message.label',
+    placeholder: '$label.message.placeholder',
+  }),
+};

package/template/announcement-bars/example-announcement-bar/settings/design.ts

@@ -0,0 +1,16 @@
+import { design } from '@lightspeed/crane-api';
+
+export default {
+  aboveHeader: design.toggle({
+    label: '$label.aboveHeader.label',
+    defaults: { enabled: true },
+  }),
+  background: design.background({
+    label: '$label.background.label',
+    colors: ['#1F2937', '#FFFFFF', '#C7352E'],
+    defaults: {
+      style: 'COLOR',
+      color: '#1F2937',
+    },
+  }),
+};

package/template/announcement-bars/example-announcement-bar/settings/layout.ts

@@ -0,0 +1 @@
+export default [];

package/template/announcement-bars/example-announcement-bar/settings/translations.ts

@@ -0,0 +1,17 @@
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
+  en: {
+    '$label.aboveHeader.label': 'Show above header',
+    '$label.message.label': 'Announcement message',
+    '$label.message.placeholder': 'Free shipping over $50!',
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.aboveHeader.label': 'Boven koptekst tonen',
+    '$label.message.label': 'Aankondigingsbericht',
+    '$label.message.placeholder': 'Gratis verzending vanaf $50!',
+    '$label.background.label': 'Achtergrond',
+  },
+});

package/template/announcement-bars/example-announcement-bar/showcases/1.ts

@@ -0,0 +1,33 @@
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'example_announcement_bar_showcase_1_preview.png',
+        width: 1280,
+        height: 290,
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    message: content.default.inputbox({
+      text: '$label.showcase_1.message.text',
+    }),
+  },
+  design: {
+    aboveHeader: design.default.toggle({
+      enabled: true,
+    }),
+    background: design.default.background({
+      style: 'COLOR',
+      color: '#1F2937',
+    }),
+  },
+});

package/template/announcement-bars/example-announcement-bar/showcases/2.ts

@@ -0,0 +1,33 @@
+import {
+  content,
+  design,
+  showcase,
+} from '@lightspeed/crane-api';
+
+export default showcase.init({
+  showcaseId: '2',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'example_announcement_bar_showcase_2_preview.png',
+        width: 1280,
+        height: 290,
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    message: content.default.inputbox({
+      text: '$label.showcase_2.message.text',
+    }),
+  },
+  design: {
+    aboveHeader: design.default.toggle({
+      enabled: false,
+    }),
+    background: design.default.background({
+      style: 'COLOR',
+      color: '#C7352E',
+    }),
+  },
+});

package/template/announcement-bars/example-announcement-bar/showcases/translations.ts

@@ -0,0 +1,17 @@
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
+  en: {
+    '$label.showcase_1.blockName': 'Promo Announcement',
+    '$label.showcase_1.message.text': 'Free shipping on orders over $50!',
+    '$label.showcase_2.blockName': 'Sale Announcement',
+    '$label.showcase_2.message.text': 'Limited time sale: save 20% today!',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Promo aankondiging',
+    '$label.showcase_1.message.text': 'Gratis verzending vanaf $50!',
+    '$label.showcase_2.blockName': 'Uitverkoop aankondiging',
+    '$label.showcase_2.message.text': 'Tijdelijke uitverkoop: bespaar vandaag 20%!',
+  },
+});

package/template/announcement-bars/example-announcement-bar/type.ts

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/preview/sections/preview.html

@@ -165,6 +165,7 @@
     ...import.meta.glob('../../dist/sections/*/js/showcases/*.mjs'),
     ...import.meta.glob('../../dist/headers/*/js/showcases/*.mjs'),
     ...import.meta.glob('../../dist/footers/*/js/showcases/*.mjs'),
+    ...import.meta.glob('../../dist/announcement-bars/*/js/showcases/*.mjs'),
   };
   const select = document.getElementById('showcaseDropdown');
   const showCaseOptions = dropdownOptions(showcaseModules);

package/template/preview/shared/preview.ts

@@ -2,13 +2,14 @@
 import { getExternalContentMock } from './mock';
 import { loadModule, renderServerModule } from './utils';
 
-export type BlockType = 'sections' | 'headers' | 'footers';
-export const BLOCK_TYPES: BlockType[] = ['sections', 'headers', 'footers'];
+export type BlockType = 'sections' | 'headers' | 'footers' | 'announcement-bars';
+export const BLOCK_TYPES: BlockType[] = ['sections', 'headers', 'footers', 'announcement-bars'];
 
 const BLOCK_TYPE_LABELS: Record<BlockType, string> = {
   sections: 'Section',
   headers: 'Header',
   footers: 'Footer',
+  'announcement-bars': 'Announcement Bar',
 };
 
 let distFolderPath: string | null = null;
@@ -490,7 +491,7 @@ function getContentToRender(
 
 export function dropdownOptions(showcaseModules: Record<string, any>): Array<{ value: string; label: string }> {
   return Object.keys(showcaseModules).map((path) => {
-    const match = path.match(/\/(sections|headers|footers)\/([^/]+)\/js\/showcases\/(\d+)\.mjs$/);
+    const match = path.match(/\/(sections|headers|footers|announcement-bars)\/([^/]+)\/js\/showcases\/(\d+)\.mjs$/);
     if (!match) return null;
     const blockType = match[1] as BlockType;
     const blockName = match[2];