feat(chip): add chip component

README.md

@@ -50,6 +50,7 @@ Each layer does its bit to enforce and enhance accessibility. We consider this l
 -   [`ebay-carousel`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-carousel)
 -   [`ebay-character-count`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-character-count)
 -   [`ebay-checkbox`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-checkbox)
+-   [`ebay-chip`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-chip)
 -   [`ebay-combobox`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-combobox)
 -   [`ebay-cta-button`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-cta-button)
 -   [`ebay-date-textbox`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-date-textbox)

src/components/ebay-chip/README.md

@@ -0,0 +1,16 @@
+<h1 style='display: flex; justify-content: space-between; align-items: center;'>
+    <span>
+        ebay-chip
+    </span>
+    <span style='font-weight: normal; font-size: medium; margin-bottom: -15px;'>
+        DS v1.0.0
+    </span>
+</h1>
+
+A discrete highlighted value.
+
+## Examples and Documentation
+
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/story/building-blocks-ebay-chip)
+-   [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/building-blocks-ebay-chip)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-chip/examples)

src/components/ebay-chip/browser.json

@@ -0,0 +1,9 @@
+{
+    "requireRemap": [
+        {
+            "from": "./style.js",
+            "to": "../../common/empty.js",
+            "if-flag": "ebayui-no-skin"
+        }
+    ]
+}

src/components/ebay-chip/chip.stories.js

@@ -0,0 +1,67 @@
+import { tagToString } from "../../../.storybook/storybook-code-source";
+import { addRenderBodies } from "../../../.storybook/utils";
+import Readme from "./README.md";
+import Component from "./index.marko";
+
+const Template = (args) => ({
+    input: addRenderBodies(args),
+});
+
+export default {
+    title: "building blocks/ebay-chip",
+    component: Component,
+    parameters: {
+        docs: {
+            description: {
+                component: Readme,
+            },
+        },
+    },
+
+    argTypes: {
+        renderBody: {
+            control: { type: "text" },
+            description: "Text to be displayed in the chip",
+        },
+        deleteButtonLabel: {
+            control: { type: "text" },
+            description:
+                "A11y text for the delete button, also determines if delete button is shown",
+        },
+        onDelete: {
+            action: "on-delete",
+            description: "Triggered when delete button is clicked",
+            table: {
+                category: "Events",
+                defaultValue: {
+                    summary: "{ el, checked, originalEvent }",
+                },
+            },
+        },
+    },
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+    renderBody: "chip text",
+};
+Standard.parameters = {
+    docs: {
+        source: {
+            code: tagToString("ebay-chip", Standard.args),
+        },
+    },
+};
+
+export const WithDelete = Template.bind({});
+WithDelete.args = {
+    renderBody: "chip text",
+    deleteButtonLabel: "Delete",
+};
+WithDelete.parameters = {
+    docs: {
+        source: {
+            code: tagToString("ebay-chip", Standard.args),
+        },
+    },
+};

src/components/ebay-chip/index.marko

@@ -0,0 +1,19 @@
+$ const textId = component.elId("text");
+
+<span class="chip">
+    <span class="chip__text" id=textId>
+        <${input.renderBody}/>
+    </span>
+    <if(input.deleteButtonLabel)>
+        <button
+            type="button"
+            class="chip__button"
+            type="button"
+            aria-label=input.deleteButtonLabel
+            aria-describedby=textId
+            on-click("emit", "delete")
+        >
+            <ebay-close-16-icon/>
+        </button>
+    </if>
+</span>

src/components/ebay-chip/marko-tag.json

@@ -0,0 +1,9 @@
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@delete-button-label": "string"
+}

src/components/ebay-chip/style.js

@@ -0,0 +1 @@
+require("@ebay/skin/chip");

src/components/ebay-chip/test/__snapshots__/renders-default-chip-component.expected.html

@@ -0,0 +1,12 @@
+<DocumentFragment>
+  <span
+    class="chip"
+  >
+    <span
+      class="chip__text"
+      id="s0-text"
+    >
+      chip text
+    </span>
+  </span>
+</DocumentFragment>

src/components/ebay-chip/test/__snapshots__/renders-with-close-icon-when-label-is-present.expected.html

@@ -0,0 +1,40 @@
+<DocumentFragment>
+  <span
+    class="chip"
+  >
+    <span
+      class="chip__text"
+      id="s0-text"
+    >
+      chip text
+    </span>
+    <button
+      aria-describedby="s0-text"
+      aria-label="Delete"
+      class="chip__button"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon icon--close-16"
+        focusable="false"
+      >
+        <defs
+          data-marko-key="@defs s0-4-0"
+        >
+          <symbol
+            id="icon-close-16"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M2.293 2.293a1 1 0 0 1 1.414 0L8 6.586l4.293-4.293a1 1 0 1 1 1.414 1.414L9.414 8l4.293 4.293a1 1 0 0 1-1.414 1.414L8 9.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414Z"
+            />
+          </symbol>
+        </defs>
+        <use
+          xlink:href="#icon-close-16"
+        />
+      </svg>
+    </button>
+  </span>
+</DocumentFragment>

src/components/ebay-chip/test/test.browser.js

@@ -0,0 +1,28 @@
+import { expect, use } from "chai";
+import chaiDom from "chai-dom";
+import { composeStories } from "@storybook/marko/dist/testing";
+import { render, fireEvent, cleanup } from "@marko/testing-library";
+import * as stories from "../chip.stories"; // import all stories from the stories file
+const { WithDelete } = composeStories(stories);
+
+use(chaiDom);
+afterEach(cleanup);
+
+/** @type import("@marko/testing-library").RenderResult */
+let component;
+
+describe("given delete button is present", () => {
+    beforeEach(async () => {
+        component = await render(WithDelete);
+    });
+
+    describe("when button is clicked", () => {
+        beforeEach(async () => {
+            await fireEvent.click(component.getByRole("button"));
+        });
+
+        it("then it emits the event with correct data", () => {
+            expect(component.emitted("delete")).has.length(1);
+        });
+    });
+});

src/components/ebay-chip/test/test.server.js

@@ -0,0 +1,16 @@
+import { use } from "chai";
+import { composeStories } from "@storybook/marko/dist/testing";
+import { snapshotHTML } from "../../../common/test-utils/snapshots";
+import * as stories from "../chip.stories"; // import all stories from the stories file
+const { Standard, WithDelete } = composeStories(stories);
+const htmlSnap = snapshotHTML(__dirname);
+
+use(require("chai-dom"));
+
+it("renders default chip component", async () => {
+    await htmlSnap(Standard);
+});
+
+it("renders with close icon when label is present", async () => {
+    await htmlSnap(WithDelete);
+});