Add progress bar to ds

[kalashshah]

Pull Request Template

Ticket Number

• 1758

Description

Problem/Feature:

• Add progress bar to the ds

• New feature

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

Screen.Recording.2024-08-01.at.1.11.29.PM.mov

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

1. In the import statement at the end of the file, the module path should start with ./ for local imports, like './ProgressBar', './ProgressBar.utils', './ProgressBar.types'.
2. In the file, there seems to be a mix of importing types and actual components from the './ProgressBar' file. Make sure to import types separately in a different way, like import type { ProgressBarProps } from './ProgressBar.types';.
3. There is a typo in the export statement for ToggleSwitch should be 'ToggleSwitch' instead of 'toggleSwtich'.
4. In the ProgressBar component definition, the prop progress has the correct type, but max should also be annotated with the type number.
5. The StyledProgressBar component is accessing the percentage width based on progress and max, but it's missing a check to avoid dividing by zero when max is 0.
6. The ProgressBarProps type definition should include a description for each prop for better documentation.
7. The comment in the ProgressBar component definition mentions 'width' for the StyledProgressBar, but the CSS property actually being set is 'height'.
8. It seems the export * from './ProgressBar'; and subsequent lines are redundant because everything from './ProgressBar' is already being exported earlier.
9. The import statements for semantic related files at the bottom of the file seem a bit exhaustive. Consider finding a better organization or grouping mechanism for these imports.

All other parts of the code appear to be in good order.

Therefore - All looks good.

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-08-01 16:36 UTC

[rohitmalhotra1420]

Suggested change

	<StyledProgressBar {...{ progress, max }} />
	<StyledProgressBar width={`${getProgressWidthPercentage(progress, max)}%`} />

[rohitmalhotra1420]

Suggested change

	width: ${({ progress, max }) => `${getProgressWidthPercentage(progress, max)}%`};
	width: ${({ width }) => width};

[rohitmalhotra1420]

Suggested change

	const StyledProgressBarContainer = styled.div<Omit<ProgressBarProps, 'progress' | 'max'>>`
	const StyledProgressBarContainer = styled.div<{css?: FlattenSimpleInterpolation}>`

[rohitmalhotra1420]

Suggested change

	const StyledProgressBar = styled.div<ProgressBarProps>`
	const StyledProgressBar = styled.div<{width:string}>`

[rohitmalhotra1420]

The semantics doesn't matches figma.

[rohitmalhotra1420]

Suggested change

	'background-default': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] },
	'background-progress': { light: colorBrands['primary-600'], dark: colorBrands['primary-500'] },
	'background-default': { light: surfaceSemantics['secondary'].light, dark: surfaceSemantics['secondary'].dark },
	'background-progress': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark },

[github-actions]

• In the code snippet, the import statement for Tooltip in the export section is incorrect. It should import Tooltip, but it currently imports tooltip.

• The import statement for ToggleButton should import from toggleSwitch, but there is a typo (toggleSwtich).

• In the ProgressBar component, there is a syntax error in the way the width is calculated:

  <StyledProgressBar width={`${getProgressWidthPercentage(progress, max)}%`} />

• There is an unused import for ProgressBarProps in the file.

• The naming convention for files importing and exporting components should be consistent for readability.

• The export statements for the ProgressBar related files at the bottom of the file seem redundant.

Apart from these points, the logic and structure of the code look good.

All looks good.