@designcrowd/library.brand-page 6.0.11 → 6.0.13

package/lib/src/utils/minify-brand-page-metadata.js

@@ -156,6 +156,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('name', item.name, editor),
                         ...st('jobTitle', item.position, editor),
                         ...st('testimonials', item.testimonials, editor),
@@ -183,6 +184,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...includeImageWithKey(item.imageUrl),
                         ...st('title', item.title, editor),
                         ...st('paragraph', item.paragraph, editor),
@@ -212,6 +214,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.textItems) && {
                     textItems: c.textItems.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('text', item.text, editor),
                         ...(includeStyle(item.textStyle) && { textStyle: item.textStyle }),
                     })),
@@ -292,6 +295,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.links) && {
                     links: c.links.map((link, index) => ({
                         position: index + 1,
+                        ...(link.id && { id: link.id }),
                         ...(includeString(link.url) && { url: link.url }),
                         ...includeImageWithKey(link.imageUrl),
                     })),
@@ -331,6 +335,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.images) && {
                     images: c.images.map((img, index) => ({
                         position: index + 1,
+                        ...(img.id && { id: img.id }),
                         ...includeImageWithKey(img.imageUrl),
                         ...st('imageTitle', img.imageTitle, editor),
                     })),
@@ -371,7 +376,9 @@ const minifyFooter = (footer, logoAssetKey) => {
         logoImageWidth: footer.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
         socialLinks: footer.socialLinks?.length
-            ? footer.socialLinks.map((l) => ({
+            ? footer.socialLinks.map((l, index) => ({
+                position: index + 1,
+                ...(l.id && { id: l.id }),
                 imageUrl: l.imageUrl || '',
                 url: l.url || '',
             }))

package/package.json

@@ -1,12 +1,27 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.11",
+  "version": "6.0.13",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
   "types": "./lib/src/index.d.ts",
   "main": "./lib/src/index.mjs",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/src/index.d.ts",
+      "import": "./lib/src/index.mjs"
+    },
+    "./tracker": {
+      "types": "./lib/src/tracker.d.ts",
+      "import": "./lib/src/tracker.mjs"
+    },
+    "./lib/src/css/*": "./lib/src/css/*",
+    "./package.json": "./package.json"
+  },
   "files": [
     "lib",
     "src"

package/src/brand-page/components/image-gallery/ImageGallery.stories.ts

@@ -52,6 +52,7 @@ export const Carousel = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-carousel-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 300,
           height: 300,
@@ -83,6 +84,7 @@ export const Masonry = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-masonry-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 564,
           height: 416,
@@ -114,6 +116,7 @@ export const Grid = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-grid-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 564,
           height: 416,

package/src/brand-page/components/image-gallery/ImageGallery.test.ts

@@ -47,6 +47,7 @@ const createTestImageGalleryViewModel = (
   role: 'image-gallery',
   images: [
     {
+      id: 'gallery-item-1',
       imageUrl: faker.internet.url(),
       width: faker.datatype.number(1000),
       height: faker.datatype.number(1000),

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.ts

@@ -7,7 +7,8 @@ import type { ImageGalleryImageClickPayload } from '../models';
 import type { BrandPageContext, ImageGalleryItem } from '../../../models';
 import { getImageAltText } from '../../../utils';
 
-interface IndexedImageGalleryItem extends ImageGalleryItem {
+interface IndexedImageGalleryItem extends Omit<ImageGalleryItem, 'id'> {
+  // Local rendering index, distinct from the stable string `id` on ImageItem.
   id: number;
 }
 

package/src/brand-page/components/images-section/ImagesSection.stories.ts

@@ -50,8 +50,9 @@ export const Images = () => {
     data() {
       const content = createInitialImagesSectionContent();
 
-      content.items = new Array(2).fill(0).map(() => {
+      content.items = new Array(2).fill(0).map((_, i) => {
         return {
+          id: `images-section-item-${i}`,
           imageUrl:
             'https://bc-user-uploads.brandcrowd.com/public/media-int/6b3a4d19-e95c-4d59-aa22-ac033a2cec2f/1116870a-c672-4306-b515-32f8d5d6e10c',
           width: 564,

package/src/brand-page/components/social-links/SocialLinks.stories.ts

@@ -14,6 +14,7 @@ const viewModel: SocialLinksViewModel = {
   title: 'Follow us on',
   links: [
     {
+      id: 'social-link-facebook',
       imageUrl: 'facebook',
       url: '',
       imageTitle: '',
@@ -24,6 +25,7 @@ const viewModel: SocialLinksViewModel = {
       imageLink: '',
     },
     {
+      id: 'social-link-instagram',
       imageUrl: 'instagram',
       url: 'https://www.instagram.com',
       imageTitle: '',
@@ -34,6 +36,7 @@ const viewModel: SocialLinksViewModel = {
       imageLink: '',
     },
     {
+      id: 'social-link-empty',
       imageUrl: '',
       url: '',
       imageTitle: '',

package/src/brand-page/components/social-links/SocialLinks.vue.test.ts

@@ -53,6 +53,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
   isFullWidth: false,
   links: [
     {
+      id: 'social-link-facebook',
       imageUrl: 'facebook',
       url: 'https://www.facebook.com',
       imageTitle: '',
@@ -63,6 +64,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
       imageLink: '',
     },
     {
+      id: 'social-link-instagram',
       imageUrl: 'instagram',
       url: 'https://www.instagram.com',
       imageTitle: '',
@@ -73,6 +75,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
       imageLink: '',
     },
     {
+      id: 'social-link-twitter',
       imageUrl: 'twitter',
       url: 'https://www.twitter.com',
       imageTitle: '',
@@ -115,6 +118,7 @@ describe('Social Links', () => {
         isPreview: false,
         links: [
           {
+            id: 'social-link-facebook',
             imageUrl: 'facebook',
             url: '',
             imageTitle: '',
@@ -145,6 +149,7 @@ describe('Social Links', () => {
         isPreview: false,
         links: [
           {
+            id: 'social-link-facebook',
             imageUrl: 'facebook',
             url: 'https://www.fb.com',
             imageTitle: '',

package/src/brand-page/components/testimonial-section/__fixtures__/data.ts

@@ -14,6 +14,7 @@ export const viewModel: TestimonialSectionViewModel = {
   displayStyle: 'centered',
   items: [
     {
+      id: 'testimonial-1',
       testimonials: faker.lorem.paragraphs(1),
       imageUrl: unsplashImage,
       name: '1',
@@ -22,6 +23,7 @@ export const viewModel: TestimonialSectionViewModel = {
       colorReplacements: [],
     },
     {
+      id: 'testimonial-2',
       testimonials: faker.lorem.paragraphs(3),
       imageUrl: unsplashImage,
       name: '2',
@@ -30,6 +32,7 @@ export const viewModel: TestimonialSectionViewModel = {
       colorReplacements: [],
     },
     {
+      id: 'testimonial-3',
       testimonials: faker.lorem.paragraphs(5),
       imageUrl: 'https://source.unsplash.com/random/200x200?3',
       name: '3',

package/src/brand-page/components/text/Text.stories.ts

@@ -34,6 +34,7 @@ const BSviewModel: TextViewModel = {
   text: 'asdasjdlkasjmdlkmsad',
   textItems: [
     {
+      id: 'text-item-1',
       text: 'lorem ipsum',
       textStyle: {
         fontSize: '1rem',
@@ -42,6 +43,7 @@ const BSviewModel: TextViewModel = {
       },
     },
     {
+      id: 'text-item-2',
       text: 'lorem ipsum',
       textStyle: {
         fontSize: '1rem',

package/src/brand-page/models/index.ts

@@ -28,6 +28,7 @@ import { TEXT_STYLE_TYPES, TextStyles } from './styles.model';
 import { EMPTY_LOGO_IMAGE_MODEL, LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
+import * as uuid from 'uuid';
 import type { BrandPagePaymentConfig } from './payment.model';
 
 export * from './brand-page-context.model';
@@ -234,6 +235,13 @@ export interface ImageContent extends Content {
 }
 
 export interface ImageItem {
+  /**
+   * Stable per-item identifier. Mirrors the section-level `Content.id` one
+   * level deeper so AI tool calls can reference items by id rather than by
+   * positional index. Backfilled on load for persisted data that predates
+   * item ids (see ensureItemIds), so it is always present at runtime.
+   */
+  id: string;
   imageUrl: string;
   imageTitle: string;
   width: number;
@@ -466,6 +474,8 @@ export interface ShapeItem extends ImageItem {
 }
 
 export interface TestimonialItems {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   imageUrl: string;
   name: string;
   position: string;
@@ -483,6 +493,8 @@ export interface TestimonialItems {
 }
 
 export interface TextItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   text: string;
   textStyle: TextStyleDeclaration;
 
@@ -552,6 +564,8 @@ export interface AboutSectionContent extends Content {
 }
 
 export interface LinksItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   imageUrl: string;
   url: string;
   size?: string;
@@ -828,6 +842,7 @@ export abstract class AbstractPageFooterStyles {
     this.logoImageWidth = options.logoImageWidth || DEFAULT_LOGO_WIDTH;
     this.socialLinks = options.socialLinks || [
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'facebook',
@@ -837,6 +852,7 @@ export abstract class AbstractPageFooterStyles {
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'instagram',
@@ -846,6 +862,7 @@ export abstract class AbstractPageFooterStyles {
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'x',

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -57,6 +57,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -66,6 +67,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -75,6 +77,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -112,6 +115,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -121,6 +125,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -130,6 +135,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -457,7 +463,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }
@@ -520,6 +526,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -529,6 +536,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -538,6 +546,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -575,6 +584,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -584,6 +594,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -593,6 +604,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -760,6 +772,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "textColor": {},
             "textItems": [
               {
+                "id": "00000000-0000-4000-8000-000000000007",
                 "text": "Christmas",
                 "textStyle": {
                   "applyAutoScale": true,
@@ -903,7 +916,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }
@@ -966,6 +979,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -975,6 +989,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -984,6 +999,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -1021,6 +1037,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -1030,6 +1047,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -1039,6 +1057,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -1206,6 +1225,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
             "textColor": {},
             "textItems": [
               {
+                "id": "00000000-0000-4000-8000-000000000007",
                 "text": "Christmas",
                 "textStyle": {
                   "applyAutoScale": true,
@@ -1356,7 +1376,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       },
     },
     "userPromptContentKey": undefined,
-    "v": 17,
+    "v": 18,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -45,6 +45,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000004",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -54,6 +55,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000005",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -63,6 +65,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000006",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",
@@ -101,6 +104,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "socialLinks": [
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000001",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "facebook",
@@ -110,6 +114,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000002",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "instagram",
@@ -119,6 +124,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
         {
           "height": 0,
+          "id": "00000000-0000-4000-8000-000000000003",
           "imageLink": "",
           "imageTitle": "",
           "imageUrl": "x",

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -44,6 +44,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000004",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -53,6 +54,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000005",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -62,6 +64,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000006",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -100,6 +103,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000001",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -109,6 +113,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000002",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -118,6 +123,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000003",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -495,6 +501,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000004",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -504,6 +511,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000005",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -513,6 +521,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000006",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",
@@ -551,6 +560,7 @@ BrandPageModel {
     "socialLinks": [
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000001",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "facebook",
@@ -560,6 +570,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000002",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "instagram",
@@ -569,6 +580,7 @@ BrandPageModel {
       },
       {
         "height": 0,
+        "id": "00000000-0000-4000-8000-000000000003",
         "imageLink": "",
         "imageTitle": "",
         "imageUrl": "x",

package/src/brand-page/utils/migration/migration-01.ts

@@ -1,3 +1,4 @@
+import * as uuid from 'uuid';
 import {
   getLogoVariationIndexFromLogoImageUrl,
   getLogoDraftTokenFromLogoImageUrl,
@@ -101,6 +102,7 @@ export const applyTextContentTextToTextItemsMigration = (
         }
 
         const textItem: TextItem = {
+          id: uuid.v4(),
           text: item.text,
           textStyle,
         };