fix: updating all the icons

Signed-off-by: Antonio Sonis <[email protected]>

Author: tonysnowboardunderthebridge

index.js

@@ -39,7 +39,6 @@ import Status from './src/components/Status'
 import Tooltip from './src/components/Tooltip'
 import TooltipAbsolute from './src/components/TooltipAbsolute'
 import TabbedWindow from './src/components/TabbedWindow'
-import TabbedWindowV2 from './src/components/TabbedWindowV2'
 import Tag from './src/components/Tag'
 import TextWithLabel from './src/components/TextWithLabel'
 import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
@@ -84,7 +83,6 @@ export {
   SimpleMetric,
   Status,
   TabbedWindow,
-  TabbedWindowV2,
   Tag,
   TextWithLabel,
   Tooltip,

setupTests.js

@@ -1 +1 @@
-import "@testing-library/jest-dom/vitest";
+import '@testing-library/jest-dom/vitest'

src/components/BorderedBox.jsx

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types'
 import styles from './BorderedBox.module.css'
 import commonStyles from './Common.module.css'
 import React from 'react'
-import { COLORS_BORDERED_BOX } from './constants'
+import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITY_100 } from './constants'
 function BorderedBox ({
-  classes,
-  color,
-  children,
-  backgroundColor,
-  backgroundColorOpacity,
-  borderColorOpacity,
-  clickable,
-  onClick
+  classes = '',
+  color = MAIN_GREEN,
+  children = null,
+  backgroundColor = DARK_BLUE,
+  backgroundColorOpacity = OPACITY_100,
+  borderColorOpacity = OPACITY_100,
+  clickable = false,
+  onClick = () => {}
 }) {
   const borderColor = commonStyles[`bordered--${color}-${borderColorOpacity}`]
   const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
@@ -62,15 +62,4 @@ BorderedBox.propTypes = {
   onClick: PropTypes.func
 }
 
-BorderedBox.defaultProps = {
-  children: null,
-  color: 'main-green',
-  backgroundColor: 'dark-blue',
-  classes: '',
-  backgroundColorOpacity: 100,
-  borderColorOpacity: 100,
-  clickable: false,
-  onClick: () => {}
-}
-
 export default BorderedBox

src/components/Button.jsx

@@ -20,20 +20,20 @@ import {
 } from './constants'
 // ${inactive ? styles.inactive : styles.active}
 function Button ({
-  textClass,
-  paddingClass,
-  label,
-  color,
-  backgroundColor,
-  size,
-  disabled,
-  hoverEffect,
-  hoverEffectProperties,
-  bordered,
-  fullWidth,
-  platformaticIcon,
-  platformaticIconAfter,
-  selected,
+  textClass = '',
+  paddingClass = '',
+  label = '',
+  color = MAIN_DARK_BLUE,
+  backgroundColor = TRANSPARENT,
+  size = LARGE,
+  disabled = false,
+  hoverEffect = DULLS_BACKGROUND_COLOR,
+  hoverEffectProperties = {},
+  bordered = true,
+  fullWidth = false,
+  platformaticIcon = null,
+  platformaticIconAfter = null,
+  selected = false,
   ...rest
 }) {
   let buttonClassName = textClass
@@ -178,20 +178,4 @@ Button.propTypes = {
   selected: PropTypes.bool
 }
 
-Button.defaultProps = {
-  textClass: '',
-  paddingClass: '',
-  label: '',
-  color: MAIN_DARK_BLUE,
-  backgroundColor: TRANSPARENT,
-  disabled: false,
-  size: LARGE,
-  hoverEffect: DULLS_BACKGROUND_COLOR,
-  hoverEffectProperties: {},
-  bordered: true,
-  fullWidth: false,
-  platformaticIcon: null,
-  selected: false
-}
-
 export default Button

src/components/ButtonFullRounded.jsx

@@ -6,20 +6,19 @@ import styles from './ButtonFullRounded.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_ICON, SIZES, DULLS_BACKGROUND_COLOR, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
 function ButtonFullRounded ({
-  className,
-  iconName,
-  iconSize,
-  iconColor,
-  disabled,
-  paddingSize,
-  alt,
-  onClick,
-  hoverEffect,
-  bordered,
-  tip,
-  selected,
-  buttonClassName,
-  internalOverHandling
+  className = '',
+  iconName = '',
+  iconSize = SMALL,
+  iconColor = WHITE,
+  disabled = false,
+  paddingSize = NONE,
+  alt = 'ButtonFullRounded',
+  onClick = () => {},
+  hoverEffect = '',
+  bordered = false,
+  tip = '',
+  selected = false,
+  buttonClassName = ''
 }) {
   const padding = commonStyles[`padding--${paddingSize}`]
   const containerClassName = `${className} border-0 ${styles.roundedFull}`
@@ -106,21 +105,4 @@ ButtonFullRounded.propTypes = {
   internalOverHandling: PropTypes.bool
 }
 
-ButtonFullRounded.defaultProps = {
-  className: '',
-  iconName: '',
-  iconColor: WHITE,
-  iconSize: SMALL,
-  disabled: false,
-  paddingSize: NONE,
-  alt: 'ButtonFullRounded',
-  onClick: () => {},
-  hoverEffect: '',
-  bordered: false,
-  tip: '',
-  selected: false,
-  buttonClassName: '',
-  internalOverHandling: false
-}
-
 export default ButtonFullRounded

src/components/ButtonOnlyIcon.jsx

@@ -4,22 +4,21 @@ import PropTypes from 'prop-types'
 import styles from './Button.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
+import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
 
 function ButtonOnlyIcon ({
-  textClass,
-  paddingClass,
-  altLabel,
-  color,
-  backgroundColor,
-  size,
-  disabled,
-  hoverEffect,
-  bordered,
-  fullWidth,
-  platformaticIcon,
-  platformaticIconAfter,
-  selected,
+  textClass = '',
+  paddingClass = '',
+  altLabel = '',
+  color = MAIN_DARK_BLUE,
+  backgroundColor = TRANSPARENT,
+  size = LARGE,
+  disabled = false,
+  hoverEffect = DULLS_BACKGROUND_COLOR,
+  bordered = true,
+  fullWidth = false,
+  platformaticIcon = null,
+  selected = false,
   ...rest
 }) {
   let contentClassName = `${styles.content} `
@@ -139,32 +138,10 @@ ButtonOnlyIcon.propTypes = {
     iconName: PropTypes.string,
     color: PropTypes.string
   }),
-  /**
-   * platformaticIconAfter: should be removed
-   */
-  platformaticIconAfter: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string
-  }),
   /**
    * Selected: default false
    */
   selected: PropTypes.bool
 }
 
