@platformatic/ui-components 0.1.53 → 0.1.55

package/src/components/icons/StopIcon.jsx

@@ -1,21 +1,78 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const StopIcon = ({ color = 'green', size = 'normal' }) => {
+
+const StopIcon = ({ 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}>
+        <svg
+          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' />
           <path d='M3.5 12L12 3.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
         </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}
+        >
+          <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <path d='M5.25 18L18 5.25' 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}
+        >
+          <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <path d='M8.75 30L30 8.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+StopIcon.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'])
+}
+
+StopIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default StopIcon

package/src/components/icons/TerminalIcon.jsx

@@ -1,22 +1,82 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
+
+const TerminalIcon = ({ 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}>
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
           <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
           <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
           <path d='M7 11H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
         </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}
+        >
+          <rect x={3} y={3} width={18} height={18} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M6 13.5L9 10.5L6 7.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M10.5 16.5H17.25' 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}
+        >
+          <rect x={5} y={5} width={30} height={30} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M10 22.5L15 17.5L10 12.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M17.5 27.5H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     default:
       break
   }
   return icon
 }
 
+TerminalIcon.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'])
+}
+
+TerminalIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default TerminalIcon

package/src/components/icons/{Users2Icon.jsx → TwoUsersIcon.jsx}

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const Users2Icon = ({ color, size }) => {
+const TwoUsersIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
@@ -65,7 +65,7 @@ const Users2Icon = ({ color, size }) => {
   return icon
 }
 
-Users2Icon.propTypes = {
+TwoUsersIcon.propTypes = {
   /**
    * color of text, icon and borders
    */
@@ -76,9 +76,9 @@ Users2Icon.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
 }
 
-Users2Icon.defaultProps = {
+TwoUsersIcon.defaultProps = {
   color: 'main-dark-blue',
   size: 'medium'
 }
 
-export default Users2Icon
+export default TwoUsersIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -1,10 +1,62 @@
 import * as React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 
-const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
+const UpgradeIcon = ({ 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='M9.80918 9.49998C9.39943 9.9934 8.7836 10.3072 8.09498 10.3072C7.37145 10.3072 6.72827 9.96077 6.32007 9.42357' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3.1061 6.85057L2.34803 6.85057C2.15566 6.85057 2 7.00735 2 7.2011L2 8.91548C2 9.10922 2.15566 9.26601 2.34803 9.26601L3.1061 9.26601C3.25037 9.26601 3.38072 9.3565 3.43134 9.49289L3.79709 10.4667C3.84645 10.5993 3.81228 10.7497 3.7085 10.8466L3.20987 11.3143C3.06307 11.452 3.06307 11.6865 3.20861 11.8255L4.3957 12.9548C4.52731 13.081 4.73487 13.0823 4.86901 12.9586L5.52457 12.357C5.62835 12.2627 5.77768 12.2385 5.9055 12.2984L6.77874 12.7062C6.90276 12.7636 6.98123 12.8885 6.98123 13.0249L6.98123 13.6495C6.98123 13.8432 7.13689 14 7.32926 14L8.79477 14C8.98713 14 9.1428 13.8432 9.1428 13.6495L9.1428 12.9943C9.1428 12.8426 9.24024 12.7075 9.38325 12.6604L10.3919 12.329C10.5109 12.2907 10.6412 12.3188 10.7336 12.4029L11.3246 12.9421C11.4689 13.0733 11.6929 13.0606 11.8207 12.9127L12.9002 11.67C13.0243 11.5272 13.0129 11.3105 12.8749 11.1818L12.4117 10.7484C12.3092 10.6541 12.2738 10.5075 12.3193 10.3762L12.6332 9.47122C12.6826 9.32974 12.8142 9.23541 12.9622 9.23541L13.652 9.23541C13.8443 9.23541 14 9.07863 14 8.88489L14 7.23296C14 7.03922 13.8443 6.88244 13.652 6.88244L12.9622 6.88244' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.88912 2.04607L5.00001 4.90712L6.50001 4.90713L6.50001 8.02304L9.5 8.02304L9.5 5.03457L11 5.03456L7.88912 2.04607Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </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='M14.7139 14.25C14.0993 14.9901 13.1755 15.4609 12.1426 15.4609C11.0573 15.4609 10.0925 14.9412 9.48022 14.1354' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M4.65914 10.2759L3.52204 10.2759C3.23349 10.2759 3 10.511 3 10.8016L3 13.3732C3 13.6638 3.23349 13.899 3.52204 13.899L4.65914 13.899C4.87555 13.899 5.07108 14.0348 5.14702 14.2393L5.69563 15.7001C5.76967 15.8989 5.71841 16.1245 5.56275 16.2698L4.81481 16.9715C4.5946 17.178 4.5946 17.5298 4.81291 17.7382L6.59355 19.4322C6.79097 19.6215 7.1023 19.6234 7.30352 19.4379L8.28686 18.5355C8.44252 18.394 8.66653 18.3577 8.85826 18.4475L10.1681 19.0594C10.3541 19.1454 10.4718 19.3328 10.4718 19.5374L10.4718 20.4742C10.4718 20.7648 10.7053 21 10.9939 21L13.1922 21C13.4807 21 13.7142 20.7648 13.7142 20.4742L13.7142 19.4915C13.7142 19.2639 13.8604 19.0613 14.0749 18.9905L15.5879 18.4934C15.7663 18.4361 15.9618 18.4781 16.1004 18.6043L16.9869 19.4131C17.2033 19.61 17.5393 19.5909 17.7311 19.3691L19.3503 17.5049C19.5364 17.2908 19.5193 16.9658 19.3124 16.7727L18.6176 16.1226C18.4638 15.9811 18.4107 15.7612 18.479 15.5643L18.9498 14.2068C19.0238 13.9946 19.2213 13.8531 19.4434 13.8531L20.478 13.8531C20.7665 13.8531 21 13.618 21 13.3273L21 10.8494C21 10.5588 20.7665 10.3237 20.478 10.3237L19.4434 10.3237' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M11.8337 3.0691L7.50001 7.36067L9.75001 7.36068L9.75001 12.0346L14.25 12.0345L14.25 7.55184L16.5 7.55183L11.8337 3.0691Z' 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='M24.5231 23.75C23.4987 24.9835 21.9591 25.7681 20.2376 25.7681C18.4288 25.7681 16.8208 24.9019 15.8003 23.5589' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7.76524 17.1264L5.87007 17.1264C5.38916 17.1264 5 17.5184 5 18.0027L5 22.2887C5 22.7731 5.38916 23.165 5.87007 23.165L7.76524 23.165C8.12592 23.165 8.4518 23.3913 8.57836 23.7322L9.49272 26.1668C9.61611 26.4982 9.53069 26.8742 9.27125 27.1164L8.02468 28.2859C7.65767 28.63 7.65767 29.2163 8.02151 29.5637L10.9892 32.387C11.3183 32.7025 11.8372 32.7057 12.1725 32.3966L13.8114 30.8925C14.0709 30.6567 14.4442 30.5961 14.7638 30.7459L16.9468 31.7656C17.2569 31.909 17.4531 32.2213 17.4531 32.5623L17.4531 34.1237C17.4531 34.608 17.8422 35 18.3231 35L21.9869 35C22.4678 35 22.857 34.608 22.857 34.1237L22.857 32.4858C22.857 32.1066 23.1006 31.7688 23.4581 31.6509L25.9798 30.8224C26.2772 30.7268 26.603 30.7969 26.834 31.0072L28.3115 32.3551C28.6722 32.6833 29.2322 32.6515 29.5518 32.2818L32.2506 29.1749C32.5606 28.818 32.5322 28.2763 32.1873 27.9545L31.0293 26.871C30.773 26.6352 30.6845 26.2687 30.7984 25.9405L31.583 23.6781C31.7064 23.3243 32.0354 23.0885 32.4056 23.0885L34.1299 23.0885C34.6108 23.0885 35 22.6966 35 22.2122L35 18.0824C35 17.598 34.6108 17.2061 34.1299 17.2061L32.4056 17.2061' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M19.7228 5.11517L12.5 12.2678L16.25 12.2678L16.25 20.0576L23.75 20.0576L23.75 12.5864L27.5 12.5864L19.7228 5.11517Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
     case 'extra-large':
       icon = (
         <svg
@@ -39,10 +91,27 @@ const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
         </svg>
       )
       break
+
     default:
       break
   }
   return icon
 }
 
+UpgradeIcon.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'])
+}
+
+UpgradeIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
 export default UpgradeIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -0,0 +1,112 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const WorkspaceFailIcon = ({ 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={2} y={2} width={5} height={5} rx={1} stroke='none' />
+          <rect x={6} y={14} width={4} height='5.03496' rx={1} transform='rotate(-180 6 14)' stroke='none' />
+          <rect x={14} y={14} width={6} height='5.03497' rx={1} transform='rotate(-180 14 14)' stroke='none' />
+          <circle cx={11.5} cy={4.5} r={2.5} stroke='none' />
+          <path d='M10.9624 5.23332L12.1707 3.89999' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.2332 5.17081L10.8999 3.96247' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+
+        </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}
+        >
+          <rect x={3} y={3} width={7.5} height={7.5} rx={1} stroke='none' strokeWidth={1.5} />
+          <rect x={9} y={21} width={6} height={7.55245} rx={1} transform='rotate(-180 9 21)' stroke='none' strokeWidth={1.5} />
+          <rect x={21} y={21} width={9} height={7.55245} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
+          <circle cx={17.25} cy={6.75} r={3.75} stroke='none' strokeWidth={1.5} />
+          <path d='M16.4436 7.84999L18.2561 5.85001' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M18.3498 7.75623L16.3499 5.94373' 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}
+        >
+          <rect x={5} y={5} width={12.5} height={12.5} rx={1} stroke='none' strokeWidth={2} />
+          <rect x={15} y={35} width={10} height={12.5874} rx={1} transform='rotate(-180 15 35)' stroke='none' strokeWidth={2} />
+          <rect x={35} y={35} width={15} height={12.5874} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
+          <circle cx={28.75} cy={11.25} r={6.25} stroke='none' strokeWidth={2} />
+          <path d='M27.4062 13.0833L30.4271 9.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M30.5833 12.927L27.25 9.9062' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={15} y={15} width={37.5} height={37.5} rx={1} stroke='none' stroke-width={6} />
+          <rect x={45} y={105} width={30} height={37.7622} rx={1} transform='rotate(-180 45 105)' stroke='none' stroke-width={6} />
+          <rect x={105} y={105} width={45} height={37.7622} rx={1} transform='rotate(-180 105 105)' stroke='none' stroke-width={6} />
+          <circle cx={86.25} cy={33.75} r={18.75} stroke='none' stroke-width={6} />
+          <path d='M82.2188 39.2499L91.2812 29.25' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M91.7499 38.781L81.75 29.7185' stroke='none' stroke-width={6} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+WorkspaceFailIcon.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'])
+}
+
+WorkspaceFailIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'medium'
+}
+
+export default WorkspaceFailIcon

