@loja-integrada/admin-components 0.9.9 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.9.9",
+  "version": "0.12.1",
   "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,
@@ -150,6 +155,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/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/Icons/icons-path/Download.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Download = () => (
+  <path
+    fillRule="evenodd"
+    d="M14.667 11.556v2.666c0 .246-.2.445-.445.445H1.778a.445.445 0 0 1-.445-.445v-2.666H0v2.666C0 15.204.796 16 1.778 16h12.444c.982 0 1.778-.796 1.778-1.778v-2.666h-1.333ZM3.109 7.607a.668.668 0 0 1 .893-.992l3.331 3V0h1.334v9.614l3.331-2.999a.668.668 0 0 1 .893.992l-4.445 4a.667.667 0 0 1-.892 0l-4.445-4Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/ExclamationCircle.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const ExclamationCircle = () => (
+  <path
+    fillRule="evenodd"
+    d="M9 10.5A1.25 1.25 0 1 0 9 13a1.25 1.25 0 0 0 0-2.5Zm-.303-1h.605a.5.5 0 0 0 .497-.445l.328-2.945A1 1 0 0 0 9.132 5h-.266a1 1 0 0 0-.993 1.11L8.2 9.055a.5.5 0 0 0 .497.445Zm.303 7c-4.136 0-7.5-3.364-7.5-7.5S4.864 1.5 9 1.5s7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5ZM9 0a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/index.ts

@@ -16,10 +16,12 @@ import { Close } from './Close'
 import { Check } from './Check'
 import { CheckCircle } from './CheckCircle'
 import { CreditCard } from './CreditCard'
+import { Download } from './Download'
 import { Product } from './Product'
 import { Edit } from './Edit'
 import { Exchange } from './Exchange'
 import { Eye } from './Eye'
+import { ExclamationCircle } from './ExclamationCircle'
 import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
 import { Home } from './Home'
@@ -70,10 +72,12 @@ export const icons = {
   close: Close,
   checkCircle: CheckCircle,
   creditcard: CreditCard,
+  download: Download,
   product: Product,
   edit: Edit,
   exchange: Exchange,
   eye: Eye,
+  exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
   home: Home,

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'
 }