Merge pull request #235 from platformatic/feature/changes-for-follow-…

…us-and-input fix: input and follow us changes
platformatic · Jan 8, 2024 · 1b7f798 · 1b7f798
2 parents 6f4406a + bbf1668
commit 1b7f798
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 63 deletions.
diff --git a/src/components/Common.module.css b/src/components/Common.module.css
@@ -43,6 +43,27 @@
 .bordered--white-100 {
   @apply border-white/100;
 }
+.bordered--main-green-70 {
+  @apply border-main-green/70;
+}
+.bordered--main-dark-blue-70 {
+  @apply border-main-dark-blue/70;
+}
+.bordered--tertiary-blue-70 {
+  @apply border-tertiary-blue/70;
+}
+.bordered--error-red-70 {
+  @apply border-error-red/70;
+}
+.bordered--warning-yellow-70 {
+  @apply border-warning-yellow/70;
+}
+.bordered--dark-blue-70 {
+  @apply border-dark-blue/70;
+}
+.bordered--white-70 {
+  @apply border-white/70;
+}
 .bordered--main-green-30 {
   @apply border-main-green/30;
 }

diff --git a/src/components/FollowUs.jsx b/src/components/FollowUs.jsx
@@ -23,7 +23,14 @@ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize })
   )
 }
 
-function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
+function FollowUs ({
+  label,
+  labelClassName,
+  useOnFrontpage,
+  iconColor,
+  iconSize,
+  socialElements
+}) {
   const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
   const className = styles[`container${suffix}`]
   const iconClassName = styles[`icon${suffix}`]
@@ -34,34 +41,16 @@ function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize,
         {label}
       </div>
 
-      <SocialElement
-        href='https://twitter.com/platformatic'
-        iconName='SocialXIcon'
-        iconClassName={iconClassName}
-        iconColor={iconColor}
-        iconSize={iconSize}
-      />
-      <SocialElement
-        href='https://www.linkedin.com/company/platformatic/'
-        iconName='SocialLinkedInIcon'
-        iconClassName={iconClassName}
-        iconColor={iconColor}
-        iconSize={iconSize}
-      />
-      <SocialElement
-        href='https://github.com/platformatic'
-        iconName='SocialGitHubIcon'
-        iconClassName={iconClassName}
-        iconColor={iconColor}
-        iconSize={iconSize}
-      />
-      <SocialElement
-        href='https://discord.gg/platformatic'
-        iconName='SocialDiscordIcon'
-        iconClassName={iconClassName}
-        iconColor={iconColor}
-        iconSize={iconSize}
-      />
+      {socialElements.map(socialElement =>
+        <SocialElement
+          key={socialElement.link}
+          href={socialElement.link}
+          iconName={socialElement.iconName}
+          iconClassName={iconClassName}
+          iconColor={iconColor}
+          iconSize={iconSize}
+        />
+      )}
     </div>
   )
 }
@@ -90,15 +79,35 @@ FollowUs.propTypes = {
   /**
    * iconSize
    */
-  iconSize: PropTypes.oneOf([MEDIUM, SMALL])
+  iconSize: PropTypes.oneOf([MEDIUM, SMALL]),
+  /**
+   * socialElements
+   */
+  socialElements: PropTypes.arrayOf(PropTypes.shape({
+    link: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired
+  }))
 }
 
 FollowUs.defaultProps = {
   label: 'Follow us on',
   labelClassName: '',
   useOnFrontpage: true,
-  labelColor: LIGHT_GREEN,
   iconColor: WHITE,
-  iconSize: MEDIUM
+  iconSize: MEDIUM,
+  socialElements: [{
+    link: 'https://twitter.com/platformatic',
+    iconName: 'SocialXIcon'
+  }, {
+    link: 'https://www.linkedin.com/company/platformatic/',
+    iconName: 'SocialLinkedInIcon'
+  }, {
+    link: 'https://github.com/platformatic',
+    iconName: 'SocialGitHubIcon'
+  }, {
+    link: 'https://discord.gg/platformatic',
+    iconName: 'SocialDiscordIcon'
+  }]
+
 }
 export default FollowUs
