@drivenets/design-system 0.0.1

package/src/components/ds-tooltip/ds-tooltip.tsx

@@ -0,0 +1,33 @@
+import { type FC, isValidElement } from 'react';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import classNames from 'classnames';
+import styles from './ds-tooltip.module.scss';
+import type { DsTooltipProps } from './ds-tooltip.types';
+import { DsTypography } from '../ds-typography';
+
+const DsTooltip: FC<DsTooltipProps> = ({ content, children }) => {
+	if (content === undefined) {
+		return children;
+	}
+	return (
+		<Tooltip.Provider delayDuration={200}>
+			<Tooltip.Root>
+				<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content className={classNames(styles.tooltip)} side="top" align="center" sideOffset={4}>
+						{isValidElement(content) ? (
+							content
+						) : (
+							<DsTypography variant="body-xs-reg" className={styles.content}>
+								{content}
+							</DsTypography>
+						)}
+						<Tooltip.Arrow className={styles.arrow} />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	);
+};
+
+export default DsTooltip;

package/src/components/ds-tooltip/ds-tooltip.types.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+
+export interface DsTooltipProps {
+	/**
+	 * Tooltip content
+	 */
+	content?: string | ReactNode;
+	/**
+	 * The content to be rendered inside the tooltip
+	 */
+	children: ReactNode;
+}

package/src/components/ds-tooltip/index.tsx

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

package/src/components/ds-typography/ds-typography.config.ts

@@ -0,0 +1,32 @@
+export const semanticElementMap = {
+	// Body variants
+	'body-md-reg': 'p',
+	'body-md-md': 'p',
+	'body-md-semi-bold': 'p',
+	'body-md-bold': 'p',
+	'body-md-link': 'a',
+
+	'body-sm-reg': 'span',
+	'body-sm-md': 'span',
+	'body-sm-semi-bold': 'span',
+	'body-sm-bold': 'span',
+	'body-sm-link': 'a',
+
+	'body-xs-reg': 'span',
+	'body-xs-md': 'span',
+	'body-xs-semi-bold': 'span',
+	'body-xs-bold': 'span',
+	'body-xs-link': 'a',
+
+	// Code variants
+	'code-sm-reg': 'code',
+	'code-sm-semi-bold': 'code',
+	'code-xs-reg': 'code',
+	'code-xs-semi-bold': 'code',
+
+	// Heading variants
+	heading1: 'h1',
+	heading2: 'h2',
+	heading3: 'h3',
+	heading4: 'h4',
+} as const;

package/src/components/ds-typography/ds-typography.module.scss

@@ -0,0 +1,93 @@
+@use '../../styles/typography';
+
+.heading1 {
+	@include typography.heading1;
+}
+
+.heading2 {
+	@include typography.heading2;
+}
+
+.heading3 {
+	@include typography.heading3;
+}
+
+.heading4 {
+	@include typography.heading4;
+}
+
+.body-md-reg {
+	@include typography.body-md-reg;
+}
+
+.body-md-md {
+	@include typography.body-md-md;
+}
+
+.body-md-semi-bold {
+	@include typography.body-md-semi-bold;
+}
+
+.body-md-bold {
+	@include typography.body-md-bold;
+}
+
+.body-md-link {
+	@include typography.body-md-link;
+}
+
+.body-sm-reg {
+	@include typography.body-sm-reg;
+}
+
+.body-sm-md {
+	@include typography.body-sm-md;
+}
+
+.body-sm-semi-bold {
+	@include typography.body-sm-semi-bold;
+}
+
+.body-sm-bold {
+	@include typography.body-sm-bold;
+}
+
+.body-sm-link {
+	@include typography.body-sm-link;
+}
+
+.body-xs-reg {
+	@include typography.body-xs-reg;
+}
+
+.body-xs-md {
+	@include typography.body-xs-md;
+}
+
+.body-xs-semi-bold {
+	@include typography.body-xs-semi-bold;
+}
+
+.body-xs-bold {
+	@include typography.body-xs-bold;
+}
+
+.body-xs-link {
+	@include typography.body-xs-link;
+}
+
+.code-sm-reg {
+	@include typography.code-sm-reg;
+}
+
+.code-sm-semi-bold {
+	@include typography.code-sm-semi-bold;
+}
+
+.code-xs-reg {
+	@include typography.code-xs-reg;
+}
+
+.code-xs-semi-bold {
+	@include typography.code-xs-semi-bold;
+}

