🪄 Adds type safety for CareIcon names + ✨ reduced index.css size by 95% + Refactor string interpolated tw classes

[rithviknishad]

WHAT

🤖 Generated by Copilot at 3ff1fd2

This pull request improves the UI components and icons used in various screens of the application. It refactors the CareIcon, Chip, CountBlock, and ButtonV2 components to use the Unicon icon library, the IconName type, and the variant prop for consistent and type-safe styling. It also simplifies the code for generating class names and removes unnecessary props. It updates the components that use these common UI elements to reflect the changes and to enhance the appearance and functionality. It moves the Chip and CountBlock components from ./src/CAREUI/display to ./src/Components/Common/components to make them more accessible.

Proposed Changes

• index.css before: 506 kb; index.css after: 25.6 kB;
• Fixes use proper tailwind classes and remove safelist for tailwind classes saves 7.6Mb #6023
• Fixes Care Icons: Add type safety for icon names  #6033

Updated usage of CareIcon

<CareIcon icon="l-hospital" className="text-lg" />

Backwards compatible too

<CareIcon className="care-l-hospital text-lg" />

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

HOW

🤖 Generated by Copilot at 3ff1fd2

• Move Chip and CountBlock components to ./src/Components/Common/components folder to make them reusable (link, link)
• Refactor CareIcon component to accept icon prop of type IconName and use effectiveClassName variable for icon transformation and re-rendering (link, link)
• Use IconName type and Unicon icons for FACILITY_FEATURE_TYPES array in ./src/Common/constants.tsx (link, link)
• Replace color prop with variant prop and use Unicon icons for Chip component in various components (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Use CountBlock component and Unicon icons for displaying total counts in various components (link, link, link, link, link)
• Import ButtonVariant type from ./src/Components/Common/components/ButtonV2 to ./src/Components/Common/PatientCategoryBadge.tsx for defining PATIENT_CATEGORIES array (link)
• Remove align prop from ButtonV2 component and its type definition as it was causing layout issues (link, link, link)
• Use variant prop and classNames helper function for icon color in DropdownItem component in ./src/Components/Common/components/Menu.tsx (link)
• Use classNames helper function for generating dynamic class names in FacilityCard component in ./src/Components/Facility/FacilityCard.tsx and PatientCategorySelect component in ./src/Components/Patient/PatientCategorySelect.tsx (link, link, link, link)
• Use ButtonV2 component and wrap icon and text in a div element with flex classes for alignment in PrescriptionBuilder component in ./src/Components/Medicine/PrescriptionBuilder.tsx and various components in ./src/Components/Patient/PatientHome.tsx (link, link, link, link, link, link, link, link, link, link, link, link, link)
• Remove align prop from ButtonV2 component in ./src/Components/Patient/PatientInfoCard.tsx (link)
• Wrap icon and text in a span element with flex classes for alignment in ButtonV2 component in ./src/Components/Patient/PatientInfoCard.tsx (link, link)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2023 11:00am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	665590c
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/64d371caedcabd0008796403
😎 Deploy Preview	https://deploy-preview-6034--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

LGTM

[github-actions]

@rithviknishad We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.