@reltio/design 0.0.0-65

package/README.md

@@ -0,0 +1,58 @@
+
+**@reltio/design** is a public JavaScript library that contains key components and utilities for developing Reltio UI applications.
+
+- Built on ReactJS.
+- Intended for Reltio internal teams developing applications.
+- [Storybook with component examples is available here](https://reltio.design).
+
+## Installation
+
+To install, use NPM:  
+```bash
+npm install @reltio/design
+```
+## Usage
+
+Example usage of the **Button** component:
+
+```jsx
+import React from 'react';
+import { Button } from '@reltio/design';
+
+function App() {
+  return <Button>Touch me</Button>;
+}
+
+export default App;
+```
+
+**Important:** React is listed as peer dependencies. Make sure it's added to your project.
+
+## Target Audience
+
+The library is designed for Reltio internal teams developing applications.
+
+If you need additional components from the [Storybook](https://reltio.design), contact the **UI Center of Excellence** team at [ui.coe@reltio.com](mailto:ui.coe@reltio.com).
+
+## Contribution
+
+Adding or modifying components is done via the monorepo: [https://bitbucket.org/reltio-ondemand/reltio-design](https://bitbucket.org/reltio-ondemand/reltio-design).
+
+### Development Process:
+
+1. Ensure you have write access to the monorepo.
+2. Create a feature branch for your changes.
+3. Run Storybook locally with `npm run dev`
+3. Follow the standard pull request (PR) creation and code review processes adopted across Reltio teams.
+4. After your PR is successfully merged into the main branch, run a **custom Bitbucket pipeline** to publish the component to NPM.
+
+### Publishing:
+
+- If the component is published from the main branch, it will be released to NPM.
+- If it is published from a feature branch, the component will be versioned as `0.0.0-{BUILD_ID}` and tagged with `{BRANCH_NAME}`.
+
+For any questions about the process, contact the **UI Center of Excellence** team via [ui.coe@reltio.com](mailto:ui.coe@reltio.com).
+
+## License
+
+This library is distributed under Reltio’s corporate license and is intended for internal use only.

package/components/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonProps } from "./Button.types";
+/**
+ * Universal Button Component
+ *
+ * A flexible, accessible button component that supports multiple variants
+ * (filled, outlined, text), color options (primary, secondary, inherited),
+ * sizes, states, and can render as either a button or anchor element.
+ */
+export declare const Button: ({ variant, color, size, disabled, fullWidth, children, className, onClick, href, type, "aria-label": ariaLabel, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/Button/Button.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { classNames } from "../../utils/classNames";
+import styles from "./Button.module.css";
+/**
+ * Universal Button Component
+ *
+ * A flexible, accessible button component that supports multiple variants
+ * (filled, outlined, text), color options (primary, secondary, inherited),
+ * sizes, states, and can render as either a button or anchor element.
+ */
+export const Button = ({ variant = "filled", color = "inherited", size = "medium", disabled = false, fullWidth = false, children, className, onClick, href, type = "button", "aria-label": ariaLabel, ...rest }) => {
+    const buttonRef = useRef(null);
+    // Remove focus when button becomes disabled
+    useEffect(() => {
+        if (disabled &&
+            buttonRef.current &&
+            document.activeElement === buttonRef.current) {
+            buttonRef.current.blur();
+        }
+    }, [disabled]);
+    // Determine if button is interactive
+    const isInteractive = !disabled;
+    // Handle click events
+    const handleClick = (event) => {
+        if (!isInteractive) {
+            event.preventDefault();
+            return;
+        }
+        // Prevent navigation for disabled anchors
+        if (href && disabled) {
+            event.preventDefault();
+            return;
+        }
+        onClick?.(event);
+    };
+    // Handle keyboard events (Enter and Space)
+    const handleKeyDown = (event) => {
+        if (!isInteractive) {
+            event.preventDefault();
+            return;
+        }
+        // Enter and Space activate button
+        if (event.key === "Enter" || event.key === " ") {
+            if (event.key === " ") {
+                event.preventDefault(); // Prevent page scroll
+            }
+            if (href) {
+                // For anchors, trigger click
+                buttonRef.current?.click();
+            }
+            else {
+                // For buttons, trigger onClick
+                onClick?.(event);
+            }
+        }
+    };
+    // Compose className using classNames utility
+    const composedClassName = classNames(styles.root, styles[variant], styles[color], styles[size], disabled && styles.disabled, fullWidth && styles.fullWidth, className);
+    // ARIA attributes
+    const ariaAttributes = {
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled ? true : undefined,
+    };
+    // Render as anchor if href is provided
+    if (href) {
+        return (_jsx("a", { ref: buttonRef, href: disabled ? undefined : href, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+    }
+    // Render as button
+    return (_jsx("button", { ref: buttonRef, type: type, disabled: disabled, className: composedClassName, onClick: handleClick, onKeyDown: handleKeyDown, ...ariaAttributes, ...rest, children: children }));
+};

package/components/Button/Button.module.css.d.ts

@@ -0,0 +1,2 @@
+import json from './Button.module.css.json';
+export default json;

package/components/Button/Button.module.css.js

@@ -0,0 +1,194 @@
+import styleInject from 'style-inject';
+import json from './Button.module.css.json';
+styleInject(`
+/* CSS Custom Properties - All defined on .root (Principle IX) */
+._root_1lt78_1 {
+	/* Font tokens */
+	--reltio-button-font-family: var(
+		--reltio-font-family-body,
+		"Roboto",
+		sans-serif
+	);
+	--reltio-button-font-size: var(--reltio-font-size-body, 16px);
+	--reltio-button-font-weight: var(--reltio-font-weight-body, 500);
+	--reltio-button-line-height: var(--reltio-line-height-body, 1.5);
+	--reltio-button-letter-spacing: var(--reltio-letter-spacing-body, 0.15px);
+
+	/* Color tokens */
+	--reltio-button-color-background: #f5f5fa;
+	--reltio-button-color-primary: var(--reltio-color-primary, #0000cc);
+	--reltio-button-color-primary-text: var(--reltio-color-on-primary, #ffffff);
+	--reltio-button-color-text: var(--reltio-color-text, #0e0e25);
+
+	/* Spacing tokens */
+	--reltio-button-padding-x-small: var(--reltio-spacing-sm, 16px);
+	--reltio-button-padding-y-small: var(--reltio-spacing-xs, 8px);
+	--reltio-button-padding-x-medium: var(--reltio-spacing-md, 20px);
+	--reltio-button-padding-y-medium: var(--reltio-spacing-sm, 12px);
+	--reltio-button-padding-x-large: var(--reltio-spacing-lg, 32px);
+	--reltio-button-padding-y-large: var(--reltio-spacing-md, 16px);
+	--reltio-button-gap-x: var(--reltio-spacing-xs, 8px);
+
+	/* Size tokens */
+	--reltio-button-height-small: var(--reltio-spacing-xl, 32px);
+	--reltio-button-height-medium: var(--reltio-spacing-2xl, 40px);
+	--reltio-button-height-large: var(--reltio-spacing-3xl, 48px);
+
+	/* Border and shape */
+	--reltio-button-border-radius: 9999px; /* Fully rounded corners (pill shape) - Material Design 3 */
+	--reltio-button-border-width: 0;
+
+	/* Transitions */
+	--reltio-button-transition-duration: 200ms;
+	--reltio-button-transition-timing: ease;
+
+	/* Disabled state */
+	--reltio-button-disabled-opacity: 0.38;
+	--reltio-button-disabled-cursor: not-allowed;
+
+	/* Base styles */
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--reltio-button-gap-x);
+	border: var(--reltio-button-border-width) solid transparent;
+	border-radius: var(--reltio-button-border-radius);
+	cursor: pointer;
+	font-family: var(--reltio-button-font-family);
+	font-size: var(--reltio-button-font-size);
+	font-weight: var(--reltio-button-font-weight);
+	line-height: var(--reltio-button-line-height);
+	letter-spacing: var(--reltio-button-letter-spacing);
+	text-align: center;
+	text-decoration: none;
+	white-space: nowrap;
+	user-select: none;
+	transition: all var(--reltio-button-transition-duration)
+		var(--reltio-button-transition-timing);
+	box-sizing: border-box;
+	/* Remove default button styles */
+	background: none;
+	margin: 0;
+	padding: 0;
+
+	/* Focus visible state */
+	&:focus-visible {
+		outline: 2px solid var(--reltio-button-color-primary);
+		outline-offset: 2px;
+	}
+
+	/* Disabled state */
+	&:disabled,
+	&[aria-disabled="true"] {
+		opacity: var(--reltio-button-disabled-opacity);
+		cursor: var(--reltio-button-disabled-cursor);
+		pointer-events: none;
+	}
+}
+
+/* Style: Filled - base structure */
+._filled_1lt78_87 {
+	border: none;
+}
+
+/* Style: Outlined - base structure */
+._outlined_1lt78_92 {
+	background-color: transparent;
+	border: 1px solid;
+}
+
+/* Style: Text - base structure */
+._text_1lt78_98 {
+	background-color: transparent;
+	border: none;
+}
+
+/* Filled + Primary */
+._filled_1lt78_87._primary_1lt78_104 {
+	background-color: var(--reltio-button-color-primary);
+	color: #fff;
+
+	&:hover {
+		background-color: #006;
+	}
+}
+
+/* Filled + Inherited */
+._filled_1lt78_87._inherited_1lt78_114 {
+	background-color: var(--reltio-button-color-background);
+	color: var(--reltio-button-color-text);
+}
+
+/* Outlined + Primary */
+._outlined_1lt78_92._primary_1lt78_104 {
+	border-color: var(--reltio-button-color-primary);
+	color: var(--reltio-button-color-primary);
+
+	&:hover {
+		background-color: var(--reltio-button-color-background);
+	}
+}
+
+/* Outlined + Inherited */
+._outlined_1lt78_92._inherited_1lt78_114 {
+	/* Border and text color inherit from parent */
+	border-color: currentColor;
+	color: inherit;
+
+	&:hover {
+		background-color: var(--reltio-button-color-background);
+	}
+}
+
+/* Text + Primary */
+._text_1lt78_98._primary_1lt78_104 {
+	color: var(--reltio-button-color-primary);
+
+	&:hover {
+		background-color: var(--reltio-button-color-background);
+	}
+}
+
+/* Text + Inherited */
+._text_1lt78_98._inherited_1lt78_114 {
+	color: inherit;
+
+	&:hover {
+		background-color: var(--reltio-button-color-background);
+	}
+}
+
+/* Size: Small */
+._small_1lt78_159 {
+	min-height: var(--reltio-button-height-small);
+	padding: var(--reltio-button-padding-y-small)
+		var(--reltio-button-padding-x-small);
+	font-size: 0.875rem;
+}
+
+/* Size: Medium */
+._medium_1lt78_167 {
+	min-height: var(--reltio-button-height-medium);
+	padding: var(--reltio-button-padding-y-medium)
+		var(--reltio-button-padding-x-medium);
+}
+
+/* Size: Large */
+._large_1lt78_174 {
+	min-height: var(--reltio-button-height-large);
+	padding: var(--reltio-button-padding-y-large)
+		var(--reltio-button-padding-x-large);
+}
+
+/* State: Disabled */
+._disabled_1lt78_181 {
+	opacity: var(--reltio-button-disabled-opacity);
+	cursor: var(--reltio-button-disabled-cursor);
+}
+
+/* Full Width */
+._fullWidth_1lt78_187 {
+	width: 100%;
+}
+`);
+export default json;

package/components/Button/Button.module.css.json

@@ -0,0 +1 @@
+{ "root": "_root_1lt78_1", "filled": "_filled_1lt78_87", "outlined": "_outlined_1lt78_92", "text": "_text_1lt78_98", "primary": "_primary_1lt78_104", "inherited": "_inherited_1lt78_114", "small": "_small_1lt78_159", "medium": "_medium_1lt78_167", "large": "_large_1lt78_174", "disabled": "_disabled_1lt78_181", "fullWidth": "_fullWidth_1lt78_187" }

package/components/Button/Button.types.d.ts

@@ -0,0 +1,109 @@
+import type React from "react";
+/**
+ * Visual variant for the button
+ */
+export type ButtonVariant = "filled" | "outlined" | "text";
+/**
+ * Color variant for the button
+ */
+export type ButtonColor = "primary" | "inherited";
+/**
+ * Size variant for the button
+ */
+export type ButtonSize = "small" | "medium" | "large";
+/**
+ * Base button props (without element-specific attributes)
+ */
+type BaseButtonProps = {
+    /**
+     * Visual variant
+     * @default "filled"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Color variant
+     * @default "inherited"
+     */
+    color?: ButtonColor;
+    /**
+     * Size variant
+     * @default "medium"
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take full width of container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Button content (text, icons, etc.)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Additional CSS variables
+     */
+    style?: React.CSSProperties & {
+        "--reltio-button-color-background"?: string;
+        "--reltio-button-color-text"?: string;
+    };
+    /**
+     * Click event handler
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Accessible label for screen readers
+     * Required if button has no visible text
+     */
+    "aria-label"?: string;
+};
+/**
+ * Button props when rendered as button element (no href)
+ */
+type ButtonElementProps = BaseButtonProps & {
+    /**
+     * If href is provided, component renders as anchor element
+     * If href is not provided, component renders as button element
+     */
+    href?: never;
+    /**
+     * Button type (only applicable when rendered as button)
+     * @default "button"
+     */
+    type?: "button" | "submit" | "reset";
+};
+/**
+ * Anchor props when rendered as anchor element (with href)
+ */
+type AnchorElementProps = BaseButtonProps & {
+    /**
+     * URL to navigate to (causes component to render as anchor)
+     */
+    href: string;
+    /**
+     * Button type is not applicable for anchor elements
+     */
+    type?: never;
+    /**
+     * Target attribute for anchor (e.g., "_blank")
+     */
+    target?: string;
+    /**
+     * Rel attribute for anchor (e.g., "noopener noreferrer")
+     */
+    rel?: string;
+};
+/**
+ * Union type for Button component props
+ * Component can be either a button or an anchor based on href prop
+ */
+export type ButtonProps = (ButtonElementProps | AnchorElementProps) & Omit<React.ComponentPropsWithoutRef<"button">, keyof ButtonElementProps> & Omit<React.ComponentPropsWithoutRef<"a">, keyof AnchorElementProps>;
+export {};

package/components/Button/Button.types.js

@@ -0,0 +1 @@
+export {};

package/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Button";
+export type * from "./Button.types";

package/components/Button/index.js

@@ -0,0 +1 @@
+export * from "./Button";

package/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@reltio/design",
+	"version": "0.0.0-65",
+	"main": "packages/design/index.js",
+	"description": "Reltio Design System",
+	"peerDependencies": {
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	},
+	"dependencies": {
+		"style-inject": "^0.3.0"
+	},
+	"scripts": {
+		"build": "node build-css.mjs && tsc && tsc-alias",
+		"postbuild": "cp package.json dist/ && cp README.md dist/"
+	},
+	"devDependencies": {
+		"@types/react": "^17.0.83",
+		"@types/react-dom": "^17.0.26",
+		"glob": "^11.0.0",
+		"postcss": "^8.4.49",
+		"postcss-modules": "^6.0.1",
+		"tsc-alias": "^1.8.10",
+		"typescript": "^5.7.2"
+	}
+}

package/packages/design/index.d.ts

@@ -0,0 +1 @@
+export * from "../../components/Button";

package/packages/design/index.js

@@ -0,0 +1 @@
+export * from "../../components/Button";

package/utils/classNames.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Combines CSS class names into a single string, handling BEM-like naming conventions.
+ * Filters out falsy values and ensures unique class names.
+ * For classes with suffixes (containing '__'), automatically adds the base class.
+ *
+ * @example
+ * classNames('a__b', false, 'c__d', 'c__e') // returns 'a a__b c c__d c__e'
+ *
+ * @param cssClasses - Array of CSS class names (strings) or falsy values
+ * @returns space-separated string of unique CSS class names
+ */
+export declare const classNames: (...cssClasses: (string | undefined | null | false)[]) => string;

package/utils/classNames.js

@@ -0,0 +1,26 @@
+/**
+ * Combines CSS class names into a single string, handling BEM-like naming conventions.
+ * Filters out falsy values and ensures unique class names.
+ * For classes with suffixes (containing '__'), automatically adds the base class.
+ *
+ * @example
+ * classNames('a__b', false, 'c__d', 'c__e') // returns 'a a__b c c__d c__e'
+ *
+ * @param cssClasses - Array of CSS class names (strings) or falsy values
+ * @returns space-separated string of unique CSS class names
+ */
+export const classNames = (...cssClasses) => {
+    const uniqueClasses = new Set();
+    cssClasses.forEach((cssClass) => {
+        if (!cssClass)
+            return;
+        // Add the class itself
+        uniqueClasses.add(cssClass);
+        // If class contains a suffix (__), add the base class
+        const baseClass = cssClass.split("__")[0];
+        if (baseClass && baseClass !== cssClass) {
+            uniqueClasses.add(baseClass);
+        }
+    });
+    return Array.from(uniqueClasses).join(" ");
+};