@loja-integrada/admin-components 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "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}`,
 }
 
@@ -49,9 +49,9 @@ const listOfStylesDisabled = {
 }
 
 const listOfSizes = {
-  small: `text-f6 h-10`,
-  default: `text-f6 h-12`,
-  large: `text-f5 h-14`,
+  small: `text-f6 komea:h-8 komea:px-3 h-10`,
+  default: `text-f6 komea:h-9 h-12`,
+  large: `text-f5 komea:h-10 komea:px-6 h-14`,
 }
 
 const ButtonType = React.forwardRef(
@@ -97,7 +97,7 @@ 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 `
+  let classes = `inline-flex font-medium items-center justify-center px-5 komea:px-4 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,7 +49,7 @@ 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'
@@ -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

@@ -59,7 +59,7 @@ 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' : ''

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

@@ -5,15 +5,16 @@ export const inputContainerDisabledClasses =
 
 export const inputContainerReadonlyClasses = '!bg-base-2'
 
-export const errorBorderClasses = 'border-danger focus:border-danger'
+export const errorBorderClasses =
+  'border-danger focus:border-danger komea:focus:ring-danger/20'
 
-export const defaultBorderClasses = 'border-card-stroke'
+export const defaultBorderClasses = 'border-card-stroke komea:border-input-stroke'
 
 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:border-input-stroke komea:px-3 komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus:border-focus komea:focus:ring-[3px] komea:focus:ring-focus/50 ${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:border-input-stroke komea:shadow-sm komea:text-body-large md:komea:text-body komea:focus-within:border-focus komea:focus-within:ring-[3px] komea:focus-within:ring-focus/50 ${inputPlaceholderClasses}`
 
 const adornmentClasses = `adornment flex justify-center items-center relative w-16 text-f6 text-inverted-2 -mt-px`
 
@@ -22,8 +23,8 @@ 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/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;