package/src/components/ds-typography/ds-typography.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import classNames from 'classnames';
+import type { DsTypographyProps } from './ds-typography.types';
+import { semanticElementMap } from './ds-typography.config';
+import styles from './ds-typography.module.scss';
+
+/*
+ * Design system Typography component that provides consistent text styling
+ */
+const DsTypography: React.FC<DsTypographyProps & { ref?: React.Ref<HTMLElement> }> = ({
+	ref,
+	variant,
+	asChild = false,
+	className,
+	children,
+	...props
+}) => {
+	const Component: React.ElementType = asChild ? Slot : semanticElementMap[variant];
+	return (
+		<Component ref={ref} className={classNames(styles[variant], className)} {...props}>
+			{children}
+		</Component>
+	);
+};
+
+export default DsTypography;

package/src/components/ds-typography/ds-typography.types.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+import type { semanticElementMap } from './ds-typography.config';
+
+export type SemanticVariant = keyof typeof semanticElementMap;
+
+export interface DsTypographyProps {
+	/**
+	 * The semantic variant of the component
+	 */
+	variant: SemanticVariant;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply to the typography component
+	 */
+	style?: React.CSSProperties;
+	/**
+	 * When true, renders as Slot component for composition without extra DOM nodes
+	 */
+	asChild?: boolean;
+	/**
+	 * The content of the component
+	 */
+	children: React.ReactNode;
+}

package/src/components/ds-typography/index.tsx

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

package/src/components/ds-vertical-tabs/ds-vertical-tabs.module.scss

@@ -0,0 +1,60 @@
+@use '../../styles/typography';
+
+.tabList {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	overflow-y: auto;
+
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		width: 0;
+		display: none;
+	}
+}
+
+.tabItem {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 var(--spacing-lg);
+	min-height: var(--spacing-3xl);
+	height: var(--spacing-3xl);
+	flex-shrink: 0;
+	border: none;
+	border-bottom: 1px solid var(--color-border);
+	background: var(--color-background-secondary);
+	cursor: pointer;
+	text-align: left;
+	color: var(--color-font-secondary);
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+	gap: var(--spacing-xs);
+
+	&:hover:not(:disabled):not(.selected):not([data-disabled]) {
+		background: var(--color-background-action-tertiary);
+		color: var(--color-font-main);
+	}
+
+	&.selected,
+	&[data-state='active'] {
+		background: var(--color-background-action-secondary-hover);
+		color: var(--color-font-main);
+	}
+
+	&:disabled,
+	&[data-disabled] {
+		cursor: not-allowed;
+		color: var(--color-font-secondary);
+		opacity: 0.5;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--color-background-selected);
+		outline-offset: -2px;
+		z-index: 1;
+	}
+}

package/src/components/ds-vertical-tabs/ds-vertical-tabs.tsx

