@daikin-oss/design-system-web-components 0.2.0 → 0.3.2

package/CHANGELOG.md

@@ -0,0 +1,44 @@
+# @daikin-oss/design-system-web-components
+
+## 0.3.2
+
+### Patch Changes
+
+- [#24](https://github.com/dsv-rp/DDS/pull/24) [`b2971f4`](https://github.com/dsv-rp/DDS/commit/b2971f4f4fff45d7615157e00314ea26ccc747f9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Breadcrumbs Component
+
+- [#42](https://github.com/dsv-rp/DDS/pull/42) [`7db6d0e`](https://github.com/dsv-rp/DDS/commit/7db6d0e0f2f823d9c0ff80e287060b92f32a89ff) Thanks [@yodas7](https://github.com/yodas7)! - Update dependencies.
+
+  - lit: ^3.1.4 -> ^3.2.0
+
+- [#34](https://github.com/dsv-rp/DDS/pull/34) [`dc2640a`](https://github.com/dsv-rp/DDS/commit/dc2640a012c9fb8ab74b969c4721c15a3f814e2c) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Progress Bar Component.
+
+- [#40](https://github.com/dsv-rp/DDS/pull/40) [`d11ec1d`](https://github.com/dsv-rp/DDS/commit/d11ec1d49f9d8c7b9a32582954b9b3f96123c1ef) Thanks [@yodas7](https://github.com/yodas7)! - Include CHANGELOG.md in the package.
+
+- [#29](https://github.com/dsv-rp/DDS/pull/29) [`38a7063`](https://github.com/dsv-rp/DDS/commit/38a706337a4008b163b05fe4f4b90b838b4be4fc) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Tooltip Component.
+
+- [#52](https://github.com/dsv-rp/DDS/pull/52) [`d477bae`](https://github.com/dsv-rp/DDS/commit/d477baec057acf00c42038ebcbd7eeba5a13989e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add document to breadcrumb component.
+
+## 0.3.1
+
+### Patch Changes
+
+- [#38](https://github.com/dsv-rp/DDS/pull/38) [`8be9351`](https://github.com/dsv-rp/DDS/commit/8be93513040a738f36c0ade2d3a7bb2dc7b0d91f) Thanks [@yodas7](https://github.com/yodas7)! - Fix package not released successfully due to the lack of repository field.
+
+## 0.3.0
+
+### Minor Changes
+
+- [#7](https://github.com/dsv-rp/DDS/pull/7) Navigation Tab
+- [#18](https://github.com/dsv-rp/DDS/pull/18) Icon
+- [#20](https://github.com/dsv-rp/DDS/pull/20) Accordion
+- [#30](https://github.com/dsv-rp/DDS/pull/30) Toggle Switch
+- Add icon to button component
+- Add icon to notification component
+
+### Patch Changes
+
+- [#33](https://github.com/dsv-rp/DDS/pull/33) [`7dabcfc`](https://github.com/dsv-rp/DDS/commit/7dabcfc08dd3bf9f7dbcc368e0afc25b878f53d0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Improve Storybook documents
+
+- [#31](https://github.com/dsv-rp/DDS/pull/31) [`f72fbbd`](https://github.com/dsv-rp/DDS/commit/f72fbbd4791a0aad32fe9359ff30bc506d14afff) Thanks [@yodas7](https://github.com/yodas7)! - Introduce Changesets.
+
+- [#35](https://github.com/dsv-rp/DDS/pull/35) Fix button text being wrapped

package/README.md

@@ -8,26 +8,66 @@ This project is an implementation of the Daikin Design Kit using Web Components.
 
 Start by installing the package:
 
-```bash
-npm i @daikin-oss/design-system-web-components
+```sh
+npm install @daikin-oss/design-system-web-components
 ```
 
-You can then import necessary components in your bundle:
+You can then import necessary components in your bundle (the .js extension is optional):
 
-```javascript
-import "@daikin-oss/design-system-web-components/dist/components/button/index.js";
+```js
+import "@daikin-oss/design-system-web-components/components/button/index.js";
 ```
 
 By default, out-of-the-box, the styles are for Daikin brand in light mode.
 
+### Fonts
+
+We use Roboto as the font for our UI components.
+This font is not included in our package, so developers will need to include it in their apps.
+
+The required weights and variants are as follows:
+
+- Regular (400), Normal
+- Bold (700), Normal
+
+#### With Google Fonts
+
+If you can use an external CDN, you can use Google Fonts to load it.
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+  rel="stylesheet"
+/>
+```
+
+#### With Fontsource
+
+If you want to deliver fonts within your app without relying on an external CDN, you can use a package like [Fontsource](https://fontsource.org/fonts/roboto) to do this.
+
+Install the package with:
+
+```sh
+npm install @fontsource/roboto
+```
+
+Then import it in your app:
+
+```js
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/700.css";
+```
+
 ### Dark Mode and Brands/Themes
 
 _Due to the encapsulation of styles by the Web Components specification, how themes are applied may change in the future._
 
 For dark-mode support and non-daikin brands, you need to add the `tokens` package and include the CSS reference in your html:
 
-```bash
-npm install '@daikin-oss/dds-tokens
+```sh
+npm install @daikin-oss/dds-tokens
 ```
 
 #### Dark Mode

package/dist/cjs/components/accordion/daikin-accordion.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
+  render() {
+    return lit.html`<div class="w-full border-y-[1px] border-y-[#CECECE]">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinAccordion.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted(daikin-accordion-item:not(:last-child)) {
+      border-bottom: 1px solid #cecece;
+    }
+  `;
+exports.DaikinAccordion = __decorateClass([
+  decorators_js.customElement("daikin-accordion")
+], exports.DaikinAccordion);

package/dist/cjs/components/accordion/daikin-accordion.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+/**
+ * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
+ * Currently it only provides appropriate styles for individual accordion items.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion items. Place `daikin-accordion-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion>
+ *   <daikin-accordion-item title="The first accordion item">
+ *     Accordion 1 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The second accordion item" open>
+ *     Accordion 2 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The third accordion item" disabled>
+ *     Accordion 3 content.
+ *   </daikin-accordion-item>
+ *   <daikin-accordion-item title="The fourth accordion item" open disabled>
+ *     Accordion 4 content.
+ *   </daikin-accordion-item>
+ * </daikin-accordion>
+ * ```
+ */
+export declare class DaikinAccordion extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion": DaikinAccordion;
+    }
+}
+export default DaikinAccordion;

package/dist/cjs/components/accordion/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAccordion = require("./daikin-accordion.cjs");
+Object.defineProperty(exports, "DaikinAccordion", {
+  enumerable: true,
+  get: () => daikinAccordion.DaikinAccordion
+});

package/dist/cjs/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-accordion';

package/dist/cjs/components/accordion-item/daikin-accordion-item.cjs

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaDetails = classVarianceAuthority.cva(
+  ["flex", "w-full", "h-max", "bg-white", "font-daikinSerif", "overflow-clip"],
+  {
+    variants: {
+      status: {
+        enabled: [],
+        disabled: ["text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const cvaSummary = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-12",
+    "px-5",
+    "outline-none",
+    "relative",
+    "after:block",
+    "after:w-5",
+    "after:h-5",
+    "after:m-auto",
+    "after:top-0",
+    "after:right-4",
+    "after:bottom-0",
+    "after:absolute",
+    "after:i-daikin-accordion-chevron-up",
+    "after:transition-all"
+  ],
+  {
+    variants: {
+      visible: {
+        open: ["after:rotate-0"],
+        close: ["after:-rotate-180"]
+      },
+      status: {
+        enabled: [
+          "hover:bg-[#DCDCDC]",
+          "hover:bg-[#DCDCDC]",
+          "hover:cursor-pointer",
+          "focus-visible:outline",
+          "focus-visible:outline-[2px]",
+          "focus-visible:outline-[#0097E0]",
+          "focus-visible:outline-offset-[-2px]",
+          "after:text-[#828282]"
+        ],
+        disabled: ["text-[#DCDCDC]", "after:text-[#DCDCDC]"]
+      }
+    }
+  }
+);
+const animationOption = {
+  duration: 250,
+  easing: "ease-in-out"
+};
+const contentCloseKeyframe = {
+  height: 0
+};
+const getContentOpenKeyframe = (content) => ({
+  height: `${content.offsetHeight}px`
+});
+exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this._contentRef = ref_js.createRef();
+    this.title = "";
+    this.open = false;
+    this.disabled = false;
+    this._detailsOpen = false;
+  }
+  _contentAnimate() {
+    const content = this._contentRef.value;
+    if (!content || this.open === this._detailsOpen) {
+      return;
+    }
+    if (this.open) {
+      this._detailsOpen = this.open;
+      content.animate(
+        [contentCloseKeyframe, getContentOpenKeyframe(content)],
+        animationOption
+      );
+    } else {
+      const animation = content.animate(
+        [getContentOpenKeyframe(content), contentCloseKeyframe],
+        animationOption
+      );
+      animation.onfinish = () => {
+        this._detailsOpen = this.open;
+      };
+    }
+  }
+  _handleSummaryClick(e) {
+    e.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  render() {
+    const accordionDetailsClassName = cvaDetails({
+      status: this.disabled ? "disabled" : "enabled"
+    });
+    const accordionSummaryClassName = cvaSummary({
+      status: this.disabled ? "disabled" : "enabled",
+      visible: this.open ? "open" : "close"
+    });
+    return lit.html`<details
+      class=${accordionDetailsClassName}
+      ?open=${this._detailsOpen}
+      ?data-open=${this.open}
+      aria-disabled=${this.disabled}
+    >
+      <summary
+        class=${accordionSummaryClassName}
+        tabindex=${this.disabled ? -1 : 0}
+        @click=${this._handleSummaryClick}
+      >
+        ${this.title}
+      </summary>
+      <div ${ref_js.ref(this._contentRef)}>
+        <div class="pt-2 pb-6 px-5 text-sm">
+          <slot></slot>
+        </div>
+      </div>
+    </details>`;
+  }
+  firstUpdated() {
+    this._detailsOpen = this.open;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      this._contentAnimate();
+    }
+  }
+};
+exports.DaikinAccordionItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinAccordionItem.prototype, "title", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordionItem.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinAccordionItem.prototype, "_detailsOpen", 2);
+exports.DaikinAccordionItem = __decorateClass([
+  decorators_js.customElement("daikin-accordion-item")
+], exports.DaikinAccordionItem);

package/dist/cjs/components/accordion-item/daikin-accordion-item.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The accordion item component is a child element within the `daikin-accordion` component.
+ * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
+ * This component is responsible for displaying the specific content within the accordion and allowing users to interact with each section independently.
+ *
+ * Hierarchy:
+ * - `daikin-accordion` > `daikin-accordion-item`
+ *
+ * @slot - A slot for the accordion item content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-accordion-item title="The first accordion item">
+ *   Accordion 1 content.
+ * </daikin-accordion-item>
+ * ```
+ */
+export declare class DaikinAccordionItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private _contentRef;
+    /**
+     * Heading of accordion
+     */
+    title: string;
+    /**
+     * Whether the accordion is open
+     */
+    open: boolean;
+    /**
+     * Whether the accordion is disabled
+     */
+    disabled: boolean;
+    /**
+     * Open attribute of the actual details element
+     *
+     * The default `open` attribute of the default details element does not allow the display of content to have transitions.
+     * To solve this, the `open` property that `daikin-accordion-item` receives manages the opening and closing of items independently of the open attribute.
+     *
+     * The `open` attribute, which should be present, is taken over by `_detailsOpen`.
+     */
+    private _detailsOpen;
+    private _contentAnimate;
+    private _handleSummaryClick;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-accordion-item": DaikinAccordionItem;
+    }
+}
+export default DaikinAccordionItem;

package/dist/cjs/components/accordion-item/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAccordionItem = require("./daikin-accordion-item.cjs");
+Object.defineProperty(exports, "DaikinAccordionItem", {
+  enumerable: true,
+  get: () => daikinAccordionItem.DaikinAccordionItem
+});

package/dist/cjs/components/accordion-item/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-accordion-item';

package/dist/cjs/components/breadcrumb/daikin-breadcrumb.cjs

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeObserver = new ResizeObserver(() => {
+      this._omit();
+    });
+    this._divWrapRef = ref_js.createRef();
+    this.trailingSlash = false;
+    this.overflow = "visible";
+    this._expandedContentWidth = 0;
+    this.omitted = false;
+  }
+  get _isEllipsis() {
+    return this.overflow === "ellipsis";
+  }
+  _omit() {
+    const shouldOmit = this._isEllipsis && this.offsetWidth < this._expandedContentWidth;
+    if (this.omitted === shouldOmit) {
+      return;
+    }
+    this.omitted = shouldOmit;
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      let mode = "normal";
+      if (shouldOmit) {
+        if (index === 0 || index >= daikinBreadCrumbItems.length - 2) {
+          continue;
+        } else if (index === 1) {
+          mode = "ellipsis";
+        } else {
+          mode = "hidden";
+        }
+      }
+      item.hidden = mode === "hidden";
+      item.variant = mode === "ellipsis" ? "ellipsis" : "normal";
+    }
+  }
+  _updateBreadcrumbs() {
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      if (index === daikinBreadCrumbItems.length - 1) {
+        item.trailingSlash = this.trailingSlash;
+        item.disabled = true;
+        continue;
+      }
+      item.trailingSlash = true;
+    }
+  }
+  _handleChange() {
+    this._updateBreadcrumbs();
+  }
+  _handleResizeObserver() {
+    if (this._isEllipsis) {
+      this.resizeObserver.observe(this);
+    } else {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    return lit.html`
+      <div class="flex gap-2" ${ref_js.ref(this._divWrapRef)}>
+        <slot @slotchange=${this._handleChange}></slot>
+      </div>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("trailingSlash")) {
+      this._updateBreadcrumbs();
+    }
+    if (changedProperties.has("overflow")) {
+      this._omit();
+      this._handleResizeObserver();
+    }
+  }
+  firstUpdated() {
+    this._updateBreadcrumbs();
+    this._omit();
+    this._handleResizeObserver();
+    this.updateComplete.then(() => {
+      const divElement = this._divWrapRef.value;
+      if (!divElement) {
+        return;
+      }
+      this._expandedContentWidth = divElement.offsetWidth;
+    }).catch(() => {
+    });
+  }
+};
+exports.DaikinBreadcrumb.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  decorators_js.queryAssignedElements()
+], exports.DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], exports.DaikinBreadcrumb.prototype, "trailingSlash", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBreadcrumb.prototype, "overflow", 2);
+exports.DaikinBreadcrumb = __decorateClass([
+  decorators_js.customElement("daikin-breadcrumb")
+], exports.DaikinBreadcrumb);

package/dist/cjs/components/breadcrumb/daikin-breadcrumb.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for breadcrumb items. Place `breadcrumb-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-breadcrumb>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ *  </daikin-breadcrumb-item>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 2
+ *  </daikin-breadcrumb-item>
+ * </daikin-breadcrumb>
+ * ```
+ */
+export declare class DaikinBreadcrumb extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private resizeObserver;
+    private _slottedDaikinBreadCrumbItems;
+    private _divWrapRef;
+    /**
+     * Whether the last breadcrumb item should have trailing slash.
+     */
+    trailingSlash: boolean;
+    /**
+     * Specifies overflow.
+     * If `ellipsis`, some breadcrumb items will be omitted when the total width exceeds the container width.
+     */
+    overflow: "visible" | "ellipsis";
+    private _expandedContentWidth;
+    private omitted;
+    get _isEllipsis(): boolean;
+    private _omit;
+    private _updateBreadcrumbs;
+    private _handleChange;
+    private _handleResizeObserver;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb": DaikinBreadcrumb;
+    }
+}

package/dist/cjs/components/breadcrumb/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinBreadcrumb = require("./daikin-breadcrumb.cjs");
+Object.defineProperty(exports, "DaikinBreadcrumb", {
+  enumerable: true,
+  get: () => daikinBreadcrumb.DaikinBreadcrumb
+});

package/dist/cjs/components/breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-breadcrumb';