@dnanpm/ui-components 0.0.5 → 0.1.0

package/dist/components/Notification/Notification.css

@@ -0,0 +1,91 @@
+@layer dna-design-system {/**
+ * Notification Component Styles
+ *
+ * Design tokens are consumed via CSS custom properties (variables).
+ * These variables come from @dnanpm/design-tokens package.
+ */
+
+._notification_1glup_8 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-ui-md);
+    padding-right: var(--spacing-ui-lg);
+    border: 2px solid var(--notification-color);
+    border-radius: var(--radius-semantic-sm);
+    overflow: clip;
+}
+
+/* Variant colors */
+._notification--info_1glup_19 {
+    --notification-color: var(--colors-semantic-status-info);
+}
+
+._notification--success_1glup_23 {
+    --notification-color: var(--colors-semantic-status-success);
+}
+
+._notification--warning_1glup_27 {
+    --notification-color: var(--colors-semantic-status-warning);
+}
+
+._notification--error_1glup_31 {
+    --notification-color: var(--colors-semantic-status-error);
+}
+
+/* Icon container */
+._notification__icon-container_1glup_36 {
+    /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
+    --_icon-padding-with-border: 10px;
+    --_icon-padding-without-border: 12px;
+
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+    padding: var(--_icon-padding-with-border) var(--_icon-padding-without-border)
+        var(--_icon-padding-with-border) var(--_icon-padding-with-border);
+    background-color: var(--notification-color);
+    color: var(--colors-semantic-foreground-inverse);
+}
+
+._notification__icon_1glup_36 {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 auto;
+}
+
+/* Content */
+._notification__content_1glup_59 {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--spacing-ui-xs) 0;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--colors-semantic-foreground-default);
+    text-wrap: pretty;
+}
+
+/* Close button */
+._notification__close_1glup_70 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    /* Negative margin to offset the button's size and maintain consistent spacing with the content */
+    margin: 0 calc(var(--spacing-ui-xxs) * -1);
+    border: none;
+    border-radius: var(--radius-semantic-sm);
+    background: none;
+    color: var(--colors-semantic-foreground-default);
+    cursor: pointer;
+}
+
+._notification__close_1glup_70 svg {
+    width: 24px;
+    height: 24px;
+}
+}

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,3 @@
+import { NotificationProps } from './Notification.types';
+export declare const Notification: import('react').ForwardRefExoticComponent<NotificationProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Notification.d.ts.map

package/dist/components/Notification/Notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,8GAsCvB,CAAC"}