@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+import { Tabs } from '@ark-ui/react/tabs';
+import type {
+	DsVerticalTabsContentProps,
+	DsVerticalTabsListProps,
+	DsVerticalTabsRootProps,
+	DsVerticalTabsTabProps,
+} from './ds-vertical-tabs.types';
+import styles from './ds-vertical-tabs.module.scss';
+
+/**
+ * Design system vertical tabs component - compound component for flexible vertical navigation
+ *
+ * @example
+ * ```tsx
+ * <DsVerticalTabs value={selected} onValueChange={handleChange}>
+ *   <DsVerticalTabs.List>
+ *     <DsVerticalTabs.Tab value="status">
+ *       <span>Status</span>
+ *       <span className={styles.badge}>5</span>
+ *     </DsVerticalTabs.Tab>
+ *     <DsVerticalTabs.Tab value="date">Date</DsVerticalTabs.Tab>
+ *   </DsVerticalTabs.List>
+ *   <DsVerticalTabs.Content value="status">Status filters...</DsVerticalTabs.Content>
+ *   <DsVerticalTabs.Content value="date">Date filters...</DsVerticalTabs.Content>
+ * </DsVerticalTabs>
+ * ```
+ */
+const DsVerticalTabs = ({ value, onValueChange, className, style, children }: DsVerticalTabsRootProps) => {
+	const handleValueChange = (details: { value: string | null }) => {
+		onValueChange?.(details.value);
+	};
+
+	return (
+		<Tabs.Root
+			orientation="vertical"
+			value={value}
+			onValueChange={handleValueChange}
+			className={className}
+			style={style}
+		>
+			{children}
+		</Tabs.Root>
+	);
+};
+
+/**
+ * Container for tab triggers
+ */
+const DsVerticalTabsList = ({ className, children }: DsVerticalTabsListProps) => {
+	return <Tabs.List className={classNames(styles.tabList, className)}>{children}</Tabs.List>;
+};
+
+/**
+ * Individual tab trigger - fully customizable content
+ */
+const DsVerticalTabsTab = ({ value, disabled, className, children }: DsVerticalTabsTabProps) => {
+	return (
+		<Tabs.Trigger value={value} disabled={disabled} className={classNames(styles.tabItem, className)}>
+			{children}
+		</Tabs.Trigger>
+	);
+};
+
+/**
+ * Tab content panel - displays when corresponding tab is active
+ */
+const DsVerticalTabsContent = ({ value, className, children }: DsVerticalTabsContentProps) => {
+	return (
+		<Tabs.Content value={value} className={className}>
+			{children}
+		</Tabs.Content>
+	);
+};
+
+DsVerticalTabs.List = DsVerticalTabsList;
+DsVerticalTabs.Tab = DsVerticalTabsTab;
+DsVerticalTabs.Content = DsVerticalTabsContent;
+
+export default DsVerticalTabs;

package/src/components/ds-vertical-tabs/ds-vertical-tabs.types.ts

@@ -0,0 +1,69 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface DsVerticalTabsRootProps {
+	/**
+	 * Currently selected tab value
+	 */
+	value?: string;
+	/**
+	 * Callback when selected tab changes
+	 */
+	onValueChange?: (value: string | null) => void;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Optional inline styles
+	 */
+	style?: CSSProperties;
+	/**
+	 * Child components (DsVerticalTabs.List, etc.)
+	 */
+	children: ReactNode;
+}
+
+export interface DsVerticalTabsListProps {
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Tab trigger components
+	 */
+	children: ReactNode;
+}
+
+export interface DsVerticalTabsTabProps {
+	/**
+	 * Value that identifies this tab
+	 */
+	value: string;
+	/**
+	 * Whether the tab is disabled
+	 */
+	disabled?: boolean;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Tab content (label, icons, badges, etc.)
+	 */
+	children: ReactNode;
+}
+
+export interface DsVerticalTabsContentProps {
+	/**
+	 * Value that identifies which tab this content belongs to
+	 */
+	value: string;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Content to display when tab is active
+	 */
+	children: ReactNode;
+}

package/src/components/ds-vertical-tabs/index.ts

@@ -0,0 +1,7 @@
+export { default as DsVerticalTabs } from './ds-vertical-tabs';
+export type {
+	DsVerticalTabsRootProps,
+	DsVerticalTabsListProps,
+	DsVerticalTabsTabProps,
+	DsVerticalTabsContentProps,
+} from './ds-vertical-tabs.types';

package/src/index.ts

