@platformatic/ui-components 0.1.53 → 0.1.55

package/src/components/icons/AppEmptyIcon.jsx

@@ -1,94 +1,127 @@
-import React from 'react'
-export default function AppEmptyIcon () {
-  return (
-    <svg
-      width={81}
-      height={80}
-      viewBox='0 0 81 80'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-      />
-      <rect
-        x={34.8199}
-        y={67.3799}
-        width={11.3609}
-        height={5.45325}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <path
-        d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <path
-        d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.1982 57.0413H9.25739V37.1597'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M29.139 39.9999V14.4377'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M61.8018 57.0414H71.7426V45.6804'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M49.0207 41.4201V32.8994H58.9615V17.2781'
-        stroke='#21FA90'
-        strokeWidth={3}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle
-        cx={9.25738}
-        cy={31.4793}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={29.139}
-        cy={8.75738}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={58.9615}
-        cy={11.5977}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-      <circle
-        cx={71.7426}
-        cy={40.0001}
-        r={5.68047}
-        stroke='#21FA90'
-        strokeWidth={3}
-      />
-    </svg>
-  )
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AppEmptyIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={81}
+          height={80}
+          viewBox='0 0 81 80'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+          />
+          <rect
+            x={34.8199}
+            y={67.3799}
+            width={11.3609}
+            height={5.45325}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <path
+            d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
+            stroke='none'
+            strokeWidth={3}
+          />
+          <path
+            d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinejoin='round'
+          />
+          <path
+            d='M19.1982 57.0413H9.25739V37.1597'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M29.139 39.9999V14.4377'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M61.8018 57.0414H71.7426V45.6804'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M49.0207 41.4201V32.8994H58.9615V17.2781'
+            stroke='none'
+            strokeWidth={3}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <circle
+            cx={9.25738}
+            cy={31.4793}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={29.139}
+            cy={8.75738}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={58.9615}
+            cy={11.5977}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+          <circle
+            cx={71.7426}
+            cy={40.0001}
+            r={5.68047}
+            stroke='none'
+            strokeWidth={3}
+          />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
 }
+
+AppEmptyIcon.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'])
+}
+
+AppEmptyIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AppEmptyIcon

package/src/components/icons/AppListIcon.jsx

@@ -1,73 +1,103 @@
-import React from 'react'
+import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-export default function AppListIcon ({ color = 'white' }) {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={49}
-      height={67}
-      viewBox='0 0 49 67'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M19.6628 38.0801H11.9961C11.4438 38.0801 10.9961 38.5278 10.9961 39.0801V53.7201C10.9961 54.2724 11.4438 54.7201 11.9961 54.7201H35.9961C36.5484 54.7201 36.9961 54.2724 36.9961 53.7201V39.0801C36.9961 38.5278 36.5484 38.0801 35.9961 38.0801H28.3294'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-      />
-      <rect
-        x={19.6631}
-        y={54.72}
-        width={8.66667}
-        height={4.16}
-        stroke='white'
-        strokeWidth={2}
-      />
-      <path
-        d='M15.3291 59.8799C15.3291 59.3276 15.7768 58.8799 16.3291 58.8799H31.6624C32.2147 58.8799 32.6624 59.3276 32.6624 59.8799V61.9999H15.3291V59.8799Z'
-        stroke='white'
-        strokeWidth={2}
-      />
-      <path
-        d='M23.9958 36L25.9416 41.749H32.2383L27.1441 45.302L29.0899 51.051L23.9958 47.498L18.9016 51.051L20.8474 45.302L15.7533 41.749H22.05L23.9958 36Z'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinejoin='round'
-      />
-      <path
-        d='M20.9961 34H15.9961V25H13.9961'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M19.9961 29.5V9'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M27.9961 35H32V27H38.9961V19'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M26 31.5V22H30.9961V14.5'
-        stroke='white'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle cx={11.9961} cy={25} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={19.9961} cy={7} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={30.9961} cy={12} r={2} stroke='white' strokeWidth={2} />
-      <circle cx={38.9961} cy={17} r={2} stroke='white' strokeWidth={2} />
-    </svg>
-  )
+
+const AppListIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={81}
+          height={80}
+          viewBox='0 0 81 80'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M19.6628 38.0801H11.9961C11.4438 38.0801 10.9961 38.5278 10.9961 39.0801V53.7201C10.9961 54.2724 11.4438 54.7201 11.9961 54.7201H35.9961C36.5484 54.7201 36.9961 54.2724 36.9961 53.7201V39.0801C36.9961 38.5278 36.5484 38.0801 35.9961 38.0801H28.3294'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+          />
+          <rect
+            x={19.6631}
+            y={54.72}
+            width={8.66667}
+            height={4.16}
+            stroke='none'
+            strokeWidth={2}
+          />
+          <path
+            d='M15.3291 59.8799C15.3291 59.3276 15.7768 58.8799 16.3291 58.8799H31.6624C32.2147 58.8799 32.6624 59.3276 32.6624 59.8799V61.9999H15.3291V59.8799Z'
+            stroke='none'
+            strokeWidth={2}
+          />
+          <path
+            d='M23.9958 36L25.9416 41.749H32.2383L27.1441 45.302L29.0899 51.051L23.9958 47.498L18.9016 51.051L20.8474 45.302L15.7533 41.749H22.05L23.9958 36Z'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinejoin='round'
+          />
+          <path
+            d='M20.9961 34H15.9961V25H13.9961'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M19.9961 29.5V9'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M27.9961 35H32V27H38.9961V19'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M26 31.5V22H30.9961V14.5'
+            stroke='none'
+            strokeWidth={2}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <circle cx={11.9961} cy={25} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={19.9961} cy={7} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={30.9961} cy={12} r={2} stroke='none' strokeWidth={2} />
+          <circle cx={38.9961} cy={17} r={2} stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
 }
