@daikin-oss/design-system-web-components 0.1.0 → 0.3.1

package/README.md

@@ -1,30 +1,73 @@
 # Daikin Design System - Web Components
 
-This project is an implementation of the Daikin Design Kit using web components.
+This project is an implementation of the Daikin Design Kit using Web Components.
 
 ---
+
 ## Usage
 
 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
@@ -32,15 +75,18 @@ npm install '@daikin-oss/dds-tokens
 Reference the CSS in HTML:
 
 ```html
-<link rel="stylesheet" href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/buttons.css" media="(prefers-color-scheme: dark)">
+<link
+  rel="stylesheet"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/buttons.css"
+  media="(prefers-color-scheme: dark)"
+/>
 ```
 
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import '@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css'
-    (prefers-color-scheme: dark);
-
+@import "@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css"
+  (prefers-color-scheme: dark);
 ```
 
 #### Other brands/themes
@@ -48,21 +94,30 @@ Using CSS `@import` with `prefers-color-scheme`:
 Reference the CSS in HTML:
 
 ```html
-<link rel="stylesheet" href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css" media="(prefers-color-scheme: light)">
-<link rel="stylesheet" href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css" media="(prefers-color-scheme: dark)">
+<link
+  rel="stylesheet"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="stylesheet"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  media="(prefers-color-scheme: dark)"
+/>
 ```
 
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import '@daikin-oss/dds-tokens/css/aaf/Light/buttons.css'
-    (prefers-color-scheme: light);
-@import '@daikin-oss/dds-tokens/css/aaf/Dark/buttons.css'
-    (prefers-color-scheme: dark);
+@import "@daikin-oss/dds-tokens/css/aaf/Light/buttons.css"
+  (prefers-color-scheme: light);
+@import "@daikin-oss/dds-tokens/css/aaf/Dark/buttons.css"
+  (prefers-color-scheme: dark);
 ```
 
 ---
-## Contributors
+
+## Contribution
 
 The following are instructions for package contributors.
 
@@ -73,7 +128,12 @@ Clone and install dependencies:
 ```bash
 git clone https://github.com/dsv-rp/DDS.git
 cd DDS
+
+# install dependencies
 npm i
+
+# install Playwright browsers
+npx playwright install
 ```
 
 ### Build
@@ -84,22 +144,25 @@ To build files for production:
 npm run build
 ```
 
-Rollup is used to transform TypeScript code into JavaScript that runs in modern browsers.
-Tailwind classes are also purged.
+Vite is used to transform TypeScript code into JavaScript that runs in modern browsers.
 
-Build components and output in /dist:
+The built files are written to `/dist`.
 
 ### Documentation
 
 Storybook is used to document design system components/tools/examples.
 
-To run in development:
+To run in development mode:
 
 ```bash
+# Web Components version
 npm run storybook
+
+# or React version
+npm run storybook:react
 ```
 
-To produce distributable files in /storybook-static folder:
+To produce distributable files in `/storybook-static/web-components` and `/storybook-static/react` folder:
 
 ```bash
 npm run build-storybook
@@ -107,69 +170,85 @@ npm run build-storybook
 
 ### Testing
 
