@platformatic/ui-components 0.6.7 → 0.6.8

package/package.json

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

package/src/components/Tag.jsx

@@ -3,7 +3,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'
 import styles from './Tag.module.css'
-import { COLORS_BUTTON, OPACITY_100, OPACITY_20, OPACITY_30, OPACITY_60, WHITE } from './constants'
+import { COLORS_BUTTON, OPACITY_100, OPACITY_20, OPACITY_30, OPACITY_60, SIZES, WHITE } from './constants'
+import PlatformaticIcon from './PlatformaticIcon'
 
 function Tag ({
   text = '',
@@ -12,7 +13,9 @@ function Tag ({
   backgroundColor = '',
   bordered = true,
   opaque = OPACITY_100,
-  fullRounded = false
+  fullRounded = false,
+  platformaticIcon = null,
+  paddingClass = ''
 }) {
   const stylesColor = textClassName || commonStyles[`text--${color}`]
   let stylesBorderColor = ''
@@ -25,10 +28,14 @@ function Tag ({
   }
   const stylesBackgroundColor = backgroundColor ? commonStyles[`background-color-${backgroundColor}`] : ''
   const opacity = commonStyles[`background-color-opaque-${opaque}`]
-  const className = `${styles.tag} ${stylesColor} ${stylesBorderColor} ${stylesBackgroundColor} ${opacity}`
+  let className = `${styles.container} ${styles.tag} ${stylesBorderColor} ${stylesBackgroundColor} ${opacity} `
+  className += paddingClass || `${styles.padding} `
 
   return (
-    <span className={className}>{text}</span>
+    <div className={className}>
+      {platformaticIcon && <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} size={platformaticIcon.size} onClick={null} />}
+      <span className={stylesColor}>{text}</span>
+    </div>
   )
 }
 Tag.propTypes = {
@@ -40,7 +47,6 @@ Tag.propTypes = {
    * text
    */
   text: PropTypes.string,
-  /**
   /**
    * textClassName
    */
@@ -60,8 +66,19 @@ Tag.propTypes = {
   /**
      * fullRounded
      */
-  fullRounded: PropTypes.bool
-
+  fullRounded: PropTypes.bool,
+  /**
+   * platformaticIcon
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.oneOf(COLORS_BUTTON),
+    size: PropTypes.oneOf(SIZES)
+  }),
+  /**
+   * paddingClass
+   */
+  paddingClass: PropTypes.string
 }
 
 export default Tag

package/src/components/Tag.module.css

@@ -1,9 +1,15 @@
 .tag {
-  @apply rounded-md px-3 py-1 w-fit;
+  @apply rounded-md w-fit;
 }
 .bordered {
   @apply border border-solid;
 }
 .fullRounded {
   @apply rounded-full;
+}
+.container {
+  @apply flex flex-row gap-x-2 items-center border-0;
+}
+.padding {
+  @apply px-3 py-1
 }

package/src/components/Tooltip.jsx

@@ -15,8 +15,8 @@ function Tooltip ({
   offset = 0
 }) {
   let timeout
-  const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
-  // const [active, setActive] = useState(true)
+  // const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
+  const [active, setActive] = useState(true)
   let componentClassName = tooltipClassName || styles.tooltipTipBaseClass
   componentClassName += ` ${styles.tooltipTip} ` + styles[`${direction}`]
   const fixedStyle = { top: '0px', left: '0px' }
@@ -31,17 +31,21 @@ function Tooltip ({
   if (wrapperRef.current) {
     const referenceBoundingClientRect = wrapperRef.current.getBoundingClientRect()
     if (referenceBoundingClientRect) {
-      let topPosition
       let leftPosition
 
       switch (direction) {
         case DIRECTION_BOTTOM:
-          topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height) - offset
-          fixedStyle.top = `${topPosition}px`
-          // fixedStyle.bottom = `calc(${offset}px *-1)`
+          fixedStyle.top = `${referenceBoundingClientRect.y + referenceBoundingClientRect.height + offset}px`
+          fixedStyle.left = `${referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)}px`
+          fixedStyle.transform = 'translateX(-50%)'
           break
-        case DIRECTION_RIGHT:
         case DIRECTION_LEFT:
+          fixedStyle.top = `${referenceBoundingClientRect.y + referenceBoundingClientRect.height / 2}px`
+          leftPosition = referenceBoundingClientRect.x - (2 * referenceBoundingClientRect.width) + offset
+          fixedStyle.left = `${leftPosition}px`
+          break
+        case DIRECTION_RIGHT:
+          fixedStyle.top = `${referenceBoundingClientRect.y + referenceBoundingClientRect.height / 2}px`
           leftPosition = referenceBoundingClientRect.x + referenceBoundingClientRect.width + offset
           fixedStyle.left = `${leftPosition}px`
           break

package/src/components/Tooltip.module.css

@@ -60,7 +60,8 @@
 }
 /* CSS border triangles */
 .left::before {
-  left: auto;
+  @apply border-l-white;
+  left: calc(100% + 6px);
   right: calc(6px * -2);
   top: 50%;
   transform: translateX(0) translateY(-50%);

package/src/stories/Tag.stories.jsx

@@ -1,5 +1,6 @@
 'use strict'
 import Tag from '../components/Tag'
+import { MAIN_GREEN, OPACITY_30, SMALL, TERTIARY_BLUE, WHITE } from '../components/constants'
 export default {
   title: 'Platformatic/Tag',
   component: Tag,
@@ -17,10 +18,30 @@ export const Sample = Template.bind({})
 Sample.args = {
   text: 'Hello Platformatic!'
 }
+
 export const Version = Template.bind({})
 Version.args = {
   text: 'v1.2.3',
-  backgroundColor: 'main-green',
+  backgroundColor: MAIN_GREEN,
   bordered: false,
   opaque: 30
 }
+
+export const FullRounded = Template.bind({})
+FullRounded.args = {
+  text: 'v1.2.3',
+  backgroundColor: WHITE,
+  bordered: false,
+  opaque: OPACITY_30,
+  fullRounded: true
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  text: 'adding some icon',
+  backgroundColor: TERTIARY_BLUE,
+  bordered: false,
+  opaque: OPACITY_30,
+  fullRounded: true,
+  platformaticIcon: { iconName: 'AddIcon', size: SMALL, color: WHITE }
+}

package/src/stories/Tooltip.stories.jsx

@@ -71,17 +71,19 @@ export default {
 }
 
 const TemplateWithButton = (args) => (
-  <Tooltip {...args}>
-    <Button
-      color={RICH_BLACK}
-      backgroundColor={WHITE}
-      onClick={() => alert('clicked Disabled WHITE')}
-      bordered={false}
-      hoverEffect={CHANGE_BACKGROUND_COLOR}
-      hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
-      label='Test button'
-    />
-  </Tooltip>
+  <div style={{ width: '100%', textAlign: 'center' }}>
+    <Tooltip {...args}>
+      <Button
+        color={RICH_BLACK}
+        backgroundColor={WHITE}
+        onClick={() => alert('clicked Disabled WHITE')}
+        bordered={false}
+        hoverEffect={CHANGE_BACKGROUND_COLOR}
+        hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
+        label='Test button'
+      />
+    </Tooltip>
+  </div>
 )
 
 export const TooltipBase = TemplateWithButton.bind({})