Add new Alert variants (#227)

lojaintegrada · Sep 24, 2024 · b3187db · b3187db
1 parent e152219
commit b3187db
Show file tree

Hide file tree

Showing 5 changed files with 460 additions and 173 deletions.
diff --git a/styleguide/package.json b/styleguide/package.json
@@ -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",

diff --git a/styleguide/src/Indicators/Alert/Alert.tsx b/styleguide/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,19 +17,29 @@ 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',
     icon: 'ban',
     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
    */

diff --git a/styleguide/src/tailwind.scss b/styleguide/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;

diff --git a/styleguide/tailwind.config.js b/styleguide/tailwind.config.js
@@ -1,4 +1,8 @@
-module.exports = {
-  presets: [require('@loja-integrada/tailwindcss-config/src/variablePreset')],
+import defaultPreset from '@loja-integrada/tailwindcss-config'
+
+const config = {
+  presets: [defaultPreset],
   content: ['./src/**/*.{js,ts,jsx,tsx}', './stories/**/*.{js,ts,jsx,tsx}'],
 }
+
+export default config