From 814e41c6f0d206eb6f314799bc0bd7ad7bf50a1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?= <98467853+romanaduraciova@users.noreply.github.com> Date: Mon, 20 Jul 2026 16:24:55 +0200 Subject: [PATCH 1/5] fix: elter surface colors --- lib_public/elter_setup.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib_public/elter_setup.css b/lib_public/elter_setup.css index ac0885f..12129ea 100644 --- a/lib_public/elter_setup.css +++ b/lib_public/elter_setup.css @@ -30,8 +30,8 @@ /* Surfaces */ --background: #f0f0f5; /* --base-50 */ - --surface: #e3e3e8 ; /* --base-100 */ - --surface-raised: #c9c9cf; /* --base-200 */ + --surface: #e8e8ed ; /* --base-100 */ + --surface-raised: #dbdbe1; /* --base-200 */ /* Text */ --text: #0a2033; /* --base-950 */ From c59665cd98d954d69aff34631a3ee2eb627e7944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?= <98467853+romanaduraciova@users.noreply.github.com> Date: Mon, 20 Jul 2026 16:45:55 +0200 Subject: [PATCH 2/5] fix: header responsiveness, add mobile nav --- src/app/layout.tsx | 70 +++++++------ src/components/MobileNav.tsx | 129 ++++++++++++++++++++++++ src/components/search/SearchTrigger.tsx | 8 +- 3 files changed, 175 insertions(+), 32 deletions(-) create mode 100644 src/components/MobileNav.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6387184..62c6948 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -33,9 +33,16 @@ import { ThemeProvider } from "../components/ThemeProvider"; import { ThemeSelector } from "../components/ThemeSelector"; import { ThemeInitializer } from "../components/ThemeInitializer"; import { SearchTrigger } from "../components/search/SearchTrigger"; +import { MobileNav } from "../components/MobileNav"; import { Button } from "../../lib/components/primitives/button"; import { Package } from "lucide-react"; +const NAV_ITEMS = [ + { href: "/", label: "Home" }, + { href: "/docs/foundations", label: "Foundations" }, + { href: "/docs/components", label: "Components" }, +]; + const inter = Inter({ subsets: ["latin"] }); // Roboto powers the EOSC theme; Montserrat is used for ELTER headings. @@ -118,7 +125,7 @@ export default function RootLayout({ className="hidden h-20 w-auto dark:block" /> - + Home @@ -137,35 +144,38 @@ export default function RootLayout({ - - - - - - - - +
+ + + + + + + + +
+ diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx new file mode 100644 index 0000000..b4b8acf --- /dev/null +++ b/src/components/MobileNav.tsx @@ -0,0 +1,129 @@ +"use client"; + +import { useState } from "react"; +import Link from "next/link"; +import { Menu, Package } from "lucide-react"; + +import { + Sheet, + SheetContent, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "../../lib/components/primitives/sheet"; +import { Button } from "../../lib/components/primitives/button"; +import { Separator } from "../../lib/components/primitives/separator"; +import { SearchTrigger } from "./search/SearchTrigger"; +import { ThemeSelector } from "./ThemeSelector"; + +export interface MobileNavItem { + href: string; + label: string; +} + +interface MobileNavProps { + items: MobileNavItem[]; + className?: string; +} + +/** + * Header navigation for small screens. Renders a burger button that opens a + * slide-in sheet containing the primary nav links, search, external links and + * the theme selector. Hidden on `lg` and up, where the full header is shown. + */ +export function MobileNav({ items, className }: MobileNavProps) { + const [open, setOpen] = useState(false); + + return ( + + + + + + + Menu + + + + + + +
+ +
+ + + +
+ { + setOpen(false); + }} + > + + + { + setOpen(false); + }} + > + + +
+ + + +
+ +
+ + + ); +} diff --git a/src/components/search/SearchTrigger.tsx b/src/components/search/SearchTrigger.tsx index c5d2300..2031fa3 100644 --- a/src/components/search/SearchTrigger.tsx +++ b/src/components/search/SearchTrigger.tsx @@ -3,6 +3,7 @@ import { useEffect, useState, useSyncExternalStore } from "react"; import { SearchbarTrigger } from "../../../lib/components/compounds/searchbar"; +import { cn } from "../../../lib/lib/utils"; import { SearchDialog } from "./SearchDialog"; const subscribe = () => () => { @@ -17,7 +18,7 @@ function useIsMac() { ); } -export function SearchTrigger() { +export function SearchTrigger({ className }: { className?: string }) { const [open, setOpen] = useState(false); const isMac = useIsMac(); @@ -45,7 +46,10 @@ export function SearchTrigger() { onClick={() => { setOpen(true); }} - className="search-trigger-enter w-40 transition-transform duration-200 hover:scale-[1.02] active:scale-[0.99] md:w-56 lg:w-64" + className={cn( + "search-trigger-enter w-40 transition-transform duration-200 hover:scale-[1.02] active:scale-[0.99] md:w-56 lg:w-64", + className + )} /> From d785fd2a03313d53f908a3324645eca047076078 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?= <98467853+romanaduraciova@users.noreply.github.com> Date: Mon, 20 Jul 2026 17:02:49 +0200 Subject: [PATCH 3/5] fix: docs and home page responsiveness --- lib/components/layout/content.tsx | 5 +- src/components/docs/DocLayout.tsx | 143 +++++++++++------- src/components/landing/ComponentsOverview.tsx | 20 ++- .../landing/FoundationsOverview.tsx | 18 +-- src/components/landing/Overview.tsx | 2 +- 5 files changed, 110 insertions(+), 78 deletions(-) diff --git a/lib/components/layout/content.tsx b/lib/components/layout/content.tsx index cbc9c7c..42189ed 100644 --- a/lib/components/layout/content.tsx +++ b/lib/components/layout/content.tsx @@ -12,7 +12,10 @@ const ContentContainer = forwardRef< return (
{children} diff --git a/src/components/docs/DocLayout.tsx b/src/components/docs/DocLayout.tsx index 40a5388..ddac95a 100644 --- a/src/components/docs/DocLayout.tsx +++ b/src/components/docs/DocLayout.tsx @@ -1,8 +1,9 @@ "use client"; -import React, { useMemo } from "react"; +import React, { useMemo, useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { Menu } from "lucide-react"; import { Breadcrumb, BreadcrumbItem, @@ -18,6 +19,14 @@ import { NavItem, } from "../../../lib/components/layout/sidebar"; import { Content } from "../../../lib/components/layout/content"; +import { Button } from "../../../lib/components/primitives/button"; +import { + Sheet, + SheetContent, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "../../../lib/components/primitives/sheet"; import type { NavSection } from "../../lib/docs-nav"; import { SidebarSearch } from "../search/SidebarSearch"; @@ -28,6 +37,7 @@ interface DocLayoutProps { export function DocLayout({ children, navStructure }: DocLayoutProps) { const pathname = usePathname() || ""; + const [mobileNavOpen, setMobileNavOpen] = useState(false); // Get current category and page info from pathname const { activeCategory, currentPageLabel, categoryPath } = useMemo(() => { @@ -53,64 +63,87 @@ export function DocLayout({ children, navStructure }: DocLayoutProps) { ); const mainSections = navStructure.filter((s) => s.slug !== "getting-started"); + const renderNavTree = (onNavigate?: () => void) => ( + + {gettingStartedSection && ( + + {gettingStartedSection.items.map((item) => ( + + + {item.title} + + + ))} + + )} + + + Foundations + + + Components + + + {mainSections.map((section) => ( + + {section.items.map((item) => ( + + + {item.title} + + + ))} + + ))} + + ); + return (
- - - - {gettingStartedSection && ( - - {gettingStartedSection.items.map((item) => ( - - {item.title} - - ))} - - )} - - - Foundations - - - Components - - - {mainSections.map((section) => ( - - {section.items.map((item) => ( - - {item.title} - - ))} - - ))} - - + + {renderNavTree()} -
-
+
+
+ + + + + + + Documentation + +
+ {renderNavTree(() => { + setMobileNavOpen(false); + })} +
+ + + diff --git a/src/components/landing/ComponentsOverview.tsx b/src/components/landing/ComponentsOverview.tsx index 5969deb..c19dc67 100644 --- a/src/components/landing/ComponentsOverview.tsx +++ b/src/components/landing/ComponentsOverview.tsx @@ -61,8 +61,8 @@ import Link from "next/link"; export default function ComponentsOverview() { return (
-
-
+
+

Components

30+ ready-to-use components. Every component ships with @@ -71,17 +71,15 @@ export default function ComponentsOverview() {

-
- - - -
+ + +
-
+
{/* Buttons */} diff --git a/src/components/landing/FoundationsOverview.tsx b/src/components/landing/FoundationsOverview.tsx index 9ea8e59..e9628c8 100644 --- a/src/components/landing/FoundationsOverview.tsx +++ b/src/components/landing/FoundationsOverview.tsx @@ -23,8 +23,8 @@ import Link from "next/link"; export default function FoundationsOverview() { return (
-
-
+
+

Foundations

Core design tokens for colors, typography, and spacing. Built with @@ -32,14 +32,12 @@ export default function FoundationsOverview() {

-
- - - -
+ + +
diff --git a/src/components/landing/Overview.tsx b/src/components/landing/Overview.tsx index c1c7905..2075f3b 100644 --- a/src/components/landing/Overview.tsx +++ b/src/components/landing/Overview.tsx @@ -7,7 +7,7 @@ export function Overview() { return (
From ee0047e875086756380e759533d5ec64a798b293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Romana=20=C4=8Eur=C3=A1=C4=8Diov=C3=A1?= <98467853+romanaduraciova@users.noreply.github.com> Date: Mon, 20 Jul 2026 17:03:03 +0200 Subject: [PATCH 4/5] deleted dead code --- src/components/ComponentShowcase.tsx | 1458 -------------------------- 1 file changed, 1458 deletions(-) delete mode 100644 src/components/ComponentShowcase.tsx diff --git a/src/components/ComponentShowcase.tsx b/src/components/ComponentShowcase.tsx deleted file mode 100644 index a721712..0000000 --- a/src/components/ComponentShowcase.tsx +++ /dev/null @@ -1,1458 +0,0 @@ -import { useState } from "react"; -import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, - Alert, - AlertDescription, - AlertTitle, - AlertDialog, - AlertDialogAction, - AlertDialogCancel, - AlertDialogContent, - AlertDialogDescription, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogTitle, - AlertDialogTrigger, - AspectRatio, - Avatar, - AvatarFallback, - AvatarImage, - Badge, - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator, - Button, - Calendar, - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, - Carousel, - CarouselContent, - CarouselItem, - CarouselNext, - CarouselPrevious, - Checkbox, - Collapsible, - CollapsibleContent, - CollapsibleTrigger, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Input, - Label, - Progress, - RadioGroup, - RadioGroupItem, - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, - Separator, - Skeleton, - Slider, - Stepper, - StepperContent, - StepperFooter, - StepperHeader, - Switch, - Table, - TableBody, - TableCaption, - TableCell, - TableHead, - TableHeader, - TableRow, - Tabs, - TabsContent, - TabsList, - TabsTrigger, - Textarea, - Toggle, - ToggleGroup, - ToggleGroupItem, - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, - H1, - H2, - H3, - H4, - P, - Strong, - Small, - Muted, - Code, - Link as DesignLink, - Content, - ContentBody, - ContentHeading, - PanelHeader, - Panel, - PanelTitle, - PanelDescription, - PanelContent, - PanelFooter, -} from "../../lib/components/index"; -import { toast } from "sonner"; -import { - Info, - ChevronDown, - Bold, - Italic, - Underline, - CircleCheck, - CircleAlert, - CircleX, -} from "lucide-react"; -import Image from "next/image"; - -// Component copy helper -const ComponentCopySelect = ({ - components, -}: { - components: { name: string; description?: string; import: string }[]; -}) => { - const handleCopy = (importStatement: string, componentName: string) => { - void navigator.clipboard.writeText(importStatement).then(() => { - toast.success("Copied to clipboard!", { - description: `Component ${componentName} import copied.`, - }); - }); - }; - - return ( - - - - - - {components.map((comp) => ( - { - handleCopy(comp.import, comp.name); - }} - className="flex-col items-start p-4 cursor-pointer hover:bg-tertiary" - > -
{comp.name}
- {comp.description && ( -
{comp.description}
- )} - - {comp.import} - - - ))} - - - ); -}; - -function ComponentShowcase() { - const [date, setDate] = useState(new Date()); - const [progress, setProgress] = useState(33); - - return ( - <> -
-
-
- - Components Overview - -

- Component showcase for the e-INFRA CZ Design System built with - shadcn/ui -

- - - - {/* Installation Instructions */} - - - - Installation Instructions - - - -

Install the e-INFRA Design System package:

- npm install @e-infra/design-system - - Then import components as shown in the "Copy - Component" dropdowns below each section. - - - - - - - {/* Typography Section */} -
-
-

- Typography -

- -
- - - Text Hierarchy - - Standardized typography styles for consistent design - - - -
- - Main Heading - -

The quick brown fox jumps

-
- -
- - Section Heading (H2) - -

The quick brown fox jumps

-
- -
- - Sub-heading (H3) - -

The quick brown fox jumps

-
- -
- - Sub-section (H4) - -

The quick brown fox jumps

-
- -
- - Body Text - -

- The quick brown fox jumps over the lazy dog. This is - standard body text that should be used for most content. - It provides good readability and comfortable reading - experience. -

-
- -
- - Bold Paragraph - - - The quick brown fox jumps over the lazy dog. This is - emphasized body text for important information that needs - to stand out. - -
- -
- - Small Text - - - The quick brown fox jumps over the lazy dog. This is - smaller text used for captions, helper text, or secondary - information. - -
- -
- - Extra Small / Caption - - - The quick brown fox jumps over the lazy dog. Used for - timestamps, labels, and micro-copy. - -
- -
- - Code / Monospace - - const greeting = "Hello World"; -
- -
- Link - This is a standard link -
- - -
- - - - {/* Alerts Section */} -
-
-

- Alerts -

- -
-
- - - Heads up! - - You can add components to your app using the cli. - - - - - Success - - Your settings have been saved successfully. - - - - - Warning - - Your account will expire in 3 days. Please renew to continue - enjoying our services. - - - - - Error - - Your session has expired. Please log in again. - - -
-
- - - - {/* Buttons Section */} -
-
-

- Buttons -

- -
-
- - - - - - - - - - - - - -
-
- - - - {/* Cards Section */} -
-
-

Cards

- -
-
- - - Card Title - Card Description - - -

Card Content goes here.

- - - - - - - - Notifications - - You have 3 unread messages. - - - -
-
- - JD - -
-

John Doe

-

2 minutes ago

-
-
-
- - - - - Progress - - - -
- - -
- - -
-
- - - - {/* Form Elements Section */} -
-
-

- Form Elements -

- -
- - - Example Form - - All form components in one place - - - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
-
- -
- -