DIGIT UI Core React Components

Migration guide to aid users in shifting from the "react-components" package to the "ui-components" package

Topics covered:

• Overview

• Components List

• DIGIT UI Components : Variants & Features

• Component Mapping

• Install

• Apply

• References & Resources For Migration

• Old Components, Core and Libraries Versions

• CSS Versions

• Conclusion

Overview

This document details the essential modifications needed in the modules for smooth integration of components from the "ui-components" package.

In the ui-components package, several enhancements have been implemented to improve code clarity and address issues related to pixel inconsistencies,responsiveness,duplicate components in the library,difference between figma and the developed UI, writing custom code over existing code, localization issues etc. Previously, there were challenges associated with pixel-based sizing, leading to inconsistencies across different devices and screen resolutions. To mitigate this, the codebase has been updated to utilize rems as the primary unit of measurement. This transition to rems offers several advantages over pixels, including improved scalability and responsiveness across various viewport sizes.

Adopting rems ensures the components' styling is more consistent and adaptable, providing a seamless user experience across different platforms and devices.

Furthermore, Most of the components offer different variants. Adding variants for these components makes them more flexible, serving a wider range of purposes and meeting different design needs effectively.

Components List

These are the components present in the ui-components package.

Groups	Components
Foundations	Animations Typography Iconography Colors Spacers
Atoms	Accordion ActionButton AlertCard Backlink BreadCrumb Button CheckBox Chip Divider Dropdown ErrorMessage FileUpload InfoButton LabelFieldPair Loader Menu MultiSelectDropdown OTPInput Panels RadioButtons SelectionTag Stepper StringManipulator SummaryCardFieldPair Switch Tab Tag TextArea TextBlock TextInput Timeline Toast Toggle Tooltip
Molecules	AccordionList BottomSheet ButtonGroup Card FilterCard FormCard Footer Hamburger LandingPageCard MenuCard MetricCard PanelCard PopUp ResultsDataTable SideNav SidePanel SummaryCard TableMolecule TimelineMolecule TooltipWrapper
Molecule Groups	LandingPageWrapper MenuCardWrapper
Organisms	FormComposerV2 InboxSearchComposer

DIGIT UI Components : Variants & Features

The table below lists the components available in the new component library along with their supported variants, states, and additional features. This serves as a reference for understanding the capabilities of each component when integrating them.

