feat(evo-marko): evo-chip

[LuLaValva]

• Make <evo-chip> component
• This one is very straightforward as it's a display component, should be a quick review

[changeset-bot]

🦋 Changeset detected

Latest commit: 793dcfc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@evo-web/marko	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

Adds a new evo-chip tag to the evo-marko package, providing a simple “chip” display component with an optional delete affordance, along with Storybook docs/examples and SSR/browser tests.

Changes:

• Introduces the evo-chip Marko tag implementation with optional <@delete> attribute tag rendering a close icon button.
• Adds Storybook stories and examples for default and deletable variants.
• Adds SSR snapshot coverage and browser interaction/a11y assertions.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/evo-marko/src/tags/evo-chip/index.marko	Implements the evo-chip tag markup, typings, and optional delete button.
packages/evo-marko/src/tags/evo-chip/style.ts	Wires in Skin styles via @ebay/skin/chip.
packages/evo-marko/src/tags/evo-chip/chip.stories.ts	Adds Storybook entry and argTypes for the component and <@delete> attribute tag.
packages/evo-marko/src/tags/evo-chip/examples/default.marko	Default usage example.
packages/evo-marko/src/tags/evo-chip/examples/with-delete.marko	Usage example demonstrating the delete button and a11yText.
packages/evo-marko/src/tags/evo-chip/test/test.server.ts	Adds SSR snapshot tests via Storybook stories.
packages/evo-marko/src/tags/evo-chip/test/test.browser.ts	Adds browser tests for rendering, a11y label, and click behavior.
packages/evo-marko/src/tags/evo-chip/README.md	Adds component README content and external links.

[Copilot]

These test files are not formatted according to the repo’s Prettier defaults (e.g., 2-space indentation used in other Vitest test files). Since packages/evo-marko/package.json runs prettier . --check in CI, this will likely fail formatting checks. Please run Prettier (or align indentation/import formatting) for this file.

Suggested change

	describe("default", () => {
	beforeEach(async () => {
	component = await render(Default);
	});
	it("should render chip text", () => {
	expect(component.getByText("chip text")).toBeTruthy();
	});
	it("should not render a delete button", () => {
	expect(component.queryByRole("button")).toBeNull();
	});
	});
	describe("with delete button", () => {
	beforeEach(async () => {
	component = await render(WithDelete);
	});
	it("should render a delete button", () => {
	expect(component.getByRole("button")).toBeTruthy();
	});
	it("should have aria-label on delete button", () => {
	expect(
	component.getByRole("button").getAttribute("aria-label"),
	).toBe("Delete");
	});
	describe("when delete button is clicked", () => {
	beforeEach(async () => {
	await fireEvent.click(component.getByRole("button"));
	});
	it("should emit click event", () => {
	expect(component.emitted("click")).has.length(1);
	});
	});
	});
	describe("default", () => {
	beforeEach(async () => {
	component = await render(Default);
	});
	it("should render chip text", () => {
	expect(component.getByText("chip text")).toBeTruthy();
	});
	it("should not render a delete button", () => {
	expect(component.queryByRole("button")).toBeNull();
	});
	});
	describe("with delete button", () => {
	beforeEach(async () => {
	component = await render(WithDelete);
	});
	it("should render a delete button", () => {
	expect(component.getByRole("button")).toBeTruthy();
	});
	it("should have aria-label on delete button", () => {
	expect(
	component.getByRole("button").getAttribute("aria-label"),
	).toBe("Delete");
	});
	describe("when delete button is clicked", () => {
	beforeEach(async () => {
	await fireEvent.click(component.getByRole("button"));
	});
	it("should emit click event", () => {
	expect(component.emitted("click")).has.length(1);
	});
	});
	});

[Copilot]

This file doesn’t follow the repository’s standard Prettier formatting (notably indentation), which is enforced by prettier . --check in the evo-marko lint script. Please run Prettier / reformat so it matches the surrounding test conventions.

Suggested change

	it("renders default", async () => {
	await snapshotHTML(Default);
	});
	it("renders with delete button", async () => {
	await snapshotHTML(WithDelete);
	});
	it("renders default", async () => {
	await snapshotHTML(Default);
	});
	it("renders with delete button", async () => {
	await snapshotHTML(WithDelete);
	});