fix: remove illegal className props

eclipse-tractusx · Jan 16, 2025 · 70b5e67 · 70b5e67
1 parent 0c0ca7b
commit 70b5e67
Show file tree

Hide file tree

Showing 69 changed files with 72 additions and 347 deletions.
diff --git a/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx b/src/components/basic/Headers/MainHeader/Components/MainHeaderTitle.tsx
@@ -32,7 +32,6 @@ export const MainHeaderTitle = ({
     <>
       {title && (
         <Typography
-          className="cx-main-header__title"
           sx={{
             fontFamily: 'LibreFranklin-Light',
             fontWeight: 600,
@@ -46,7 +45,6 @@ export const MainHeaderTitle = ({
 
       {subTitle && (
         <Typography
-          className="cx-main-header__subtitle"
           sx={{
             fontFamily: 'LibreFranklin-Light',
             width: `${subTitleWidth}px`,

diff --git a/src/components/basic/Headers/PageHeader/PageHeader.tsx b/src/components/basic/Headers/PageHeader/PageHeader.tsx
@@ -87,7 +87,6 @@ export const PageHeader = ({
 
   return (
     <Box
-      className="cx-page-header"
       sx={{
         width: '100%',
         height: `${height}px`,
@@ -100,7 +99,6 @@ export const PageHeader = ({
     >
       {children && (
         <Box
-          className="cx-page-header__children-wrapper"
           sx={{
             display: 'flex',
             alignItems: 'center',
@@ -111,7 +109,6 @@ export const PageHeader = ({
           }}
         >
           <Box
-            className="cx-page-header__children"
             sx={{
               maxWidth: '1200px',
               width: '100%',
@@ -124,7 +121,6 @@ export const PageHeader = ({
         </Box>
       )}
       <Box
-        className="cx-page-header__title"
         sx={{
           maxWidth: '1200px',
           padding: '0px 20px',

diff --git a/src/components/basic/Hyperlink/index.tsx b/src/components/basic/Hyperlink/index.tsx
@@ -117,7 +117,6 @@ export const Hyperlink = ({
             color: theme.palette.primary.dark,
           },
         }}
-        className="cx-hyperlink__text"
       >
         {text}
       </Typography>

diff --git a/src/components/basic/IconButton/index.tsx b/src/components/basic/IconButton/index.tsx
@@ -35,12 +35,5 @@ export const IconButton = ({
 }: IconButtonProps) => {
   const outlinedStyle = variant === 'outlined' ? { border: '2px solid' } : {}
 
-  return (
-    <MuiIconButton
-      className="cx-icon-button"
-      size={size}
-      sx={outlinedStyle}
-      {...props}
-    />
-  )
+  return <MuiIconButton size={size} sx={outlinedStyle} {...props} />
 }
diff --git a/src/components/basic/Image/index.tsx b/src/components/basic/Image/index.tsx
@@ -74,7 +74,6 @@ export const Image = ({ src, alt, style, loader }: ImageProps): JSX.Element => {
 
   return (
     <img
-      className="cx-image"
       src={(loader ?? error) ? data : src}
       alt={alt ?? 'Catena-X'}
       onError={() => {

diff --git a/src/components/basic/ImageGallery/index.tsx b/src/components/basic/ImageGallery/index.tsx
@@ -59,7 +59,7 @@ export const ImageGallery = ({
   }
 
   return (
-    <div className="cx-image-gallery">
+    <div>
       {hovered && hoveredImage?.url && (
         <ImageItemOverlay
           onClose={() => {
@@ -82,7 +82,6 @@ export const ImageGallery = ({
       >
         {gallery.map((image) => (
           <div
-            className="cx-image-gallery__btn"
             key={image.url}
             onClick={() => {
               hoverImageFn(image)

diff --git a/src/components/basic/Input/index.tsx b/src/components/basic/Input/index.tsx
@@ -56,9 +56,8 @@ export const Input = ({
     setShowPassword((prev) => !prev)
   }
   return (
-    <Box className="cx-input">
+    <Box>
       <FormControl
-        className="cx-form-control"
         sx={{
           width: '100%',
         }}
@@ -72,7 +71,6 @@ export const Input = ({
           }}
         >
           <InputLabel
-            className="cx-form-control__label"
             sx={{
               marginRight: '10px',
             }}
@@ -88,14 +86,13 @@ export const Input = ({
               tooltipPlacement="top-start"
               tooltipText={tooltipMessage}
             >
-              <span className="cx-form-control__tooltip">
+              <span>
                 <HelpOutlineIcon sx={{ color: '#B6B6B6' }} fontSize={'small'} />
               </span>
             </Tooltips>
           )}
         </Box>
         <TextField
-          className="cx-form-control__textfield"
           variant={variant}
           placeholder={placeholder}
           error={error}
@@ -112,22 +109,14 @@ export const Input = ({
                     {showPassword ? <VisibilityOff /> : <Visibility />}
                   </IconButton>
                 )}
-                {error && (
-                  <ErrorOutline
-                    color="error"
-                    className="cx-form-control__input-adornment--error"
-                  />
-                )}
+                {error && <ErrorOutline color="error" />}
               </InputAdornment>
             ),
           }}
           {...props}
         />
         {error && helperText && (
-          <FormHelperText
-            sx={{ marginLeft: 0, marginBottom: '-23px' }}
-            className="cx-form-control__helper-text"
-          >
+          <FormHelperText sx={{ marginLeft: 0, marginBottom: '-23px' }}>
             {helperText}
           </FormHelperText>
         )}

diff --git a/src/components/basic/LanguageSwitch/index.tsx b/src/components/basic/LanguageSwitch/index.tsx
@@ -44,10 +44,9 @@ export const LanguageSwitch = ({
   }
 
   return (
-    <Box sx={{ padding: spacing(2, 3) }} className="cx-language-switcher">
+    <Box sx={{ padding: spacing(2, 3) }}>
       {languages?.map(({ key, name }) => (
         <Link
-          className="cx-language-switcher--link"
           href={`?language=${key}`}
           onClick={(e) => {
             onClick(e, key)

diff --git a/src/components/basic/LoadingButton/index.tsx b/src/components/basic/LoadingButton/index.tsx
@@ -68,11 +68,10 @@ export const LoadingButton = ({
   }, [size])
 
   return (
-    <Box className="cx-loading-button__wrapper">
+    <Box>
       {!loading ? (
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Button
-            className="cx-loading-button"
             size={size}
             color={color}
             onClick={handleClick}
@@ -83,7 +82,6 @@ export const LoadingButton = ({
           </Button>
           {helperText && (
             <Typography
-              className="cx-loading-button__text"
               variant="label2"
               sx={{
                 padding: tagStyle.padding,
@@ -100,7 +98,6 @@ export const LoadingButton = ({
         </Box>
       ) : (
         <Button
-          className="cx-loading-button"
           size={size}
           color={color}
           startIcon={

diff --git a/src/components/basic/MainNavigation/index.tsx b/src/components/basic/MainNavigation/index.tsx
@@ -38,7 +38,6 @@ export const MainNavigation = ({
 
   return (
     <Box
-      className="cx-main-navigation__wrapper"
       sx={{
         height: `${mainNavigationHeight}px`,
         display: 'flex',
@@ -51,7 +50,6 @@ export const MainNavigation = ({
     >
       {arrayChildren.length > 0 && (
         <Box
-          className="cx-main-navigation__children-top"
           sx={{
             width: '170px',
             paddingTop: '22px',
@@ -63,24 +61,18 @@ export const MainNavigation = ({
       )}
 
       <Box
-        className="cx-main-navigation"
         sx={{
           marginRight: 'auto',
           marginLeft: 'auto',
           paddingTop: '22px',
           paddingBottom: '22px',
         }}
       >
-        <Navigation
-          className="cx-main-navigation__instance"
-          items={items}
-          component={component}
-        />
+        <Navigation items={items} component={component} />
       </Box>
 
       {arrayChildren.length > 0 && (
         <Box
-          className="cx-main-navigation__children-bottom"
           sx={{
             width: '122px',
             paddingTop: '22px',

diff --git a/src/components/basic/Menu/MenuItem.tsx b/src/components/basic/Menu/MenuItem.tsx
@@ -77,7 +77,6 @@ export const MenuItem = ({
 
   return (
     <ListItem
-      className="cx-list-item"
       sx={{
         display: 'block',
         position: 'relative',
@@ -91,7 +90,6 @@ export const MenuItem = ({
       }}
     >
       <Link
-        className="cx-list-item__link"
         component={component}
         sx={{
           color: `${disable ? 'text.disabled' : 'text.primary'}`,
@@ -117,7 +115,6 @@ export const MenuItem = ({
         {title}
         {hint && (
           <Box
-            className="cx-list-item__hint"
             sx={{
               backgroundColor: '#9AA9E2',
               borderRadius: '5px',
@@ -129,7 +126,6 @@ export const MenuItem = ({
             }}
           >
             <Typography
-              className="cx-list-item__help-text"
               variant="helper"
               display="block"
               sx={{
@@ -144,17 +140,12 @@ export const MenuItem = ({
           </Box>
         )}
         {children != null && (
-          <ArrowForward
-            className="cx-list-item__arrow-fwd"
-            fontSize="small"
-            sx={{ color: 'icon.icon02' }}
-          />
+          <ArrowForward fontSize="small" sx={{ color: 'icon.icon02' }} />
         )}
         {showNotificationCount &&
           notificationInfo != null &&
           notificationInfo.notificationCount > 0 && (
             <Typography
-              className="cx-list-item__notification-text"
               sx={{
                 fontWeight: '500',
                 fontSize: '0.75rem',
@@ -171,7 +162,7 @@ export const MenuItem = ({
           )}
       </Link>
       {Menu != null && children != null && open && (
-        <Menu className="cx-list-item__menu" items={children} {...menuProps} />
+        <Menu items={children} {...menuProps} />
       )}
       {divider && <Divider />}
     </ListItem>

diff --git a/src/components/basic/Menu/index.tsx b/src/components/basic/Menu/index.tsx
@@ -45,8 +45,8 @@ export const Menu = ({
   const { spacing } = useTheme()
 
   return (
-    <Box {...props} className="cx-menu">
-      <List sx={{ padding: 0 }} className="cx-menu__list">
+    <Box {...props}>
+      <List sx={{ padding: 0 }}>
         {items?.map((item) => (
           <MenuItem
             {...item}
@@ -60,9 +60,7 @@ export const Menu = ({
           />
         ))}
       </List>
-      {divider && (
-        <Divider className="cx-menu__divider" sx={{ margin: spacing(0, 1) }} />
-      )}
+      {divider && <Divider sx={{ margin: spacing(0, 1) }} />}
     </Box>
   )
 }

diff --git a/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx b/src/components/basic/MultiSelectList/Components/SelectAddMore.tsx
@@ -48,15 +48,14 @@ export const SelectAddMore = ({
 }: SelectAddMoreProps) => {
   const marginTop = margin === 'normal' ? '16px' : '8px'
   return (
-    <Box className="cx-multi-select__add-more">
+    <Box>
       <Typography
         variant="label3"
         fontSize="14px"
         fontWeight="400"
         sx={{
           marginBottom: '10px',
         }}
-        className="cx-multi-select__label"
       >
         {label}
       </Typography>
@@ -68,7 +67,6 @@ export const SelectAddMore = ({
         }}
       >
         <Box
-          className="cx-multi-select__tags"
           sx={{
             display: 'flex',
             flexDirection: 'row',
@@ -86,7 +84,6 @@ export const SelectAddMore = ({
             ))
           ) : (
             <Typography
-              className="cx-multi-select__no-item"
               variant="body1"
               fontSize="18px"
               sx={{
@@ -99,12 +96,8 @@ export const SelectAddMore = ({
             </Typography>
           )}
         </Box>
-        <Box
-          sx={{ height: '40px', width: '20%' }}
-          className="cx-multi-select__buttons"
-        >
+        <Box sx={{ height: '40px', width: '20%' }}>
           <Button
-            className="cx-multi-select__button"
             sx={{ width: 'fit-content', float: 'right' }}
             size={tagSize}
             color="secondary"

diff --git a/src/components/basic/MultiSelectList/Components/SelectInput.tsx b/src/components/basic/MultiSelectList/Components/SelectInput.tsx
@@ -48,7 +48,6 @@ export const SelectInput = ({
   autoFocus,
 }: SelectInputProps) => (
   <Box
-    className="cx-multi-select__select-input"
     sx={{
       '.MuiFilledInput-root': {
         paddingTop: '0px !important',
@@ -57,7 +56,6 @@ export const SelectInput = ({
     }}
   >
     <Input
-      className="cx-multi-select__input"
       fullWidth={params.fullWidth}
       InputProps={params.InputProps}
       inputProps={params.inputProps}
-Original file line number
+Diff line change
@@ Expand Up / @@ -117,7 +117,6 @@ export const Hyperlink = ({ @@
                 color: theme.palette.primary.dark,
               },
             }}
-            className="cx-hyperlink__text"
           >
             {text}
           </Typography>
@@ Expand Down @@