@daikin-oss/design-system-web-components 0.6.0 → 1.0.0

package/dist/es/components/notification/daikin-notification.js

@@ -1,198 +0,0 @@
-import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
-import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { EVENT_CLOSE } from "../../constants/events.js";
-import tailwindStyles from "../../tailwind.css.js";
-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 cvaContainer = cva(
-  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "border-2",
-          "border-solid",
-          "rounded-lg",
-          "shadow-notification"
-        ],
-        inline: []
-      },
-      status: {
-        positive: ["border-[--colorFeedbackPositive]"],
-        negative: ["border-[--colorFeedbackNegative]"],
-        warning: ["border-[--colorFeedbackWarning]"],
-        alarm: ["border-[--colorFeedbackAlarm]"],
-        information: ["border-[--colorFeedbackInformation]"]
-      }
-    },
-    defaultVariants: {
-      variant: "toast",
-      status: "positive"
-    }
-  }
-);
-const cvaIconContainer = cva(
-  [
-    "flex-none",
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[2.75rem]",
-    "after:size-6",
-    "after:text-white"
-  ],
-  {
-    variants: {
-      status: {
-        positive: [
-          "bg-[--colorFeedbackPositive]",
-          "after:i-daikin-status-positive"
-        ],
-        negative: [
-          "bg-[--colorFeedbackNegative]",
-          "after:i-daikin-status-negative"
-        ],
-        warning: [
-          "bg-[--colorFeedbackWarning]",
-          "after:i-daikin-status-warning"
-        ],
-        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
-        information: [
-          "bg-[--colorFeedbackInformation]",
-          "after:i-daikin-status-information"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "positive"
-    }
-  }
-);
-const cvaContent = cva(
-  ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
-  {
-    variants: {
-      line: {
-        single: ["items-center", "flex-row"],
-        multi: ["items-start", "flex-col"]
-      }
-    },
-    defaultVariants: {
-      line: "single"
-    }
-  }
-);
-let DaikinNotification = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "toast";
-    this.status = "positive";
-    this.line = "single";
-    this.open = false;
-    this.closeButton = false;
-  }
-  /**
-   * Call the event registered in "close".
-   */
-  _handleClickClose() {
-    const event = new CustomEvent(EVENT_CLOSE);
-    this.open = false;
-    this.dispatchEvent(event);
-  }
-  render() {
-    const role = {
-      inline: "status",
-      toast: "alert"
-    }[this.variant];
-    return this.open ? html`<aside
-          class=${cvaContainer({
-      variant: this.variant,
-      status: this.status
-    })}
-          role=${role}
-        >
-          <div
-            class=${cvaIconContainer({
-      status: this.status
-    })}
-          ></div>
-          <div
-            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
-          >
-            <div
-              class=${cvaContent({
-      line: this.line
-    })}
-            >
-              <div class="font-bold flex-none">
-                <slot name="title"></slot>
-              </div>
-              <div class="flex-none">
-                <slot name="description"></slot>
-              </div>
-            </div>
-            ${this.closeButton ? html`
-                  <div class="flex items-center gap-5">
-                    <button
-                      aria-label="Close"
-                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
-                      @click=${this._handleClickClose}
-                    ></button>
-                  </div>
-                ` : nothing}
-          </div>
-        </aside>` : nothing;
-  }
-};
-DaikinNotification.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
-      --colorFeedbackWarning: ${unsafeCSS(colorFeedbackWarning)};
-      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
-      --colorFeedbackAlarm: #f68c54;
-      --colorFeedbackInformation: #0097e0;
-
-      display: block;
-    }
-
-    :host([variant="toast"]) {
-      width: max-content;
-    }
-
-    :host([variant="inline"]) {
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinNotification.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "status", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "line", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinNotification.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "close-button" })
-], DaikinNotification.prototype, "closeButton", 2);
-DaikinNotification = __decorateClass([
-  customElement("daikin-notification")
-], DaikinNotification);
-export {
-  DaikinNotification
-};

package/dist/es/components/notification/index.d.ts

@@ -1 +0,0 @@
-export * from "./daikin-notification.js";

package/dist/es/components/notification/index.js

@@ -1,4 +0,0 @@
-import { DaikinNotification } from "./daikin-notification.js";
-export {
-  DaikinNotification
-};

package/dist/es/constants/events.js