@@ -0,0 +1,34 @@
+export * from './components/ds-alert-banner';
+export * from './components/ds-breadcrumb';
+export * from './components/ds-button';
+export * from './components/ds-checkbox';
+export * from './components/ds-chip';
+export * from './components/ds-chip-group';
+export * from './components/ds-confirmation';
+export * from './components/ds-dialog';
+export * from './components/ds-drawer';
+export * from './components/ds-dropdown-menu';
+export * from './components/ds-expandable-text-input';
+export * from './components/ds-file-upload';
+export * from './components/ds-form-control';
+export * from './components/ds-grid';
+export * from './components/ds-icon';
+export * from './components/ds-modal';
+export * from './components/ds-number-input';
+export * from './components/ds-panel';
+export * from './components/ds-password-input';
+export * from './components/ds-popover';
+export * from './components/ds-radio-group';
+export * from './components/ds-select';
+export * from './components/ds-smart-tabs';
+export * from './components/ds-spinner';
+export * from './components/ds-status-badge';
+export * from './components/ds-stepper';
+export * from './components/ds-system-status';
+export * from './components/ds-table';
+export * from './components/ds-text-input';
+export * from './components/ds-textarea';
+export * from './components/ds-toast';
+export * from './components/ds-tooltip';
+export * from './components/ds-typography';
+export * from './components/ds-vertical-tabs';

package/src/styles/_colors.scss

@@ -0,0 +1,65 @@
+// all colors are defined in https://www.figma.com/design/5BjP3KnzlfAxTbdx1srK48/%F0%9F%A6%BE-DAP-Design-System?node-id=4804-92173&p=f&m=dev
+$colors: (
+	// Primary
+	deep-blue: #001a47,
+	white: #ffffff,
+	black: #000000,
+	// Gradient (Specials)
+	gradient-violet-background: linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%),
+	gradient-violet-transparent: linear-gradient(180deg, rgba(30, 89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100%),
+	gradient-blue-light: linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%),
+	// Neutral
+	neutral-1: #2c3a4b,
+	neutral-2: #4c5f76,
+	neutral-3: #6c7b8e,
+	neutral-4: #8b98a6,
+	neutral-5: #a0aab7,
+	neutral-6: #b3bfd1,
+	neutral-7: #c2cedf,
+	neutral-8: #dee6f1,
+	neutral-9: #eaecef,
+	neutral-10: #f3f5fa,
+	neutral-bg: #dae2f4,
+	// Action
+	action-cta1: #0064fa,
+	action-cta2: #579aff,
+	action-cta3: #6b7b8e,
+	action-active-light: #c7d8ff,
+	action-hover-light: #e0eaff,
+	action-disabled: #b0b4bf,
+	// System Status
+	system-status-ok: #067a00,
+	system-status-info: #005dcf,
+	system-status-error: #d70a00,
+	system-status-alert: #d04d07,
+	system-status-in-progress: #1513da,
+	system-status-pending: #8836d6,
+	// Utility
+	utility-ok: #d6f5cf,
+	utility-info: #c4dcff,
+	utility-error: #ffd8d6,
+	utility-alert: #ffeac0,
+	utility-in-progress: #d9d9ff,
+	utility-pending: #ede2ff,
+	utility-disabled: #e3e3e3,
+	// Map / Scheme
+	map-and-scheme-line-layer-0: #5452f6,
+	map-and-scheme-line-layer-01: #cc4c5f,
+	map-and-scheme-line-layer-02: #00894d,
+	map-and-scheme-line-layer-1-optical: #3b8edb,
+	map-and-scheme-line-layer-2-ethernet: #00b8d9,
+	map-and-scheme-line-layer-3-routing: #9a55e0,
+	map-and-scheme-service-overlay: #c30ede,
+	map-and-scheme-pops-core-zones: #a92a00,
+	map-and-scheme-line-optional-1: #da7b2d
+);
+
+@mixin applyRootColors($colors) {
+	:root {
+		@each $name, $color in $colors {
+			#{'--' + $name}: #{$color};
+		}
+	}
+}
+
+@include applyRootColors($colors);

