chore(all components): added classNames and variants names where possible

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.27
+
+- added classNames and variants names where possible for adding customization support
+
 ## 3.0.26
 
 - Updated table component to support error messages

DEPENDENCIES

@@ -196,6 +196,7 @@ npm/npmjs/-/es-errors/1.3.0, MIT, approved, #13162
 npm/npmjs/-/es-get-iterator/1.1.3, MIT, approved, clearlydefined
 npm/npmjs/-/es-iterator-helpers/1.0.18, MIT, approved, #13907
 npm/npmjs/-/es-module-lexer/0.9.3, MIT, approved, #1206
+npm/npmjs/-/es-module-lexer/1.5.4, MIT, approved, clearlydefined
 npm/npmjs/-/es-object-atoms/1.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/es-set-tostringtag/2.0.3, MIT, approved, #6218
 npm/npmjs/-/es-shim-unscopables/1.0.2, MIT, approved, clearlydefined
@@ -242,6 +243,7 @@ npm/npmjs/-/execa/8.0.1, MIT, approved, clearlydefined
 npm/npmjs/-/exit/0.1.2, MIT, approved, clearlydefined
 npm/npmjs/-/expect/29.7.0, MIT, approved, clearlydefined
 npm/npmjs/-/express/4.19.1, MIT, approved, clearlydefined
+npm/npmjs/-/express/4.19.2, MIT, approved, clearlydefined
 npm/npmjs/-/fast-deep-equal/3.1.3, MIT, approved, clearlydefined
 npm/npmjs/-/fast-glob/3.3.2, MIT, approved, #9307
 npm/npmjs/-/fast-json-stable-stringify/2.1.0, MIT, approved, clearlydefined
@@ -1112,6 +1114,7 @@ npm/npmjs/@storybook/addon-viewport/8.0.4, MIT, approved, #14040
 npm/npmjs/@storybook/blocks/8.0.4, MIT, approved, #14039
 npm/npmjs/@storybook/builder-manager/8.0.4, MIT, approved, #14042
 npm/npmjs/@storybook/builder-vite/8.0.4, MIT, approved, #14038
+npm/npmjs/@storybook/builder-vite/8.2.2, MIT, approved, clearlydefined
 npm/npmjs/@storybook/channels/8.0.4, MIT, approved, #14041
 npm/npmjs/@storybook/cli/8.0.4, MIT, approved, #14045
 npm/npmjs/@storybook/client-logger/8.0.4, MIT, approved, #14046
@@ -1121,6 +1124,7 @@ npm/npmjs/@storybook/core-common/8.0.4, MIT, approved, #14044
 npm/npmjs/@storybook/core-events/8.0.4, MIT, approved, #14050
 npm/npmjs/@storybook/core-server/8.0.4, MIT, approved, #14052
 npm/npmjs/@storybook/csf-plugin/8.0.4, MIT, approved, #14049
+npm/npmjs/@storybook/csf-plugin/8.2.2, MIT, approved, clearlydefined
 npm/npmjs/@storybook/csf-tools/8.0.4, MIT, approved, #14048
 npm/npmjs/@storybook/csf/0.0.1, MIT, approved, clearlydefined
 npm/npmjs/@storybook/csf/0.1.5, MIT, approved, #8941

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.26",
+  "version": "3.0.27",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Alert/index.tsx