package/src/components/icons/index.js

@@ -13,29 +13,50 @@ import ArrowDownIcon from './ArrowDownIcon'
 import ArrowLeftIcon from './ArrowLeftIcon'
 import ArrowRightIcon from './ArrowRightIcon'
 import ArrowUpIcon from './ArrowUpIcon'
+import BellIcon from './BellIcon'
+import BillingIcon from './BillingIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
 import CircleAddIcon from './CircleAddIcon'
-import CircleBackIcon from './CircleBackIcon'
+import CircleArrowLeftIcon from './CircleArrowLeftIcon'
+import CircleArrowRightIcon from './CircleArrowRightIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCheckMarkIcon from './CircleCheckMarkIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CircleTwoArrowsDownIcon from './CircleTwoArrowsDownIcon'
+import CircleTwoArrowsUpIcon from './CircleTwoArrowsUpIcon'
 import CloseIcon from './CloseIcon'
 import CopyPasteIcon from './CopyPasteIcon'
 import DatabaseIcon from './DatabaseIcon'
 import EditIcon from './EditIcon'
+import ExploreDocIcon from './ExploreDocIcon'
+import EnlargeIcon from './EnlargeIcon'
+import EntryIcon from './EntryIcon'
 import GearIcon from './GearIcon'
+import GraphQLIcon from './GraphQLIcon'
+import KeyIcon from './KeyIcon'
+import LayersIcon from './LayersIcon'
+import LensIcon from './LensIcon'
 import LiveIcon from './LiveIcon'
