Skip to content

Commit

Permalink
N21-1645 adds logo slot to ContentElementBar.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnegns
arnegns committed Jan 24, 2024
1 parent a3fbc37 commit 3c43c43
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 155 deletions.
153 changes: 9 additions & 144 deletions src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ describe("ExternalToolElement", () => {
});
});

describe("Icon", () => {
describe("Logo", () => {
describe("when not logo is defined", () => {
const setup = () => {
const contextExternalToolId = "context-external-tool-id";
Expand Down Expand Up @@ -357,10 +357,10 @@ describe("ExternalToolElement", () => {
const { wrapper } = setup();

const icon = wrapper
.findComponent({ ref: "externalToolElement" })
.findComponent({ name: "v-icon" });
.findComponent({ name: "ContentElementBar" })
.attributes().icon;

expect(icon.text()).toEqual(mdiPuzzleOutline);
expect(icon).toEqual(mdiPuzzleOutline);
});
});

Expand All @@ -387,105 +387,14 @@ describe("ExternalToolElement", () => {
};
};

it("should show the logo", () => {
it("should not show the default icon", () => {
const { wrapper } = setup();

const img = wrapper
.findComponent({ ref: "externalToolElement" })
.findComponent({ name: "v-img" });

expect(img.isVisible()).toEqual(true);
});
});
});

describe("Title", () => {
describe("when no tool is selected", () => {
const setup = () => {
const { wrapper } = getWrapper({
element: EMPTY_TEST_ELEMENT,
isEditMode: true,
});

return {
wrapper,
};
};

it("should display a selection text", () => {
const { wrapper } = setup();

const title = wrapper
.findComponent({ ref: "externalToolElement" })
.find(".title");

expect(title.text()).toEqual(
"feature-board-external-tool-element.placeholder.selectTool"
);
});
});

describe("when the title is loading", () => {
const setup = () => {
const contextExternalToolId = "context-external-tool-id";

const { wrapper } = getWrapper({
element: {
...EMPTY_TEST_ELEMENT,
content: { contextExternalToolId },
},
isEditMode: false,
});

return {
wrapper,
};
};

it("should display '...'", () => {
const { wrapper } = setup();

const title = wrapper
.findComponent({ ref: "externalToolElement" })
.find(".title");

expect(title.text()).toEqual("...");
});
});

describe("when the title is available", () => {
const setup = () => {
const contextExternalToolId = "context-external-tool-id";
const toolDisplayData = externalToolDisplayDataFactory.build({
contextExternalToolId,
logoUrl: "logo-url",
});

const { wrapper } = getWrapper(
{
element: {
...EMPTY_TEST_ELEMENT,
content: { contextExternalToolId },
},
isEditMode: false,
},
toolDisplayData
);

return {
wrapper,
toolDisplayData,
};
};

it("should display the tools name", () => {
const { wrapper, toolDisplayData } = setup();

const title = wrapper
.findComponent({ ref: "externalToolElement" })
.find(".title");
const icon = wrapper
.findComponent({ name: "ContentElementBar" })
.attributes().icon;

expect(title.text()).toEqual(toolDisplayData.name);
expect(icon).toBeUndefined();
});
});
});
Expand Down Expand Up @@ -551,50 +460,6 @@ describe("ExternalToolElement", () => {
});
});

describe("Menu", () => {
describe("when in edit mode", () => {
const setup = () => {
const { wrapper } = getWrapper({
element: EMPTY_TEST_ELEMENT,
isEditMode: true,
});

return {
wrapper,
};
};

it("should display the three dot menu", () => {
const { wrapper } = setup();

const menu = wrapper.findComponent({ ref: "externalToolElementMenu" });

expect(menu.isVisible()).toEqual(true);
});
});

describe("when in display mode", () => {
const setup = () => {
const { wrapper } = getWrapper({
element: EMPTY_TEST_ELEMENT,
isEditMode: false,
});

return {
wrapper,
};
};

it("should not display the three dot menu", () => {
const { wrapper } = setup();

const menu = wrapper.findComponent({ ref: "externalToolElementMenu" });

expect(menu.exists()).toEqual(false);
});
});
});

describe("Dialog", () => {
describe("when clicking on a un-configured tool card in edit mode", () => {
const setup = () => {
Expand Down
22 changes: 12 additions & 10 deletions src/components/feature-board-external-tool-element/ExternalToolElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@
@click="onClickElement"
>
<ContentElementBar :has-grey-background="true" :icon="getIcon">
<template #logo v-if="displayData && displayData.logoUrl">
<v-img
height="100%"
class="mx-auto"
:src="displayData.logoUrl"
contain
/>
</template>
<template #title>
{{
hasLinkedTool
Expand Down Expand Up @@ -119,12 +127,11 @@ export default defineComponent({
autofocus.value = true;
});
const getIcon: ComputedRef<string> = computed(() => {
if (displayData.value && displayData.value?.logoUrl) {
console.log(displayData.value?.logoUrl);
return displayData.value?.logoUrl;
const getIcon: ComputedRef<string | undefined> = computed(() => {
if (!displayData.value?.logoUrl) {
return mdiPuzzleOutline;
}
return mdiPuzzleOutline;
return undefined;
});
const { lastCreatedElementId, resetLastCreatedElementId } =
Expand Down Expand Up @@ -263,11 +270,6 @@ $logo-size: 24px;
padding: $card-padding;
}
.logo-container {
width: $logo-size;
height: $logo-size;
}
.gap-8 {
gap: 8px;
}
Expand Down
18 changes: 17 additions & 1 deletion src/components/ui-board/content-element/ContentElementBar.unit.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import createComponentMocks from "@@/tests/test-utils/componentMocks";
import { MountOptions, mount } from "@vue/test-utils";
import { mount, MountOptions } from "@vue/test-utils";
import Vue from "vue";
import ContentElementBar from "./ContentElementBar.vue";

Expand All @@ -13,6 +13,7 @@ describe("ContentElementBar", () => {
element?: string;
menu?: string;
subtitle?: string;
logo?: string;
}) => {
document.body.setAttribute("data-app", "true");

Expand All @@ -24,6 +25,7 @@ describe("ContentElementBar", () => {
title,
menu,
subtitle,
logo,
element,
} = props;
const propsData = {
Expand All @@ -37,6 +39,7 @@ describe("ContentElementBar", () => {
subtitle: subtitle ?? "",
description: description ?? "",
display: display ?? "",
logo: logo ?? "",
};
const wrapper = mount(ContentElementBar as MountOptions<Vue>, {
propsData,
Expand All @@ -52,6 +55,7 @@ describe("ContentElementBar", () => {
element,
menu,
subtitle,
logo,
};
};

Expand Down Expand Up @@ -199,4 +203,16 @@ describe("ContentElementBar", () => {
expect(title.text()).toEqual(expect.stringContaining(menu));
});
});

describe("when logo slot is defined", () => {
it("should render logo slot", () => {
const { wrapper, logo } = setup({
logo: "test logo slot",
});

const logoElement = wrapper.text();

expect(logoElement).toBe(logo);
});
});
});
17 changes: 17 additions & 0 deletions src/components/ui-board/content-element/ContentElementBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
class="rounded-b"
v-if="
icon ||
$slots.logo ||
$slots.title ||
$slots.menu ||
$slots.element ||
Expand All @@ -26,6 +27,10 @@
<v-card-title
class="subtitle-1 d-inline-block font-weight-bold d-flex flex-nowrap gb-1"
>
<div v-if="$slots.logo" class="logo-container mr-2">
<slot name="logo" />
</div>

<ContentElementTitleIcon v-if="icon" :icon="icon" class="mr-2" />

<LineClamp
Expand Down Expand Up @@ -101,27 +106,33 @@ export default defineComponent({
line-height: 24px;
color: var(--v-black-base);
}
a.v-card .content-element-bar:hover {
.content-element-title {
text-decoration: underline;
}
.content-element-display {
filter: brightness(80%);
}
}
.subtitle,
.description {
line-height: 20px;
}
.three-dot-menu {
position: absolute;
right: 10px;
top: 10px;
z-index: 100;
.v-icon {
color: var(--v-black-base);
}
}
.v-card__text {
margin-top: 0px;
}
Expand All @@ -130,7 +141,13 @@ a.v-card .content-element-bar:hover {
color: var(--v-black-base) !important;
text-decoration: none;
}
.content-element-title :deep(a:hover) {
text-decoration: underline;
}
.logo-container {
width: 24px;
height: 24px;
}
</style>

0 comments on commit 3c43c43

Please sign in to comment.