@lightspeed/crane 1.1.2 → 1.2.0

package/template/reference/sections/intro-slider/showcases/2.ts

@@ -0,0 +1,271 @@
+export default {
+  showcaseId: '2',
+  layoutId: 'Wide_Title_And_Images_Without_Border_Radius',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_2_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    section_title: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.section_title.text',
+    },
+    section_tagline: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_2.section_tagline.text',
+    },
+    section_button: {
+      type: 'BUTTON',
+      title: '$label.showcase_2.section_button.title',
+      buttonType: 'HYPER_LINK',
+    },
+    slider: {
+      type: 'DECK',
+      cards: [
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_1.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_1.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_1.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_1@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_1@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_1@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_2.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_2.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_2.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_2@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_2@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_2@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_3.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_3.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_3.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_3@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_3@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_3@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_4.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_4.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_4.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_4@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_4@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_4@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_5.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_5.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_5.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_5@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_5@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_5@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+        {
+          settings: {
+            image_text: {
+              type: 'INPUTBOX',
+              text: '$label.showcase_2.slide_text_6.text',
+            },
+            image_content: {
+              type: 'IMAGE',
+              imageData: {
+                set: {
+                  LOW_RES: {
+                    url: 'bike_6.jpg',
+                  },
+                  MOBILE_WEBP_LOW_RES: {
+                    url: 'bike_6.jpg',
+                  },
+                  MOBILE_WEBP_HI_RES: {
+                    url: 'bike_6@2x.jpg',
+                  },
+                  WEBP_LOW_RES: {
+                    url: 'bike_6@2x.jpg',
+                  },
+                  WEBP_HI_2X_RES: {
+                    url: 'bike_6@2x.jpg',
+                  },
+                },
+                borderInfo: {},
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 48,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    section_description: {
+      type: 'TEXT',
+      font: 'inter',
+      size: 16,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    section_tagline: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 16,
+      bold: false,
+      italic: false,
+      color: '#FFB92E',
+    },
+    section_button: {
+      type: 'BUTTON',
+      font: 'inter',
+      appearance: 'SOLID',
+      size: 'LARGE',
+      shape: 'RECTANGLE',
+      color: '#FFFFFF',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: '#000000',
+    },
+    image_text: {
+      type: 'TEXT',
+      font: 'pt_mono',
+      size: 24,
+      bold: true,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#000000', '#000000'],
+    },
+  },
+} as const;

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

@@ -0,0 +1,88 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section — Slider',
+
+    '$label.showcase_1.section_title.text': 'Discover the new items\nin our collection',
+    '$label.showcase_1.section_description.text': 'Find something for every occasion',
+    '$label.showcase_1.section_tagline.text': 'New collection',
+    '$label.showcase_1.section_button.title': 'Shop now',
+
+    '$label.showcase_1.slide_text_1.text': 'Cosmetics',
+    '$label.showcase_1.slide_text_2.text': 'Hats & Caps',
+    '$label.showcase_1.slide_text_3.text': 'Bags',
+    '$label.showcase_1.slide_text_4.text': 'Glasses',
+    '$label.showcase_1.slide_text_5.text': 'Dresses',
+    '$label.showcase_1.slide_text_6.text': 'Classic shoes',
+
+    '$label.showcase_2.blockName': 'Reference Section — Slider',
+
+    '$label.showcase_2.section_title.text': 'Get inspired by our clients bikes.',
+    '$label.showcase_2.section_tagline.text': 'Over 9000 bikes has been sold',
+    '$label.showcase_2.section_button.title': 'Explore our Instagram',
+
+    '$label.showcase_2.slide_text_1.text': 'Bike name 1',
+    '$label.showcase_2.slide_text_2.text': 'Bike name 2',
+    '$label.showcase_2.slide_text_3.text': 'Bike name 3',
+    '$label.showcase_2.slide_text_4.text': 'Bike name 4',
+    '$label.showcase_2.slide_text_5.text': 'Bike name 5',
+    '$label.showcase_2.slide_text_6.text': 'Bike name 6',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentie Sectie — Slider',
+
+    '$label.showcase_1.section_title.text': 'Ontdek de nieuwe items\nin onze collectie',
+    '$label.showcase_1.section_description.text': 'Vind iets voor elke gelegenheid',
+    '$label.showcase_1.section_tagline.text': 'Nieuwe collectie',
+    '$label.showcase_1.section_button.title': 'Shop nu',
+
+    '$label.showcase_1.slide_text_1.text': 'Cosmetica',
+    '$label.showcase_1.slide_text_2.text': 'Hoeden & Petten',
+    '$label.showcase_1.slide_text_3.text': 'Tassen',
+    '$label.showcase_1.slide_text_4.text': 'Brillen',
+    '$label.showcase_1.slide_text_5.text': 'Jurken',
+    '$label.showcase_1.slide_text_6.text': 'Klassieke schoenen',
+
+    '$label.showcase_2.blockName': 'Referentie Sectie — Slider',
+
+    '$label.showcase_2.section_title.text': 'Laat je inspireren door de fietsen van onze klanten.',
+    '$label.showcase_2.section_tagline.text': 'Meer dan 900 fietsen zijn verkocht',
+    '$label.showcase_2.section_button.title': 'Ontdek onze Instagram',
+
+    '$label.showcase_2.slide_text_1.text': 'Fiets naam 1',
+    '$label.showcase_2.slide_text_2.text': 'Fiets naam 2',
+    '$label.showcase_2.slide_text_3.text': 'Fiets naam 3',
+    '$label.showcase_2.slide_text_4.text': 'Fiets naam 4',
+    '$label.showcase_2.slide_text_5.text': 'Fiets naam 5',
+    '$label.showcase_2.slide_text_6.text': 'Fiets naam 6',
+  },
+
+  fr: {
+    '$label.showcase_1.blockName': 'Section de Référence — Slider',
+
+    '$label.showcase_1.section_title.text': 'Découvrez les nouveaux articles\nde notre collection',
+    '$label.showcase_1.section_description.text': 'Trouvez quelque chose pour chaque occasion',
+    '$label.showcase_1.section_tagline.text': 'Nouvelle collection',
+    '$label.showcase_1.section_button.title': 'Achetez maintenant',
+
+    '$label.showcase_1.slide_text_1.text': 'Cosmétiques',
+    '$label.showcase_1.slide_text_2.text': 'Chapeaux & Casquettes',
+    '$label.showcase_1.slide_text_3.text': 'Sacs',
+    '$label.showcase_1.slide_text_4.text': 'Lunettes',
+    '$label.showcase_1.slide_text_5.text': 'Robes',
+    '$label.showcase_1.slide_text_6.text': 'Chaussures classiques',
+
+    '$label.showcase_2.blockName': 'Section de Référence — Slider',
+
+    '$label.showcase_2.section_title.text': 'Inspirez-vous des vélos de nos clients.',
+    '$label.showcase_2.section_tagline.text': 'Plus de 9000 vélos ont été vendus',
+    '$label.showcase_2.section_button.title': 'Explorez notre Instagram',
+
+    '$label.showcase_2.slide_text_1.text': 'Nom du vélo 1',
+    '$label.showcase_2.slide_text_2.text': 'Nom du vélo 2',
+    '$label.showcase_2.slide_text_3.text': 'Nom du vélo 3',
+    '$label.showcase_2.slide_text_4.text': 'Nom du vélo 4',
+    '$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/intro-slider/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/reference/sections/tag-lines/TagLines.vue

@@ -0,0 +1,158 @@
+<template>
+  <SectionWrapper
+    class="tag-lines-section"
+    :style="backgroundStyle"
+  >
+    <div class="tag-lines-section__wrapper">
+      <div class="tag-lines-section__info">
+        <Tagline
+          v-if="isTaglineVisible"
+          class="tag-lines-section__tagline"
+          :design="taglineDesign"
+        >
+          {{ taglineContent.value }}
+        </Tagline>
+
+        <Title
+          v-if="isTitleVisible"
+          class="tag-lines-section__title"
+        />
+
+        <div class="tag-lines-section__highlighted-texts">
+          <template
+            v-for="(element, index) in highlightedTextElements"
+          >
+            <HighlightedText
+              v-if="element.design.visible"
+              :key="`${element.text?.value}__${index}`"
+              :class="[
+                'tag-lines-section__highlighted-text',
+                `tag-lines-section__highlighted-text--${index + 1}`,
+              ]"
+              :design="element.design"
+            >
+              {{ element.text?.value }}
+            </HighlightedText>
+          </template>
+        </div>
+      </div>
+
+      <SectionImage
+        class="tag-lines-section__image"
+        :highlights="highlightedTextElements"
+        :section-image="sectionImageContent"
+      />
+    </div>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+import {
+  useBackgroundElementDesign,
+  useImageElementContent,
+  useTextElementDesign,
+  useInputboxElementContent,
+} from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Content, Design } from './type.ts';
+import Tagline from '../../shared/components/Tagline.vue';
+import Title from './component/Title.vue';
+import SectionImage from './component/SectionImage.vue';
+import HighlightedText from './component/HighlightedText.vue';
+import { useHighlightedTextElementList } from './composables/highlighted-text-image-list.ts';
+import SectionWrapper from '../../shared/components/SectionWrapper.vue';
+
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed(() => {
+  if (background.value.type === 'gradient') {
+    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
+  }
+
+  return { 'background-color': background.value.solidColor.hex };
+});
+
+const taglineContent = useInputboxElementContent<Content>('section_tagline');
+const taglineDesign = useTextElementDesign<Design>('section_tagline') as TextDesignData;
+const isTaglineVisible = computed<boolean>(() => !!taglineDesign.visible && taglineContent.hasContent);
+
+const titleContent = useInputboxElementContent<Content>('section_title');
+const titleDesign = useTextElementDesign<Design>('section_title');
+const isTitleVisible = computed<boolean>(() => !!titleDesign.visible && titleContent.hasContent);
+
+const sectionImageContent = useImageElementContent<Content>('section_image');
+
+const {
+  highlightedTextElements,
+} = useHighlightedTextElementList();
+
+</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;
+    }
+  }
+
+  &__info {
+    width: 100%;
+
+    @media screen and (min-width: 900px) {
+      width: unset;
+      max-width: 530px;
+    }
+  }
+
+  &__tagline {
+    margin-bottom: 24px;
+  }
+
+  &__image {
+    width: 100%;
+
+    @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;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__highlighted-text {
+    transition: opacity ease-in-out 0.3s;
+  }
+
+  &: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;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="highlighted-text">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+
+const props = defineProps<{
+  design: TextDesignData
+}>();
+
+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,
+  fontStyle: props.design.italic ? 'italic' : 'normal',
+  fontWeight: props.design.bold ? 'bold' : 'normal',
+}));
+</script>
+
+<style lang="scss" scoped>
+.highlighted-text {
+  --font-size: v-bind(textStyle.fontSize);
+  --font-family: v-bind(textStyle.fontFamily);
+  --color: v-bind(textStyle.color);
+  --font-style: v-bind(textStyle.fontStyle);
+  --font-weight: v-bind(textStyle.fontWeight);
+
+  --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);
+  line-height: 1.5;
+  cursor: pointer;
+  text-decoration: underline;
+
+  @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/component/SectionImage.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :class="imageClass">
+    <img
+      v-if="sectionImage?.hasContent"
+      class="section-image__element"
+      :src="sectionImage.highResolutionDesktopImage"
+      loading="lazy"
+      alt=""
+    />
+
+    <template v-for="(element, index) in highlights" :key="`${element.text?.value}__${index}`">
+      <img
+        v-if="element.design.visible"
+        :class="[
+          'section-image__element',
+          'section-image__element--highlighted',
+          `section-image__element--${index + 1}`,
+        ]"
+        :src="element.image?.highResolutionDesktopImage"
+        loading="lazy"
+        alt=""
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ImageContent,
+  useLayoutElementDesign,
+} from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Highlight } from '../composables/highlighted-text-image-list.ts';
+
+defineProps<{
+  sectionImage: ImageContent;
+  highlights: Highlight[];
+}>();
+
+const layoutDesign = useLayoutElementDesign();
+
+const imageClass = computed(() => [
+  'section-image',
+  {
+    'section-image--with-border-radius': layoutDesign.layout === 'Image_With_Border_Radius',
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+.section-image {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 0.785;
+
+  &--with-border-radius {
+    border-radius: 24px;
+
+    @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;
+
+    &--highlighted {
+      opacity: 0;
+    }
+  }
+}
+</style>