@loja-integrada/admin-components 0.8.7 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.8.7",
+  "version": "0.9.1",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -112,7 +112,7 @@
     "react-dom": ">=17.0.1"
   },
   "dependencies": {
-    "@lojaintegrada/tailwindcss-config": "^1.3.0",
+    "@loja-integrada/tailwindcss-config": "^1.4.1",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
     "react-modal": "^3.14.3",

package/src/Components/Button/Button.tsx

@@ -9,6 +9,7 @@ const listOfStylesHover = {
   info: `hover:bg-secondary-bold`,
   warning: `hover:bg-warning-dark`,
   danger: `hover:bg-danger-dark`,
+  outline: `hover:bg-primary-light`,
 }
 const listOfStylesActive = {
   primary: `active:bg-primary-bold`,
@@ -16,11 +17,13 @@ const listOfStylesActive = {
   tertiary: `active:bg-tertiary-bold`,
   warning: `active:bg-warning-bold`,
   danger: `hover:bg-danger-bold`,
+  outline: `active:shadow-inner active:bg-base-1`,
 }
 const listOfStylesFocus = {
   primary: `focus:ring-1 focus:ring-primary-dark focus:ring-opacity-50`,
   secondary: `focus:ring focus:ring-focus`,
   danger: `focus:ring-1 focus:ring-danger-dark`,
+  outline: `focus:ring-2 focus:ring-focus focus:ring-offset-1`,
 }
 const listOfStyles = {
   primary: `bg-primary text-base-1 ${listOfStylesHover['primary']} ${listOfStylesActive['primary']} ${listOfStylesFocus['primary']}`,
@@ -29,6 +32,7 @@ const listOfStyles = {
   info: `bg-secondary-dark text-base-1 ${listOfStylesHover['info']}`,
   warning: `bg-warning text-on-base ${listOfStylesHover['warning']} ${listOfStylesActive['warning']}`,
   danger: `bg-danger text-base-1 ${listOfStylesHover['danger']} ${listOfStylesActive['danger']} ${listOfStylesFocus['danger']}`,
+  outline: `bg-transparent text-inverted-2 border border-inverted-2 ${listOfStylesHover['outline']} ${listOfStylesActive['outline']} ${listOfStylesFocus['outline']}`,
 }
 
 const defaultDisabledStyle = `bg-base-3 cursor-default text-on-base-2 shadow-none ring-0 border-0 hover:bg-base-3 hover:text-on-base-2 `
@@ -39,6 +43,7 @@ const listOfStylesDisabled = {
   info: defaultDisabledStyle,
   warning: defaultDisabledStyle,
   danger: defaultDisabledStyle,
+  outline: defaultDisabledStyle,
 }
 
 const listOfSizes = {
@@ -137,7 +142,14 @@ export interface ButtonProps extends ButtonAnchorProps {
   /** Button variant
    * @default primary
    * */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'danger'
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'outline'
   /**
    * Button is loading
    * */

package/src/Components/Modal/Modal.tsx

@@ -4,7 +4,7 @@ import ReactModal from 'react-modal'
 import { Icon } from '../../Icons'
 
 const sizeClasses = {
-  small: 'sm:max-w-xl',
+  small: 'sm:max-w-[600px]',
   default: 'sm:max-w-4xl',
   large: 'sm:max-w-6xl',
 }

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Sync = () => (
+  <path
+    fillRule="evenodd"
+    d="M15.228 1.731 14.12 2.938C12.175.9 10.174 0 7.64 0 3.935 0 0 2.667 0 7.556h1.347c0-4 3.165-6.173 6.292-6.173 2.182 0 3.86.762 5.56 2.561l-1.405 1.534a.444.444 0 0 0 .327.745h3.435c.245 0 .444-.2.444-.445V2.031a.444.444 0 0 0-.772-.3Zm-.574 6.714H16C16 13.334 12.064 16 8.36 16c-2.534 0-4.535-.9-6.482-2.938L.772 14.268a.444.444 0 0 1-.772-.3v-3.745c0-.247.199-.445.445-.445h3.432c.386 0 .588.46.328.745L2.8 12.055c1.702 1.8 3.379 2.562 5.56 2.562 3.127 0 6.294-2.172 6.294-6.172Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -40,6 +40,7 @@ import { Truck } from './Truck'
 import { UsdCircle } from './UsdCircle'
 import { QuestionCircle } from './QuestionCircle'
 import { Search } from './Search'
+import { Sync } from './Sync'
 import { AngleDiagonal } from './AngleDiagonal'
 import { AngleHeight } from './AngleHeight'
 import { AngleWidth } from './AngleWidth'
@@ -91,4 +92,5 @@ export const icons = {
   truck: Truck,
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,
+  sync: Sync,
 }