@lightspeed/crane 1.1.2 → 1.2.0

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

@@ -0,0 +1,49 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section – Tag lines',
+    '$label.showcase_1.section_tagline.text': 'Seasonal',
+    '$label.showcase_1.section_title.text': 'Fall is here:',
+    '$label.showcase_1.highlighted_text_1.text': 'sweater weather',
+    '$label.showcase_1.highlighted_text_2.text': 'shop chelsea boots',
+    '$label.showcase_1.highlighted_text_3.text': 'explore our holiday gift guide',
+
+    '$label.showcase_2.blockName': 'Reference Section – Tag lines',
+    '$label.showcase_2.section_tagline.text': 'Our bikes',
+    '$label.showcase_2.section_title.text': 'What we sell:',
+    '$label.showcase_2.highlighted_text_1.text': 'mountain and road bikes',
+    '$label.showcase_2.highlighted_text_2.text': 'hybrid bikes',
+    '$label.showcase_2.highlighted_text_3.text': 'folding bikes',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentie Sectie – Taglines',
+    '$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': 'Referentie Sectie – Taglines',
+    '$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': 'Section de référence – Slogans',
+    '$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': 'Section de référence – Slogans',
+    '$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/tag-lines/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/shared/components/Button.vue

@@ -0,0 +1,151 @@
+<template>
+  <button
+    type="button"
+    :class="buttonClass"
+    @click="content.performAction"
+  >
+    {{ content.title }}
+    <div
+      v-if="isLink"
+      class="button__icon"
+    >
+      <svg
+        width="14"
+        height="11"
+        viewBox="0 0 14 11"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          stroke="currentColor"
+          stroke-linecap="round"
+          fill="none"
+          fill-rule="evenodd"
+        >
+          <path d="M9.5.5l4 5-4 5" stroke-linejoin="round" />
+          <path d="M13.5 5.5H.5" />
+        </g>
+      </svg>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+import { ButtonContent } from '@lightspeed/crane';
+
+import { calculateFontColor } from '../utils/color.ts';
+
+const props = defineProps<{
+  content: ButtonContent;
+  design: ButtonDesignData;
+}>();
+
+const color = computed<Color>(() => props.design.color as Color);
+const fontColor = computed<string>(() => calculateFontColor(color.value.rgba));
+
+const isLink = computed<boolean>(() => props.design.appearance === 'text-link');
+
+const buttonClass = computed(() => ([
+  'button',
+  {
+    small: props.design.size === 'small',
+    medium: props.design.size === 'medium',
+    large: props.design.size === 'large',
+    outline: props.design.appearance === 'outline-button',
+    solid: props.design.appearance === 'solid-button',
+    link: isLink.value,
+    pill: props.design.style === 'pill',
+    rectangle: props.design.style === 'rectangle',
+    round: props.design.style === 'round-corner',
+  },
+]));
+
+const buttonStyles = computed<CSSProperties>(() => {
+  const style: CSSProperties = {
+    fontFamily: props.design.font,
+    color: fontColor.value,
+  };
+
+  if (props.design.appearance === 'solid-button') {
+    style.backgroundColor = color.value.raw;
+  }
+
+  if (props.design.appearance !== 'solid-button') {
+    style.color = color.value.raw;
+  }
+
+  return style;
+});
+</script>
+
+<style scoped lang="scss">
+.button {
+  --font-family: v-bind(buttonStyles.fontFamily);
+  --background-color: v-bind(buttonStyles.backgroundColor);
+  --color: v-bind(buttonStyles.color);
+
+  padding: 0 24px;
+  background-color: var(--background-color);
+  font-family: var(--font-family);
+  font-weight: 700;
+  color: var(--color);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  transition: opacity .2s ease-in-out;
+
+  &:hover {
+    opacity: 0.5;
+
+    .button__icon {
+      transform: translateX(4px);
+    }
+  }
+
+  &__icon {
+    margin-left: 5px;
+    transition: transform 0.3s ease;
+  }
+
+  &.pill {
+    border-radius: 32px;
+  }
+
+  &.round {
+    border-radius: 10px;
+  }
+
+  &.small {
+    height: 30px;
+    font-size: 12px;
+  }
+
+  &.medium {
+    height: 48px;
+    font-size: 16px;
+  }
+
+  &.large {
+    height: 60px;
+    font-size: 16px;
+  }
+
+  &.solid {
+    border: none;
+  }
+
+  &.outline {
+    border: 2px solid;
+    background: none;
+  }
+
+  &.link {
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    padding: 0;
+  }
+}
+</style>

package/template/reference/shared/components/SectionWrapper.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="section">
+    <div class="section__wrapper">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.section {
+  padding: 60px 20px;
+
+  @media screen and (min-width: 700px) {
+    padding: 75px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding: 100px;
+  }
+
+  &__wrapper {
+    max-width: 1120px;
+    margin: 0 auto;
+  }
+}
+</style>