@@ -1,4 +0,0 @@
-const EVENT_CLOSE = "close";
-export {
-  EVENT_CLOSE
-};

package/dist/es-dev/colors.d.ts

@@ -1,69 +0,0 @@
-export declare const colors: {
-    daikinBlue: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        DEFAULT: string;
-    };
-    daikinNeutral: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    daikinRed: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        1000: string;
-        DEFAULT: string;
-    };
-    daikinYellow: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        1000: string;
-        DEFAULT: string;
-    };
-    daikinGreen: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        1000: string;
-        DEFAULT: string;
-    };
-};

package/dist/es-dev/colors.js

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

package/dist/es-dev/components/notification/daikin-notification.d.ts

@@ -1,77 +0,0 @@
-import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from "../../type-utils.js";
-declare const cvaContainer: (props?: ({
-    variant?: "toast" | "inline" | null | undefined;
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaIconContainer: (props?: ({
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaContent: (props?: ({
-    line?: "single" | "multi" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaIconContainer | typeof cvaContent>;
-/**
- * The notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
- *
- * There are two variants of notification components: `toast` and `inline`.
- *
- * Toast notifications are brief messages that should appear temporarily at the edge of the screen, typically in the bottom or top corner.
- * Toast notifications are ideal for conveying transient information that does not require user interaction, such as success messages, warnings, or alerts. \
- * Please note that **currently we don't support automatic placement or stacking of toast notifications**.
- *
- * Inline notifications appear within the content of the application, usually embedded directly within a page or section.
- * Inline notifications are more persistent and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
- *
- * @fires close - A custom event emitted when a user clicks the close button.
- *
- * @slot title - A slot for the notification title content.
- * @slot description - A slot for the notification description content.
- *
- * @example
- *
- * ```js
- * import "@daikin-oss/design-system-web-components/components/notification/index.js";
- * ```
- *
- * ```html
- * <daikin-notification>
- *   <span slot="title">Notification title</span>
- *   <span slot="description">Notification description</span>
- * </daikin-notification>
- * ```
- */
-export declare class DaikinNotification extends LitElement {
-    static readonly styles: import('lit').CSSResult;
-    /**
-     * Type of notification.
-     */
-    variant: NotificationVariantProps["variant"];
-    /**
-     * Status of notification.
-     */
-    status: NotificationVariantProps["status"];
-    /**
-     * Display in single or multiple lines.
-     */
-    line: NotificationVariantProps["line"];
-    /**
-     * Specify the notification's open state.
-     */
-    open: boolean;
-    /**
-     * Whether to display the close button.
-     */
-    closeButton: boolean;
-    /**
-     * Call the event registered in "close".
-     */
-    private _handleClickClose;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "daikin-notification": DaikinNotification;
-    }
-}
-export {};

package/dist/es-dev/components/notification/daikin-notification.js

@@ -1,198 +0,0 @@
-import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
-import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { EVENT_CLOSE } from "../../constants/events.js";
-import tailwindStyles from "../../tailwind.css.js";
-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 cvaContainer = cva(
-  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "border-2",
-          "border-solid",
-          "rounded-lg",
-          "shadow-notification"
-        ],
-        inline: []
-      },
-      status: {
-        positive: ["border-[--colorFeedbackPositive]"],
-        negative: ["border-[--colorFeedbackNegative]"],
-        warning: ["border-[--colorFeedbackWarning]"],
-        alarm: ["border-[--colorFeedbackAlarm]"],
-        information: ["border-[--colorFeedbackInformation]"]
-      }
-    },
-    defaultVariants: {
-      variant: "toast",
-      status: "positive"
-    }
-  }
-);
-const cvaIconContainer = cva(
-  [
-    "flex-none",
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[2.75rem]",
-    "after:size-6",
-    "after:text-white"
-  ],
-  {
-    variants: {
-      status: {
-        positive: [
-          "bg-[--colorFeedbackPositive]",
-          "after:i-daikin-status-positive"
-        ],
-        negative: [
-          "bg-[--colorFeedbackNegative]",
-          "after:i-daikin-status-negative"
-        ],
-        warning: [
-          "bg-[--colorFeedbackWarning]",
-          "after:i-daikin-status-warning"
-        ],
-        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
-        information: [
-          "bg-[--colorFeedbackInformation]",
-          "after:i-daikin-status-information"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "positive"
-    }
-  }
-);
-const cvaContent = cva(
-  ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
-  {
-    variants: {
-      line: {
-        single: ["items-center", "flex-row"],
-        multi: ["items-start", "flex-col"]
-      }
-    },
-    defaultVariants: {
-      line: "single"
-    }
-  }
-);
-let DaikinNotification = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "toast";
-    this.status = "positive";
-    this.line = "single";
-    this.open = false;
-    this.closeButton = false;
-  }
-  /**
-   * Call the event registered in "close".
-   */
-  _handleClickClose() {
-    const event = new CustomEvent(EVENT_CLOSE);
-    this.open = false;
-    this.dispatchEvent(event);
-  }
-  render() {
-    const role = {
-      inline: "status",
-      toast: "alert"
-    }[this.variant];
-    return this.open ? html`<aside
-          class=${cvaContainer({
-      variant: this.variant,
-      status: this.status
-    })}
-          role=${role}
-        >
-          <div
-            class=${cvaIconContainer({
-      status: this.status
-    })}
-          ></div>
-          <div
-            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
-          >
-            <div
-              class=${cvaContent({
-      line: this.line
-    })}
-            >
-              <div class="font-bold flex-none">
-                <slot name="title"></slot>
-              </div>
-              <div class="flex-none">
-                <slot name="description"></slot>
-              </div>
-            </div>
-            ${this.closeButton ? html`
-                  <div class="flex items-center gap-5">
-                    <button
-                      aria-label="Close"
-                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
-                      @click=${this._handleClickClose}
-                    ></button>
-                  </div>
-                ` : nothing}
-          </div>
-        </aside>` : nothing;
-  }
-};
-DaikinNotification.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
-      --colorFeedbackWarning: ${unsafeCSS(colorFeedbackWarning)};
-      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
-      --colorFeedbackAlarm: #f68c54;
-      --colorFeedbackInformation: #0097e0;
-
-      display: block;
-    }
-
-    :host([variant="toast"]) {
-      width: max-content;
-    }
-
-    :host([variant="inline"]) {
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinNotification.prototype, "variant", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "status", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "line", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinNotification.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "close-button" })
-], DaikinNotification.prototype, "closeButton", 2);
-DaikinNotification = __decorateClass([
-  customElement("daikin-notification")
-], DaikinNotification);
-export {
-  DaikinNotification
-};

