Scribd
Upload
2 views3 pages

Design System Components in React

The assignment requires building a scalable design system using React, TypeScript, and TailwindCSS or styled-components, focusing on typography, data entry, and feedback components. Each component must be documented in Storybook, including variants, states, accessibility checklists, and usage notes. The submission should include a GitHub repository link, a Storybook preview link, and visual documentation of the components.

Uploaded by

ritikr389
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
2 views3 pages

Design System Components in React

The assignment requires building a scalable design system using React, TypeScript, and TailwindCSS or styled-components, focusing on typography, data entry, and feedback components. Each component must be documented in Storybook, including variants, states, accessibility checklists, and usage notes. The submission should include a GitHub repository link, a Storybook preview link, and visual documentation of the components.

Uploaded by

ritikr389
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

Design System Assignment

Focus: Typography + Data Entry + Feedback 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 types/interfaces for props
●​ Include a Storybook entry with:
○​ All variants and states
○​ Usage documentation and notes
○​ Accessibility checklist
●​ Use GitHub and push your code to a public or private repo

🎯 Objective:
Evaluate your understanding of:

●​ Component architecture and prop abstraction


●​ Theming and responsive layouts
●​ Accessibility and interaction behavior
●​ Storybook documentation practices
●​ Frontend scalability for B2B design systems

🧱 Foundational Element: Typography


Build a Typography component system:

●​ Define tokens for font-size, weight, line-height, and letter spacing


●​ Create components for:
○​ Headings (H1–H6)
○​ Paragraphs
○​ Labels, Captions, Helper Text
●​ Implement theming support (light/dark mode, brand tokens)
●​ Apply accessible contrast and responsive behavior
●​ Storybook documentation: usage examples, naming conventions, accessibility notes

🧩 Choose 1 or 2 Data Entry Components to build:


Pick from:

●​ Text Input
●​ Dropdown / Select Menu
●​ Checkbox
●​ Radio Button
●​ Toggle Switch
●​ Date Picker
●​ File Upload

Support:

●​ States (default, hover, focus, error, disabled)


●​ Variants (e.g., sizes, icon support)
●​ ARIA roles & keyboard navigation
●​ Theming and responsiveness

⚠️ Choose 1 or 2 Feedback Components to build:


Pick from:

●​ Toast / Snackbar (info, error, success, warning)


●​ Popover (with contextual message or action)
●​ Alert Banner / Notification (info, error, success, warning)
●​ Modal Dialog (Confirmation / Error)

Support:

●​ Mount/unmount behavior
●​ Variants (e.g., sizes, icon support)
●​ ARIA roles & keyboard navigation
●​ Theming and responsiveness
●​ Configurable content
📄 Documentation Checklist (via Storybook):
In your Storybook, please include:

✅ 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 a 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