Merge branch 'feat/definition-list'

Merge feat/definition-list

src/components/definitionList/sp-definition-list-dd.css

@@ -0,0 +1,7 @@
+.base {
+  padding: 4.5px 0;
+  color: var(--color-semantic-text-body-regular);
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.6;
+}

src/components/definitionList/sp-definition-list-dd.ts

@@ -0,0 +1,39 @@
+// @ts-ignore
+import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import spDefinitionListDdStyle from "./sp-definition-list-dd.css?inline" assert { type: "css" };
+
+const styles = new CSSStyleSheet();
+styles.replaceSync(
+  `${resetStyle} ${foundationStyle} ${spDefinitionListDdStyle}`,
+);
+
+export class SpDefinitionListDd extends HTMLElement {
+  #ddElement = document.createElement("dd");
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      styles,
+    ];
+    this.#ddElement.classList.add("base");
+    this.#ddElement.innerHTML = this.innerHTML;
+    this.shadowRoot.appendChild(this.#ddElement);
+  }
+}
+
+customElements.get("sp-definition-list-dd") ||
+  customElements.define("sp-definition-list-dd", SpDefinitionListDd);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sp-definition-list-dd": SpDefinitionListDd;
+  }
+}

src/components/definitionList/sp-definition-list-dt.css

@@ -0,0 +1,7 @@
+.base {
+  padding: 4.5px 0;
+  color: var(--color-semantic-text-body-regular);
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.6;
+}

src/components/definitionList/sp-definition-list-dt.ts

@@ -0,0 +1,39 @@
+// @ts-ignore
+import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import spDefinitionListDtStyle from "./sp-definition-list-dt.css?inline" assert { type: "css" };
+
+const styles = new CSSStyleSheet();
+styles.replaceSync(
+  `${resetStyle} ${foundationStyle} ${spDefinitionListDtStyle}`,
+);
+
+export class SpDefinitionListDt extends HTMLElement {
+  #dtElement = document.createElement("dt");
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      styles,
+    ];
+    this.#dtElement.classList.add("base");
+    this.#dtElement.innerHTML = this.innerHTML;
+    this.shadowRoot.appendChild(this.#dtElement);
+  }
+}
+
+customElements.get("sp-definition-list-dt") ||
+  customElements.define("sp-definition-list-dt", SpDefinitionListDt);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sp-definition-list-dt": SpDefinitionListDt;
+  }
+}

src/components/definitionList/sp-definition-list.css

@@ -0,0 +1,5 @@
+.base {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 16px 8px;
+}

src/components/definitionList/sp-definition-list.ts

@@ -0,0 +1,38 @@
+// @ts-ignore
+import resetStyle from "@acab/reset.css?inline" assert { type: "css" };
+// @ts-ignore
+import foundationStyle from "../foundation.css?inline" assert { type: "css" };
+// @ts-ignore
+import spDefinitionListStyle from "./sp-definition-list.css?inline" assert { type: "css" };
+
+const styles = new CSSStyleSheet();
+styles.replaceSync(`${resetStyle} ${foundationStyle} ${spDefinitionListStyle}`);
+
+export class SpDefinitionList extends HTMLElement {
+  #dlElement = document.createElement("dl");
+  #slotElement = document.createElement("slot");
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      styles,
+    ];
+    this.#dlElement.classList.add("base");
+    this.#dlElement.appendChild(this.#slotElement);
+    this.shadowRoot.appendChild(this.#dlElement);
+  }
+}
+
+customElements.get("sp-definition-list") ||
+  customElements.define("sp-definition-list", SpDefinitionList);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sp-definition-list": SpDefinitionList;
+  }
+}

stories/definitionList/sp-definition-list-dd.story.ts

