@platformatic/ui-components 0.1.57 → 0.1.59

package/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icons from './icons'
 import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
@@ -17,13 +17,17 @@ function Sidebar (props) {
     onClickSettings
   } = props
   const [collapsed, setCollapsed] = useState(false)
-  const [selectedItem, setSelectedItem] = useState(defaultSelected)
+  const [selectedItem, setSelectedItem] = useState(null)
 
-  function onClickItemSelected (index) {
-    setSelectedItem(index)
-    onClickItemSelectedParent(index)
+  function onClickItemSelected (item) {
+    setSelectedItem(item.id)
+    onClickItemSelectedParent(item.id)
   }
 
+  useEffect(() => {
+    setSelectedItem(defaultSelected)
+  }, [defaultSelected])
+
   return (
     <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
       {collapsed
@@ -63,14 +67,14 @@ function Sidebar (props) {
               {title}
             </div>
             <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === index
+              {items.map(item => {
+                const isSelected = selectedItem === item.id
                 return (
-                  <React.Fragment key={index}>
-                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
+                  <React.Fragment key={item.id}>
+                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
                       {item.iconName && (<PlatformaticIcon
                         iconName={item.iconName}
-                        color={isSelected ? 'green' : 'white'}
+                        color={isSelected ? 'main-green' : 'white'}
                         tip={item.title}
                         size='medium'
                                          />)}
@@ -114,18 +118,20 @@ Sidebar.propTypes = {
   /**
    * defaultSelected
    */
-  defaultSelected: PropTypes.number,
+  defaultSelected: PropTypes.string,
   /**
    * addTitle
    */
   addTitle: PropTypes.string,
   /**
    * items: array with keys
+   * id: id of the worspacedSeleted
    * title: name to display
    * subtitle: secondary title
    * icon: what Icon
    */
   items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
     title: PropTypes.string,
     subtitle: PropTypes.string,
     iconName: PropTypes.string
@@ -147,7 +153,7 @@ Sidebar.propTypes = {
 
 Sidebar.defaultProps = {
   title: '',
-  defaultSelected: 0,
+  defaultSelected: null,
   onClickItemSelectedParent: () => {},
   items: [],
   onClickAdd: () => {},

package/src/components/SimpleMetric.jsx

@@ -1,8 +1,6 @@
 'use strict'
 
 import React from 'react'
-// The icon that is in design is not in the free version of fontawesome
-// Temporary using this one
 import ReactTooltip from 'react-tooltip'
 import BorderedBox from './BorderedBox'
 import styles from './SimpleMetric.module.css'

package/src/components/Status.jsx

@@ -1,26 +1,33 @@
 'use strict'
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
-export default function Status (props) {
-  const { color, status } = props
+import PropTypes from 'prop-types'
+import PlatformaticIcon from './PlatformaticIcon'
+import { COLORS_ICON } from './constants'
 
-  function getColorClass (color) {
-    switch (color) {
-      case 'green':
-        return 'text-main-green'
-      case 'red':
-        return 'text-error-red'
-      case 'white':
-      default:
-        return 'text-white'
-    }
-  }
-  const colorClass = getColorClass(color)
+function Status ({ color, status }) {
+  const className = `inline-flex text-${color}`
   return (
-    <div className={colorClass}>
-      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
-      {status}
+    <div className={className}>
+      <PlatformaticIcon iconName='CircleFullIcon' size='medium' color={color} />
+      <span className='ml-2'>{status}</span>
     </div>
   )
 }
+
+Status.propTypes = {
+  /**
+   * color
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * status
+   */
+  status: PropTypes.string
+}
+
+Status.defaultProps = {
+  color: 'white',
+  status: ''
+}
+
+export default Status

package/src/components/constants.js

@@ -0,0 +1,4 @@
+export const COLORS_ICON = ['main-green', 'white', 'main-dark-blue', 'error-red', 'warning-yellow']
+export const SIZES = ['small', 'medium', 'large', 'extra-large']
+export const COLORS_BUTTON = ['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']
+export const COLORS_BORDERED_BOX = ['main-green', 'error-red', 'white', 'dark-blue', 'warning-yellow', 'transparent']

package/src/components/forms/Input.jsx

@@ -9,6 +9,7 @@ function Input ({ placeholder, value, name, borderColor, errorMessage, onChange,
   let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
   const showError = errorMessage.length > 0
   if (showError) className += ' ' + commonStyles['bordered--error-red']
+  if (disabled) className += ' ' + commonStyles['apply-opacity-30']
 
   return (
     <div className={styles.container}>

package/src/components/icons/AddIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AddIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ AddIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AddIcon.defaultProps = {

package/src/components/icons/AlertIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AlertIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,15 +67,15 @@ AlertIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AlertIcon.defaultProps = {
-  color: 'red',
+  color: 'error-red',
   size: 'medium'
 }
 

package/src/components/icons/AllInOneIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AllInOneIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -96,11 +97,11 @@ AllInOneIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AllInOneIcon.defaultProps = {

package/src/components/icons/ApiCloudIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ApiCloudIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -78,11 +79,11 @@ ApiCloudIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ApiCloudIcon.defaultProps = {

package/src/components/icons/ApiEmptyIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ApiEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -126,11 +127,11 @@ ApiEmptyIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ApiEmptyIcon.defaultProps = {

package/src/components/icons/ApiIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ApiIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -69,11 +70,11 @@ ApiIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ApiIcon.defaultProps = {

package/src/components/icons/ApiIconClosed.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ApiIconClosed = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -37,11 +38,11 @@ ApiIconClosed.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ApiIconClosed.defaultProps = {

package/src/components/icons/AppEmptyIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AppEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -112,11 +113,11 @@ AppEmptyIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AppEmptyIcon.defaultProps = {

package/src/components/icons/AppIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AppIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -70,11 +71,11 @@ AppIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AppIcon.defaultProps = {

package/src/components/icons/AppListIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const AppListIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -88,11 +89,11 @@ AppListIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 AppListIcon.defaultProps = {

package/src/components/icons/ArrowDownFullIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ArrowDownFullIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -61,11 +62,11 @@ ArrowDownFullIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ArrowDownFullIcon.defaultProps = {

package/src/components/icons/ArrowDownIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ArrowDownIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ ArrowDownIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ArrowDownIcon.defaultProps = {

package/src/components/icons/ArrowLeftIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ArrowLeftIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ ArrowLeftIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ArrowLeftIcon.defaultProps = {

package/src/components/icons/ArrowRightIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ArrowRightIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ ArrowRightIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ArrowRightIcon.defaultProps = {

package/src/components/icons/ArrowUpIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const ArrowUpIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -60,11 +61,11 @@ ArrowUpIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 ArrowUpIcon.defaultProps = {

package/src/components/icons/BellIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const BellIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -63,11 +64,11 @@ BellIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 BellIcon.defaultProps = {

package/src/components/icons/BillingIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const BillingIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -83,11 +84,11 @@ BillingIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 BillingIcon.defaultProps = {

package/src/components/icons/Calendar1DayIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const Calendar1DayIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -75,11 +76,11 @@ Calendar1DayIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 Calendar1DayIcon.defaultProps = {

package/src/components/icons/Calendar7DaysIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const Calendar7DaysIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -73,11 +74,11 @@ Calendar7DaysIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 Calendar7DaysIcon.defaultProps = {

package/src/components/icons/CalendarIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CalendarIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -87,11 +88,11 @@ CalendarIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CalendarIcon.defaultProps = {

package/src/components/icons/CircleAddIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleAddIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -66,11 +67,11 @@ CircleAddIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleAddIcon.defaultProps = {

package/src/components/icons/CircleArrowLeftIcon.jsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES } from '../constants'
 
 const CircleArrowLeftIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
@@ -80,11 +81,11 @@ CircleArrowLeftIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
-  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  color: PropTypes.oneOf(COLORS_ICON),
   /**
    * Size
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+  size: PropTypes.oneOf(SIZES)
 }
 
 CircleArrowLeftIcon.defaultProps = {