+
+AppListIcon.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'])
+}
+
+AppListIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default AppListIcon

package/src/components/icons/BellIcon.jsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const BellIcon = ({ 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 2C5.79086 2 4 3.62806 4 5.63636V9.5L2 12H14L12 9V5.63636C12 3.62806 10.2091 2 8 2Z' stroke='none' strokeLinejoin='round' />
+          <path d='M10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12' stroke='none' />
+        </svg>
+      )
+      break
+    case 'medium':
+      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 3C8.68629 3 6 5.44208 6 8.45455V14.25L3 18H21L18 13.5V8.45455C18 5.44208 15.3137 3 12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+          <path d='M15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18' 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}
+        >
+          <path d='M20 5C14.4772 5 10 9.07014 10 14.0909V23.75L5 30H35L30 22.5V14.0909C30 9.07014 25.5228 5 20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+          <path d='M25 30C25 32.7614 22.7614 35 20 35C17.2386 35 15 32.7614 15 30' stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+BellIcon.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'])
+}
+
+BellIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default BellIcon

package/src/components/icons/BillingIcon.jsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const BillingIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${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='M12 5V3C12 2.44772 11.5523 2 11 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H6' stroke='none' strokeLinecap='round' />
+          <path d='M4 4H9.55556' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4 6H6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4 8H5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.8332 9.07407C10.8332 9.35021 11.057 9.57407 11.3332 9.57407C11.6093 9.57407 11.8332 9.35021 11.8332 9.07407H10.8332ZM9.99984 9.49999C9.72081 9.49999 9.48985 9.42063 9.34223 9.31811C9.19275 9.21431 9.1665 9.12 9.1665 9.07407H8.1665C8.1665 9.5395 8.43873 9.90816 8.77183 10.1395C9.10678 10.3721 9.54249 10.5 9.99984 10.5V9.49999ZM9.1665 9.07407C9.1665 9.02813 9.19275 8.93382 9.34223 8.83002C9.48985 8.72751 9.72081 8.64814 9.99984 8.64814V7.64814C9.54249 7.64814 9.10678 7.77605 8.77183 8.00865C8.43873 8.23997 8.1665 8.60863 8.1665 9.07407H9.1665ZM9.99984 8.64814C10.2789 8.64814 10.5098 8.72751 10.6574 8.83002C10.8069 8.93382 10.8332 9.02813 10.8332 9.07407H11.8332C11.8332 8.60863 11.5609 8.23997 11.2278 8.00865C10.8929 7.77605 10.4572 7.64814 9.99984 7.64814V8.64814Z' fill='none' className={filledClassName} />
+          <path d='M8.66683 10.9259C8.66683 11.4373 9.26378 11.8519 10.0002 11.8519C10.7365 11.8519 11.3335 11.4373 11.3335 10.9259C11.3335 10.4146 10.7365 10 10.0002 10' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 7.77778V12.2222' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={10} cy={10} r={4} stroke='none' />
+        </svg>
+      )
+      break
+    case 'medium':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M18 7.5V4C18 3.44772 17.5523 3 17 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M6 6H14.3333' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 9H9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 12H7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M16.2498 13.6111C16.2498 14.0253 16.5855 14.3611 16.9998 14.3611C17.414 14.3611 17.7498 14.0253 17.7498 13.6111H16.2498ZM14.9998 14.25C14.5812 14.25 14.2348 14.1309 14.0133 13.9772C13.7891 13.8215 13.7498 13.68 13.7498 13.6111H12.2498C12.2498 14.3093 12.6581 14.8622 13.1577 15.2092C13.6602 15.5581 14.3137 15.75 14.9998 15.75V14.25ZM13.7498 13.6111C13.7498 13.5422 13.7891 13.4007 14.0133 13.245C14.2348 13.0913 14.5812 12.9722 14.9998 12.9722V11.4722C14.3137 11.4722 13.6602 11.6641 13.1577 12.013C12.6581 12.36 12.2498 12.9129 12.2498 13.6111H13.7498ZM14.9998 12.9722C15.4183 12.9722 15.7647 13.0913 15.9862 13.245C16.2104 13.4007 16.2498 13.5422 16.2498 13.6111H17.7498C17.7498 12.9129 17.3414 12.36 16.8418 12.013C16.3393 11.6641 15.6858 11.4722 14.9998 11.4722V12.9722Z' fill='none' className={filledClassName} />
+          <path d='M13.0002 16.3889C13.0002 17.156 13.8957 17.7778 15.0002 17.7778C16.1048 17.7778 17.0002 17.156 17.0002 16.3889C17.0002 15.6219 16.1048 15 15.0002 15' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 11.6667V18.3333' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={15} cy={15} r={6} 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}
+        >
+          <path d='M30 12.5V6C30 5.44772 29.5523 5 29 5H6C5.44772 5 5 5.44772 5 6V34C5 34.5523 5.44772 35 6 35H15' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M10 10H23.8889' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 15H15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10 20H12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M27.3332 22.6852C27.3332 23.2375 27.7809 23.6852 28.3332 23.6852C28.8855 23.6852 29.3332 23.2375 29.3332 22.6852H27.3332ZM24.9998 24C24.2577 24 23.6291 23.7894 23.2132 23.5006C22.7936 23.2092 22.6665 22.9049 22.6665 22.6852H20.6665C20.6665 23.7439 21.2856 24.5969 22.0724 25.1434C22.863 25.6923 23.901 26 24.9998 26V24ZM22.6665 22.6852C22.6665 22.4655 22.7936 22.1611 23.2132 21.8697C23.6291 21.5809 24.2577 21.3704 24.9998 21.3704V19.3704C23.901 19.3704 22.863 19.678 22.0724 20.227C21.2856 20.7734 20.6665 21.6264 20.6665 22.6852H22.6665ZM24.9998 21.3704C25.742 21.3704 26.3706 21.5809 26.7865 21.8697C27.2061 22.1611 27.3332 22.4655 27.3332 22.6852H29.3332C29.3332 21.6264 28.7141 20.7734 27.9273 20.227C27.1367 19.678 26.0986 19.3704 24.9998 19.3704V21.3704Z' fill='none' className={filledClassName} />
+          <path d='M21.6671 27.3149C21.6671 28.5933 23.1595 29.6297 25.0004 29.6297C26.8414 29.6297 28.3337 28.5933 28.3337 27.3149C28.3337 26.0364 26.8414 25.0001 25.0004 25.0001' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M25 19.4445V30.5556' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <circle cx={25} cy={25} r={10} stroke='none' strokeWidth={2} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+BillingIcon.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'])
+}
+
+BillingIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default BillingIcon