@loja-integrada/admin-components 0.11.0 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.11.0",
+  "version": "0.12.3",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

package/src/Components/Button/Button.spec.tsx

@@ -64,6 +64,9 @@ describe('Button tests', () => {
 
     mount(<Default variant="danger" />)
     cy.get('button').should('have.class', 'bg-danger text-base-1')
+
+    mount(<Default variant="outlineSecondary" />)
+    cy.get('button').should('have.class', 'bg-transparent text-primary border border-primary')
   })
 
 })

package/src/Components/Button/Button.tsx

@@ -5,6 +5,7 @@ import { Icon, IconProps } from '../../Icons/Icon'
 const listOfStylesHover = {
   primary: `hover:bg-primary-dark`,
   secondary: `hover:bg-secondary-dark`,
+  outlineSecondary: `hover:bg-primary-light`,
   tertiary: `hover:bg-tertiary-dark`,
   info: `hover:bg-secondary-bold`,
   warning: `hover:bg-warning-dark`,
@@ -15,6 +16,7 @@ const listOfStylesHover = {
 const listOfStylesActive = {
   primary: `active:bg-primary-bold`,
   secondary: `active:shadow-inner`,
+  outlineSecondary: `active:shadow-inner active:bg-base-1`,
   tertiary: `active:bg-tertiary-bold`,
   warning: `active:bg-warning-bold`,
   danger: `hover:bg-danger-bold`,
@@ -24,6 +26,7 @@ const listOfStylesActive = {
 const listOfStylesFocus = {
   primary: `focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50`,
   secondary: `focus:ring focus:ring-focus`,
+  outlineSecondary: `focus:ring-2 focus:ring-focus focus:ring-offset-1`,
   danger: `focus:ring-1 focus:ring-danger-dark`,
   outline: `focus:ring-2 focus:ring-focus focus:ring-offset-1`,
   onlyText: `focus:bg-base-1`,
@@ -31,6 +34,7 @@ const listOfStylesFocus = {
 const listOfStyles = {
   primary: `bg-primary text-base-1 ${listOfStylesHover['primary']} ${listOfStylesActive['primary']} ${listOfStylesFocus['primary']}`,
   secondary: `bg-secondary text-primary  ${listOfStylesHover['secondary']} ${listOfStylesActive['secondary']}`,
+  outlineSecondary: `bg-transparent text-primary border border-primary ${listOfStylesHover['outlineSecondary']} ${listOfStylesActive['outlineSecondary']} ${listOfStylesFocus['outlineSecondary']}`,
   tertiary: `bg-inverted-2 text-on-primary ${listOfStylesHover['tertiary']} ${listOfStylesActive['tertiary']}`,
   info: `bg-secondary-dark text-base-1 ${listOfStylesHover['info']}`,
   warning: `bg-warning text-on-base ${listOfStylesHover['warning']} ${listOfStylesActive['warning']}`,
@@ -43,6 +47,7 @@ const defaultDisabledStyle = `bg-base-3 cursor-default text-on-base-2 shadow-non
 const listOfStylesDisabled = {
   primary: defaultDisabledStyle,
   secondary: `bg-base-2 cursor-default text-card-stroke shadow-none ring-0 border-0 `,
+  outlineSecondary: `bg-base-2 cursor-default text-card-stroke shadow-none ring-0 border-0 `,
   tertiary: defaultDisabledStyle,
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
@@ -68,6 +73,10 @@ const ButtonType = React.forwardRef(
           {children}
         </a>
       )
+    if (!props.type) {
+      // Default to button when missing type
+      props.type = 'button'
+    }
     return (
       <button {...props} ref={ref}>
         {children}
@@ -150,6 +159,7 @@ export interface ButtonProps extends ButtonAnchorProps {
   variant?:
     | 'primary'
     | 'secondary'
+    | 'outlineSecondary'
     | 'tertiary'
     | 'info'
     | 'warning'

package/src/Forms/Dropdown/Dropdown.tsx

@@ -166,7 +166,7 @@ const CustomSingleValue = (
 ) => (
   <SingleValue
     {...props}
-    className={`text-f6 tracking-4 text-inverted-2 text-sm truncate ${variantValueClasses[variant]}`}
+    className={`text-f6 tracking-4 text-on-base text-sm truncate ${variantValueClasses[variant]}`}
   />
 )
 

package/src/Forms/InputMask/utils.ts

@@ -23,8 +23,8 @@ export const formatValuePatterns = {
   },
   onlyText: {
     mask: (rawValue: any) => {
-      const onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'~0-9\s]/g, '').split('')
-      return onlyText.map(() => /[a-zA-ZÀ-ú'~´`^0-9\s]/g)
+      const onlyText = rawValue.replace(/[^a-zA-ZÀ-ú'˜0-9\sü]/g, '').split('')
+      return onlyText.map(() => /[a-zA-ZÀ-ú'˜`´^0-9\sü]/g)
     },
   },
   date: {

package/src/Forms/Select/Select.tsx

@@ -44,7 +44,7 @@ export const SelectComponent = (
   } else {
     inputClass = `${inputClasses} ${selectClasses} ${variantClasses[variant]}`
     if (disabled) {
-      inputClass += ` ${defaultBorderClasses} ${inputContainerDisabledClasses}`
+      inputClass += ` ${defaultBorderClasses} ${inputContainerDisabledClasses} opacity-100`
     } else if (hasErrorState) {
       inputClass += ` ${errorBorderClasses}`
     } else {

package/src/Forms/Toggle/Toggle.tsx

@@ -7,6 +7,9 @@ const ToggleComponent = (
   const inputId = id || name
   const [isChecked, setIsChecked] = React.useState(checked || false)
 
+  const toggleStatusText = disabled ? 'disabled' : 'enabled'
+  const toggleCheckText = isChecked ? 'checked' : 'unchecked'
+
   React.useEffect(() => {
     setIsChecked(!!checked)
   }, [checked])
@@ -17,18 +20,36 @@ const ToggleComponent = (
     onChange && onChange(event)
   }
 
+  const toggleClasses = {
+    background: {
+      checked: {
+        enabled: 'bg-primary border-primary',
+        disabled: 'bg-base-3 border-card-stroke',
+      },
+      unchecked: {
+        enabled: 'bg-base-1 border-card-stroke',
+        disabled: 'bg-base-3 border-card-stroke',
+      },
+    },
+    circle: {
+      checked: {
+        enabled: 'translate-x-full ml-px bg-base-1',
+        disabled: 'translate-x-full ml-px bg-base-1',
+      },
+      unchecked: {
+        enabled: 'translate-x-0 bg-inverted-2',
+        disabled: 'translate-x-0 bg-base-1',
+      },
+    },
+  }
+
   const toggleContainerDisabledClasses = `${
     disabled ? 'pointer-events-none' : ''
   } relative`
 
-  const toggleBackgroundClasses = `block border border-card-stroke w-[53px] h-8 rounded-full
-  ${disabled ? ' bg-base-3' : ' bg-base-1'} `
+  const toggleBackgroundClasses = `block border w-[53px] h-8 rounded-full ${toggleClasses.background[toggleCheckText][toggleStatusText]} transition`
 
-  const toggleCircleClasses = `transform  ${
-    !isChecked
-      ? 'translate-x-0 bg-inverted-2'
-      : 'translate-x-full ml-px ' + (disabled ? 'bg-base-1' : 'bg-primary')
-  } absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition`
+  const toggleCircleClasses = `transform  ${toggleClasses.circle[toggleCheckText][toggleStatusText]} absolute left-[6px] top-[6px] w-5 h-5 rounded-full transition`
 
   const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 tracking-4 label`
 
@@ -55,8 +76,8 @@ const ToggleComponent = (
   )
 }
 
-const ToggleWithFowardRef = React.forwardRef(ToggleComponent)
-export const Toggle = React.memo(ToggleWithFowardRef)
+const ToggleWithForwardRef = React.forwardRef(ToggleComponent)
+export const Toggle = React.memo(ToggleWithForwardRef)
 
 export interface ToggleProps
   extends React.InputHTMLAttributes<HTMLInputElement> {

package/src/Indicators/Tooltip/Tooltip.stories.tsx

@@ -21,7 +21,7 @@ export default {
 } as Meta
 
 const Template: Story<TooltipProps> = args => (
-  <div className="my-10 flex justify-center">
+  <div className="absolute bg-base-2 inset-0 flex items-center justify-center">
     <Tooltip {...args}>
       <a href="#">
         <Icon icon="eye" />

package/src/Indicators/Tooltip/Tooltip.tsx

@@ -26,7 +26,7 @@ const TooltipComponent = (props: TooltipProps) => {
   }
 
   return (
-    <Tippy
+    <StyledTooltipComponent
       {...computedProps}
       appendTo={props?.appendTo || 'parent'}
       hideOnClick={props?.hideOnClick || false}
@@ -35,15 +35,29 @@ const TooltipComponent = (props: TooltipProps) => {
       duration={props?.duration || 150}
       placement={window?.innerWidth < 1024 ? 'top' : props?.placement || 'top'}
       interactive={props?.interactive || false}
+      theme={props?.theme || 'dark'}
     />
   )
 }
 
-const styledTooltipComponent = styled(TooltipComponent)`
-  --bg-color: #20221b;
+const theme: Record<string, Record<string, string>> = {
+  light: {
+    background: '#fff',
+    color: '#371E56',
+  },
+  dark: {
+    background: '#371E56',
+    color: '#fff',
+  },
+}
+
+const StyledTooltipComponent = styled(Tippy)<{
+  theme: string
+}>`
+  --bg-color: ${(props) => theme[props.theme].background};
   position: relative;
   background-color: var(--bg-color);
-  color: #fff;
+  color: ${(props) => theme[props.theme].color};
   border-radius: 3px;
   font-size: 12px;
   letter-spacing: -0.4px;
@@ -129,7 +143,7 @@ const styledTooltipComponent = styled(TooltipComponent)`
   }
 `
 
-export const Tooltip = React.memo(styledTooltipComponent)
+export const Tooltip = React.memo(TooltipComponent)
 
 export interface TooltipProps extends TippyProps {
   /** Tooltip append
@@ -160,4 +174,8 @@ export interface TooltipProps extends TippyProps {
    * @default false
    * */
   interactive?: TippyProps['interactive']
+  /** Tooltip theme
+   * @default dark
+   * */
+  theme?: 'light' | 'dark'
 }

package/src/Layout/ActionBar/ActionBar.tsx

@@ -59,6 +59,7 @@ const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
                   (props?.loading ? ' pointer-events-none' : '')
                 }
                 onClick={props?.onClick}
+                type={props?.type || 'button'}
               >
                 {props?.loading ? (
                   <Icon icon="loading" className="p-px" />