-ButtonOnlyIcon.defaultProps = {
-  textClass: '',
-  paddingClass: '',
-  altLabel: '',
-  color: MAIN_DARK_BLUE,
-  backgroundColor: 'transparent',
-  disabled: false,
-  size: LARGE,
-  hoverEffect: DULLS_BACKGROUND_COLOR,
-  bordered: true,
-  fullWidth: false,
-  platformaticIcon: null,
-  selected: false
-}
-
 export default ButtonOnlyIcon

src/components/Checkbox.jsx

@@ -3,7 +3,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Checkbox.module.css'
 import { MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
-function Checkbox ({ disabled, color, ...rest }) {
+function Checkbox ({
+  disabled = false,
+  color = MAIN_DARK_BLUE,
+  ...rest
+}) {
   let className = `${styles.checkbox} `
   className += styles[`checkbox--${color}`]
   if (disabled) className += ` ${styles.disabled}`
@@ -23,9 +27,4 @@ Checkbox.propTypes = {
   color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK])
 }
 
-Checkbox.defaultProps = {
-  disabled: false,
-  color: MAIN_DARK_BLUE
-}
-
 export default Checkbox

src/components/CopyAndPaste.jsx

@@ -1,19 +1,18 @@
 'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER } from './constants'
+import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 import TooltipAbsolute from './TooltipAbsolute'
 
 function CopyAndPaste ({
-  value,
-  tooltipLabel,
-  color,
-  timeout,
-  size,
-  tooltipClassName,
-  position
-
+  value = 'app',
+  tooltipLabel = 'Create your app now',
+  color = MAIN_DARK_BLUE,
+  timeout = 1500,
+  size = MEDIUM,
+  tooltipClassName = '',
+  position = POSITION_CENTER
 }) {
   const [copied, setCopied] = useState(false)
 
@@ -74,14 +73,4 @@ CopyAndPaste.propTypes = {
   position: PropTypes.oneOf(POSITIONS)
 }
 
-CopyAndPaste.defaultProps = {
-  value: 'app',
-  tooltipLabel: 'Create your app now',
-  color: 'main-dark-blue',
-  timeout: 1500,
-  size: MEDIUM,
-  tooltipClassName: '',
-  position: POSITION_CENTER
-}
-
 export default CopyAndPaste

src/components/HorizontalSeparator.jsx

@@ -4,7 +4,12 @@ import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'
 import { DARK_GREEN, MAIN_DARK_BLUE, WHITE } from './constants'
 import styles from './HorizontalSeparator.module.css'
-function HorizontalSeparator ({ marginTop, marginBottom, color, opacity }) {
+function HorizontalSeparator ({
+  marginTop = 4,
+  marginBottom = 4,
+  color = DARK_GREEN,
+  opacity = 1
+}) {
   function getClassName () {
     let className = `${styles.style} `
     className += commonStyles[`text--${color}`] + ' '
@@ -37,11 +42,4 @@ HorizontalSeparator.propTypes = {
   opacity: PropTypes.number
 }
 
-HorizontalSeparator.defaultProps = {
-  marginTop: 4,
-  marginBottom: 4,
-  color: DARK_GREEN,
-  opacity: 1
-}
-
 export default HorizontalSeparator

src/components/LoadingSpinnerV2.jsx

@@ -5,10 +5,10 @@ import styles from './LoadingSpinnerV2.module.css'
 import { SpinnerCircular } from 'spinners-react'
 
 function LoadingSpinnerV2 ({
-  loading,
-  applySentences,
-  color,
-  containerClassName
+  loading = false,
+  applySentences = {},
+  color = '#FFFFFF',
+  containerClassName = ''
 }) {
   const defaultContainerClassName = containerClassName || `${styles.container}`
   // If null then loading not started, if true then loading, if false then done loading
@@ -46,11 +46,4 @@ LoadingSpinnerV2.propTypes = {
   containerClassName: PropTypes.string
 }
 
-LoadingSpinnerV2.defaultProps = {
-  loading: false,
-  applySentences: {},
-  color: '#FFFFFF',
-  containerClassName: ''
-}
-
 export default LoadingSpinnerV2