@loja-integrada/admin-components 0.19.7 → 0.19.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.19.7",
+  "version": "0.19.9",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {
@@ -95,7 +95,7 @@
     "@types/react-modal": "^3.12.1",
     "@types/react-table": "^7.7.1",
     "@types/react-text-mask": "^5.4.8",
-    "autoprefixer": "^10.4.4",
+    "autoprefixer": "^10.4.20",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-name-mapper": "^1.2.0",
@@ -108,7 +108,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^5.1.3",
     "identity-obj-proxy": "^3.0.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.47",
     "postcss-loader": "^4.2.0",
     "postcss-nesting": "^11.2.1",
     "prettier": "^2.6.2",
@@ -120,7 +120,7 @@
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.1.1",
     "style-loader": "2.0.0",
-    "tailwindcss": "^3.1.2",
+    "tailwindcss": "^3.4.13",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
@@ -134,7 +134,7 @@
     "tailwindcss": ">=3.1.0"
   },
   "dependencies": {
-    "@loja-integrada/tailwindcss-config": "^1.7.6",
+    "@loja-integrada/tailwindcss-config": "^2.0.3",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
     "babel-jest": "^29.2.2",

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

@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const ProgressiveDiscount = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.53255 2.09998C4.07255 2.09998 3.69922 2.47331 3.69922 2.93331C3.69922 3.39331 4.07255 3.76664 4.53255 3.76664C4.99255 3.76664 5.36589 3.39331 5.36589 2.93331C5.36589 2.47331 4.99255 2.09998 4.53255 2.09998Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.53255 5.09998C7.07255 5.09998 6.69922 5.47331 6.69922 5.93331C6.69922 6.39331 7.07255 6.76664 7.53255 6.76664C7.99255 6.76664 8.36589 6.39331 8.36589 5.93331C8.36589 5.47331 7.99255 5.09998 7.53255 5.09998Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.21605 2.09998H7.79005C7.89539 2.09998 7.95939 2.21664 7.90205 2.30598L5.13205 6.61398C5.07139 6.70864 4.96539 6.76664 4.85205 6.76664H4.27805C4.17272 6.76664 4.10872 6.64998 4.16605 6.56064L6.93605 2.25264C6.99672 2.15798 7.10272 2.09998 7.21605 2.09998Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3 1.49995C11.3 1.16858 11.0314 0.899951 10.7 0.899951H1.3C0.968629 0.899951 0.7 1.16858 0.7 1.49995V7.29995C0.7 7.63132 0.968629 7.89995 1.3 7.89995H10.7C11.0314 7.89995 11.3 7.63132 11.3 7.29995V1.49995ZM1 0.199951C0.447715 0.199951 0 0.647667 0 1.19995V7.59995C0 8.15224 0.447715 8.59995 1 8.59995H11C11.5523 8.59995 12 8.15224 12 7.59995V1.19995C12 0.647666 11.5523 0.199951 11 0.199951H1Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.7083 9C1.7559 9.28377 2.0027 9.5 2.3 9.5H9.7C9.9973 9.5 10.2441 9.28377 10.2917 9H11V9.2C11 9.75228 10.5523 10.2 10 10.2H2C1.44772 10.2 1 9.75228 1 9.2V9H1.7083Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.7083 10.6C2.7559 10.8837 3.0027 11.1 3.3 11.1H8.7C8.9973 11.1 9.2441 10.8837 9.2917 10.6H10V10.8C10 11.3523 9.55229 11.8 9 11.8H3C2.44772 11.8 2 11.3523 2 10.8V10.6H2.7083Z"
+    />
+  </>
+)

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

@@ -91,6 +91,7 @@ import { MinusCircle } from './MinusCircle'
 import { MinusCircleSolid } from './MinusCircleSolid'
 import { DotsThree } from './DotsThree'
 import { Instagram } from './Instagram'
+import { ProgressiveDiscount } from './ProgressiveDiscount'
 
 export const icons = {
   adjust: Adjust,
@@ -187,4 +188,5 @@ export const icons = {
   minusCircleSolid: MinusCircleSolid,
   dotsThree: DotsThree,
   instagram: Instagram,
+  progressiveDiscount: ProgressiveDiscount,
 }

package/src/Indicators/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Icon, IconProps } from '../../Icons'
 
-type alertTypesOptions = 'success' | 'warning' | 'danger' | 'info' | 'primary'
+type alertTypesOptions = 'success' | 'warning' | 'danger' | 'info' | 'infoOutline' | 'infoDark' | 'primary'
 
 const alertTypes: Record<
   alertTypesOptions,
@@ -17,9 +17,9 @@ const alertTypes: Record<
     iconClass: 'text-success',
   },
   warning: {
-    class: 'bg-warning-light border-warning',
+    class: 'bg-warning-light border-warning-dark',
     icon: 'exclamationTriangle',
-    iconClass: 'text-warning',
+    iconClass: 'text-warning-dark',
   },
   danger: {
     class: 'bg-danger-light border-danger',
@@ -27,9 +27,19 @@ const alertTypes: Record<
     iconClass: 'text-danger',
   },
   info: {
-    class: 'bg-base-1 border-inverted-2',
+    class: 'bg-focus-light border-focus-dark',
     icon: 'infoCircle',
-    iconClass: 'text-inverted-2',
+    iconClass: 'text-focus-dark',
+  },
+  infoOutline: {
+    class: 'bg-base-1 border-focus-dark',
+    icon: 'infoCircle',
+    iconClass: 'text-focus-dark',
+  },
+  infoDark: {
+    class: 'bg-base-1 border-[#607081]',
+    icon: 'infoCircle',
+    iconClass: 'text-[#607081]',
   },
   primary: {
     class: 'bg-primary-light border-primary',
@@ -47,6 +57,7 @@ const AlertComponent = ({
   showClose = false,
   onClose,
   hideIcon = false,
+  hideBorder = false,
   customIcon,
 }: AlertProps) => {
   const [alertIsOpen, setAlertIsOpen] = useState(isOpen)
@@ -62,7 +73,7 @@ const AlertComponent = ({
   if (!alertIsOpen) return null
   return (
     <div
-      className={`alert border border-l-4 py-4 px-5 rounded w-full relative flex items-start sm:items-center ${alertTypes[type].class}`}
+      className={`alert border-l-4 py-4 pl-6 pr-5 rounded w-full relative flex items-start sm:items-center ${alertTypes[type].class}${hideBorder ? '' : ' border'}`}
     >
       {!hideIcon && (
         <div
@@ -75,7 +86,7 @@ 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 tracking-4 leading-5 text-on-base">
+        <div className="flex flex-col justify-center min-w-0 break-words text-f6 tracking-4 leading-6 text-on-base">
           <span className="alert-title font-semibold">{title}</span>
           {subtitle && <span className="alert-subtitle mt-1">{subtitle}</span>}
         </div>
@@ -86,7 +97,7 @@ const AlertComponent = ({
         )}
       </div>
       {(showClose || onClose) && (
-        <div className={`alert-close flex-shrink-0 flex ml-5`}>
+        <div className={`alert-close flex-shrink-0 flex self-start ml-5`}>
           <button
             className="p-2 -m-2 text-inverted-2 hover:text-inverted-1"
             onClick={handleOnClose}
@@ -130,6 +141,10 @@ export interface AlertProps {
    * @default false
    */
   hideIcon?: boolean
+  /** Hide alert border
+   * @default false
+   */
+  hideBorder?: boolean
   /**
    * Custom icon
    */

package/src/tailwind.scss

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