+import LogOutIcon from './LogOutIcon'
 import MetricsIcon from './MetricsIcon'
 import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
+import SendIcon from './SendIcon'
+import SocialDiscordIcon from './SocialDiscordIcon'
+import SocialGitHubIcon from './SocialGitHubIcon'
+import SocialGitLabIcon from './SocialGitLabIcon'
+import SocialLinkedInIcon from './SocialLinkedInIcon'
+import SocialNPMIcon from './SocialNPMIcon'
+import SocialTwitterIcon from './SocialTwitterIcon'
 import StopIcon from './StopIcon'
 import TerminalIcon from './TerminalIcon'
-import Users2Icon from './Users2Icon'
+import TwoUsersIcon from './TwoUsersIcon'
 import UpgradeIcon from './UpgradeIcon'
 import WorkspaceDynamicIcon from './WorkspaceDynamicIcon'
+import WorkspaceFailIcon from './WorkspaceFailIcon'
 import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 
@@ -55,29 +76,50 @@ export default {
   ArrowLeftIcon,
   ArrowRightIcon,
   ArrowUpIcon,
+  BellIcon,
+  BillingIcon,
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
   CircleAddIcon,
-  CircleBackIcon,
+  CircleArrowLeftIcon,
+  CircleArrowRightIcon,
   CircleCheckMarkIcon,
   CircleExclamationIcon,
   CircleCloseIcon,
   CircleCloseHoverIcon,
+  CircleTwoArrowsDownIcon,
+  CircleTwoArrowsUpIcon,
   CloseIcon,
   CopyPasteIcon,
   DatabaseIcon,
-  GearIcon,
   EditIcon,
+  ExploreDocIcon,
+  EnlargeIcon,
+  EntryIcon,
+  GearIcon,
+  GraphQLIcon,
+  KeyIcon,
+  LayersIcon,
+  LensIcon,
   LiveIcon,
+  LogOutIcon,
   MetricsIcon,
   PlayIcon,
   PullRequestIcon,
+  SendIcon,
   StopIcon,
+  SocialDiscordIcon,
+  SocialGitHubIcon,
+  SocialGitLabIcon,
+  SocialLinkedInIcon,
+  SocialNPMIcon,
+  SocialTwitterIcon,
   TerminalIcon,
   UpgradeIcon,
-  Users2Icon,
+  TwoUsersIcon,
   WorkspaceDynamicIcon,
+  WorkspaceFailIcon,
   WorkspaceReadyIcon,
   WorkspaceStaticIcon
 }

