@loja-integrada/admin-components 0.20.0 → 0.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {
@@ -134,7 +134,7 @@
     "tailwindcss": ">=3.1.0"
   },
   "dependencies": {
-    "@loja-integrada/tailwindcss-config": "^2.0.3",
+    "@loja-integrada/tailwindcss-config": "^2.4.0",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
     "babel-jest": "^29.2.2",

package/src/Components/Button/Button.tsx

@@ -27,12 +27,12 @@ const commonFocus =
 
 const listOfStyles = {
   primary: `bg-primary text-base-1 ${listOfStylesHover['primary']} ${listOfStylesActive['primary']} ${commonFocus}`,
-  secondary: `bg-primary-light text-primary-bold  ${listOfStylesHover['secondary']} ${listOfStylesActive['secondary']} ${commonFocus}`,
+  secondary: `bg-primary-light text-primary-bold komea:bg-secondary komea:text-secondary-bold komea:hover:bg-secondary/80 komea:active:bg-secondary/60 komea:active:shadow-none  ${listOfStylesHover['secondary']} ${listOfStylesActive['secondary']} ${commonFocus}`,
   outlineSecondary: `bg-transparent text-primary border border-primary ${listOfStylesHover['outlineSecondary']} ${listOfStylesActive['outlineSecondary']} ${commonFocus}`,
   tertiary: `bg-inverted-2 text-on-primary ${listOfStylesHover['tertiary']} ${listOfStylesActive['tertiary']} ${commonFocus}`,
   warning: `bg-warning text-on-base ${listOfStylesHover['warning']} ${listOfStylesActive['warning']} ${commonFocus}`,
   danger: `bg-danger text-base-1 ${listOfStylesHover['danger']} ${listOfStylesActive['danger']} ${commonFocus}`,
-  outline: `bg-transparent text-inverted-2 border border-inverted-2 ${listOfStylesHover['outline']} ${listOfStylesActive['outline']} ${commonFocus}`,
+  outline: `bg-transparent text-inverted-2 border border-inverted-2 komea:border-card-stroke komea:bg-base-2 komea:text-on-base komea:hover:bg-primary-light komea:active:bg-secondary komea:active:shadow-none ${listOfStylesHover['outline']} ${listOfStylesActive['outline']} ${commonFocus}`,
   onlyText: `bg-transparent border-transparent text-inverted-2 px-0 ${listOfStylesHover['onlyText']} ${listOfStylesActive['onlyText']} ${commonFocus}`,
 }
 
@@ -48,10 +48,16 @@ const listOfStylesDisabled = {
   onlyText: `bg-transparent text-on-base-3 shadow-none ring-0 border-0 `,
 }
 
+const listOfSizePaddings = {
+  small: `komea:px-3`,
+  default: ``,
+  large: `komea:px-6`,
+}
+
 const listOfSizes = {
-  small: `text-f6 h-10`,
-  default: `text-f6 h-12`,
-  large: `text-f5 h-14`,
+  small: `text-f6 komea:h-8 h-10`,
+  default: `text-f6 komea:h-9 h-12`,
+  large: `text-f5 komea:h-10 h-14`,
 }
 
 const ButtonType = React.forwardRef(
@@ -97,7 +103,13 @@ const ButtonComponent = (
     ;(!disabled || !loading) && onClick && onClick(event)
   }
 
-  let classes = `inline-flex font-medium items-center justify-center px-5 text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
+  // `onlyText` é o único que não tem caixa, e o padding horizontal fica fora dele. Não dá para
+  // apenas parear com `komea:px-0`: as duas classes empatam em especificidade e o Tailwind emite
+  // `px-0` antes de `px-3`/`px-4`/`px-6`, então o zero perderia pela ordem.
+  const horizontalPadding =
+    variant === 'onlyText' ? '' : `px-5 komea:px-4 ${listOfSizePaddings[size]}`
+
+  let classes = `inline-flex font-medium items-center justify-center ${horizontalPadding} text-center no-underline cursor-pointer transition rounded-md after:align-middle focus:outline-none `
 
   if (loading) {
     classes +=

package/src/Components/Modal/Modal.tsx

@@ -57,7 +57,7 @@ const ModalComponent = ({
         <div {...props}>
           <div className="ReactModal__header w-full flex justify-between items-start">
             <span
-              className={`min-w-0 text-inverted-2 text-xs font-semibold uppercase break-words ${
+              className={`min-w-0 text-inverted-2 text-xs font-semibold uppercase komea:font-medium komea:normal-case break-words ${
                 headerTitle ? 'pb-3' : ''
               }`}
             >

package/src/Components/Table/Table.tsx

@@ -150,7 +150,7 @@ const TableComponent = ({
       <table
         {...getTableProps()}
         id={id}
-        className={`w-full bg-base-1 rounded border-separate border border-card-stroke`}
+        className={`w-full bg-base-1 rounded komea:rounded-xs border-separate border border-card-stroke`}
         cellSpacing="0"
       >
         <thead className={`text-left`}>

package/src/Forms/Checkbox/Checkbox.tsx

@@ -49,12 +49,12 @@ const CheckboxComponent = (
     isChecked || isIndeterminate ? 'scale-100' : 'scale-0'
   }`
 
-  const checkboxIconContainerClasses = `border border-card-stroke transition duration-200 ease-in-out
+  const checkboxIconContainerClasses = `border border-card-stroke komea:border-input-stroke komea:shadow-sm transition duration-200 ease-in-out
     ${
       disabled
         ? 'bg-base-4'
         : isChecked || isIndeterminate
-        ? 'bg-primary border-primary'
+        ? 'bg-primary border-primary komea:border-primary'
         : 'bg-base-1'
     }
     ${isCenterBoxAlign ? 'items-center' : ''}
@@ -87,7 +87,7 @@ const CheckboxComponent = (
         htmlFor={inputId}
         className={`inline-flex ${alignOptions[boxAlign]} cursor-pointer`}
       >
-        <span className="relative rounded-xs z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
+        <span className="relative rounded-xs z-10 flex items-center justify-center focus-within:ring-2 komea:focus-within:ring-[3px] ring-focus komea:ring-focus/50">
           <input
             ref={ref || inputRef}
             type="checkbox"

package/src/Forms/Dropdown/Dropdown.tsx

@@ -13,9 +13,9 @@ import { InputHelpText } from '../InputHelpText'
 import { InputLabel, InputLabelProps } from '../InputLabel'
 
 export const sizeClasses = {
-  default: 'h-12',
+  default: 'komea:h-9 h-12',
   small: 'h-8',
-  large: 'h-14',
+  large: 'komea:h-10 h-14',
   xlarge: 'h-24',
 }
 
@@ -27,7 +27,8 @@ export const valueFontSizesClasses = {
 }
 
 export const variantControlClasses = {
-  default: 'border-card-stroke rounded pl-2',
+  default:
+    'border-card-stroke rounded pl-2 komea:border-input-stroke komea:shadow-sm',
   secondary:
     'border-inverted-2 hover:bg-base-3 rounded-md focus:ring-2 focus:ring-focus focus:ring-offset-2 focus:bg-base-1 pl-2',
   simple: 'border-0 border-b border-on-base-3',

package/src/Forms/Input/Input.tsx

@@ -9,7 +9,9 @@ import {
   defaultBorderClasses,
   inputContainerClasses,
   variantClasses,
+  prefixBorderlessKomeaClasses,
   prefixClasses,
+  sufixBorderlessKomeaClasses,
   sufixClasses,
   focusClass,
 } from '../commonStyles'
@@ -42,11 +44,11 @@ const InputComponent = (
 
   const prefixClass = `${prefixClasses} ${variantClasses[variant]} ${
     hasErrorState ? errorBorderClasses : ''
-  }`
+  } ${prefixBorder ? '' : prefixBorderlessKomeaClasses}`
 
   const sufixClass = `${sufixClasses} ${variantClasses[variant]} ${
     hasErrorState ? errorBorderClasses : ''
-  }`
+  } ${sufixBorder ? '' : sufixBorderlessKomeaClasses}`
 
   let inputContainerClass = `${inputContainerClasses} ${variantClasses[variant]}`
   if (disabled) {
@@ -59,12 +61,12 @@ const InputComponent = (
     inputContainerClass += ` ${defaultBorderClasses}`
   }
 
-  const inputClass = `w-full px-4 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
+  const inputClass = `w-full px-4 komea:px-3 appearance-none shadow-none outline-none bg-transparent box-border ${focusClass} ${
     hasErrorState ? errorBorderClasses : defaultBorderClasses
   } ${prefix && prefixBorder ? 'border-l' : ''}  ${
     sufix && sufixBorder ? 'border-r' : ''
-  } ${prefix && !prefixBorder ? 'pl-0' : ''} ${
-    sufix && !sufixBorder ? 'pr-0' : ''
+  } ${prefix && !prefixBorder ? 'pl-0 komea:pl-2' : ''} ${
+    sufix && !sufixBorder ? 'pr-0 komea:pr-2' : ''
   }`
 
   const LabelComponent = (

package/src/Forms/Toggle/Toggle.tsx

@@ -51,7 +51,7 @@ const ToggleComponent = (
 
   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 label`
+  const toggleLabelClasses = `ml-2 text-inverted-1 text-f6 komea:font-medium label`
 
   return (
     <label

package/src/Forms/commonStyles.ts

@@ -1,29 +1,51 @@
 export const inputPlaceholderClasses = 'placeholder-on-base-2'
 
 export const inputContainerDisabledClasses =
-  '!bg-base-3 !pointer-events-none !text-on-base-2'
+  '!bg-base-3 !pointer-events-none !text-on-base-2 komea:!bg-base-1 komea:!text-on-base komea:opacity-50'
 
 export const inputContainerReadonlyClasses = '!bg-base-2'
 
-export const errorBorderClasses = 'border-danger focus:border-danger'
+export const errorBorderClasses =
+  'border-danger focus:border-danger komea:focus-within:border-danger komea:focus-within:ring-danger/20'
 
-export const defaultBorderClasses = 'border-card-stroke'
+export const defaultBorderClasses =
+  'border-card-stroke komea:border-input-stroke komea:focus-within:border-focus komea:focus-within:ring-focus/50'
 
 export const focusClass = 'focus:border-inverted-1'
 
-export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 ${focusClass} ${inputPlaceholderClasses}`
+export const inputClasses = `appearance-none shadow-none outline-none bg-base-1 border px-4 rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 komea:px-3 komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:ring-[3px] ${focusClass} ${inputPlaceholderClasses}`
 
-export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden ${inputPlaceholderClasses}`
+export const inputContainerClasses = `flex focus-within:border-inverted-1 bg-base-1 border rounded text-on-base text-sm min-w-0 w-full transition-border duration-75 overflow-hidden komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:ring-[3px] ${inputPlaceholderClasses}`
 
 const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 -mt-px`
 
+// Sem borda o adorno não é uma caixa, é o addon do komea-ds: 12px de recuo, ícone de 16px e 8px até
+// o valor.
+//
+// O ícone é normalizado porque o default do nosso `Icon` é 5 (20px) e o DS usa 16 nos campos — é o
+// que torna a geometria determinística em vez de depender do `size` que a app passou. Descendente e
+// não filho direto (`[&_svg]`, não `[&>svg]`) porque a app pode embrulhar o ícone: o campo de busca
+// põe um `<button>` no meio. E `h-4 w-4` em vez de `size-4`, porque `size-*` só existe do Tailwind
+// 3.4 em diante e há app desta linha pinada em 3.3.0, onde a classe não seria gerada.
+//
+// Os 8px até o valor saem do padding do **campo**, não do adorno: um filho `w-full` — o botão do
+// campo de busca — ocuparia a caixa de conteúdo inteira e comeria um padding posto aqui.
+//
+// `shrink-0` porque o adorno é item flex: sem ele o `w-7` é só uma base e o navegador comprime a
+// caixa quando o campo é estreito, levando a geometria junto.
+const borderlessKomeaIcon = 'komea:[&_svg]:h-4 komea:[&_svg]:w-4'
+
+export const prefixBorderlessKomeaClasses = `komea:w-7 komea:shrink-0 komea:justify-start komea:pl-3 ${borderlessKomeaIcon}`
+
+export const sufixBorderlessKomeaClasses = `komea:w-7 komea:shrink-0 komea:justify-end komea:pr-3 ${borderlessKomeaIcon}`
+
 export const prefixClasses = `${adornmentClasses} rounded-l left-0`
 
 export const sufixClasses = `${adornmentClasses} rounded-r right-0`
 
 export const variantClasses = {
-  default: 'h-12',
-  small: 'h-10',
-  large: 'h-14',
+  default: 'komea:h-9 h-12',
+  small: 'komea:h-8 h-10',
+  large: 'komea:h-10 h-14',
   xlarge: 'h-24',
 }

package/src/Indicators/Alert/Alert.spec.tsx

@@ -36,7 +36,7 @@ describe(specTitle('Alert tests'), () => {
     cy.get('.alert').should('have.class', 'bg-danger-light')
 
     mount(<Default type="info" />)
-    cy.get('.alert').should('have.class', 'bg-focus-light')
+    cy.get('.alert').should('have.class', 'bg-info-light')
 
     mount(<Default type="primary" />)
     cy.get('.alert').should('have.class', 'bg-primary-light')

package/src/Indicators/Alert/Alert.tsx

@@ -16,42 +16,51 @@ const alertTypes: Record<
     class: string
     icon: IconProps['icon']
     iconClass: string
+    textClass: string
   }
 > = {
   success: {
-    class: 'bg-success-light border-success',
+    class: 'bg-success-light border-success komea:border-success-stroke',
     icon: 'checkCircle',
-    iconClass: 'text-success',
+    iconClass: 'text-success komea:text-success-dark',
+    textClass: 'komea:text-success-dark',
   },
   warning: {
-    class: 'bg-warning-light border-warning-dark',
+    class: 'bg-warning-light border-warning-dark komea:border-warning-stroke',
     icon: 'exclamationTriangle',
     iconClass: 'text-warning-dark',
+    textClass: 'komea:text-warning-dark',
   },
   danger: {
-    class: 'bg-danger-light border-danger',
+    class: 'bg-danger-light border-danger komea:border-danger-stroke',
     icon: 'ban',
-    iconClass: 'text-danger',
+    iconClass: 'text-danger komea:text-danger-dark',
+    textClass: 'komea:text-danger-dark',
   },
   info: {
-    class: 'bg-focus-light border-focus-dark',
+    class: 'bg-info-light border-info-dark komea:border-info-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
+    textClass: 'komea:text-info-dark',
   },
   infoOutline: {
-    class: 'bg-base-1 border-focus-dark',
+    class: 'bg-base-1 border-info-dark komea:border-info-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
+    textClass: '',
   },
   infoDark: {
-    class: 'bg-base-1 border-[#607081]',
+    // O hex cravado não acompanha o `data-chrome`; na chrome nova cai no neutro do design system.
+    class: 'bg-base-1 border-[#607081] komea:border-card-stroke',
     icon: 'infoCircle',
-    iconClass: 'text-[#607081]',
+    iconClass: 'text-[#607081] komea:text-on-base-2',
+    textClass: '',
   },
   primary: {
-    class: 'bg-primary-light border-primary',
+    class: 'bg-primary-light border-primary komea:border-card-stroke',
     icon: 'infoCircle',
     iconClass: 'text-primary',
+    textClass: '',
   },
 }
 
@@ -80,7 +89,7 @@ const AlertComponent = ({
   if (!alertIsOpen) return null
   return (
     <div
-      className={`alert border-l-4 py-4 pl-6 pr-5 rounded w-full relative flex items-start sm:items-center ${
+      className={`alert border-l-4 komea:border-l py-4 pl-6 pr-5 rounded w-full relative flex items-start sm:items-center ${
         alertTypes[type].class
       }${hideBorder ? '' : ' border'}`}
     >
@@ -95,9 +104,17 @@ const AlertComponent = ({
         </div>
       )}
       <div className="flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0">
-        <div className="flex flex-col justify-center min-w-0 break-words text-f6 text-on-base">
-          <span className="alert-title font-semibold">{title}</span>
-          {subtitle && <span className="alert-subtitle mt-1">{subtitle}</span>}
+        <div
+          className={`flex flex-col justify-center min-w-0 break-words text-f6 text-on-base ${alertTypes[type].textClass}`}
+        >
+          <span className="alert-title font-semibold komea:font-medium">
+            {title}
+          </span>
+          {subtitle && (
+            <span className="alert-subtitle komea:text-caption mt-1">
+              {subtitle}
+            </span>
+          )}
         </div>
         {actions && (
           <div className="alert-actions flex flex-shrink-0 items-center flex-row sm:flex-row-reverse sm:space-x-reverse space-x-3 mt-3 sm:mt-0 sm:ml-5">

package/src/Indicators/Badge/Badge.spec.tsx

@@ -69,6 +69,6 @@ describe(specTitle('Badge tests'), () => {
     cy.get(badgeClass).should('have.class', 'bg-danger-dark text-base-1')
 
     mount(<Default type="focus" />)
-    cy.get(badgeClass).should('have.class', 'bg-focus text-base-1')
+    cy.get(badgeClass).should('have.class', 'bg-info text-base-1')
   })
 })

package/src/Indicators/Badge/Badge.tsx

@@ -8,7 +8,7 @@ const badgeTypes = {
   danger: 'bg-danger-dark text-base-1',
   success: 'bg-success-dark text-base-1',
   warning: 'bg-warning-dark text-base-1',
-  focus: 'bg-focus text-base-1',
+  focus: 'bg-info text-base-1',
 }
 
 const badgeRounded = {

package/src/Indicators/InformationBox/InformationBox.spec.tsx

@@ -29,9 +29,9 @@ describe(specTitle('InformationBox tests'), () => {
     cy.get('.InformationBox').should('have.class', 'bg-danger-light')
 
     mount(<Default type="info" />)
-    cy.get('.InformationBox-title').should('have.class', 'text-focus-dark')
+    cy.get('.InformationBox-title').should('have.class', 'text-info-dark')
     cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
-    cy.get('.InformationBox').should('have.class', 'bg-focus-light')
+    cy.get('.InformationBox').should('have.class', 'bg-info-light')
   })
 
   it('Close button', () => {

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -36,10 +36,10 @@ const InformationBoxTypes: Record<
   },
   info: {
     title: 'Informação',
-    titleClass: 'text-focus-dark',
-    class: 'bg-focus-light border-focus-dark',
+    titleClass: 'text-info-dark',
+    class: 'bg-info-light border-info-dark komea:border-info-stroke',
     icon: 'lightbulb',
-    iconClass: 'text-focus-dark',
+    iconClass: 'text-info-dark',
   },
 }
 

package/src/Indicators/Toast/Toast.tsx

@@ -34,7 +34,7 @@ const Container = () => {
   return (
     <ToastContainer
       toastClassName={(props) =>
-        `mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md ${
+        `mb-3 border flex items-top justify-between p-3 pb-4 pr-4 relative rounded shadow-md overflow-hidden ${
           contextClass[props?.type || 'info']
         }`
       }

package/src/tailwind.scss

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@import '@loja-integrada/tailwindcss-config/styles/_variables.scss';
+@import '@loja-integrada/tailwindcss-config/styles/variables';
 
 body {
   @apply antialiased;