@platformatic/ui-components 0.1.128 → 0.1.130

package/package.json

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

package/src/components/Modal.module.css

@@ -48,10 +48,10 @@
   @apply inline-flex items-center;
 }
 .modal--small {
-  @apply min-w-[480px] max-w-[480px];
+  @apply w-auto lg:min-w-[480px] lg:max-w-[480px];
 }
 .modal--medium {
-  @apply min-w-[880px] max-w-[880px];
+  @apply w-auto lg:min-w-[880px] lg:max-w-[880px];
 }
 .modal--full-width {
   @apply w-screen min-w-full;

package/src/components/ModalDirectional.module.css

@@ -23,8 +23,7 @@
   @apply flex items-center gap-x-2 pb-4;
 }
 .modalLefty {
-  @apply py-20 px-[7.5rem];
-  height: calc(100% - 10rem);
+  @apply p-5 lg:py-20 lg:px-[7.5rem] h-[calc(100%-42px)] lg:h-[calc(100%-10rem)];
 }
 
 @keyframes come-in {

package/src/components/SearchBarV2.jsx

@@ -1,22 +1,25 @@
 'use strict'
 import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
+import commonStyles from './Common.module.css'
 import styles from './SearchBarV2.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { MEDIUM, WHITE } from './constants'
+import { MEDIUM, RICH_BLACK, TRANSPARENT, WHITE } from './constants'
 function SearchBarV2 ({
   onSubmit,
   onChange,
   onClear,
   color,
-  onFocusColor,
+  backgroundColor,
   placeholder,
   dataAttrName,
   dataAttrValue
 }) {
   const inputRef = useRef()
+  const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
   const [isOnFocus, setIsOnFocus] = useState(false)
+  const [showClear, setShowClear] = useState(false)
   const dataProps = {}
   if (dataAttrName && dataAttrValue) {
     dataProps[`data-${dataAttrName}`] = dataAttrValue
@@ -31,12 +34,14 @@ function SearchBarV2 ({
   function handleChange () {
     if (onChange) {
       const value = inputRef.current.value
+      setShowClear(!!value)
       return onChange(value)
     }
   }
 
   function handleClear () {
     inputRef.current.value = ''
+    setShowClear(false)
     return onClear()
   }
 
@@ -53,20 +58,22 @@ function SearchBarV2 ({
   }
 
   function onFocusClassName () {
-    return `${styles.container} ${styles.wrapperPadding} ${styles.onFocus}`
+    return `${baseClassName} ${styles.onFocus}`
   }
 
   function normalClassName () {
-    return `${styles.container} ${styles.wrapperPadding} ${styles.onBlur}`
+    return `${baseClassName} ${styles.onBlur}`
   }
 
   return (
     <div className={wrapperClassName} {...dataProps}>
-      <PlatformaticIcon iconName='LensIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleSearch} />
+      <PlatformaticIcon iconName='LensIcon' color={color} disabled={!isOnFocus} size={MEDIUM} onClick={handleSearch} />
       <input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
-      <div className={styles.clearContainer}>
-        <PlatformaticIcon iconName='CircleCloseIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleClear} />
-      </div>
+      {showClear && (
+        <div className={styles.clearContainer}>
+          <PlatformaticIcon iconName='CircleCloseIcon' color={color} size={MEDIUM} onClick={handleClear} />
+        </div>
+      )}
     </div>
   )
 }
@@ -87,11 +94,11 @@ SearchBarV2.propTypes = {
   /**
    * color
    */
-  color: PropTypes.string,
+  color: PropTypes.oneOf([WHITE, RICH_BLACK]),
   /**
-   * onFocusColor
+   * backgroundColor
    */
-  onFocusColor: PropTypes.string,
+  backgroundColor: PropTypes.oneOf([WHITE, RICH_BLACK, TRANSPARENT]),
   /**
    * placeholder
    */
@@ -108,10 +115,10 @@ SearchBarV2.propTypes = {
 
 SearchBarV2.defaultProps = {
   color: WHITE,
-  onFocusColor: WHITE,
-  onSubmit: () => {},
-  onChange: () => {},
-  onClear: () => {},
+  backgroundColor: RICH_BLACK,
+  onSubmit: () => { },
+  onChange: () => { },
+  onClear: () => { },
   placeholder: 'Search',
   dataAttrName: '',
   dataAttrValue: ''

package/src/components/SearchBarV2.module.css

@@ -20,7 +20,7 @@
   @apply font-semibold text-white text-3xl pb-4;
 }
 .clearContainer {
-  @apply absolute right-[1rem] translate-y-[-50%];
+  @apply absolute right-[1rem];
 }
 .wrapperPadding {
   @apply px-2 py-1.5;

package/src/stories/SearchBarV2.stories.jsx

@@ -0,0 +1,24 @@
+'use strict'
+import SearchBarV2 from '../components/SearchBarV2'
+export default {
+  title: 'Platformatic/SearchBarV2',
+  component: SearchBarV2
+}
+const Template = (args) => {
+  return (
+    <>
+      <SearchBarV2 {...args} />
+    </>
+
+  )
+}
+export const Standard = Template.bind({})
+
+Standard.args = {
+  onChange: (value) => {
+    console.log('Current search: ' + value)
+  },
+  onSubmit: (value) => {
+    alert('Query value: ' + value)
+  }
+}