-Visual regression testing is done by a combination of jest and puppeteer.
-Currently, web components has full support in most major frameworks [except for React](https://custom-elements-everywhere.com/).
-As such, we test both web components by themselves, and also test when imported by React:
+There are currently two test suites: VRT (Visual Regression Test) and Interaction Test.
+
+Visual regression testing, placed in `*.visual.test.ts`, is done by Playwright running in a container.
+To eliminate rendering differences between environments, the browser which takes the screenshots must run on a container.
+
+Currently, Web Components has full support in most major frameworks [except for React](https://custom-elements-everywhere.com/).
+As such, we test both Web Components by themselves, and also test when imported by React:
 
 ```bash
-npm run test
+# start a container for running the browsers
+docker compose up -d
+
+# run VRT for Web Components and React versions
+npm run test:visual
+
+# stop the container
+docker compose down
 ```
 
-### Linting
+For Podman users, use `podman-compose -f compose.podman.yaml` or `podman compose -f compose.podman.yaml` instead of `docker compose`.
+
+To update snapshots, use `npm run test:visual-update`
 
-Linting is done by ESLint for general linting of TypeScript and JavaScript, and [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to type check bindings in lit-html templates.
+---
 
-To lint the project run:
+Interaction testing, placed in `*.stories.ts`, is performed by Storybook, which also uses Playwright internally.
+Interaction tests do not use containers since rendering differences between environments do not matter.
+
+```bash
+npm run test:interaction
+```
+
+### Linting and Type checking
+
+Linting is performed by ESLint for general linting of JavaScript and TypeScript, and [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) to type check bindings in lit-html templates.
+[cSpell](https://cspell.org/) is used for spell checking.
+[ls-lint](https://ls-lint.org/) is also used to ensure that consistent filenames are used.
+
+To lint the project, run:
 
 ```bash
 npm run lint
+npx tsc -b
 ```
 
+If you encounter an `Unknown word` error, add the word to the `cspell-dictionary.txt`.
+
 ### Design Tokens
 
+_We are looking for a more efficient way to import tokens._
+
 1. **Source of Truth**: The `tokens` we use is the foundation of our design styles and was grabbed from https://github.com/dsv-rp/dds-tokens/tree/main.
 
 2. **Using in Components**: For the most part, we use the js variables to apply as the default style:
 
 ```javascript
 import {
-    buttonColorBackgroundPrimaryActive
+  buttonColorBackgroundPrimaryActive
 } from '@daikin-oss/dds-tokens/js/daikin/Light/variables.js';
 
 class DaikinButton extends LitElement implements DaikinButtonProps {
-    static styles = css`
-        :host {
-            --defaultButtonColorBackgroundPrimaryActive: ${unsafeCSS(
-                buttonColorBackgroundPrimaryActive
-            )};
-        }
-    `;
-
-    ...rest of the code
+  static styles = css`
+    :host {
+      --defaultButtonColorBackgroundPrimaryActive: ${unsafeCSS(
+        buttonColorBackgroundPrimaryActive
+      )};
+    }
+  `;
+
+  /* ...rest of the code */
 }
 ```
 
-### Tailwind
+### TailwindCSS
 
-There is a custom `daikinPlugin` managed [here](https://github.com/dsv-rp/tailwind)
+There is a custom `daikinPlugin` managed [here](https://github.com/dsv-rp/tailwind).
 
-### Using with VSCode
-
-If you are using VSCode, there is a great [extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) you can use for auto-complete
-
-Add the following to your VSCode `settings.json` file:
-
-```json
-{
-    "editor.quickSuggestions": {
-        "other": true,
-        "comments": false,
-        "strings": true
-    },
-    "tailwindCSS.experimental.classRegex": ["ctl[(]`([^`]*)"]
-}
-```
+### Developing with VSCode
 
-You may need to set the regex if using a library like [classnames-template-literals](https://github.com/netlify/classnames-template-literals)
+This project provides recommended extensions and workspace settings for VSCode.
 
 References [Daikin Design Kit](https://www.figma.com/file/VyaaU8Ta9yzyf0PsURWSSf/DDS%3A-Design-Kit?node-id=2421%3A7943)

package/dist/cjs/colors.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
+const DAIKIN_PRIMARY_BLUE = variables_js.colorBrandPrimary;
+const DAIKIN_SECONDARY_BLUE = variables_js.colorBlue40;
+const DAIKIN_DARK_GREY = variables_js.colorGrey90;
+const DAIKIN_MEDIUM_GREY = variables_js.colorGrey70;
+const DAIKIN_NEGATIVE = variables_js.colorRed60;
+const DAIKIN_WARNING = variables_js.colorYellow50;
+const DAIKIN_POSITIVE = variables_js.colorGreen60;
+const colors = {
+  daikinBlue: {
+    50: variables_js.colorBlue10,
+    100: variables_js.colorBlue20,
+    200: variables_js.colorBlue30,
+    300: DAIKIN_SECONDARY_BLUE,
+    400: variables_js.colorBlue50,
+    500: DAIKIN_PRIMARY_BLUE,
+    600: variables_js.colorBlue70,
+    700: variables_js.colorBlue80,
+    800: variables_js.colorBlue90,
+    900: variables_js.colorBlue100,
+    DEFAULT: DAIKIN_PRIMARY_BLUE
+  },
+  daikinNeutral: {
+    50: variables_js.colorGrey10,
+    100: variables_js.colorGrey20,
+    200: variables_js.colorGrey30,
+    300: variables_js.colorGrey40,
+    400: variables_js.colorGrey50,
+    500: variables_js.colorGrey60,
+    600: DAIKIN_MEDIUM_GREY,
+    700: variables_js.colorGrey80,
+    800: DAIKIN_DARK_GREY,
+    900: variables_js.colorGrey100
+  },
+  daikinRed: {
+    50: variables_js.colorRed10,
+    100: variables_js.colorRed20,
+    200: variables_js.colorRed30,
+    300: variables_js.colorRed40,
+    400: variables_js.colorRed50,
+    500: DAIKIN_NEGATIVE,
+    600: variables_js.colorRed70,
+    700: variables_js.colorRed80,
+    800: variables_js.colorRed90,
+    900: variables_js.colorRed100,
+    1e3: variables_js.colorRed110,
+    DEFAULT: DAIKIN_NEGATIVE
+  },
+  daikinYellow: {
+    50: variables_js.colorYellow10,
+    100: variables_js.colorYellow20,
+    200: variables_js.colorYellow30,
+    300: variables_js.colorYellow40,
+    400: DAIKIN_WARNING,
+    500: variables_js.colorYellow60,
+    600: variables_js.colorYellow70,
+    700: variables_js.colorYellow80,
+    800: variables_js.colorYellow90,
+    900: variables_js.colorYellow100,
+    1e3: variables_js.colorYellow110,
+    DEFAULT: DAIKIN_WARNING
+  },
+  daikinGreen: {
+    50: variables_js.colorGreen10,
+    100: variables_js.colorGreen20,
+    200: variables_js.colorGreen30,
+    300: variables_js.colorGreen40,
+    400: variables_js.colorGreen50,
+    500: DAIKIN_POSITIVE,
+    600: variables_js.colorGreen70,
+    700: variables_js.colorGreen80,
+    800: variables_js.colorGreen90,
+    900: variables_js.colorGreen100,
+    1e3: variables_js.colorGreen110,
+    DEFAULT: DAIKIN_POSITIVE
+  }
+};
+exports.colors = colors;

package/dist/{colors.d.ts → cjs/colors.d.ts}

@@ -67,4 +67,3 @@ export declare const colors: {
         DEFAULT: string;
     };
 };
-//# sourceMappingURL=colors.d.ts.map

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,40 @@
+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);