package/src/stories/PlatformaticIcon.stories.jsx

@@ -2,15 +2,47 @@ import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
 
+const colors = ['green', 'white', 'red', 'main-dark-blue']
+
 const divStyle = {
-  width: '100%',
+  width: '100%'
+}
+
+const row = {
   display: 'flex',
-  flexGap: '10px'
+  width: '100%',
+  columnGap: '1rem',
+  alignItems: 'center'
+}
+
+const col = {
+  flex: 1
+}
+
+const paragraph = {
+  color: 'white',
+  fontSize: '12px'
 }
 
 export default {
   title: 'Platformatic/PlatformaticIcon',
-  component: PlatformaticIcon
+  component: PlatformaticIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: colors
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
+      }
+    }
+  }
 }
 
 const Template = (args) => <PlatformaticIcon {...args} />
@@ -22,36 +54,36 @@ PlatformaticIconDefault.args = {
 
 const AllIconsTemplate = (args) => {
   const icons = Object.values(Icons)
+
   return (
     <>
-      <p className='text-white'> Platformatic all icons size {args.size}</p>
       <div style={divStyle}>
-        {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
+        <p style={paragraph}> All Platformatic Icons: {icons.length} </p>
+        {icons.map((IconComponent, index) => (
+          <div style={row} key={index}>
+            <div style={col}>
+              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='small' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='medium' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='large' {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='extra-large' {...args} />
+            </div>
+          </div>
+        ))}
       </div>
     </>
   )
 }
-export const PlatformaticIconSmall = AllIconsTemplate.bind({})
-PlatformaticIconSmall.args = {
+export const PlatformaticIconAll = AllIconsTemplate.bind({})
+PlatformaticIconAll.args = {
   color: 'white',
-  size: 'small',
   onClick: null
 }
-
-export const PlatformaticIconNormal = AllIconsTemplate.bind({})
-PlatformaticIconNormal.args = {
-  color: 'white',
-  size: 'medium'
-}
-
-export const PlatformaticIconLarge = AllIconsTemplate.bind({})
-PlatformaticIconLarge.args = {
-  color: 'green',
-  size: 'large'
-}
-
-export const PlatformaticIconExtraLarge = AllIconsTemplate.bind({})
-PlatformaticIconExtraLarge.args = {
-  color: 'green',
-  size: 'extra-large'
-}

package/src/components/icons/CircleBackIcon.jsx

@@ -1,51 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = (
-    <svg
-      width={26}
-      height={26}
-      viewBox='0 0 26 26'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
-      <path
-        d='M14.5 7L8.5 13L14.5 19'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={18}
-          height={18}
-          viewBox='0 0 18 18'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <circle cx={9} cy={9} r={8} stroke='none' />
-          <path
-            d='M10 5L6 9L10 13'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CircleBackIcon