@platformatic/ui-components 0.1.43 → 0.1.45

package/dist/main.css

@@ -675,6 +675,10 @@ video {
   color: rgb(2 120 63 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Button.jsx

@@ -5,13 +5,17 @@ import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function Button (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, underlineEffect, bordered, ...rest } = props
+  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, ...rest } = props
   let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
     className += ` ${styles.disabled}`
   } else {
-    if (underlineEffect) className += ` ${styles['underline-effect']}`
+    if (hoverEffect === 'hover') {
+      className += ` ${styles['hover-' + backgroundColor]}`
+    } else {
+      className += ` ${styles['underline-effect']}`
+    }
   }
   if (bold) className += ` ${styles.fontBold}`
 
@@ -53,9 +57,9 @@ Button.propTypes = {
    */
   bold: PropTypes.bool,
   /**
-   * Underline effect on hover
+   * Effect on hover
    */
-  underlineEffect: PropTypes.bool,
+  hoverEffect: PropTypes.oneOf(['hover', 'underline']),
   /**
    * Apply border: default true
    */
@@ -68,7 +72,7 @@ Button.defaultProps = {
   disabled: false,
   size: 'large',
   bold: false,
-  underlineEffect: false,
+  hoverEffect: 'hover',
   bordered: true
 }
 

package/src/components/Button.module.css

@@ -39,10 +39,10 @@
 .background-color-main-dark-blue{
   @apply bg-main-dark-blue !important;
 }
-.background-color-dark-blue{
+.background-color-dark-blue {
   @apply bg-dark-blue !important;
 }
-.background-color-light-blue{
+.background-color-light-blue {
   @apply bg-light-blue !important;
 }
 .background-color-white{
@@ -93,6 +93,33 @@
 .disabled {
   @apply opacity-30 cursor-default;
 }
+.hover-main-green {
+  @apply hover:shadow-main-green;
+}
+.hover-light-green {
+  @apply hover:shadow-light-green;
+}
+.hover-dark-green {
+  @apply hover:shadow-dark-green;
+}
+.hover-main-dark-blue {
+  @apply hover:shadow-main-dark-blue;
+}
+.hover-dark-blue {
+  @apply hover:shadow-dark-blue;
+}
+.hover-light-blue {
+  @apply hover:shadow-light-blue;
+}
+.hover-white{
+  @apply hover:shadow-wrap;
+}
+.hover-error-red {
+  @apply hover:shadow-error-red;
+}
+.hover-tertiary-blue {
+  @apply hover:shadow-tertiary-blue;
+}
 .underline-effect {
   @apply hover:underline;
 }

package/src/components/Modal.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import useEscapeKey from '../hooks/useEscapeKey'
-import CloseModalIcon from './icons/CloseModalIcon'
-import RoundCloseIcon from './icons/RoundCloseIcon'
-import RoundCloseHoverIcon from './icons/RoundCloseHoverIcon'
+import CloseIcon from './icons/CloseIcon'
+import CircleCloseIcon from './icons/CircleCloseIcon'
+import CircleCloseHoverIcon from './icons/CircleCloseHoverIcon'
 import Logo from './Logo'
 import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
@@ -25,7 +25,7 @@ export default function Modal (props) {
               <div className={styles.header}>
                 <div className={styles.title}>{title}</div>
                 <div className={styles.close} onClick={() => setIsOpen(false)}>
-                  <CloseModalIcon />
+                  <CloseIcon />
                 </div>
               </div>
               <div>
@@ -50,7 +50,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <RoundCloseHoverIcon /> : <RoundCloseIcon />}
+                  {isHoverCloseModal ? <CircleCloseHoverIcon /> : <CircleCloseIcon />}
                 </div>
               </div>
               <p className={styles.titleInvite}>{title}</p>
@@ -73,7 +73,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <RoundCloseHoverIcon color='main-dark-blue' /> : <RoundCloseIcon color='main-dark-blue' />}
+                  {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
                 </div>
               </div>
               <div className={classNameFullScreen}>

package/src/components/Sidebar.jsx

@@ -42,7 +42,7 @@ function Sidebar (props) {
         ? (
           <>
             <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
-              <Icons.PuzzleIcon color='white' />
+              <Icons.StaticWorkspaceIcon color='white' />
             </button>
             <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
               {title}

package/src/components/icons/{RoundCloseHoverIcon.jsx → CircleCloseHoverIcon.jsx}

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styles from './Icons.module.css'
 
-const RoundCloseHoverIcon = ({ color = 'green' }) => {
+const CircleCloseHoverIcon = ({ color = 'green' }) => {
   const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
   return (
     <svg
@@ -39,4 +39,4 @@ const RoundCloseHoverIcon = ({ color = 'green' }) => {
   )
 }
 
-export default RoundCloseHoverIcon
+export default CircleCloseHoverIcon

package/src/components/icons/{RoundCloseIcon.jsx → CircleCloseIcon.jsx}

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styles from './Icons.module.css'
 
-const RoundCloseIcon = ({ color = 'green' }) => {
+const CircleCloseIcon = ({ color = 'green' }) => {
   const className = styles[`${color}`]
   return (
     <svg
@@ -29,4 +29,4 @@ const RoundCloseIcon = ({ color = 'green' }) => {
   )
 }
 
-export default RoundCloseIcon
+export default CircleCloseIcon

package/src/components/icons/CloseIcon.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+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>
+  )
+}
+
+export default CloseIcon

package/src/components/icons/DynamicWorkspaceIcon.jsx

@@ -0,0 +1,125 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const DynamicWorkspaceIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={40}
+      height={40}
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <rect
+        x={5}
+        y={5}
+        width={10}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M20 5L27.5 11.25L20 17.5V5Z'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        x={35}
+        y={35}
+        width={10}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 35 35)'
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={20}
+        y={35}
+        width={15}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 20 35)'
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M27.5 15V17.5L35 11.25L27.5 5V7.5'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={24}
+          height={25}
+          viewBox='0 0 24 25'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+          data-tip={tip}
+        >
+          <rect
+            x={3}
+            y={3.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <path
+            d='M12 3.5L16.5 7.25L12 11V3.5Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <rect
+            x={21}
+            y={21.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 21 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <rect
+            x={12}
+            y={21.5}
+            width={9}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 12 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <path
+            d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default DynamicWorkspaceIcon

package/src/components/icons/StaticWorkspaceIcon.jsx

@@ -0,0 +1,119 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const StaticWorkspaceIcon = ({
+  color = 'green',
+  size = 'normal',
+  tip = ''
+}) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={40}
+      height={41}
+      viewBox='0 0 40 41'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <rect
+        x={5}
+        y={5.33325}
+        width={10}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={2.5}
+      />
+      <rect
+        x={20}
+        y={5.33325}
+        width={15}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={2.5}
+      />
+      <rect
+        x={35}
+        y={35.3333}
+        width={10}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 35 35.3333)'
+        stroke='none'
+        strokeWidth={2.5}
+      />
+      <rect
+        x={20}
+        y={35.3333}
+        width={15}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 20 35.3333)'
+        stroke='none'
+        strokeWidth={2.5}
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={24}
+          height={25}
+          viewBox='0 0 24 25'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+          data-tip={tip}
+        >
+          <rect
+            x={3}
+            y={3.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <rect
+            x={12}
+            y={3.5}
+            width={9}
+            height={7.55245}
+            rx={1}
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <rect
+            x={21}
+            y={21.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 21 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <rect
+            x={12}
+            y={21.5}
+            width={9}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 12 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default StaticWorkspaceIcon

package/src/components/icons/TriangleExclamationIcon.jsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TriangleExclamationIcon = ({ color = 'red' }) => {
+  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='M14 14H2L8 2L14 14Z' stroke='none' strokeLinejoin='round' />
+      <path
+        d='M8 6V10.5'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={8} cy={12} r={0.5} fill='none' />
+    </svg>
+  )
+}
+
+export default TriangleExclamationIcon

package/src/components/icons/index.js

@@ -5,14 +5,15 @@ import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
-import CloseModalIcon from './CloseModalIcon'
+import CircleCloseIcon from './CircleCloseIcon'
+import CircleCloseHoverIcon from './CircleCloseHoverIcon'
+import CloseIcon from './CloseIcon'
 import GearIcon from './GearIcon'
-import RoundCloseIcon from './RoundCloseIcon'
-import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
-import PuzzleDynamicIcon from './PuzzleDynamicIcon'
-import PuzzleIcon from './PuzzleIcon'
+import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
+import StaticWorkspaceIcon from './StaticWorkspaceIcon'
 import PullRequestIcon from './PullRequestIcon'
+import TriangleExclamationIcon from './TriangleExclamationIcon'
 
 export default {
   ApiIcon,
@@ -22,12 +23,13 @@ export default {
   AppListIcon,
   AppEmptyIcon,
   CircleExclamationIcon,
-  CloseModalIcon,
+  CircleCloseIcon,
+  CircleCloseHoverIcon,
+  CloseIcon,
   GearIcon,
-  RoundCloseIcon,
-  RoundCloseHoverIcon,
   MetricsIcon,
-  PuzzleDynamicIcon,
-  PuzzleIcon,
-  PullRequestIcon
+  DynamicWorkspaceIcon,
+  StaticWorkspaceIcon,
+  PullRequestIcon,
+  TriangleExclamationIcon
 }

package/src/stories/Button.stories.jsx

@@ -40,8 +40,9 @@ export default {
         options: ['small', 'medium', 'large', 'extra-large']
       }
     },
-    underlineEffect: {
-      type: 'boolean'
+    hoverEffect: {
+      type: 'radio',
+      options: ['hover', 'underline']
     },
     bordered: {
       type: 'boolean'
@@ -55,7 +56,7 @@ export const OnlyLabel = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 OnlyLabel.args = {
   label: 'Sample label',
-  backgroundColor: 'light-green'
+  backgroundColor: 'main-green'
 }
 
 export const BorderedRed = Template.bind({})

package/src/stories/Sidebar.stories.jsx

@@ -36,9 +36,9 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { iconName: 'PuzzleIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { iconName: 'StaticWorkspaceIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
     { title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'PuzzleDynamicIcon' }
+    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'DynamicWorkspaceIcon' }
   ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)

package/src/stories/icons/Icons.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PullRequestIcon from '../../components/icons/PullRequestIcon'
+import CloseIcon from '../../components/icons/CloseIcon'
+import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
+import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
+import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
+import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
+
+export default {
+  title: 'Platformatic/Icons',
+  component: PullRequestIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'white', 'red']
+      }
+    }
+  }
+}
+
+const PullRequestIconTemplate = (args) => <PullRequestIcon {...args} />
+export const PullRequestIconDefault = PullRequestIconTemplate.bind({})
+PullRequestIconDefault.args = {}
+
+const CloseIconTemplate = (args) => <CloseIcon {...args} />
+export const CloseIconDefault = CloseIconTemplate.bind({})
+CloseIconDefault.args = {}
+
+const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
+export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
+CircleCloseIconDefault.args = {}
+
+const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...args} />
+export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
+TriangleExclamationIconDefault.args = {}
+
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px',
+  backgroundColor: 'white'
+}
+
+const WorkspaceIconsTemplate = () => (
+  <div style={divStyle}>
+    {
+    [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
+      const listElement = []
+      listElement.push(React.cloneElement(component, { key: `0${index}` }))
+      listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
+      listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
+      listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
+      listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
+      listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
+      return listElement
+    })
+  }
+  </div>)
+
+export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
+WorkspaceIconsAll.args = {}

package/tailwind.config.cjs

@@ -11,7 +11,15 @@ module.exports = {
         // => @media (min-width: 1440px) { ... }
       },
       boxShadow: {
-        wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)'
+        wrap: '0px 0px 20px rgba(0, 0, 0, 0.6)',
+        'main-green': '0px 0px 10px rgba(33, 250, 144, 0.5)',
+        'dark-green': '0px 0px 10px rgba(2, 120, 63, 1)',
+        'light-green': '0px 0px 10px rgba(33, 241, 144, 0.5)',
+        'main-dark-blue': '0px 0px 10px rgba(33, 250, 144, 0.5)',
+        'dark-blue': '0px 0px 10px rgba(0, 52, 79, 0.5)',
+        'light-blue': '0px 0px 10px rgba(233, 247, 255, 0.5)',
+        'error-red': '0px 0px 10px rgba(250, 33, 33, 0.5)',
+        'tertiary-blue': '0px 0px 10px rgba(37, 136, 228, 0.5)'
       }
     },
     colors: {

package/src/components/icons/CloseModalIcon.jsx

@@ -1,26 +0,0 @@
-import * as React from 'react'
-
-const CloseModalIcon = () => (
-  <svg
-    width={16}
-    height={16}
-    viewBox='0 0 16 16'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <path
-      d='M2 2L14 14'
-      stroke='#00283D'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='M2 14L14 2'
-      stroke='#00283D'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
-
-export default CloseModalIcon

package/src/components/icons/PuzzleDynamicIcon.jsx

@@ -1,69 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const PuzzleDynamicIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let dimension = 33
-  switch (size) {
-    case 'small':
-      dimension = 24
-      break
-    default:
-      break
-  }
-  return (
-    <svg
-      width={dimension}
-      height={dimension}
-      viewBox='0 0 32 33'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <rect
-        x={4}
-        y={4.83325}
-        width={8}
-        height={10.0699}
-        rx={1}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <path
-        d='M16 4.83325L22 9.83325L16 14.8333V4.83325Z'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <rect
-        x={28}
-        y={28.8333}
-        width={8}
-        height={10.0699}
-        rx={1}
-        transform='rotate(-180 28 28.8333)'
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <rect
-        x={16}
-        y={28.8333}
-        width={12}
-        height={10.0699}
-        rx={1}
-        transform='rotate(-180 16 28.8333)'
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <path
-        d='M22 12.8333V14.8333L28 9.83325L22 4.83325V6.83325'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default PuzzleDynamicIcon

package/src/components/icons/PuzzleIcon.jsx

@@ -1,65 +0,0 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const PuzzleIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let dimension = 33
-  switch (size) {
-    case 'small':
-      dimension = 24
-      break
-    default:
-      break
-  }
-  return (
-    <svg
-      width={dimension}
-      height={dimension}
-      viewBox='0 0 33 32'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <rect
-        x={4.5}
-        y={4}
-        width={8}
-        height={10.0699}
-        rx={1}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <rect
-        x={16.5}
-        y={4}
-        width={12}
-        height={10.0699}
-        rx={1}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <rect
-        x={28.5}
-        y={28}
-        width={8}
-        height={10.0699}
-        rx={1}
-        transform='rotate(-180 28.5 28)'
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <rect
-        x={16.5}
-        y={28}
-        width={12}
-        height={10.0699}
-        rx={1}
-        transform='rotate(-180 16.5 28)'
-        stroke='none'
-        strokeWidth={1.5}
-      />
-    </svg>
-  )
-}
-
-export default PuzzleIcon

package/src/stories/icons/PullRequestIcon.stories.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PullRequestIcon from '../../components/icons/PullRequestIcon'
-
-export default {
-  title: 'Platformatic/Icons',
-  component: PullRequestIcon,
-  argTypes: {
-    color: {
-      type: 'string',
-      control: {
-        type: 'radio',
-        options: ['green', 'white', 'red']
-      }
-    }
-  }
-}
-
-const Template = (args) => <PullRequestIcon {...args} />
-export const PullRequestIconDefault = Template.bind({})
-PullRequestIconDefault.args = {}