@lightspeed/crane 1.1.1 → 1.1.3

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;

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',
+  };
+}