package/template/reference/shared/components/Tagline.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="tagline">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties } from 'vue';
+import { getTextStyles } from '../utils/styles.ts';
+
+const props = defineProps<{
+  design: TextDesignData;
+}>();
+
+const backgroundLightness = computed<string>(() => `${(props.design.color as Color).hsl.l * 100}%`);
+const taglineStyles = computed<CSSProperties>(() => getTextStyles(props.design));
+</script>
+
+<style lang="scss" scoped>
+@function set-contrast-color($lightness) {
+  $threshold: 60%;
+  $contrastLightness: clamp(0%, calc((#{$lightness} - #{$threshold}) * -100), 100%);
+
+  @return hsl(0, 0%, $contrastLightness);
+}
+
+.tagline {
+  --font-size: v-bind(taglineStyles.fontSize);
+  --font-family: v-bind(taglineStyles.fontFamily);
+  --background-color: v-bind(taglineStyles.background);
+  --background-color-l: v-bind(backgroundLightness);
+  --font-style: v-bind(taglineStyles.fontStyle);
+  --font-weight: v-bind(taglineStyles.fontWeight);
+
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+  background: var(--background-color);
+  color: set-contrast-color(var(--background-color-l));
+  font-style: var(--font-style);
+  font-weight: var(--font-weight);
+}
+</style>

package/template/reference/shared/utils/color.ts

@@ -0,0 +1,16 @@
+export function isColor(color: Color | GlobalColorsString): color is Color {
+  return typeof color === 'object' && 'hex' in color;
+}
+
+export function getColorString(color: Color | GlobalColorsString | string): string {
+  if (typeof color !== 'string' && isColor(color)) {
+    return color.hex;
+  }
+
+  return color;
+}
+
+export function calculateFontColor(rgbaColor: RGBAColor): string {
+  const brightness = (0.299 * rgbaColor.r + 0.587 * rgbaColor.g + 0.114 * rgbaColor.b) / 255;
+  return brightness < 0.5 ? '#ffffff' : '#000000';
+}

package/template/reference/shared/utils/styles.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'vue';
+import { getColorString } from './color.ts';
+
+export function getTextStyles(design: TextDesignData): CSSProperties {
+  return {
+    fontSize: `${design.size}px`,
+    fontFamily: design.font,
+    background: design.color ? getColorString(design.color) : undefined,
+    fontStyle: design.italic ? 'italic' : 'normal',
+    fontWeight: design.bold ? 'bold' : 'normal',
+  };
+}

package/template/reference/templates/reference-template-apparel.ts

@@ -0,0 +1,44 @@
+export default {
+  metadata: {
+    name: 'Reference Template — Apparel',
+    description: 'This is a reference template geared towards apparel merchants to aid development and act as a starting point for your custom template.',
+    preview_url: 'https://reference-template-apparel.company.site/',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'reference_template_apparel_cover_image.jpg',
+        },
+      },
+    },
+  },
+  sections: [
+    {
+      type: 'default',
+      id: 'header',
+    },
+    {
+      type: 'custom',
+      id: 'intro-slider',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'tag-lines',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'about-us',
+      showcase_id: '1',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '1',
+    },
+    {
+      type: 'default',
+      id: 'footer',
+    },
+  ],
+};

package/template/reference/templates/reference-template-bike.ts

@@ -0,0 +1,44 @@
+export default {
+  metadata: {
+    name: 'Reference Template — Bike',
+    description: 'This is a reference template geared towards bike shops to aid development and act as a starting point for your custom template.',
+    preview_url: 'https://reference-template-bike.company.site/',
+    cover_image: {
+      set: {
+        ORIGINAL: {
+          url: 'reference_template_bike_cover_image.jpg',
+        },
+      },
+    },
+  },
+  sections: [
+    {
+      type: 'default',
+      id: 'header',
+    },
+    {
+      type: 'custom',
+      id: 'intro-slider',
+      showcase_id: '2',
+    },
+    {
+      type: 'custom',
+      id: 'example-section',
+      showcase_id: '3',
+    },
+    {
+      type: 'custom',
+      id: 'tag-lines',
+      showcase_id: '2',
+    },
+    {
+      type: 'custom',
+      id: 'about-us',
+      showcase_id: '2',
+    },
+    {
+      type: 'default',
+      id: 'footer',
+    },
+  ],
+};

package/template/sections/example-section/ExampleSection.vue

@@ -1,31 +1,38 @@
 <template>
-  <div
-    class="custom-block"
+  <SectionWrapper
+    class="example-section"
     :style="backgroundStyle"
   >
-    <div>
-      <CustomSectionExampleTitle />
-      <div class="custom-block__blank_space" />
-      <CustomSectionExampleImagesGrid />
-    </div>
-  </div>
+    <CustomSectionExampleTitle />
+    <div class="example-section__blank_space" />
+    <CustomSectionExampleImagesGrid />
+    <div class="custom-block__blank_space" />
+    <Button />
+    <Toggle />
+    <Selectbox />
+  </SectionWrapper>
 </template>
 
 <script setup lang="ts">
