PortfolioHomeBio

Design System

Description

Design System is really the foundation of any web or mobile based product if designing the product from scratch. Here, I implemented Button and Input components as part of a design system which can be reused and customized based on requirements.

Technologies Used

  1. React JS
  2. SASS

User Stories Addressed

  1. Button Component
    • I can see different button types: default, outline and text
    • I can choose to disable box-shadow
    • I can choose to disable button
    • I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
    • I can have different button sizes
    • I can have different colors
    • When I hover or focus, I can see visual indicators
    • I can still access all button attributes
  2. Input Component
    • I can see error state
    • I can choose to disable input
    • I can choose to have helper text
    • I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
    • I can have different input sizes
    • I can have different colors
    • I can choose to have input take the width of the parent
    • I can have multiline input like a textarea
    • When I hover or focus, I can see visual indicators
    • I can still access all input attributes

Things I learned

  1. Reusing Components
  2. Multiple props interchange

Links