Scribd
Upload
24 views3 pages

Front End Developer Assignment 1

The document outlines an assignment to build a scalable design system using React, TypeScript, and TailwindCSS or styled-components, focusing on color, data display, and navigation components. It includes specific requirements for component structure, accessibility, documentation in Storybook, and a foundational color system. The submission must include a GitHub repository link, Storybook preview, and visual documentation of the components created.

Uploaded by

Renuka Bhavsar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views3 pages

Front End Developer Assignment 1

The document outlines an assignment to build a scalable design system using React, TypeScript, and TailwindCSS or styled-components, focusing on color, data display, and navigation components. It includes specific requirements for component structure, accessibility, documentation in Storybook, and a foundational color system. The submission must include a GitHub repository link, Storybook preview, and visual documentation of the components created.

Uploaded by

Renuka Bhavsar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Design System Assignment

Focus: Color + Data Display + Navigation Components​


Tech Stack: React + TypeScript + TailwindCSS (or styled-components) + Storybook

🚀 What You Need to Do:


Build the components listed below using React + TypeScript, and document them in
Storybook. Structure your project as a scalable, reusable design system suitable for
enterprise applications.

For each component:

●​ Create a dedicated folder/module


●​ Use TypeScript for defining props/interfaces
●​ Add a Storybook entry with:
○​ All types, states, and variants
○​ Documentation and usage notes
○​ Accessibility checklist
●​ Push your project to a public or private GitHub repo

🎯 Objective:
Assess your ability to:

●​ Build and implement color tokens


●​ Develop reusable data display and navigation components
●​ Handle interaction states and behaviors
●​ Ensure accessibility and responsiveness
●​ Document usage with Storybook clearly and concisely

🧱 Foundational Element: Color System


Create a token-based color system supporting B2B enterprise UI needs:

●​ Primary, Secondary, Tertiary Colors


●​ Neutral Colors (greys, whites, backgrounds, borders)
●​ Semantic Colors: Success, Info, Warning, Error
●​ Surface & Background Layers
●​ Light & Dark Theme Support

Requirements:

●​ WCAG-compliant contrast ratios


●​ CSS variables or theme support
●​ Storybook documentation: usage examples, naming conventions, accessibility notes

📊 Choose 1 or 2 Data Display Components to Build:


Pick from:

●​ Accordion
●​ Tag / Badge / Pill
●​ Tooltip
●​ Timeline
●​ Progress Bar / Spinner
●​ Tree View
●​ Table (with optional sorting/filtering)

Support:

●​ All relevant states (default, hover, focus, disabled)


●​ Variants (size, color, type)
●​ Keyboard navigation and ARIA roles
●​ Responsiveness and theming

🧭 Choose 1 or 2 Navigation Components to Build:


Pick from:

●​ Top Navigation Bar


●​ Sidebar Navigation (with collapse/expand)
●​ Tabs
●​ Breadcrumbs
●​ Pagination

Support:

●​ All relevant states (selected, hover, focus, disabled)


●​ Variants (orientation, sizes, icon support)
●​ Responsive behavior (mobile/tablet/desktop)
●​ ARIA roles and keyboard navigation

📄 Documentation Checklist (via Storybook):


Please include the following for each component:

✅ Component Name + Description


✅ Props / API
●​

✅ Use Cases
●​

✅ Anatomy / Structure
●​

✅ States & Variants


●​

✅ Interaction Behavior
●​

✅ Accessibility Notes (ARIA, Focus Management)


●​

✅ Theming / Responsiveness Support


●​

✅ Do’s and Don’ts / Best Practices


●​
●​

📦 Submission Guidelines
Please share the following:

●​ GitHub Repository Link​


Include a clear folder structure and well-documented README.
●​ Storybook Preview Link​
Deploy the Storybook using Chromatic (preferred) or Vercel.
●​ Screenshots or Screen GIFs​
Useful for backup or showcasing interactive behaviors.

You might also like