@designcrowd/library.brand-page 6.2.7 → 6.2.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.2.7",
+  "version": "6.2.8",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -29,7 +29,7 @@
   "scripts": {
     "dev": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt dev nuxtapp",
     "dev:dcom": "export tailwindTheme=designCom && nuxt dev nuxtapp",
-    "docker:publish": "docker build -t bp-maker:latest . --file ./build/Dockerfile.brand-page-lib-publish --build-arg NPM_TOKEN=$NPM_TOKEN --no-cache && cross-env NPM_TOKEN=",
+    "docker:publish": "DOCKER_BUILDKIT=1 docker build -t bp-maker:latest . --file ./build/Dockerfile.brand-page-lib-publish --no-cache --secret id=npm,env=NPM_TOKEN --secret id=codeartifact,env=CODEARTIFACT_AUTH_TOKEN",
     "lint": "eslint . && tsc --project tsconfig.lint.json --noEmit",
     "lint:fix": "eslint --fix .",
     "build:bp": "npm run clean:vite && npm run clean:lib && NODE_ENV=production npm run build:bp:vite && npm run build:bp:typings && npm run copy:css",
@@ -47,6 +47,7 @@
     "clean:vite": "rimraf ./node_modules/.cache",
     "copy:css": "copyfiles -fF ./public/css/global.css ./public/css/reset.css ./lib/src/css/",
     "test": "vitest run",
+    "test:publish-dual-registry": "bash ./build/publish-dual-registry.test.sh",
     "test:watch": "vitest watch",
     "coverage": "echo \"To be migrated to vitest\"",
     "storybook": "npm run clean:vite && npm run storybook:css && npm run storybook:themes && npm run storybook:start",
@@ -63,7 +64,7 @@
   },
   "dependencies": {
     "@ckpack/vue-color": "1.6.0",
-    "@designcrowd/fe-shared-lib": "2.1.2",
+    "@designcrowd/fe-shared-lib": "2.1.3",
     "@pinia/nuxt": "0.11.3",
     "@storybook/react": "9.0.4",
     "@tiptap/extension-bubble-menu": "3.28.0",

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.test.ts

@@ -52,3 +52,34 @@ describe('ActionBarNavigation — Preview button', () => {
     });
   });
 });
+
+describe('ActionBarNavigation — navigationActionsStart slot', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('renders host content ahead of Preview', () => {
+    const wrapper = shallowMount(ActionBarNavigation, {
+      slots: { navigationActionsStart: '<span data-test-host-action />' },
+    });
+
+    const [first, second] = wrapper.element.children;
+
+    expect(first.hasAttribute('data-test-host-action')).toBe(true);
+    expect(second.hasAttribute('data-test-preview-button')).toBe(true);
+  });
+
+  // The row is a flex row with gaps, so an extra element — even an empty one — would
+  // shift every button for hosts that don't use the slot.
+  test('adds nothing to the row when the host leaves it empty', () => {
+    const wrapper = mountBar();
+    const buttons = wrapper.findAllComponents({ name: 'Button' });
+
+    expect(wrapper.element.children).toHaveLength(buttons.length);
+    expect(
+      wrapper.element.firstElementChild?.hasAttribute(
+        'data-test-preview-button',
+      ),
+    ).toBe(true);
+  });
+});

package/src/brand-page-maker/components/action-bar/ActionBarNavigation.vue

@@ -3,6 +3,7 @@
     data-component="action-bar-navigation"
     class="tw-flex tw-items-center tw-border-t tw-border-solid tw-border-grayscale-600 tw-h-12 tw-px-2 lg:tw-px-0 lg:tw-h-auto lg:tw-border-none tw-gap-3 lg:tw-gap-5 tw-w-full lg:tw-justify-end tw-box-border"
   >
+    <slot name="navigationActionsStart" />
     <Button
       v-if="!isAdminMaker"
       :label="constantsTr('previewDisplayName')"

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.navigation-slot.test.ts

@@ -0,0 +1,58 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import BrandPageMaker from './BrandPageMaker.vue';
+import BrandPageMakerMixin from './BrandPageMaker.mixin';
+
+// The mixin's lifecycle boots the whole editor, which the header's slot plumbing doesn't
+// need; without it the real header templates mount on their own.
+const HeaderOnlyBrandPageMaker = {
+  ...BrandPageMaker,
+  mixins: [
+    {
+      ...BrandPageMakerMixin,
+      created: undefined,
+      mounted: undefined,
+    },
+  ],
+};
+
+const mountMaker = (slots: Record<string, string> = {}) =>
+  shallowMount(HeaderOnlyBrandPageMaker, {
+    props: { viewModel: {} },
+    slots,
+    global: {
+      stubs: { MakerNavigation: false, ActionBarNavigation: false },
+    },
+  });
+
+const actionRow = (wrapper: ReturnType<typeof mountMaker>): Element =>
+  wrapper.get('[data-component="action-bar-navigation"]').element;
+
+describe('BrandPageMaker — navigationActionsStart slot', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('forwards host content into the header action row, ahead of Preview', () => {
+    const wrapper = mountMaker({
+      navigationActionsStart: '<span data-test-host-action />',
+    });
+
+    const [first, second] = actionRow(wrapper).children;
+
+    expect(first.hasAttribute('data-test-host-action')).toBe(true);
+    expect(second.hasAttribute('data-test-preview-button')).toBe(true);
+  });
+
+  test('leaves the action row untouched when the host provides nothing', () => {
+    const wrapper = mountMaker();
+
+    expect(wrapper.find('[data-test-host-action]').exists()).toBe(false);
+    expect(
+      actionRow(wrapper).firstElementChild?.hasAttribute(
+        'data-test-preview-button',
+      ),
+    ).toBe(true);
+  });
+});

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -17,7 +17,11 @@
       @publish="saveAndPublishBrandPage(false)"
       @preview="onPreview"
       @create-team-cards="onCreateTeamCards"
-    />
+    >
+      <template v-if="$slots.navigationActionsStart" #navigationActionsStart>
+        <slot name="navigationActionsStart" />
+      </template>
+    </MakerNavigation>
     <slot name="editButtonHeader" />
     <div
       class="c-brand-page-maker tw-flex tw-flex-col lg:tw-flex-row tw-box-border"

package/src/brand-page-maker/components/navigation/Navigation.vue

@@ -1,7 +1,7 @@
 <template>
   <header
     data-component="navigation"
-    class="js-bp-header tw-h-24 lg:tw-h-16 tw-box-border lg:tw-py-4 lg:tw-px-5 tw-z-30 tw-fixed tw-w-full lg:tw-relative"
+    class="js-bp-header tw-h-24 lg:tw-h-16 tw-box-border lg:tw-py-4 lg:tw-px-5 tw-z-30 lg:tw-z-40 tw-fixed tw-w-full lg:tw-relative"
     :class="{
       'tw-bg-grayscale-800': !isAdminMaker,
     }"
@@ -36,7 +36,11 @@
         @publish="saveAndPublishBrandPage"
         @preview="previewBrandPage"
         @create-team-cards="onCreateTeamCards"
-      />
+      >
+        <template v-if="$slots.navigationActionsStart" #navigationActionsStart>
+          <slot name="navigationActionsStart" />
+        </template>
+      </ActionBarNavigation>
     </div>
   </header>
 </template>