@platformatic/ui-components 0.7.34 → 0.8.0

package/package.json

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

package/src/components/Button.jsx

@@ -37,6 +37,7 @@ function Button ({
   ...rest
 }) {
   let buttonClassName = textClass
+  let tmpBorderedClassName = ''
   buttonClassName += ` ${styles.button} ${styles['color-' + color]} `
   let contentClassName = `${styles.content} `
   if (paddingClass) {
@@ -45,10 +46,10 @@ function Button ({
     contentClassName += `${styles['button-' + size]} `
   }
   if (disabled) {
-    buttonClassName += ' ' + commonStyles[`bordered--${color}-30`]
+    tmpBorderedClassName = commonStyles[`bordered--${color}-30`]
     buttonClassName += ` ${styles.disabled}`
   } else {
-    buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
+    tmpBorderedClassName = bordered ? commonStyles[`bordered--${color}-70`] : ''
   }
   if (!bordered) buttonClassName += ` ${styles['no-border']}`
   if (fullWidth) {
@@ -58,10 +59,14 @@ function Button ({
   const [hover, setHover] = useState(false)
   const [inactive, setInactive] = useState(false)
   const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
+  const [borderedClassName, setBorderedClassName] = useState(tmpBorderedClassName)
 
   useEffect(() => {
     if (!disabled) {
       if (hover) {
+        if (bordered) {
+          setBorderedClassName(commonStyles[`bordered--${color}-100`])
+        }
         switch (hoverEffect) {
           case DULLS_BACKGROUND_COLOR:
             setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${DULLS_BACKGROUND_COLOR}-${color}`])
@@ -89,6 +94,13 @@ function Button ({
         } else {
           setBackgroundClassName(restClassName())
         }
+        if (bordered) {
+          setBorderedClassName(commonStyles[`bordered--${color}-70`])
+        }
+      }
+    } else {
+      if (bordered) {
+        setBorderedClassName(commonStyles[`bordered--${color}-30`])
       }
     }
   }, [disabled, hover, hoverEffect])
@@ -101,7 +113,7 @@ function Button ({
   }
 
   return (
-    <button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
+    <button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
       <div className={`${contentClassName} ${backgroundClassName}`}>
         {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
         <span className={styles.label}>{label}</span>

package/src/components/Checkbox.jsx

@@ -2,14 +2,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Checkbox.module.css'
-import { MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
+import { MAIN_DARK_BLUE, MEDIUM, RICH_BLACK, SMALL, WHITE } from './constants'
 function Checkbox ({
   disabled = false,
   color = MAIN_DARK_BLUE,
+  size = MEDIUM,
   ...rest
 }) {
-  let className = `${styles.checkbox} `
-  className += styles[`checkbox--${color}`]
+  let className = `${styles.checkbox}`
+  className += ' ' + styles[`checkbox--${size}`]
+  className += ' ' + styles[`checkbox--${color}`]
   if (disabled) className += ` ${styles.disabled}`
   return (
     <input type='checkbox' className={className} disabled={disabled} {...rest} />
@@ -24,7 +26,11 @@ Checkbox.propTypes = {
   /**
    * color
    */
-  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK])
+  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK]),
+  /**
+   * size
+   */
+  size: PropTypes.oneOf([SMALL, MEDIUM])
 }
 
 export default Checkbox

package/src/components/Checkbox.module.css

@@ -1,8 +1,16 @@
 .checkbox {
-  @apply border border-solid p-2 rounded-sm relative inline-block h-2 w-2 m-0;
+  @apply border border-solid rounded-sm relative inline-block m-0;
   -webkit-appearance: none;
 }
 
+.checkbox--medium {
+  @apply p-2 h-2 w-2;
+}
+
+.checkbox--small  {
+  @apply p-[5px] h-[10px] w-[10px];
+}
+
 .checkbox--main-dark-blue {
   @apply border-light-green bg-main-dark-blue
 }
@@ -16,14 +24,20 @@
 .checkbox--white:checked {
   @apply bg-white text-rich-black;
 }
-.checkbox--main-dark-blue:checked:after,
-.checkbox--rich-black:checked:after {
+.checkbox--medium.checkbox--main-dark-blue:checked:after,
+.checkbox--medium.checkbox--rich-black:checked:after {
 	@apply absolute h-full w-full;
   top: 1px;
   left: 1.5px;
   content: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%204L5%208L12%201%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
 }
-
+.checkbox--small.checkbox--main-dark-blue:checked:after,
+.checkbox--small.checkbox--rich-black:checked:after {
+  @apply absolute h-full w-full;
+  top: 1px;
+  left: 1px;
+  content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
+}
 .disabled {
   @apply border-white;
 }
@@ -34,9 +48,16 @@
 .checkbox--rich-black:checked {
 	@apply bg-white text-rich-black;
 }
-.checkbox--white:checked:after {
+.checkbox--medium.checkbox--white:checked:after {
   @apply absolute h-full w-full;
   top: 1px;
   left: 1.5px;
   content: url('data:image/svg+xml,%3Csvg%20width=%2213%22%20height=%229%22%20viewBox=%220%200%2013%209%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M1%204L5%208L12%201%22%20stroke%3D%22%2300050B%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E');
 }
+
+.checkbox--small.checkbox--white:checked:after {
+  @apply absolute h-full w-full;
+  top: -2px;
+  left: 0px;
+  content: url('data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M1.25%203.5L4.25%206.5L9.5%201.25%22%20stroke%3D%22%2300050B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E');
+}

package/src/components/forms/ToggleSwitch.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './ToggleSwitch.module.css'
 import commonStyles from '../Common.module.css'
+import { MEDIUM, SMALL } from '../constants'
 
 function ToggleSwitch ({
   name = '',
@@ -12,19 +13,23 @@ function ToggleSwitch ({
   errorMessageTextClassName = '',
   onChange = () => {},
   checked = false,
-  disabled = false
+  disabled = false,
+  size = MEDIUM
 }) {
   let className = `${styles.switch} `
+  className += styles[`switch--${size}`] + ' '
   if (disabled) className += styles.disabled
   const styleLabel = labelClassName || styles.defaultLabel
   const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
+  let sliderClassName = `${styles.slider} ${styles.round} `
+  sliderClassName += styles[`slider--${size}`]
 
   return (
     <>
       <div className={styles.container}>
         <label className={className}>
           <input type='checkbox' name={name} onChange={onChange} checked={checked} disabled={disabled} />
-          <span className={`${styles.slider} ${styles.round}`} />
+          <span className={sliderClassName} />
         </label>
         <span className={styleLabel}>{label}</span>
       </div>
@@ -65,7 +70,11 @@ ToggleSwitch.propTypes = {
   /**
    * labelClassName
    */
-  labelClassName: PropTypes.string
+  labelClassName: PropTypes.string,
+  /**
+   * size
+   */
+  size: PropTypes.oneOf([SMALL, MEDIUM])
 
 }
 

package/src/components/forms/ToggleSwitch.module.css

@@ -2,7 +2,13 @@
   @apply flex w-full h-10 items-center gap-x-2;
 }
 .switch {
-  @apply relative inline-block w-[50px] h-[24px] cursor-pointer;
+  @apply relative inline-block cursor-pointer;
+}
+.switch--medium {
+  @apply w-[50px] h-[24px] 
+}
+.switch--small {
+  @apply w-[30px] h-[16px] 
 }
 .switch input { 
   @apply opacity-0 w-0 h-0;
@@ -13,26 +19,40 @@
   -webkit-transition: .4s;
   transition: .4s;
 }
+
 .defaultLabel {
   @apply px-2 text-xs font-normal text-main-dark-blue;
 }
-.slider:before {
-  @apply absolute h-4 w-4 left-[4px] bottom-[4px] bg-white;
+.slider--small:before,
+.slider--medium:before {
   content: "";
   -webkit-transition: .4s;
   transition: .4s;
 }
 
+.slider--medium:before {
+  @apply absolute h-[22px] w-[22px] left-[1px] bottom-[1px] bg-white;
+}
+.slider--small:before{
+  @apply absolute h-[14px] w-[14px] left-[1px] bottom-[1px] bg-white;  
+}
+
 input:checked + .slider {
   @apply bg-main-green;
 }
 
-input:checked + .slider:before {
+input:checked + .slider--medium:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
 
+input:checked + .slider--small:before {
+  -webkit-transform: translateX(14px);
+  -ms-transform: translateX(14px);
+  transform: translateX(14px);
+}
+
 /* Rounded sliders */
 .slider.round {
   border-radius: 100px;

package/src/stories/Checkbox.stories.jsx

@@ -1,6 +1,6 @@
 'use strict'
 import Checkbox from '../components/Checkbox'
-import { WHITE } from '../components/constants'
+import { MEDIUM, SMALL, WHITE } from '../components/constants'
 const divStyle = {
   width: '100%',
   height: 'auto',
@@ -24,6 +24,10 @@ export default {
     },
     disabled: {
       type: 'boolean'
+    },
+    size: {
+      type: 'radio',
+      options: [SMALL, MEDIUM]
     }
   }
 }