Create a new CustomLabelTag component

[uparkalau]

We need to create a new CustomLabelTag component that aligns with our project's design system and can be reused across our application. This component should be versatile enough to handle different types of labels.

To-Do List

• [x] Create a new branch from the develop branch specifically for this task. feature/96-create-a-new-customlabeltag-component @SimerdeepSinghGrewal
• [x] Develop the CustomLabelTag component to accept props such as:
  • Label text content
  • Background color (from predefined options)
  • Text color (optional)
  • Additional styles or classes as necessary
• [x] The CustomLabelTag component should support various UI contexts by allowing different shapes like rounded or squared edges.
• [ ] Use import Chip from '@material-ui/core/Chip';
• [x] Create ./CustomLabelTagStyles.css with default styling.
• [x] Define PropTypes
• [x] Use default JavaScript parameters to set up default props within the CustomLabelTag component.
• [x] Integrate this new CustomLabelTag component into appropriate places within our application where labels are required.
• [ ] Create a minimum test using vitest for this component.

PropTypes Example, adjust as necessary:

const validateBackgroundColor = (props, propName, componentName) => {
  if (!['orange', 'red', 'purple', 'white'].includes(props[propName])) {
    return new Error(
      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. Validation failed.`
    );
  }
}

CustomLabelTag.propTypes = {
  text: PropTypes.string.isRequired,
  backgroundColor: validateBackgroundColor,
  textColor: PropTypes.string,
  className: PropTypes.string,
};

https://www.figma.com/design/USQRG7Oacv7uXw8XkTPINq/Style-guide?node-id=48-52733&t=nNFDTU9Sv5F8SXq9-0