@drivenets/design-system 0.0.1

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

@@ -0,0 +1,257 @@
+@use '../../../../styles/typography';
+
+$color-primary-default: var(--action-cta1);
+$color-primary-hover: var(--action-hover-light);
+$color-primary-active: var(--action-active-light);
+$color-primary-disabled: var(--action-disabled);
+
+$color-secondary-default: var(--action-cta3);
+$color-secondary-hover: var(--neutral-4);
+$color-secondary-disabled: var(--action-disabled);
+
+$color-error-default: var(--system-status-error);
+$color-error-hover: var(--utility-error);
+$color-error-active: var(--utility-error);
+$color-error-disabled: var(--action-disabled);
+
+$color-white: var(--white);
+$color-neutral-6: var(--utility-disabled);
+$color-neutral-4: var(--neutral-4);
+
+@mixin button-filled($background, $hover, $active, $disabled) {
+	background: $background;
+	color: $color-white;
+
+	&:disabled {
+		color: $color-neutral-6;
+		background: $disabled;
+	}
+}
+
+@mixin button-ghost($color, $hover, $active, $disabled) {
+	border: 2px solid $color;
+	color: $color;
+
+	&:disabled {
+		color: $disabled;
+		border-color: $disabled;
+	}
+}
+
+@mixin button-borderless($color, $hover, $active, $disabled) {
+	color: $color;
+	border: none;
+
+	&.content {
+		gap: 4px;
+	}
+
+	&:hover {
+		color: $hover;
+	}
+
+	&:active {
+		color: $active;
+	}
+
+	&:disabled {
+		color: $disabled;
+	}
+}
+
+@mixin button-round($background, $hover, $active, $disabled) {
+	@include button-filled($background, $hover, $active, $disabled);
+	border-radius: 32px;
+}
+
+.button {
+	@include typography.regular;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	white-space: nowrap;
+	cursor: pointer;
+	border: none;
+	padding: 0;
+	font: inherit;
+	background: none;
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+
+	&:not(:disabled) {
+		cursor: pointer;
+	}
+
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+	}
+
+	&.small {
+		@include typography.p-base;
+		padding: 6px 12px;
+
+		.content {
+			gap: 6px;
+		}
+	}
+
+	&.medium {
+		@include typography.p-base;
+		@include typography.medium;
+		padding: 12px;
+
+		.content {
+			gap: 9px;
+		}
+	}
+
+	&.large {
+		@include typography.p-base;
+		@include typography.medium;
+		padding: 14px 12px;
+	}
+
+	&.primary-filled {
+		@include button-filled(
+			$color-primary-default,
+			$color-primary-hover,
+			$color-primary-active,
+			$color-primary-disabled
+		);
+	}
+
+	&.primary-ghost {
+		@include button-ghost(
+			$color-primary-default,
+			$color-primary-hover,
+			$color-primary-active,
+			$color-neutral-4
+		);
+	}
+
+	&.primary-borderless {
+		@include button-borderless(
+			$color-primary-default,
+			$color-primary-hover,
+			$color-primary-active,
+			$color-primary-disabled
+		);
+	}
+
+	&.primary-round {
+		@include button-round(
+			$color-primary-default,
+			$color-primary-hover,
+			$color-primary-active,
+			$color-primary-disabled
+		);
+	}
+
+	&.primary-dashed {
+		@include button-ghost(
+			$color-primary-default,
+			$color-primary-hover,
+			$color-primary-active,
+			$color-neutral-4
+		);
+		border-style: dashed;
+	}
+
+	&.secondary-filled {
+		@include button-filled(
+			$color-secondary-default,
+			$color-secondary-hover,
+			$color-secondary-hover,
+			$color-secondary-disabled
+		);
+	}
+
+	&.secondary-ghost {
+		@include button-ghost(
+			$color-secondary-default,
+			$color-secondary-hover,
+			$color-secondary-hover,
+			$color-secondary-disabled
+		);
+	}
+
+	&.secondary-borderless {
+		@include button-borderless(
+			$color-secondary-default,
+			$color-secondary-hover,
+			$color-secondary-hover,
+			$color-secondary-disabled
+		);
+	}
+
+	&.secondary-round {
+		@include button-round(
+			$color-secondary-default,
+			$color-secondary-hover,
+			$color-secondary-hover,
+			$color-secondary-disabled
+		);
+	}
+
+	&.secondary-dashed {
+		@include button-ghost(
+			$color-secondary-default,
+			$color-secondary-hover,
+			$color-secondary-hover,
+			$color-secondary-disabled
+		);
+		border-style: dashed;
+	}
+
+	&.error-filled {
+		@include button-filled(
+			$color-error-default,
+			$color-error-hover,
+			$color-error-active,
+			$color-error-disabled
+		);
+	}
+
+	&.error-ghost {
+		@include button-ghost(
+			$color-error-default,
+			$color-error-hover,
+			$color-error-active,
+			$color-error-disabled
+		);
+	}
+
+	&.error-borderless {
+		@include button-borderless(
+			$color-error-default,
+			$color-error-hover,
+			$color-error-active,
+			$color-error-disabled
+		);
+	}
+
+	&.error-round {
+		@include button-round(
+			$color-error-default,
+			$color-error-hover,
+			$color-error-active,
+			$color-error-disabled
+		);
+	}
+
+	&.error-dashed {
+		@include button-ghost(
+			$color-error-default,
+			$color-error-hover,
+			$color-error-active,
+			$color-error-disabled
+		);
+		border-style: dashed;
+	}
+}

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

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import type React from 'react';
+import styles from './ds-button-legacy.module.scss';
+import type { DsButtonProps } from './ds-button-legacy.types';
+
+/**
+ * Design system Button component
+ */
+const DsButton: React.FC<DsButtonProps> = ({
+	schema = 'primary',
+	variant = 'filled',
+	size = 'medium',
+	disabled = false,
+	className,
+	contentClassName,
+	children,
+	...props
+}) => {
+	const buttonClass = classNames(
+		styles.button,
+		styles[`${schema}-${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-legacy/ds-button-legacy.types.ts

@@ -0,0 +1,41 @@
+import type React from 'react';
+
+export const buttonSchemas = ['primary', 'secondary', 'error'] as const;
+export type ButtonSchema = (typeof buttonSchemas)[number];
+
+export const buttonVariants = ['filled', 'ghost', 'borderless', 'round', 'dashed'] 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> {
+	/**
+	 * Color schema of the button
+	 * @default 'primary'
+	 */
+	schema?: ButtonSchema;
+
+	/**
+	 * 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-legacy/index.ts

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