diff --git a/src/components/forms/Input.jsx b/src/components/forms/Input.jsx
@@ -1,11 +1,10 @@
 'use strict'
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
-import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
-import BorderedBox from '../BorderedBox'
+import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 
 function Input ({
   placeholder,
@@ -17,7 +16,6 @@ function Input ({
   disabled,
   beforeIcon,
   afterIcon,
-  focused,
   placeholderApart,
   backgroundColor,
   inputTextClassName,
@@ -26,46 +24,65 @@ function Input ({
   dataAttrValue,
   readOnly
 }) {
-  let inputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
-  inputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
-  inputClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
-  inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
+  let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName}`
+  baseInputClassName += verticalPaddingClassName || `${styles.inputDefaultVerticalPadding}`
+  baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
 
   const showError = errorMessage.length > 0
-  if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
-  if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
-  if (beforeIcon) inputClassName += ' ' + styles.beforeIconPadding
-  if (afterIcon) inputClassName += ' ' + styles.afterIconPadding
+  if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
+  if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
+  if (afterIcon) baseInputClassName += ' ' + styles.afterIconPadding
+  const [focus, setFocus] = useState(false)
   const inputPlaceholder = placeholderApart ? '' : placeholder
 
   const dataProps = {}
   if (dataAttrName && dataAttrValue) {
     dataProps[`data-${dataAttrName}`] = dataAttrValue
   }
 
-  const cmp = (
+  function focusedClassName () {
+    const useEffectColor = showError ? ERROR_RED : borderColor
+    return (baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-100`])
+  }
+
+  function normalClassName () {
+    const useEffectColor = showError ? ERROR_RED : borderColor
+    return baseInputClassName + ' ' + commonStyles[`bordered--${useEffectColor}-70`]
+  }
+
+  function handleFocus () {
+    if (!disabled) {
+      setFocus(true)
+    }
+  }
+
+  function handleBlur () {
+    if (!disabled) setFocus(false)
+  }
+
+  return (
     <div className={styles.container} {...dataProps}>
       <div className={styles.inputContainer}>
         {beforeIcon && <div className={styles.beforeInputIcon}><PlatformaticIcon iconName={beforeIcon.iconName} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} /></div>}
         <input
           type='text'
           name={name}
           value={value}
-          className={inputClassName}
+          className={focus ? focusedClassName() : normalClassName()}
           onChange={onChange}
           disabled={disabled}
           placeholder={inputPlaceholder}
           readOnly={readOnly}
           aria-readonly={readOnly}
+          onFocus={() => handleFocus()}
+          onBlur={() => handleBlur()}
         />
         {placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
         {afterIcon && <div className={styles.afterInputIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
       </div>
       {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
   )
-
-  return focused ? (<BorderedBox classes={styles.paddingFocused} color={MAIN_GREEN} backgroundColor={MAIN_GREEN} opaque={10}>{cmp}</BorderedBox>) : cmp
 }
 
 Input.propTypes = {
@@ -113,10 +130,6 @@ Input.propTypes = {
     color: PropTypes.string,
     onClick: PropTypes.func
   }),
-  /**
-   * addFocus
-   */
-  focused: PropTypes.bool,
   /**
    * placeholderApart
    */
@@ -158,7 +171,6 @@ Input.defaultProps = {
   disabled: false,
   beforeIcon: null,
   afterIcon: null,
-  focused: false,
   shadowPlaceholder: false,
   inputTextClassName: '',
   verticalPaddingClassName: '',

diff --git a/src/components/forms/Input.module.css b/src/components/forms/Input.module.css
@@ -45,6 +45,5 @@
 }
 .input.active,
 .input:focus {
-  @apply shadow-white;
   outline: none;
 }
diff --git a/src/components/forms/InputWithSeparator.jsx b/src/components/forms/InputWithSeparator.jsx
@@ -25,7 +25,7 @@ function InputWithSeparator ({
   const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
   const [chunks, setChunks] = useState([])
   const [inputClassName, setInputClassName] = useState(normalClassName())
-  const chunkClasses = `${styles.flexNone} ${styles.smallPadding} ${styles.smallMargin}`
+  const chunkClasses = styles.chunkClasses
   let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}-30`] + ' ' + commonStyles[`text--${borderColor}`]
   const showError = errorMessage.length > 0
   if (showError) className += ' ' + commonStyles['bordered--error-red']
@@ -71,9 +71,9 @@ function InputWithSeparator ({
 
   function renderChunk (chunk, index) {
     return (
-      <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index}>
+      <BorderedBox color={TRANSPARENT} backgroundColor={borderColor} backgroundColorOpacity={OPACITY_30} classes={chunkClasses} key={index} bor>
         <div className={styles.chunkContent}>
-          <span className={`${styles.chunkText} ${inputTextClassName}`}>{chunk}</span>
+          <span className={`${inputTextClassName} ${styles.chunkText} `}>{chunk}</span>
           <ButtonFullRounded
             iconName='CircleCloseIcon'
             iconSize={SMALL}

diff --git a/src/components/forms/InputWithSeparator.module.css b/src/components/forms/InputWithSeparator.module.css
@@ -2,10 +2,10 @@
   @apply flex gap-x-2 w-full items-center;
 }
 .chunkText {
-  @apply text-sm;
+  @apply text-[14px] leading-[17px] !important ;
 }
 .inputContainer {
-  @apply flex min-h-[46px] border border-solid box-border rounded-md items-center gap-[0.1rem] flex-wrap relative grow px-2;
+  @apply flex min-h-[40px] border border-solid box-border rounded-md items-center gap-2 flex-wrap relative grow px-2;
 }
 .input {
   @apply h-full m-0 border-0;
@@ -34,6 +34,8 @@
 
 .input.active,
 .input:focus {
-  @apply shadow-white;
   outline: none;
+}
+.chunkClasses {
+  @apply flex-none p-2 my-0 border-0;
 }
diff --git a/src/stories/forms/Input.stories.jsx b/src/stories/forms/Input.stories.jsx
@@ -1,6 +1,7 @@
 'use strict'
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
+import { ERROR_RED } from '../../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -88,13 +89,12 @@ IconBeforeAndAfter.args = {
   }
 }
 
-export const Focused = TemplateBorderMainDarkBlue.bind({})
+export const Focused = TemplateValuedAndAlertChange.bind({})
 
 Focused.args = {
   name: 'test',
   placeholder: 'Platformatic',
-  borderColor: 'main-dark-blue',
-  focused: true
+  borderColor: ERROR_RED
 }
 
 export const PlaceholderAPart = TemplateValuedAndAlertChange.bind({})