package/dist/es-dev/components/notification/index.d.ts

@@ -1 +0,0 @@
-export * from "./daikin-notification.js";

package/dist/es-dev/components/notification/index.js

@@ -1,4 +0,0 @@
-import { DaikinNotification } from "./daikin-notification.js";
-export {
-  DaikinNotification
-};

package/dist/es-dev/constants/events.js

@@ -1,4 +0,0 @@
-const EVENT_CLOSE = "close";
-export {
-  EVENT_CLOSE
-};

package/icons/arrow-up.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 10L13 10L8 5L3 10Z" fill="#414141"/>
-</svg>

package/icons/status-success.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0ZM6.84425 9.18186L10.5243 5.44774C10.8478 5.12217 11.3778 5.11679 11.708 5.43573C11.7119 5.43948 11.7602 5.4879 11.7602 5.4879C12.0799 5.80891 12.0799 6.32322 11.7602 6.64423L6.84425 11.6L4.23978 8.9783C3.92202 8.65924 3.91981 8.14874 4.23479 7.82702L4.26579 7.79535C4.58673 7.46755 5.11644 7.4583 5.44894 7.7747C5.45433 7.77983 6.84425 9.18186 6.84425 9.18186Z" fill="currentColor"/>
-<mask style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8C0 3.584 3.584 0 8 0ZM6.84425 9.18186L10.5243 5.44774C10.8478 5.12217 11.3778 5.11679 11.708 5.43573C11.7119 5.43948 11.7602 5.4879 11.7602 5.4879C12.0799 5.80891 12.0799 6.32322 11.7602 6.64423L6.84425 11.6L4.23978 8.9783C3.92202 8.65924 3.91981 8.14874 4.23479 7.82702L4.26579 7.79535C4.58673 7.46755 5.11644 7.4583 5.44894 7.7747C5.45433 7.77983 6.84425 9.18186 6.84425 9.18186Z" fill="white"/>
-</mask>
-</svg>