change: remove styledExcludeProps (#4254)

* change: remove styledExcludeProps * address comments
greenbone · Dec 16, 2024 · 9bc5e5b · 9bc5e5b
1 parent 4b30802
commit 9bc5e5b
Show file tree

Hide file tree

Showing 18 changed files with 98 additions and 158 deletions.
diff --git a/src/web/components/badge/badge.jsx b/src/web/components/badge/badge.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React, {useRef, useState, useEffect} from 'react';
 
 import styled from 'styled-components';
@@ -12,20 +11,16 @@ import {isDefined, hasValue} from 'gmp/utils/identity';
 
 import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const BadgeContainer = styledExcludeProps(styled.div, ['margin'])`
+const BadgeContainer = styled.div`
   position: relative;
   display: inline-flex;
-  margin-right: ${props => props.margin}px;
+  margin-right: ${props => props.$margin}px;
 `;
 
 BadgeContainer.displayName = 'BadgeContainer';
 
-const BadgeIcon = styledExcludeProps(styled.span, [
-  'backgroundColor',
-  'margin',
-])`
+const BadgeIcon = styled.span`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -34,16 +29,15 @@ const BadgeIcon = styledExcludeProps(styled.span, [
   align-items: center;
   position: absolute;
   font-size: 10px;
-  background-color: red;
   font-weight: bold;
   border-radius: 10px;
   min-width: 10px;
   padding: 3px 5px;
   z-index: ${Theme.Layers.higher};
-  background-color: ${({backgroundColor = Theme.green}) => backgroundColor};
-  color: ${({color = Theme.white}) => color};
-  ${({position = 'bottom'}) => position}: ${({radius = 8}) => -radius}px;
-  right: ${({margin = 8}) => -margin}px;
+  background-color: ${({$backgroundColor = Theme.green}) => $backgroundColor};
+  color: ${({$color = Theme.white}) => $color};
+  ${({$position = 'bottom'}) => $position}: ${({radius = 8}) => -radius}px;
+  right: ${({$margin = 8}) => -$margin}px;
 `;
 
 BadgeIcon.displayName = 'BadgeIcon';
@@ -74,17 +68,17 @@ const Badge = props => {
   } = props;
 
   return (
-    <BadgeContainer margin={dynamic ? margin : undefined}>
+    <BadgeContainer $margin={dynamic ? margin : undefined}>
       {children}
 
       {isDefined(content) && (
         <BadgeIcon
           data-testid="badge-icon"
           ref={icon}
-          color={color}
-          backgroundColor={backgroundColor}
-          position={position}
-          margin={dynamic ? margin : undefined}
+          $color={color}
+          $backgroundColor={backgroundColor}
+          $position={position}
+          $margin={dynamic ? margin : undefined}
         >
           {content}
         </BadgeIcon>
@@ -95,12 +89,11 @@ const Badge = props => {
 
 Badge.propTypes = {
   backgroundColor: PropTypes.string,
+  children: PropTypes.node,
   color: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   dynamic: PropTypes.bool,
   position: PropTypes.oneOf(['bottom', 'top']),
 };
 
 export default Badge;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/folding/folding.jsx b/src/web/components/folding/folding.jsx
@@ -8,7 +8,6 @@ import React from 'react';
 import styled, {keyframes, css} from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
 /**
  * State used in foldable components
@@ -31,33 +30,33 @@ const foldDelay = keyframes`
   }
 `;
 
-const Div = styledExcludeProps(styled.div, ['foldState'])`
+const Div = styled.div`
   overflow: hidden;
   transition: 0.4s;
 
-  display: ${({foldState}) =>
-    foldState === FoldState.FOLDED ? 'none' : undefined};
+  display: ${({$foldState}) =>
+    $foldState === FoldState.FOLDED ? 'none' : undefined};
 
-  height: ${({foldState}) => {
-    if (foldState === FoldState.FOLDED || foldState === FoldState.FOLDING) {
+  height: ${({$foldState}) => {
+    if ($foldState === FoldState.FOLDED || $foldState === FoldState.FOLDING) {
       return 0;
     }
     if (
-      foldState === FoldState.FOLDING_START ||
-      foldState === FoldState.UNFOLDING
+      $foldState === FoldState.FOLDING_START ||
+      $foldState === FoldState.UNFOLDING
     ) {
       const windowHeight = Math.ceil(window.innerHeight * 1.2) + 'px';
       return windowHeight;
     }
-    if (foldState === FoldState.UNFOLDING_START) {
+    if ($foldState === FoldState.UNFOLDING_START) {
       return '1px';
     }
     return undefined;
   }};
 
-  animation: ${({foldState}) =>
-    foldState === FoldState.UNFOLDING_START ||
-    foldState === FoldState.FOLDING_START
+  animation: ${({$foldState}) =>
+    $foldState === FoldState.UNFOLDING_START ||
+    $foldState === FoldState.FOLDING_START
       ? css`
           ${foldDelay} 0.01s
         `
@@ -77,15 +76,15 @@ const FoldStatePropType = PropTypes.oneOf([
  * HOC for making a container content component foldable
  */
 
-export const withFolding = (Component, defaults = {}) => {
+export const withFolding = Component => {
   const FoldingWrapper = ({
     foldState,
     onFoldStepEnd,
     onFoldToggle,
     ...props
   }) => (
     <Div
-      foldState={foldState}
+      $foldState={foldState}
       onTransitionEnd={onFoldStepEnd}
       onAnimationEnd={onFoldStepEnd}
     >
@@ -188,7 +187,7 @@ export const withFoldToggle = Component => {
 
       return (
         <Component
-          foldState={foldState}
+          $foldState={foldState}
           onFoldToggle={this.handleFoldToggle}
           onFoldStepEnd={this.handleFoldStepEnd}
           {...other}
@@ -203,5 +202,3 @@ export const withFoldToggle = Component => {
 
   return FoldToggleWrapper;
 };
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/label/severityclass.jsx b/src/web/components/label/severityclass.jsx
@@ -8,12 +8,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 import _ from 'gmp/locale';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const Label = styledExcludeProps(styled.div, [
-  'backgroundColor',
-  'borderColor',
-])`
+const Label = styled.div`
   text-align: center;
   font-weight: normal;
   font-style: normal;
@@ -23,16 +19,16 @@ const Label = styledExcludeProps(styled.div, [
   width: 70px;
   height: 1.5em;
   font-size: 0.8em;
-  background-color: ${props => props.backgroundColor};
-  border-color: ${props => props.borderColor};
+  background-color: ${props => props.$backgroundColor};
+  border-color: ${props => props.$borderColor};
 `;
 
 const HighLabel = props => {
   return (
     <Label
       {...props}
-      backgroundColor="#C83814"
-      borderColor="#C83814"
+      $backgroundColor="#C83814"
+      $borderColor="#C83814"
       data-testid="severity-class-High"
     >
       {_('High')}
@@ -44,8 +40,8 @@ const MediumLabel = props => {
   return (
     <Label
       {...props}
-      backgroundColor="#F0A519"
-      borderColor="#F0A519"
+      $backgroundColor="#F0A519"
+      $borderColor="#F0A519"
       data-testid="severity-class-Medium"
     >
       {_('Medium')}
@@ -57,8 +53,8 @@ const LowLabel = props => {
   return (
     <Label
       {...props}
-      backgroundColor="#4F91C7"
-      borderColor="#4F91C7"
+      $backgroundColor="#4F91C7"
+      $borderColor="#4F91C7"
       data-testid="severity-class-Low"
     >
       {_('Low')}
@@ -70,8 +66,8 @@ const LogLabel = props => {
   return (
     <Label
       {...props}
-      backgroundColor="#191919"
-      borderColor="#191919"
+      $backgroundColor="#191919"
+      $borderColor="#191919"
       data-testid="severity-class-Log"
     >
       {_('Log')}
@@ -83,8 +79,8 @@ const FalsePositiveLabel = props => {
   return (
     <Label
       {...props}
-      backgroundColor="#191919"
-      borderColor="#191919"
+      $backgroundColor="#191919"
+      $borderColor="#191919"
       data-testid="severity-class-False-Positive"
     >
       {_('False Pos.')}
@@ -101,5 +97,3 @@ export const SeverityClassLabels = {
 };
 
 export default SeverityClassLabels;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/layout/__tests__/horizontalsep.jsx b/src/web/components/layout/__tests__/horizontalsep.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import {describe, test, expect} from '@gsa/testing';
 
 import HorizontalSep from 'web/components/layout/horizontalsep';
@@ -17,17 +16,17 @@ describe('HorizontalSep tests', () => {
   });
 
   test('should render with separator option', () => {
-    const {element} = render(<HorizontalSep separator="|" />);
+    const {element} = render(<HorizontalSep $separator="|" />);
     expect(element).toMatchSnapshot();
   });
 
   test('should render with spacing', () => {
-    const {element} = render(<HorizontalSep separator="|" spacing="10px" />);
+    const {element} = render(<HorizontalSep $separator="|" $spacing="10px" />);
     expect(element).toMatchSnapshot();
   });
 
   test('should allow to wrap', () => {
-    const {element} = render(<HorizontalSep wrap />);
+    const {element} = render(<HorizontalSep $wrap />);
     expect(element).toMatchSnapshot();
   });
 });
diff --git a/src/web/components/layout/divider.jsx b/src/web/components/layout/divider.jsx
@@ -3,19 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
 import Layout from './layout';
 
 const DEFAULT_MARGIN = '5px';
 
-const DividerComponent = styledExcludeProps(styled(Layout), ['margin'])`
+const DividerComponent = styled(Layout)`
   & > * {
     display: inline-flex;
   }
@@ -24,10 +22,10 @@ const DividerComponent = styledExcludeProps(styled(Layout), ['margin'])`
     return {
       // try to fix flex-wrap indentation at second line and beyond by using a
       // negative outer margin
-      ['margin' + edge]: '-' + props.margin,
+      ['margin' + edge]: '-' + props.$margin,
 
       '& > *': {
-        ['margin' + edge]: props.margin,
+        ['margin' + edge]: props.$margin,
       },
     };
   }}
@@ -45,7 +43,7 @@ const Divider = ({margin = DEFAULT_MARGIN, grow, ...props}) => {
   // put Divider into a container div to allow dividers in dividers
   return (
     <DividerContainer grow={grow}>
-      <DividerComponent margin={margin} grow={grow} {...props} />
+      <DividerComponent $margin={margin} grow={grow} {...props} />
     </DividerContainer>
   );
 };
@@ -56,5 +54,3 @@ Divider.propTypes = {
 };
 
 export default Divider;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/layout/horizontalsep.jsx b/src/web/components/layout/horizontalsep.jsx
@@ -10,17 +10,12 @@ import {isDefined} from 'gmp/utils/identity';
 import PropTypes from 'web/utils/proptypes';
 
 import Divider from './divider';
-import {styledExcludeProps} from 'web/utils/styledConfig';
 
-const HorizontalSep = styledExcludeProps(styled(Divider), [
-  'separator',
-  'spacing',
-  'wrap',
-])`
-  flex-wrap: ${props => (isDefined(props.wrap) ? props.wrap : null)};
+const HorizontalSep = styled(Divider)`
+  flex-wrap: ${props => (isDefined(props.$wrap) ? props.$wrap : null)};
   & > *:not(:last-child)::after {
-    content: ${({separator = '•'}) => `'${separator}'`};
-    margin-left: ${({spacing = '5px'}) => spacing};
+    content: ${({$separator = '•'}) => `'${$separator}'`};
+    margin-left: ${({$spacing = '5px'}) => $spacing};
   }
 `;