@drivenets/design-system 0.0.1

package/src/components/ds-button/versions/ds-button-new/ds-button-new.module.scss

@@ -0,0 +1,580 @@
+@use '../../../../styles/typography';
+
+$button-size-small: 28px;
+$button-size-default: 32px;
+$button-size-large: 40px;
+
+.button {
+	@include typography.body-sm-md;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	cursor: pointer;
+	background: none;
+	outline: none;
+	padding-block: 0;
+	padding-inline: 0;
+	align-self: stretch;
+	border: 2px solid transparent;
+	border-radius: var(--exo-spacing-2x-small);
+
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--exo-spacing-2x-small);
+		padding: 0 var(--spacing-sm);
+		border: 1px solid transparent;
+		border-radius: var(--exo-spacing-2x-small);
+		flex-grow: 1;
+	}
+
+	&.small .content {
+		@include typography.body-xs-md;
+		height: $button-size-small;
+	}
+
+	&.medium .content {
+		height: $button-size-default;
+	}
+
+	&.large .content {
+		@include typography.body-md-md;
+		height: $button-size-large;
+	}
+
+	&.iconButton {
+		aspect-ratio: 1 / 1;
+		align-items: stretch;
+
+		.content {
+			flex: 1;
+			padding: 0;
+		}
+
+		&.large .content {
+			height: $button-size-large;
+			width: $button-size-large;
+		}
+
+		&.medium .content {
+			height: $button-size-default;
+			width: $button-size-default;
+		}
+
+		&.small .content {
+			height: $button-size-small;
+			width: $button-size-small;
+		}
+	}
+
+	&.primary-filled {
+		border: 2px solid transparent;
+		color: var(--color-font-on-action);
+
+		.content {
+			background: var(--color-background-selected);
+		}
+
+		&:hover {
+			.content {
+				background: var(--color-background-selected-hover);
+			}
+		}
+
+		&:focus-visible {
+			border-color: var(--color-background-selected);
+
+			.content {
+				border-color: var(--color-background);
+				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+
+			.content {
+				background: var(--color-background-disable);
+				border-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&.secondary-filled {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-action);
+
+		.content {
+			background: var(--color-background);
+			border-color: var(--color-border);
+		}
+
+		&:hover {
+			&:not(:disabled) {
+				.content {
+					border-color: var(--color-background-action-hover);
+					background: var(--color-background-action-hover-weak);
+				}
+			}
+
+			&:focus-visible {
+				background: var(--color-background);
+
+				.content {
+					border-color: var(--color-background-action-secondary);
+				}
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-action-hover);
+
+			.content {
+				border-color: var(--color-background);
+				background: var(--color-background-action-hover-weak);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-disable);
+
+			.content {
+				border-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&.tertiary-filled {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-action);
+
+		.content {
+			background: var(--color-background);
+			border-color: transparent;
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				border-color: var(--color-border);
+				background: var(--color-background-action-hover-weak);
+			}
+		}
+
+		&:active {
+			.content {
+				border-color: var(--color-border);
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-action-hover);
+
+			.content {
+				border-color: var(--color-background);
+				background: var(--color-background-action-hover-weak);
+				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-disable);
+		}
+	}
+
+	&.secondary-ghost {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-selected);
+
+		.content {
+			background: var(--color-background-action-secondary);
+			border-color: var(--color-background-selected);
+		}
+
+		&:hover {
+			&:not(:disabled) {
+				.content {
+					background: var(--color-background-action-secondary-hover);
+				}
+			}
+
+			&:focus-visible {
+				.content {
+					border-color: var(--color-background-action-secondary);
+				}
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-selected);
+
+			.content {
+				border-color: var(--color-background);
+				background: var(--color-background-action-secondary-hover);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-disable);
+
+			.content {
+				border-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&.tertiary-ghost {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-selected);
+
+		.content {
+			background: var(--color-background);
+			border-color: transparent;
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				background: var(--color-background-action-secondary-hover);
+			}
+		}
+
+		&:active {
+			.content {
+				border-color: var(--color-border);
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-selected);
+
+			.content {
+				border-color: var(--color-background);
+				background: var(--color-background-action-secondary-hover);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-disable);
+
+			.content {
+				border-color: var(--color-background);
+			}
+		}
+	}
+
+	&.primary-danger {
+		border: 2px solid transparent;
+		color: var(--color-font-on-action);
+
+		.content {
+			background: var(--color-background-danger-strong);
+		}
+
+		&:hover {
+			.content {
+				background: var(--color-background-danger-strong-hover);
+			}
+		}
+
+		&:focus-visible {
+			border-color: var(--color-background-danger-strong);
+
+			.content {
+				border-color: var(--color-background);
+				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+
+			.content {
+				background: var(--color-background-disable);
+				border-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&.secondary-danger {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-danger-strong);
+
+		.content {
+			background: var(--color-background);
+			border-color: var(--color-background-danger-strong);
+		}
+
+		&:hover {
+			&:not(:disabled) {
+				color: var(--color-background-danger-strong-hover);
+
+				.content {
+					border-color: var(--color-background-danger-strong-hover);
+					background: var(--color-background-danger-weak);
+				}
+			}
+
+			&:focus-visible {
+				.content {
+					border-color: var(--color-background-action-secondary);
+				}
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-danger-strong);
+
+			.content {
+				color: var(--color-background-danger-strong-hover);
+				border-color: var(--color-background);
+				background: var(--color-background-danger-weak);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-disable);
+
+			.content {
+				border-color: var(--color-background-disable);
+			}
+		}
+	}
+
+	&.tertiary-danger {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-background-danger-strong);
+
+		.content {
+			background: var(--color-background);
+			border-color: transparent;
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				border-color: var(--color-background-danger-strong-hover);
+				background: var(--color-background-danger-weak);
+			}
+
+			&:focus-visible {
+				background: var(--color-background);
+
+				.content {
+					border-color: var(--color-background);
+				}
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background);
+			border-color: var(--color-background-danger-strong);
+
+			.content {
+				border-color: var(--color-background);
+				background: var(--color-background-danger-weak);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			background: var(--color-background);
+			color: var(--color-background-disable);
+		}
+	}
+
+	&.primary-dark {
+		border: 2px solid transparent;
+		color: var(--color-font-on-action);
+
+		.content {
+			background: var(--color-dark-buttons-primary);
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				background: var(--color-dark-buttons-primary-hover);
+			}
+		}
+
+		&:active:not(:disabled) {
+			.content {
+				background: var(--color-dark-buttons-primary-hover);
+			}
+		}
+
+		&:focus-visible {
+			background: var(--color-background-brand);
+			border-color: var(--color-dark-buttons-primary);
+
+			.content {
+				border-color: var(--color-font-on-action);
+				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+
+			.content {
+				background: var(--color-background-action-inverse);
+				color: var(--color-background-deselected);
+			}
+		}
+	}
+
+	&.secondary-dark {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-dark-buttons-primary-hover);
+
+		.content {
+			background: transparent;
+			border-color: var(--color-dark-buttons-primary-hover);
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				background: var(--color-dark-buttons-secondary-background);
+				border-color: var(--color-dark-buttons-secondary-hover);
+				color: var(--color-dark-buttons-secondary-hover);
+			}
+		}
+
+		&:active:not(:disabled) {
+			.content {
+				background: transparent;
+				border-color: var(--color-dark-buttons-secondary-hover);
+				color: var(--color-dark-buttons-secondary-hover);
+			}
+		}
+
+		&:focus-visible {
+			background: transparent;
+			border-color: var(--color-dark-buttons-secondary-hover);
+
+			.content {
+				border-color: transparent;
+				background: var(--color-dark-buttons-secondary-background);
+				color: var(--color-dark-buttons-secondary-hover);
+				border-radius: calc(var(--exo-spacing-2x-small) / 2);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-deselected);
+
+			.content {
+				border-color: var(--color-background-deselected);
+			}
+		}
+	}
+
+	&.secondary-light-dark {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-dark-buttons-secondary-light);
+
+		.content {
+			background: transparent;
+			border-color: var(--color-dark-buttons-secondary-light);
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				background: var(--color-dark-buttons-secondary-light-hover-background);
+				border-color: var(--color-border);
+				color: var(--color-dark-buttons-tertiary);
+			}
+		}
+
+		&:active:not(:disabled) {
+			.content {
+				background: transparent;
+				border-color: var(--color-background-secondary);
+				color: var(--color-font-on-action);
+			}
+		}
+
+		&:focus-visible {
+			background: transparent;
+			border-color: var(--color-dark-buttons-tertiary);
+			border-radius: var(--spacing-2xs);
+
+			.content {
+				background: var(--Dark-Buttons-secondary-light-hover-background);
+				color: var(--color-dark-buttons-tertiary);
+				border-radius: var(--exo-spacing-2x-small);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-deselected);
+
+			.content {
+				border-color: var(--color-background-deselected);
+			}
+		}
+	}
+
+	&.tertiary-dark {
+		background: transparent;
+		border: 2px solid transparent;
+		color: var(--color-dark-buttons-tertiary);
+
+		.content {
+			background: transparent;
+			border-color: transparent;
+		}
+
+		&:hover:not(:disabled) {
+			.content {
+				background: var(--color-dark-buttons-secondary-light-hover-background);
+				border-color: var(--color-border);
+				color: var(--color-dark-buttons-tertiary);
+			}
+		}
+
+		&:active:not(:disabled) {
+			.content {
+				background: transparent;
+				border-color: var(--color-background-secondary);
+				color: var(--color-font-on-action);
+			}
+		}
+
+		&:focus-visible {
+			background: transparent;
+			border-color: var(--color-dark-buttons-tertiary);
+			border-radius: var(--spacing-2xs);
+
+			.content {
+				background: var(--Dark-Buttons-secondary-light-hover-background);
+				color: var(--color-dark-buttons-tertiary);
+				border-radius: var(--exo-spacing-2x-small);
+			}
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			color: var(--color-background-deselected);
+		}
+	}
+}

package/src/components/ds-button/versions/ds-button-new/ds-button-new.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import type React from 'react';
+import { Children, isValidElement } from 'react';
+import styles from './ds-button-new.module.scss';
+import type { DsButtonProps } from './ds-button-new.types';
+import DsIcon from '../../../ds-icon/ds-icon';
+
+const isIconOnly = (children: React.ReactNode) => {
+	if (Children.count(children) !== 1) {
+		return false;
+	}
+
+	const childArray = Children.toArray(children);
+	const onlyChild = childArray[0];
+
+	return isValidElement(onlyChild) && onlyChild.type === DsIcon;
+};
+
+/**
+ * Design system Button component
+ */
+const DsButton: React.FC<DsButtonProps> = ({
+	buttonType,
+	variant = 'filled',
+	size = 'medium',
+	disabled = false,
+	className,
+	contentClassName,
+	children,
+	...props
+}) => {
+	const type = buttonType ?? (variant === 'ghost' ? 'secondary' : 'primary');
+	const buttonClass = classNames(
+		styles.button,
+		{ [styles.iconButton]: isIconOnly(children) },
+		styles[`${type}-${variant}`],
+		styles[size],
+		{ [styles.disabled]: disabled },
+		className,
+	);
+
+	return (
+		<button type="button" className={buttonClass} disabled={disabled} {...props}>
+			<span className={classNames(styles.content, contentClassName)}>{children}</span>
+		</button>
+	);
+};
+
+export default DsButton;

package/src/components/ds-button/versions/ds-button-new/ds-button-new.types.ts

@@ -0,0 +1,41 @@
+import type React from 'react';
+
+export const buttonTypes = ['primary', 'secondary', 'secondary-light', 'tertiary'] as const;
+export type ButtonType = (typeof buttonTypes)[number];
+
+export const buttonVariants = ['filled', 'ghost', 'danger', 'dark'] as const;
+export type ButtonVariant = (typeof buttonVariants)[number];
+
+export const buttonSizes = ['large', 'medium', 'small'] as const;
+export type ButtonSize = (typeof buttonSizes)[number];
+
+export interface DsButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	/**
+	 * Type of the button
+	 * @default 'primary'
+	 */
+	buttonType?: ButtonType;
+
+	/**
+	 * Visual variant of the button
+	 * @default 'filled'
+	 */
+	variant?: ButtonVariant;
+
+	/**
+	 * Size of the button
+	 * @default 'medium'
+	 */
+	size?: ButtonSize;
+
+	/**
+	 * Whether the button is disabled
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Class name for the button content
+	 */
+	contentClassName?: string;
+}

package/src/components/ds-button/versions/ds-button-new/index.ts

@@ -0,0 +1,2 @@
+export { default as DsButtonNew } from './ds-button-new';
+export * from './ds-button-new.types';