@platformatic/ui-components 0.1.43 → 0.1.44

package/package.json

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

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/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/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 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
+  PullRequestIcon,
+  TriangleExclamationIcon
 }

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

@@ -0,0 +1,35 @@
+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'
+
+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 = {}

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/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 = {}