Component	Variants	States and Features
Animations	Success Error Warning Warning2 LoaderPrimary LoaderPrimary2 LoaderWhite
Typography	Body Button Caption Heading Label Link	Body L, Body S, Body XS Button L, Button M, Button S Caption L, Caption M, Caption S Heading XL, Heading L, Heading M,Heading S,Heading XS Label Link L, LInk S, Link XS
Colors	Primary Text Alert Generic Paper	digitv2.lightTheme.primary-1 (#C84C0E) digitv2.lightTheme.primary-2 ( #0B4B66) digitv2.lightTheme.primary-bg (#FBEEE8) digitv2.lightTheme.text-primary (#363636) digitv2.lightTheme.text-secondary (#787878) digitv2.lightTheme.text-disabled (#C5C5C5) digitv2.lightTheme.alert-error (#B91900) digitv2.lightTheme.alert-errorbg (#FFF5F4) digitv2.lightTheme.alert-success (#00703C) digitv2.lightTheme.alert-successbg (#F1FFF8) digitv2.lightTheme.alert-info (#0057BD) digitv2.lightTheme.alert-infobg (#DEEFFF) digitv2.lightTheme.alert-warning (#9E5F00) digitv2.lightTheme.alert-warning-bg (#FFF9F0) digitv2.lightTheme.generic-background (#EEEEEE) digitv2.lightTheme.generic-divider (#D6D5D4) digitv2.lightTheme.generic-inputborder (#505A5F) digitv2.lightTheme.paper-primary (#FFFFFF) digitv2.lightTheme.paper-secondary (#FAFAFA)
Spacers	Spacer1 Spacer2 Spacer3 Spacer4 Spacer5 Spacer6 Spacer7 Spacer8 Spacer9 Spacer10 Spacer11 Spacer12	digitv2.spacers.spacer1 digitv2.spacers.spacer2 digitv2.spacers.spacer3 digitv2.spacers.spacer4 digitv2.spacers.spacer5 digitv2.spacers.spacer6 digitv2.spacers.spacer7 digitv2.spacers.spacer8 digitv2.spacers.spacer9 digitv2.spacers.spacer10 digitv2.spacers.spacer11 digitv2.spacers.spacer12
Accordion	Basic Nested Accordion	Basic With Stroke With Divider With Stroke and Divider With Icon With Number
AlertCard	Info Success Warning Error	With Actions Widgets Alignment
Action Button	Primary Secondary Teritiary Link	State : Default / Disabled ActionButton : Dropdown / Dropup searchable : True / False
BackLink	BackLink1 BackLink2 BackLInk3	Basic Disabled
BreadCrumb	Basic Collapsed	With Icons With Custom Seperators
Button	Primary Secondary Teritiay Link	State - Default / Disabled Size - Large, Medium, Small With Icon Icon Position - Prefix / Suffix
CheckBox	Unchecked Intermediate Checked	Label Alignment - Left / Right State - Default / Disabled
Chip	Basic Error	With Icon With Close
Divider	Small Medium Large
Dropdown	Basic Categorical Nested Text Profile Profile with Nested Text Tree Dropdown	State - Deafult / Disabled Searchable - True / False
Panels	Success Error
FileUpload	Uploader Field Uploader Widget Image Upload	SIngle / Multiple Upload WIth Tag / WIth Preview
Loader	Basic Page Loader Overlay Loader
Multiselect Dropdown	Basic Categorical Nested Text Tree Multiselect	State - Default / Disabled Searchable - True / False With Chips WIth Select All WIth Category Select All
OTPInput	6 Characters 4 Characters	With Masking Label Alignement - Above / Inline
RadioButtons	Basic	State - Default / Disabled / Non Editable Label ALignment - Left / Right
Selection Tag	Single Select Multi Select	With Container
Stepper	Horizontal Vertical	Vertical - With Divider
Switch	Basic With Symbol	State - Default / Disabled Label Alignment - Left / Right
Tag	Basic Success Error Warning	With Stroke With Icon With OnClick
Tab	Basic
TextBlock	Basic
TextInput	Simple Text Text With Prefix Text WIth Suffix Password Numeric Counter Date Time Location Search	Default Filled Disabled Non Editable Focus Error Label Character Count Inner Label Info Help Text
Timeline	Inprogress Upcoming Completed	State - Default / Failed With Connector Elements Alignment - vertical / inline
Toast	Success Error Warning Info	With transition time
Toggle	Basic
Tooltip	Dark Theme LIght Theme	With Arrow Position - BottomStart / Bottom / BottomEnd / TopStart / Top / TopEnd / LeftStart / Left / LeftEnd / RightStart / Right / RightEnd
TextArea		Default Filled Disabled NonEditable Focus Error Label Character Count Inner Label Info Help Text resizeSmart
AccordionList	Basic	With Divider WIth Multiple Open
PopUp	Basic Alert
Card	Basic Form Card Summary Card	Card Style - Primary / Secondary
FormCard		Columns - 1 / 2 Divider - True / False
SummaryCard		Layout - Horizontal / Vertical Columns - 1 / 2 Divider - True / False
BottomSheet	Basic WIth Actions
ButtonGroup	Basic	Auto Sort - True/ False Size - Large / Medium / Small Equal Buttons - True / False
Header	Dark Light
SidePanel	Static Dynamic	With Close As Sections Background Active Position - Left / Right With Nudge Draggable
PanelCard	Success Error
FilterCard	Horizontal Vertical	With Heading With Close As Popup
Footer	Basic Flex	Alignment - Left / Right
Hamburger	Dark LIght	Enable Search Universal Actions Profile
LandingPageCard	Basic	Icon - Default / Filled Metric Alignment - Left / Centre Icon Alignment - Left / Right
MenuCard	Menu1
MetricCard	Horizontal Vertical Mixed	Dividers - Vertical / Horizontal / Both
SideNav	Dark Light	Enable Search Universal Actions Selection Color - Complementary / Analogous
TableMolecule	Basic
TimelineMolecule	Basic Collapsable
TooltipWrapper	Basic
LandingPageWrapper	Basic
MenuCardWrapper	Basic

Component Mapping

The following table lists some of the old components and their corresponding replacements in the new library.

react-components (old)	ui-components (new)
ActionBar	Footer
BackButton	BackLink
Banner	Panels
CitizenInfoLabel	AlertCard
Hamburger	HamburgerButton
Header	HeaderComponent
LoaderWithGap	Loader
RemovableTag	Chip
Table	Table Molecule / ResultsDataTable
TopBar	Header
UploadFile	FileUpload
WorkFlowTimeline	TimelineMolecule

Install

To install:

Add the dependency in the frontend/micro-ui/web/package.json

"@egovernments/digit-ui-components":"0.2.0"

Apply

Syntax for importing any components:

import {TextInput, Dropdown} from "@egovernenets/digit-ui-components"

References & Resources for Migration

Refer to the Sample Module Screens integrated with new ui-components library : https://github.com/egovernments/DIGIT-Frontend/tree/sample/micro-ui/web/micro-ui-internals/packages/modules/sample/src/pages/employee/uiComponentsSample Refer to the https://github.com/egovernments/DIGIT-UI-LIBRARIES/blob/develop/react/ui-components/CHANGELOG.md for version updates

DIGIT StoryBook

Other Core Dependencies Versions

We have integrated this new component library with our core module module, so use the below version for latest core module with upgraded components

"@egovernments/digit-ui-react-components" : "1.8.19"
"@egovernments/digit-ui-libraries": "1.8.11"
"@egovernments/digit-ui-module-core": "1.8.32"

CSS Versions

<link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.23/dist/index.css" />
<link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.2.0/dist/index.css" />

Conclusion

These are some of the modifications that need to be done in the modules to use the components from the ui-components package.