@@ -28,6 +28,7 @@ interface AlertProps {
 
 export const Alert = ({ severity = 'info', children, width }: AlertProps) => (
   <MuiAlert
+    className={`cx-mui-alert cx-${severity.toLocaleLowerCase()}`}
     sx={{
       width: width ? `${width}!important` : '45%',
     }}

src/components/basic/BaseImage/index.tsx

@@ -39,6 +39,7 @@ export const BaseImage = ({
 
   return (
     <Box
+      className={'cx-base-image'}
       component="img"
       sx={{
         maxWidth: '100%',

src/components/basic/Breadcrumb/index.tsx

@@ -33,14 +33,15 @@ export const Breadcrumb = ({
   breadcrumbs,
 }: BreadcrumbProps & BackButtonProps) => {
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ display: 'flex' }} className={'cx-breadcrumbs'}>
       <BackButton
         backButtonLabel={backButtonLabel}
         backButtonVariant={backButtonVariant}
         onBackButtonClick={onBackButtonClick}
       />
 
       <Breadcrumbs
+        className={'cx-breadcrumbs__links'}
         separator=" "
         aria-label="breadcrumb"
         sx={{ margin: 'auto 0px', hight: 'fit-content' }}

src/components/basic/Button/BackButton.tsx

@@ -36,6 +36,7 @@ export const BackButton = ({
     <>
       {backButtonLabel && (
         <Button
+          className={`cx-button cx-button__back cx-variant-${backButtonVariant && backButtonVariant?.toLocaleLowerCase()}`}
           onClick={onBackButtonClick}
           color="secondary"
           variant={backButtonVariant}

src/components/basic/Button/LoadMoreButton.tsx

@@ -69,6 +69,7 @@ export const LoadMoreButton = ({
 
   return (
     <Button
+      className={`cx-button cx-button__load-more cx-color-${color && color.toLocaleLowerCase()}`}
       {...props}
       onClick={onClick}
       color="primary"

src/components/basic/Button/ScrollToTopButton.tsx

@@ -31,6 +31,7 @@ export const ScrollToTopButton = ({
   const tab = useMediaQuery('(max-width:1023px)')
   return (
     <div
+      className={'cx-button cx-button__scroll-top'}
       style={{
         display: 'flex',
         justifyContent: 'flex-end',

src/components/basic/Button/index.tsx

@@ -33,5 +33,12 @@ export const Button = ({
 }: ButtonProps) => {
   const color = ['outlined', 'text'].includes(variant) ? 'primary' : colorProp
 
-  return <MuiButton variant={variant} color={color} {...props} />
+  return (
+    <MuiButton
+      className={`cx-button cx-variant-${variant && variant.toLocaleLowerCase()} cx-color-${color && color.toLocaleLowerCase()}`}
+      variant={variant}
+      color={color}
+      {...props}
+    />
+  )
 }

src/components/basic/Carousel/CarouselBox.tsx

@@ -132,6 +132,7 @@ export const CarouselBox = ({
 
   return (
     <Box
+      className={'cx-carousel cx-carousel__box'}
       sx={{
         backgroundColor,
         border: hasBorder ? `1px solid ${theme.palette.border.border02}` : '',

src/components/basic/Carousel/index.tsx

@@ -165,6 +165,7 @@ export const Carousel = ({
 
   return (
     <Box
+      className={'cx-carousel'}
       sx={{
         width: 'max-content',
         maxWidth: `${responsiveWidth}px`,
@@ -224,13 +225,20 @@ export const Carousel = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <Slider {...settings}>
+      <Slider {...settings} className={'cx-carousel__slider'}>
         {Children.map(arrayChildren, (child) => {
           return (
-            <div key={uniqueId('cax-carousel')}>
-              <Box sx={{ display: 'flex' }}>
-                <Box sx={{ width: slidsInnerGap }}></Box>
+            <div
+              key={uniqueId('cax-carousel')}
+              className={`cx-carousel__slider ${uniqueId('cax-carousel')}`}
+            >
+              <Box sx={{ display: 'flex' }} className={'cx-carousel__wrapper'}>
                 <Box
+                  className={'cx-carousel__gap'}
+                  sx={{ width: slidsInnerGap }}
+                ></Box>
+                <Box
+                  className={'cx-carousel__item'}
                   sx={{
                     width: `${itemWidth}px`,
                     height: itemHeight ? `${itemHeight}px` : '100%',
@@ -240,7 +248,10 @@ export const Carousel = ({
                 >
                   {child}
                 </Box>
-                <Box sx={{ width: slidsInnerGap }}></Box>
+                <Box
+                  className={'cx-carousel__gap'}
+                  sx={{ width: slidsInnerGap }}
+                ></Box>
               </Box>
             </div>
           )

src/components/basic/CategoryDivider/index.tsx

@@ -41,6 +41,7 @@ export const CategoryDivider = ({
 }: CategoryDividerProps) => {
   return (
     <Box
+      className={'cx-category-divider'}
       sx={{
         alignItems: 'center',
         display: 'flex',
@@ -52,16 +53,25 @@ export const CategoryDivider = ({
       }}
     >
       <Box
+        className={'cx-category-divider__content'}
         sx={{
           paddingRight: '15px',
           whiteSpace: 'nowrap',
         }}
       >
-        <Typography sx={{ color: 'text.tertiary' }} variant="body2">
-          {categoryName} ({categoryItemsLength})
+        <Typography
+          className={'cx-category-divider__text'}
+          sx={{ color: 'text.tertiary' }}
+          variant="body2"
+        >
+          {categoryName}{' '}
+          <span className={'cx-category-divider__count'}>
+            ({categoryItemsLength})
+          </span>
         </Typography>
       </Box>
       <Divider
+        className={'cx-category-divider__border'}
         sx={{
           borderColor: 'border.border01',
           flexShrink: 'unset',
@@ -70,6 +80,7 @@ export const CategoryDivider = ({
       />
       <Box sx={{ paddingLeft: '15px' }}>
         <Button
+          className={'cx-button cx-category-divider__button'}
           color="secondary"
           disabled={disabled}
           variant="contained"

src/components/basic/Checkbox/index.tsx

@@ -37,10 +37,16 @@ export const Checkbox = ({
 }: CheckboxProps) => {
   return label ? (
     <FormControlLabel
+      className={'cx-form-control__label'}
       control={<MuiCheckbox size={size} {...props} {...ariaLabel} />}
       label={label}
     />
   ) : (
-    <MuiCheckbox size={size} {...props} {...ariaLabel} />
+    <MuiCheckbox
+      size={size}
+      {...props}
+      {...ariaLabel}
+      className={'cx-checkbox'}
+    />
   )
 }

src/components/basic/Chip/DraggableChip.tsx

@@ -42,6 +42,7 @@ export const DraggableChip = ({
 
   return (
     <Box
+      className={'cx-chip__draggable'}
       draggable="true"
       {...props}
       sx={{
@@ -67,8 +68,10 @@ export const DraggableChip = ({
         ...props.sx,
       }}
     >
-      <Box sx={{ flex: '1 1 auto' }}>{children}</Box>
-      <Box sx={{ flex: '0 0 auto' }}>
+      <Box sx={{ flex: '1 1 auto' }} className={'cx-chip__draggable-label'}>
+        {children}
+      </Box>
+      <Box sx={{ flex: '0 0 auto' }} className={'cx-chip__draggable-icon'}>
         <OpenWithIcon sx={{ marginLeft: 1, display: 'block' }} />
       </Box>
     </Box>

src/components/basic/Chip/index.tsx

@@ -62,6 +62,7 @@ export const Chip = ({
 
   return (
     <MuiChip
+      className={`cx-chip cx-variant-${variant && variant.toLocaleLowerCase()} cx-color-${color && color.toLocaleLowerCase()} cx-type-${type && type.toLocaleLowerCase()}`}
       variant={variant}
       color={color}
       icon={withIcon ? icon : undefined}

src/components/basic/CircularProgress/index.tsx

@@ -21,5 +21,5 @@
 import './CircularProgress.scss'
 
 export const CircularProgress = () => {
-  return <div className={'circularProgress'} />
+  return <div className={'cx-circular-progress circularProgress'} />
 }

src/components/basic/CustomAccordion/Item.tsx

@@ -50,6 +50,7 @@ export const CustomAccordionItem = ({
   const onChange = { ...props }.onChange
   return (
     <Accordion
+      className={'cx-accordion'}
       expanded={expanded}
       {...props}
       elevation={0}
@@ -61,6 +62,7 @@ export const CustomAccordionItem = ({
       }}
     >
       <AccordionSummary
+        className={'cx-accordion__summary'}
         aria-controls={`${id}-content`}
         id={`${id}-header`}
         expandIcon={<ExpandMoreIcon />}
@@ -79,19 +81,29 @@ export const CustomAccordionItem = ({
           <Box sx={{ marginRight: '10px', color: 'action.active' }}>{icon}</Box>
         )}
         {titleElement}
-        <Typography variant="label1">{title}</Typography>
+        <Typography variant="label1" className={'cx-accordion__title'}>
+          {title}
+        </Typography>
       </AccordionSummary>
-      <AccordionDetails sx={{ mb: '20px', bgcolor: color }}>
+      <AccordionDetails
+        className={'cx-accordion__details'}
+        sx={{ mb: '20px', bgcolor: color }}
+      >
         {children}
       </AccordionDetails>
       {buttonText && (
         <AccordionActions
+          className={'cx-accordion__actions'}
           onClick={(e) => {
             onChange?.(e, false)
           }}
           sx={{ justifyContent: 'center', mb: '20px' }}
         >
-          <Button variant="contained" size="small">
+          <Button
+            variant="contained"
+            size="small"
+            className={'cx-button cx-accordion__button'}
+          >
             {buttonText}
           </Button>
         </AccordionActions>

src/components/basic/CustomAccordion/index.tsx

@@ -39,7 +39,13 @@ export const CustomAccordion = ({
       {items.map((item) => {
         item.expanded = expanded === item.id
         item.onChange = handleChange(item.id)
-        return <CustomAccordionItem {...item} key={item.id} />
+        return (
+          <CustomAccordionItem
+            className={'cx-accordion__item'}
+            {...item}
+            key={item.id}
+          />
+        )
       })}
     </>
   )

src/components/basic/CustomIcons/FileErrorIcon.tsx

@@ -26,6 +26,7 @@ interface FileIconProps {
 export const FileErrorIcon = ({ fillColor, size }: FileIconProps) => {
   return (
     <svg
+      className={'cx-icon cx-icon__file-error'}
       width={size}
       height={size}
       viewBox="0 0 58 60"

src/components/basic/CustomIcons/FileIcon.tsx

@@ -27,6 +27,7 @@ interface FileIconProps {
 export const FileIcon = ({ fillColor, strokeColor, size }: FileIconProps) => {
   return (
     <svg
+      className={'cx-icon cx-icon__file'}
       stroke={strokeColor}
       fill={fillColor}
       width={size}

src/components/basic/Datepicker/index.tsx

@@ -101,7 +101,10 @@ export const Datepicker = ({
     const isBold = today ? '500' : '400'
 
     return (
-      <Box key={uniqueId('pickers-day')}>
+      <Box
+        key={uniqueId('pickers-day')}
+        className={'cx-date-picker__picker-day'}
+      >
         {day ? (
           <Button
             sx={{
@@ -134,6 +137,7 @@ export const Datepicker = ({
   }
   return (
     <Box
+      className={'cx-date-picker__wrapper'}
       sx={{
         button: {
           color: iconColor,
@@ -148,7 +152,7 @@ export const Datepicker = ({
         adapterLocale={localeMap[locale]}
       >
         <DatePicker
-          className="date-picker"
+          className="date-picker cx-date-picker"
           value={value}
           open={open}
           disabled={disabled}