-import { useBackgroundElementDesign } from '@lightspeed/crane';
+import {
+  useBackgroundElementDesign,
+} from '@lightspeed/crane';
 import { computed } from 'vue';
 import { Design } from './type.ts';
 import CustomSectionExampleTitle from './component/title/Title.vue';
 import CustomSectionExampleImagesGrid from './component/image/ImagesGrid.vue';
+import SectionWrapper from '../../shared/components/SectionWrapper.vue';
+import Selectbox from './component/selectbox/Selectbox.vue';
+import Toggle from './component/toggle/Toggle.vue';
+import Button from './component/button/Button.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,
+  solidColor: backgroundDesign.background?.solid?.color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor,
+  toColor: backgroundDesign.background?.gradient?.toColor,
 }));
-
 const backgroundStyle = computed(() => {
   if (background.value.type === 'gradient') {
     return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
@@ -35,17 +42,7 @@ const backgroundStyle = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.custom-block {
-  padding: 50px;
-
-  @media screen and (min-width: 700px) {
-    padding: 75px;
-  }
-
-  @media screen and (min-width: 1200px) {
-    padding: 100px;
-  }
-
+.example-section {
   &__blank_space {
     height: 40px;
   }

package/template/sections/example-section/assets/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M19.22 1.735c.528.012.97.42 1.037.933l.009.112.09 4.09a.97.97 0 01-1 1 1.08 1.08 0 01-1.037-.934l-.008-.111-.037-1.684-6.809 6.809c-.438.439-.877.47-1.314.095l-.101-.094c-.438-.437-.469-.876-.093-1.314l.094-.101 6.809-6.809-1.684-.037a1.08 1.08 0 01-1.034-.916l-.01-.128a.969.969 0 01.888-.997l.111-.003 4.09.09zM19 14.5a4.5 4.5 0 01-4.288 4.495L14.5 19h-7a4.5 4.5 0 01-4.495-4.288L3 14.5v-7a4.5 4.5 0 014.288-4.495L7.5 3h2.625a1 1 0 01.117 1.993L10.125 5H7.5a2.5 2.5 0 00-2.495 2.336L5 7.5v7a2.5 2.5 0 002.336 2.495L7.5 17h7a2.5 2.5 0 002.495-2.336L17 14.5v-2.625a1 1 0 011.993-.117l.007.117V14.5z" />
+</svg>

package/template/sections/example-section/component/button/Button.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <button
+      v-if="button?.hasTitle && button?.hasLink"
+      class="pretty-button"
+      type="button"
+      @click="button.performAction"
+    >
+      <div class="button-content">
+        <img :src="arrowIcon" alt="Arrow Icon" width="22" height="22" />
+        <div style="margin-left: 4px">
+          {{ button.title }}
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  useButtonElementContent,
+} from '@lightspeed/crane';
+import { Content } from '../../type.ts';
+import arrowIcon from '../../assets/arrow.svg';
+
+const button = useButtonElementContent<Content>('button');
+</script>
+
+<style lang="scss" scoped>
+.button-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pretty-button {
+  background-color: #FFFFFF;
+  border: 1px solid #222222;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #222222;
+  cursor: pointer;
+  display: inline-block;
+  font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 12px 20px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: box-shadow 0.2s, transform 0.1s ease;
+  user-select: none;
+  -webkit-user-select: none;
+  width: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    background-color: #F7F7F7;
+    border-color: #222222;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    background-color: #F7F7F7;
+    border-color: #000000;
+    transform: scale(0.96);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+
+  &:focus-visible {
+    box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
+    transition: box-shadow 0.2s;
+  }
+
+  &:disabled {
+    background-color: #FFFFFF;
+    border-color: #DDDDDD;
+    color: #DDDDDD;
+    cursor: not-allowed;
+    opacity: 1;
+    box-shadow: none;
+  }
+}
+</style>

package/template/sections/example-section/component/selectbox/Selectbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <div v-if="selectbox?.hasContent" class="control-item" :style="{ color: textColor }">
+    <div>
+      <h1>Selected: {{ selectbox.value }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBackgroundElementDesign, useSelectboxElementContent } from '@lightspeed/crane';
+import { Content, Design } from '../../type.ts';
+import { isDark } from '../../../../shared/utils.ts';
+
+const selectbox = useSelectboxElementContent<Content>('selectbox');
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+
+const backgroundColor = computed(() => {
+  const currentColor = backgroundDesign.background?.type === 'solid' ? backgroundDesign.background?.solid?.color?.hex
+    : backgroundDesign.background?.gradient?.fromColor?.hex;
+  return currentColor || '#ffffff';
+});
+
+const textColor = computed(() => (isDark(backgroundColor.value) ? 'white' : 'black'));
+</script>
+
+<style lang="scss" scoped>
+.control-item {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  label {
+    font-weight: 500;
+  }
+
+  select {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+</style>