package/src/styles/_grid.scss

@@ -0,0 +1,111 @@
+@use 'sass:map';
+@use 'sass:math';
+
+// max columns
+$columns: 12;
+// max rows
+$rows: 8;
+
+$gutter: 16px;
+$margin-y: 16px;
+$margin-x: 20px;
+
+$grid-hd: (
+	gutter: $gutter,
+	margin: $margin-y $margin-x,
+);
+
+:root {
+	--grid-gutter: #{$gutter};
+	--grid-margin: #{$margin-x};
+	--grid-columns: #{$columns};
+
+	// Computed width of a single grid column: (viewport_width - margins - gutters) / number_of_columns
+	--grid-column-size: calc(
+		((100vw - 2 * var(--grid-margin)) - ((var(--grid-columns) - 1) * var(--grid-gutter))) /
+			var(--grid-columns)
+	);
+
+	// Generate custom properties for each column span (1 through 12)
+	// Each --col-span-N represents the total width for spanning N columns
+	@for $i from 1 through $columns {
+		// Margins are added to all column spans to ensure proper alignment
+		// The last column span (full width) receives 2 margins (left + right), others receive 1 margin (typically left)
+		$margins: if($i == $columns, 2, 1);
+
+		// Calculate total width for spanning i columns:
+		// - i columns × column width
+		// - (i-1) gutters between columns
+		// - appropriate margins (1 or 2 depending on if it's full width)
+		--col-span-#{$i}: calc(
+			#{$i} * var(--grid-column-size) + #{($i - 1)} * var(--grid-gutter) + var(--grid-margin) * #{$margins}
+		);
+	}
+}
+
+@mixin grid-setup($grid-setup) {
+	gap: map.get($grid-setup, 'gutter');
+	padding: map.get($grid-setup, 'margin');
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+}
+
+@mixin generate-grid-classes($grid-setup) {
+	@for $i from 1 through $columns {
+		.ds-grid-col-span-#{$i} {
+			--col-span: #{$i};
+		}
+		@if $i < $columns {
+			.ds-grid-col-start-#{$i} {
+				--col-start: #{$i};
+			}
+		}
+	}
+	@for $i from 1 through $rows {
+		.ds-grid-row-span-#{$i} {
+			--row-span: #{$i};
+		}
+		@if $i < $rows {
+			.ds-grid-row-start-#{$i} {
+				--row-start: #{$i};
+			}
+		}
+	}
+	@for $i from 3 through $columns {
+		&.ds-grid-cols-#{$i} {
+			grid-template-columns: repeat($i, 1fr);
+		}
+	}
+	@for $i from 1 through math.floor(calc($rows / 2)) {
+		$row-count: 2 * $i;
+		&.ds-grid-rows-#{$row-count} {
+			grid-template-rows: repeat($row-count, 1fr);
+		}
+	}
+	.ds-grid-col-span-full {
+		--col-span: #{$columns};
+	}
+	.ds-grid-row-span-full {
+		--row-span: #{$rows};
+	}
+}
+
+.ds-grid {
+	display: grid;
+	grid-template-columns: repeat($columns, 1fr);
+	grid-template-rows: 1fr;
+	@include grid-setup($grid-hd);
+	@include generate-grid-classes($grid-hd);
+
+	/*
+    @media screen and (min-width: $qhd) {
+      @include grid-setup($grid-qhd);
+    }
+  */
+}
+
+.ds-grid > [class^='ds-grid'] {
+	grid-column: var(--col-start, auto) / span var(--col-span, 1);
+	grid-row: var(--row-start, auto) / span var(--row-span, 1);
+}

package/src/styles/_mixin.scss

@@ -0,0 +1 @@
+@import './mixins/list';