@platformatic/ui-components 0.1.50 → 0.1.51

package/src/components/icons/CalendarIcon.jsx

@@ -1,9 +1,12 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CalendarIcon = ({ color = 'green', size = 'normal' }) => {
+const CalendarIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
@@ -16,41 +19,84 @@ const CalendarIcon = ({ color = 'green', size = 'normal' }) => {
           className={className}
         >
           <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
-          <path
-            d='M2 7H14'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <line
-            x1={4.5}
-            y1={5.5}
-            x2={4.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <line
-            x1={11.5}
-            y1={5.5}
-            x2={11.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' />
+          <path d='M2 7H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M3 10.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x={6} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={6} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10.5} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={15} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10.5} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={15} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
         </svg>
       )
       break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        ><rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x={10} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={17.5} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={25} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={17.5} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={25} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+CalendarIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CalendarIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
 export default CalendarIcon

package/src/components/icons/CircleAddIcon.jsx

@@ -1,40 +1,81 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CircleAddIcon = ({ color = 'green', size = 'normal' }) => {
+const CircleAddIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
         <svg
-          width={18}
-          height={18}
-          viewBox='0 0 18 18'
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <line x1={8} y1={5} x2={8} y2={11} stroke='none' strokeLinecap='round' />
+          <line x1={5} y1={8} x2={11} y2={8} stroke='none' strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <line x1={12} y1={7.5} x2={12} y2={16.5} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={7.5} y1={12} x2={16.5} y2={12} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
           className={className}
         >
-          <circle cx={9} cy={9} r={8} stroke='none' />
-          <path
-            d='M4 9H14'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M9 14L9 4.00002'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
+          <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <line x1={19.75} y1={12.25} x2={19.75} y2={27.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={12.25} y1={20.25} x2={27.75} y2={20.25} stroke='none' strokeWidth={2} strokeLinecap='round' />
         </svg>
       )
       break
+
     default:
       break
   }
   return icon
 }
 
+CircleAddIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CircleAddIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
 export default CircleAddIcon

package/src/components/icons/CloseIcon.jsx

@@ -1,31 +1,79 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const CloseIcon = ({ color = 'main-dark-blue' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={16}
-      height={16}
-      viewBox='0 0 16 16'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M2 2L14 14'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M2 14L14 2'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+const CloseIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M2 2L14 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2 14L14 2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3 3L21 21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3 21L21 3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5 5L35 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5 35L35 5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CloseIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CloseIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
 }
 
 export default CloseIcon

package/src/components/icons/CopyPasteIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CopyPasteIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6 13.5V4.94497C6 4.66882 6.22386 4.44497 6.5 4.44497H10.5365C10.6594 4.44497 10.7779 4.4902 10.8696 4.57203L13.833 7.21859C13.9393 7.31345 14 7.44911 14 7.59152V13.5C14 13.7761 13.7761 14 13.5 14H6.5C6.22386 14 6 13.7761 6 13.5Z' stroke='none' strokeLinecap='round' />
+          <path d='M10.5 7.78923V4.44497L14 7.78923H10.5Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.5 3.96723L7.36816 2.12196C7.27729 2.0433 7.16112 2.00001 7.04093 2.00001H4.61364H2.5C2.22386 2.00001 2 2.22386 2 2.50001L2.00001 10.6335C2.00001 10.9096 2.22386 11.1335 2.50001 11.1335H5.50001' stroke='none' strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9 20.5V7.16745C9 6.8913 9.22386 6.66745 9.5 6.66745H15.9001C16.023 6.66745 16.1416 6.71268 16.2332 6.79451L20.833 10.9024C20.9393 10.9973 21 11.1329 21 11.2754V20.5C21 20.7761 20.7761 21 20.5 21H9.5C9.22386 21 9 20.7761 9 20.5Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15.75 11.6838V6.66745L21 11.6838H15.75Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.25 5.95084L10.9818 3.12196C10.8909 3.0433 10.7748 3.00001 10.6546 3.00001H6.92045H3.5C3.22386 3.00001 3 3.22387 3 3.50001L3.00001 16.2002C3.00001 16.4764 3.22387 16.7002 3.50001 16.7002H8.25001' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15 34.5V11.6124C15 11.3363 15.2239 11.1124 15.5 11.1124H26.6274C26.7503 11.1124 26.8688 11.1576 26.9605 11.2395L34.833 18.2701C34.9393 18.365 35 18.5006 35 18.643V34.5C35 34.7761 34.7761 35 34.5 35H15.5C15.2239 35 15 34.7761 15 34.5Z' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M26.25 19.4731V11.1124L35 19.4731H26.25Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.75 9.91807L18.2091 5.12197C18.1182 5.04331 18.002 5.00001 17.8818 5.00001H11.5341H5.5C5.22386 5.00001 5 5.22387 5 5.50002L5.00002 27.3337C5.00002 27.6099 5.22387 27.8337 5.50002 27.8337H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CopyPasteIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CopyPasteIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default CopyPasteIcon

package/src/components/icons/DatabaseIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const DatabaseIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M8 6.8072C11.3137 6.8072 14 5.73107 14 4.4036C14 3.07613 11.3137 2 8 2C4.68629 2 2 3.07613 2 4.4036C2 5.73107 4.68629 6.8072 8 6.8072Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 8.08533C14 9.41275 11.3133 10.4889 8 10.4889C4.68667 10.4889 2 9.41275 2 8.08533' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 4.40356V11.5964C14 12.9238 11.3133 14 8 14C4.68667 14 2 12.9238 2 11.5964V4.40356' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M12 10.2108C16.9706 10.2108 21 8.59661 21 6.6054C21 4.61419 16.9706 3 12 3C7.02944 3 3 4.61419 3 6.6054C3 8.59661 7.02944 10.2108 12 10.2108Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 12.128C21 14.1191 16.97 15.7334 12 15.7334C7.03 15.7334 3 14.1191 3 12.128' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 6.60535V17.3945C21 19.3857 16.97 21 12 21C7.03 21 3 19.3857 3 17.3945V6.60535' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M20 17.018C28.2843 17.018 35 14.3277 35 11.009C35 7.69032 28.2843 5 20 5C11.7157 5 5 7.69032 5 11.009C5 14.3277 11.7157 17.018 20 17.018Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 20.2133C35 23.5319 28.2833 26.2223 20 26.2223C11.7167 26.2223 5 23.5319 5 20.2133' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 11.0089V28.9909C35 32.3095 28.2833 34.9999 20 34.9999C11.7167 34.9999 5 32.3095 5 28.9909V11.0089' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+DatabaseIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+DatabaseIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default DatabaseIcon

package/src/components/icons/EditIcon.jsx

@@ -1,38 +1,81 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const EditIcon = ({ color = 'green', size = 'normal' }) => {
+const EditIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
+
   switch (size) {
     case 'small':
       icon = (
-        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
-          <rect
-            x={10.0554}
-            y={4.50607}
-            width={2.11765}
-            height={7.76471}
-            transform='rotate(45 10.0554 4.50607)'
-            stroke='none'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M6.06234 11.4939L4.56494 9.99654L3.81624 12.2426L6.06234 11.4939Z'
-            stroke='none'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z'
-            stroke='none'
-          />
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={10.0554} y={4.50604} width={2.11765} height={7.76471} transform='rotate(45 10.0554 4.50604)' stroke='none' strokeLinejoin='round' />
+          <path d='M6.06234 11.4939L4.56494 9.99652L3.81624 12.2426L6.06234 11.4939Z' stroke='none' strokeLinejoin='round' />
+          <path d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z' stroke='none' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={15.083} y={6.75909} width={3.17647} height={11.6471} transform='rotate(45 15.083 6.75909)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M9.09327 17.2409L6.84717 14.9948L5.72412 18.364L9.09327 17.2409Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M16.622 5.22011C17.0125 4.82958 17.6457 4.82958 18.0362 5.22011L18.8681 6.052C19.2586 6.44252 19.2586 7.07569 18.8681 7.46621L17.3291 9.00521L15.083 6.7591L16.622 5.22011Z' stroke='none' strokeWidth={1.5} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={25.1384} y={11.2652} width={5.29412} height={19.4118} transform='rotate(45 25.1384 11.2652)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M15.1556 28.7348L11.4121 24.9913L9.54036 30.6066L15.1556 28.7348Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M28.1747 8.22877C28.5653 7.83825 29.1984 7.83825 29.5889 8.22877L31.9182 10.5581C32.3088 10.9486 32.3088 11.5818 31.9182 11.9723L28.8818 15.0087L25.1383 11.2652L28.1747 8.22877Z' stroke='none' strokeWidth={2} />
         </svg>
       )
       break
+
     default:
       break
   }
   return icon
 }
 
+EditIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+EditIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
 export default EditIcon