@platformatic/ui-components 0.6.6 → 0.6.8

package/package.json

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

package/src/components/ButtonOnlyIcon.jsx

@@ -1,7 +1,7 @@
 'use strict'
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import styles from './Button.module.css'
+import styles from './ButtonOnlyIcon.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
@@ -19,6 +19,7 @@ function ButtonOnlyIcon ({
   fullWidth = false,
   platformaticIcon = null,
   selected = false,
+  fullRounded = false,
   ...rest
 }) {
   let contentClassName = `${styles.content} `
@@ -32,6 +33,10 @@ function ButtonOnlyIcon ({
   if (fullWidth) {
     baseButtonClassName += ` ${styles.fullWidth}`
   }
+  if (fullRounded) {
+    baseButtonClassName += ` ${styles.fullRounded}`
+    contentClassName += ` ${styles.fullRounded} `
+  }
   if (selected) baseButtonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
   const [hover, setHover] = useState(false)
   const [backgroundClassName, setBackgroundClassName] = useState(restClassName())

package/src/components/ButtonOnlyIcon.module.css

@@ -0,0 +1,129 @@
+.button {
+  @apply rounded text-center cursor-pointer font-normal border border-solid box-border;
+  padding-block: 0px;
+  padding-inline: 0px;
+}
+.content {
+  @apply rounded flex items-center justify-center gap-x-2;
+  background: transparent;
+}
+.fontBold {
+  @apply font-semibold;
+}
+.button-small {
+  @apply p-1 text-sm;
+}
+.button-medium {
+  @apply p-1;
+}
+.button-large {
+  @apply p-2;
+}
+.button-extra-large {
+  @apply p-2 md:p-2.5;
+}
+
+.margin-right-medium,
+.margin-right-small {
+  @apply mr-1;
+}
+.margin-right-large {
+  @apply mr-2;
+}
+.margin-right-extra-large {
+  @apply mr-3;
+}
+.color-main-green {
+  @apply text-main-green border-main-green;
+}
+.color-light-green {
+  @apply text-light-green border-light-green;
+}
+.color-dark-green {
+  @apply text-dark-green border-dark-green;
+}
+.color-main-dark-blue {
+  @apply text-main-dark-blue border-main-dark-blue;
+}
+.color-dark-blue{
+  @apply text-dark-blue border-dark-blue;
+}
+.color-light-blue{
+  @apply text-light-blue border-light-blue;
+}
+.color-white{
+  @apply text-white;
+}
+.color-error-red{
+  @apply text-error-red border-error-red;
+}
+.color-tertiary-blue{
+  @apply text-tertiary-blue border-tertiary-blue;
+}
+.color-transparent{
+  @apply text-transparent border-transparent;
+}
+.color-rich-black{
+  @apply text-rich-black border-rich-black;
+}
+
+.no-border {
+  @apply border-0;
+}
+.disabled {
+  @apply opacity-30 cursor-default;
+}
+.hover-box-shadow-main-green {
+  @apply hover:shadow-main-green;
+}
+.hover-box-shadow-light-green {
+  @apply hover:shadow-light-green;
+}
+.hover-box-shadow-dark-green {
+  @apply hover:shadow-dark-green;
+}
+.hover-box-shadow-main-dark-blue {
+  @apply hover:shadow-main-dark-blue;
+}
+.hover-box-shadow-dark-blue {
+  @apply hover:shadow-dark-blue;
+}
+.hover-box-shadow-light-blue {
+  @apply hover:shadow-light-blue;
+}
+.hover-box-shadow-white {
+  @apply hover:shadow-white;
+}
+.hover-box-shadow-error-red {
+  @apply hover:shadow-error-red;
+}
+.hover-box-shadow-tertiary-blue {
+  @apply hover:shadow-tertiary-blue;
+}
+.hover-box-shadow-rich-black {
+  @apply hover:shadow-rich-black;
+}
+
+.underline-effect {
+  @apply hover:underline;
+}
+
+.fullWidth {
+  @apply w-full;
+}
+.label {
+  @apply w-max;
+}
+.inactive {
+  @apply opacity-70;
+}
+.active {
+  @apply opacity-100;
+}
+.cursorDefault {
+  @apply cursor-default;
+}
+
+.fullRounded {
+  @apply rounded-full;
+}

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/ButtonOnlyIcon.stories.jsx

@@ -66,7 +66,11 @@ export default {
     },
     selected: {
       type: 'boolean'
+    },
+    fullRounded: {
+      type: 'boolean'
     }
+
   }
 }
 

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({})