package/dist/components/Notification/Notification.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Error, Warning, Check, Info, Close } from "@dnanpm/icons";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./Notification.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const variantIcons = {
+  info: Info,
+  success: Check,
+  warning: Warning,
+  error: Error
+};
+const variantRoles = {
+  info: "status",
+  success: "status",
+  warning: "alert",
+  error: "alert"
+};
+const Notification = forwardRef(function Notification2({
+  variant,
+  children,
+  closable = false,
+  onClose,
+  closeLabel = "Sulje ilmoitus",
+  className,
+  ...props
+}, ref) {
+  const Icon = variantIcons[variant];
+  const role = variantRoles[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(styles.notification, styles[`notification--${variant}`], className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles["notification__icon-container"], children: /* @__PURE__ */ jsx(Icon, { className: styles.notification__icon, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.notification__content, children }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(styles.notification__close, focusStyles.focusable),
+            onClick: onClose,
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+});
+Notification.displayName = "Notification";
+export {
+  Notification
+};
+//# sourceMappingURL=Notification.js.map

package/dist/components/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { forwardRef, type ComponentType, type SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = forwardRef<HTMLDivElement, NotificationProps>(function Notification(\n    {\n        variant,\n        children,\n        closable = false,\n        onClose,\n        closeLabel = 'Sulje ilmoitus',\n        className,\n        ...props\n    },\n    ref,\n) {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n            {...props}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n});\n\nNotification.displayName = 'Notification';\n"],"names":["ErrorIcon","Notification"],"mappings":";;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,WAA8C,SAASC,cAC/E;AAAA,EACI;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACP,GACA,KACF;AACE,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAC/E,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAED,aAAa,cAAc;"}

package/dist/components/Notification/Notification.module.css.cjs

@@ -0,0 +1,24 @@
+require('./Notification.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const notification = "_notification_1glup_8";
+const notification__icon = "_notification__icon_1glup_36";
+const notification__content = "_notification__content_1glup_59";
+const notification__close = "_notification__close_1glup_70";
+const styles = {
+  notification,
+  "notification--info": "_notification--info_1glup_19",
+  "notification--success": "_notification--success_1glup_23",
+  "notification--warning": "_notification--warning_1glup_27",
+  "notification--error": "_notification--error_1glup_31",
+  "notification__icon-container": "_notification__icon-container_1glup_36",
+  notification__icon,
+  notification__content,
+  notification__close
+};
+exports.default = styles;
+exports.notification = notification;
+exports.notification__close = notification__close;
+exports.notification__content = notification__content;
+exports.notification__icon = notification__icon;
+//# sourceMappingURL=Notification.module.css.cjs.map

package/dist/components/Notification/Notification.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Notification/Notification.module.css.js

@@ -0,0 +1,24 @@
+import './Notification.css';
+const notification = "_notification_1glup_8";
+const notification__icon = "_notification__icon_1glup_36";
+const notification__content = "_notification__content_1glup_59";
+const notification__close = "_notification__close_1glup_70";
+const styles = {
+  notification,
+  "notification--info": "_notification--info_1glup_19",
+  "notification--success": "_notification--success_1glup_23",
+  "notification--warning": "_notification--warning_1glup_27",
+  "notification--error": "_notification--error_1glup_31",
+  "notification__icon-container": "_notification__icon-container_1glup_36",
+  notification__icon,
+  notification__content,
+  notification__close
+};
+export {
+  styles as default,
+  notification,
+  notification__close,
+  notification__content,
+  notification__icon
+};
+//# sourceMappingURL=Notification.module.css.js.map

package/dist/components/Notification/Notification.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/components/Notification/Notification.types.d.ts

@@ -0,0 +1,40 @@
+import type * as React from 'react';
+export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
+interface NotificationBaseProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /**
+     * Visual variant determining the color and icon.
+     */
+    readonly variant: NotificationVariant;
+    /**
+     * Notification message content.
+     */
+    readonly children: React.ReactNode;
+}
+interface NotificationClosableProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     */
+    readonly closable: true;
+    /**
+     * Callback fired when the close button is clicked.
+     * Required when `closable` is true.
+     * The consuming application is responsible for handling dismiss logic.
+     */
+    readonly onClose: () => void;
+    /**
+     * Accessible label for the close button.
+     */
+    readonly closeLabel?: string;
+}
+interface NotificationStaticProps extends NotificationBaseProps {
+    /**
+     * Whether to show the close button.
+     * @default false
+     */
+    readonly closable?: false;
+    readonly onClose?: never;
+    readonly closeLabel?: never;
+}
+export type NotificationProps = NotificationClosableProps | NotificationStaticProps;
+export {};
+//# sourceMappingURL=Notification.types.d.ts.map

package/dist/components/Notification/Notification.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E,UAAU,qBAAsB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3F;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,mBAAmB,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC7D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,UAAU,uBAAwB,SAAQ,qBAAqB;IAC3D;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B;AAED,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,GAAG,uBAAuB,CAAC"}

package/dist/components/Notification/index.d.ts

@@ -0,0 +1,3 @@
+export { Notification } from './Notification';
+export type { NotificationProps, NotificationVariant } from './Notification.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Notification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/font-definitions.css

@@ -0,0 +1,61 @@
+/* DNA Text font definition */
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Medium.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Text';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAText-Bold.woff') format('woff');
+}
+
+/* DNA Heading font definition */
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-DemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'DNA Heading';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src:
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff2') format('woff2'),
+        url('https://www.dna.fi/fonts/DNAHeading-Black.woff') format('woff');
+}