@platformatic/ui-components 0.1.149 → 0.1.150

package/.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci

package/.nvmrc

@@ -1 +1 @@
-18.18.0
+18.19.0

package/index.js

@@ -4,6 +4,7 @@ import BorderedBox from './src/components/BorderedBox'
 import Box from './src/components/Box'
 import Button from './src/components/Button'
 import ButtonFullRounded from './src/components/ButtonFullRounded'
+import ButtonOnlyIcon from './src/components/ButtonOnlyIcon'
 import Backgrounds from './src/components/backgrounds'
 import CopyAndPaste from './src/components/CopyAndPaste'
 import Checkbox from './src/components/Checkbox'
@@ -49,6 +50,7 @@ export {
   Box,
   Button,
   ButtonFullRounded,
+  ButtonOnlyIcon,
   Checkbox,
   CopyAndPaste,
   DetailedMetric,

package/package.json

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

package/src/components/ButtonOnlyIcon.jsx

@@ -0,0 +1,165 @@
+'use strict'
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Button.module.css'
+import commonStyles from './Common.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
+import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
+
+function ButtonOnlyIcon ({
+  textClass,
+  paddingClass,
+  altLabel,
+  color,
+  backgroundColor,
+  size,
+  disabled,
+  bold,
+  hoverEffect,
+  bordered,
+  fullWidth,
+  platformaticIcon,
+  platformaticIconAfter,
+  selected,
+  ...rest
+}) {
+  let buttonClassName = textClass
+  buttonClassName += ` ${styles.button} ${styles['color-' + color]} `
+  let contentClassName = `${styles.content} `
+  if (paddingClass) {
+    contentClassName += `${paddingClass} `
+  } else {
+    contentClassName += `${styles['button-' + size]} `
+  }
+  if (disabled) {
+    buttonClassName += ' ' + commonStyles[`bordered--${color}-30`]
+    contentClassName += ` ${styles.disabled}`
+  } else {
+    buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
+  }
+  if (!bordered) buttonClassName += ` ${styles['no-border']}`
+  if (bold) buttonClassName += ` ${styles.fontBold}`
+  if (fullWidth) {
+    buttonClassName += ` ${styles.fullWidth}`
+  }
+  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
+  const [hover, setHover] = useState(false)
+  const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
+
+  useEffect(() => {
+    if (!disabled) {
+      if (hover) {
+        switch (hoverEffect) {
+          case BACKGROUND_COLOR_OPAQUE:
+            setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`])
+            break
+          case BOX_SHADOW:
+            setBackgroundClassName(restClassName() + ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`])
+            break
+          case UNDERLINE:
+            setBackgroundClassName(`${restClassName()} ${styles['underline-effect']}`)
+            break
+          default:
+            break
+        }
+      } else {
+        setBackgroundClassName(restClassName())
+      }
+    }
+  }, [disabled, hover, hoverEffect])
+
+  function restClassName () {
+    return `${commonStyles['background-color-' + backgroundColor]} `
+  }
+
+  return (
+    <button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
+      <div className={`${contentClassName} ${backgroundClassName}`}>
+        {platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={MEDIUM} onClick={null} disabled={disabled} /> : null}
+      </div>
+    </button>
+  )
+}
+
+ButtonOnlyIcon.propTypes = {
+  /**
+   * textClass
+   */
+  textClass: PropTypes.string,
+  /**
+   * paddingClass
+   */
+  paddingClass: PropTypes.string,
+  /**
+   * altLabel
+   */
+  altLabel: PropTypes.string,
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_BUTTON),
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf(COLORS_BUTTON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Bold
+   */
+  bold: PropTypes.bool,
+  /**
+   * Effect on hover
+   */
+  hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
+  /**
+   * Apply border: default true
+   */
+  bordered: PropTypes.bool,
+  /**
+   * Full Width: default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * platformaticIcon: should be removed
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  }),
+  /**
+   * platformaticIconAfter: should be removed
+   */
+  platformaticIconAfter: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  }),
+  /**
+   * Selected: default false
+   */
+  selected: PropTypes.bool
+}
+
+ButtonOnlyIcon.defaultProps = {
+  textClass: '',
+  paddingClass: '',
+  altLabel: '',
+  color: MAIN_DARK_BLUE,
+  backgroundColor: 'transparent',
+  disabled: false,
+  size: LARGE,
+  bold: false,
+  hoverEffect: BACKGROUND_COLOR_OPAQUE,
+  bordered: true,
+  fullWidth: false,
+  platformaticIcon: null,
+  selected: false
+}
+
+export default ButtonOnlyIcon

package/src/stories/ButtonOnlyIcon.stories.jsx

@@ -0,0 +1,75 @@
+'use strict'
+import React from 'react'
+import ButtonOnlyIcon from '../components/ButtonOnlyIcon'
+import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES, WHITE, RICH_BLACK, BACKGROUND_COLOR_OPAQUE, SMALL } from '../components/constants'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '2px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/ButtonOnlyIcon',
+  component: ButtonOnlyIcon,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ],
+  argTypes: {
+    altLabel: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    backgroundColor: {
+      type: 'radio',
+      options: COLORS_BUTTON
+    },
+    color: {
+      type: 'radio',
+      options: COLORS_BUTTON
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: SIZES
+      }
+    },
+    hoverEffect: {
+      type: 'radio',
+      options: HOVER_EFFECTS_BUTTONS
+    },
+    bordered: {
+      type: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean'
+    },
+    selected: {
+      type: 'boolean'
+    }
+  }
+}
+
+const OnlyIconTemplate = (args) => (<ButtonOnlyIcon {...args} />)
+
+export const OnlyIcon = OnlyIconTemplate.bind({})
+
+OnlyIcon.args = {
+  color: WHITE,
+  backgroundColor: RICH_BLACK,
+  onClick: () => { alert('hit!') },
+  hoverEffect: BACKGROUND_COLOR_OPAQUE,
+  platformaticIcon: { size: SMALL, iconName: 'RunningIcon', color: WHITE }
+}