@@ -0,0 +1,17 @@
+import "../../src/components/definitionList/sp-definition-list-dd";
+import type { Meta, StoryObj } from "@storybook/web-components";
+import "@sp-design/token/lib/speeda-tokens.css";
+
+const meta: Meta = {
+  component: "sp-definition-list-dd",
+  args: {
+    text: "Text",
+  },
+  render: ({ text }) =>
+    `<sp-definition-list-dd>${text}</sp-definition-list-dd>`,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {};

stories/definitionList/sp-definition-list-dt.story.ts

@@ -0,0 +1,17 @@
+import "../../src/components/definitionList/sp-definition-list-dt";
+import type { Meta, StoryObj } from "@storybook/web-components";
+import "@sp-design/token/lib/speeda-tokens.css";
+
+const meta: Meta = {
+  component: "sp-definition-list-dt",
+  args: {
+    text: "Label",
+  },
+  render: ({ text }) =>
+    `<sp-definition-list-dt>${text}</sp-definition-list-dt>`,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {};

stories/definitionList/sp-definition-list.story.ts

@@ -0,0 +1,40 @@
+import "../../src/components/definitionList/sp-definition-list-dt";
+import "../../src/components/definitionList/sp-definition-list-dd";
+import "../../src/components/definitionList/sp-definition-list";
+import type { Meta, StoryObj } from "@storybook/web-components";
+import "@sp-design/token/lib/speeda-tokens.css";
+import { html } from "lit";
+
+const meta: Meta = {
+  args: {
+    termText: "Term",
+    definitionText: "Definition",
+  },
+  render: ({ termText, definitionText }) => html`
+    <sp-definition-list>
+      <sp-definition-list-dt>${termText}</sp-definition-list-dt>
+      <sp-definition-list-dd>${definitionText}</sp-definition-list-dd>
+      <sp-definition-list-dt>${termText}</sp-definition-list-dt>
+      <sp-definition-list-dd>${definitionText}</sp-definition-list-dd>
+    </sp-definition-list>
+  `,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Basic: Story = {};
+
+export const OverflowWrap: Story = {
+  args: {
+    termText: "LongTermLongTermLongTermLongTerm",
+    definitionText:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+};
+
+export const Break: Story = {
+  args: {
+    definitionText: html`break <br />break`,
+  },
+};

tests/definitionList/sp-definition-list-dd.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+import "../../src/components/button/sp-button";
+import { SpDefinitionListDd } from "../../src/components/definitionList/sp-definition-list-dd";
+
+function getSpDefinitionListDd() {
+  return document.querySelector("sp-definition-list-dd") as SpDefinitionListDd;
+}
+
+describe("sp-definition-list-dd", () => {
+  describe("小要素", () => {
+    test("小要素に文字列を受け取ることができる", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dd>Description</sp-definition-list-dd>";
+
+      const definitionList = getSpDefinitionListDd();
+      expect(definitionList.textContent).toBe("Description");
+    });
+
+    test("小要素にbrタグを受け取った時、改行する", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dd>Description<br>Description</sp-definition-list-dd>";
+
+      const definitionList = getSpDefinitionListDd();
+      expect(definitionList.innerHTML).toBe("Description<br>Description");
+      expect(definitionList.innerText).toBe(`DescriptionDescription`);
+    });
+
+    test("小要素に何も入れない場合、何も表示されない", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dd></sp-definition-list-dd>";
+
+      const definitionList = getSpDefinitionListDd();
+      expect(definitionList.textContent).toBe("");
+    });
+  });
+});

tests/definitionList/sp-definition-list-dt.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+import "../../src/components/button/sp-button";
+import { SpDefinitionListDt } from "../../src/components/definitionList/sp-definition-list-dt";
+
+function getSpDefinitionListDt() {
+  return document.querySelector("sp-definition-list-dt") as SpDefinitionListDt;
+}
+
+describe("sp-definition-list-dt", () => {
+  describe("小要素", () => {
+    test("小要素に文字列を受け取ることができる", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dt>Term</sp-definition-list-dt>";
+
+      const definitionList = getSpDefinitionListDt();
+      expect(definitionList.textContent).toBe("Term");
+    });
+
+    test("小要素にbrタグを受け取った時、改行する", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dt>Term<br>Term</sp-definition-list-dt>";
+
+      const definitionList = getSpDefinitionListDt();
+      expect(definitionList.innerHTML).toBe("Term<br>Term");
+      expect(definitionList.innerText).toBe(`TermTerm`);
+    });
+
+    test("小要素に何も入れない場合、何も表示されない", async () => {
+      document.body.innerHTML =
+        "<sp-definition-list-dt></sp-definition-list-dt>";
+
+      const definitionList = getSpDefinitionListDt();
+      expect(definitionList.textContent).toBe("");
+    });
+  });
+});

tests/definitionList/sp-definition-list.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, test } from "vitest";
+import "../../src/components/button/sp-button";
+import { SpDefinitionList } from "../../src/components/definitionList/sp-definition-list";
+
+function getSpDefinitionList() {
+  return document.querySelector("sp-definition-list") as SpDefinitionList;
+}
+
+describe("sp-definition-list", () => {
+  describe("小要素", () => {
+    test("小要素にsp-definition-list-dtとsp-definition-list-ddを複数入れることができる", async () => {
+      document.body.innerHTML = `
+        <sp-definition-list>
+          <sp-definition-list-dt>Term1</sp-definition-list-dt>
+          <sp-definition-list-dd>Description1</sp-definition-list-dd>
+          <sp-definition-list-dt>Term2</sp-definition-list-dt>
+          <sp-definition-list-dd>Description2</sp-definition-list-dd>
+        </sp-definition-list>`;
+
+      const definitionList = getSpDefinitionList();
+
+      const dtElements = definitionList.querySelectorAll(
+        "sp-definition-list-dt",
+      );
+      const ddElements = definitionList.querySelectorAll(
+        "sp-definition-list-dd",
+      );
+
+      expect(dtElements.length).toBe(2);
+      expect(ddElements.length).toBe(2);
+    });
+
+    test("小要素に何も入れない場合、何も表示されない", async () => {
+      document.body.innerHTML = "<sp-definition-list></sp-definition-list>";
+
+      const definitionList = getSpDefinitionList();
+
+      expect(definitionList.children.length).toBe(0);
+    });
+  });
+});