@lightspeed/crane 1.1.2 → 1.1.3

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>

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;