@loja-integrada/admin-components 0.19.3 → 0.19.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {

package/src/Components/Tabs/Tabs.spec.tsx

@@ -35,4 +35,11 @@ describe(specTitle('Tabs tests'), () => {
       .get('span').contains('Cupons de desconto')
   })
 
+  it('Title complement', () => {
+    mount(<Default />)
+    cy.get('.tabs .tabs-item').eq(2).within(() => {
+      cy.get('span').contains('Todos os relatórios da loja')
+      cy.get('span').contains('NOVO')
+    })
+  })
 })

package/src/Components/Tabs/Tabs.stories.tsx

@@ -3,6 +3,7 @@ import { Story, Meta } from '@storybook/react'
 import { withDesign } from 'storybook-addon-designs'
 
 import { Tabs, TabsProps } from './Tabs'
+import { Badge } from '../../Indicators'
 
 export default {
   title: 'Components/Tabs',
@@ -32,7 +33,13 @@ export default {
       },
       {
         id: 'relatorios',
-        title: 'Todos os relatorio da loja',
+        title: 'Todos os relatórios da loja',
+        titleComplement: (
+          <Badge
+            text="NOVO"
+            type="primary"
+          />
+        ),
       },
       {
         id: 'vendas',

package/src/Components/Tabs/TabsItem.interface.ts

@@ -7,6 +7,10 @@ export interface TabsItemInterface {
    * Item visible title
    */
   title: string
+  /**
+   * Complement to title
+   * */
+  titleComplement?: string | React.ReactNode
   /**
    * Disabled a specific tab
    */

package/src/Components/Tabs/TabsItem.tsx

@@ -21,6 +21,7 @@ interface TabsItemProps extends TabsItemInterface {
 export const TabsItem = ({
   id,
   title,
+  titleComplement,
   active = false,
   disabled = false,
   onChange,
@@ -44,6 +45,7 @@ export const TabsItem = ({
         data-title={title}
       >
         {title}
+        {titleComplement && <span className="ml-2">{titleComplement}</span>}
       </span>
     </button>
   )

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

@@ -33,4 +33,10 @@ describe(specTitle('InformationBox tests'), () => {
     cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
     cy.get('.InformationBox').should('have.class', 'bg-focus-light')
   })
+
+  it('Close button', () => {
+    mount(<Default showClose={true} />)
+    cy.get('.InformationBox-close').click()
+    cy.get('.InformationBox').should('not.exist')
+  })
 })

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Icon, IconProps } from '../../Icons'
 
 type InformationBoxTypesOptions = 'success' | 'warning' | 'danger' | 'info'
@@ -45,9 +45,20 @@ const InformationBoxTypes: Record<
 
 const InformationBoxComponent = ({
   type = 'info',
-  subtitle,
   title,
+  subtitle,
+  showClose = false,
+  onClose,
 }: InformationBoxProps) => {
+  const [isInformationBoxOpen, setIsInformationBoxOpen] = useState(true)
+
+  const handleOnClose = () => {
+    setIsInformationBoxOpen(false)
+    onClose?.()
+  }
+
+  if (!isInformationBoxOpen) return null
+
   return (
     <div
       className={`InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 ${InformationBoxTypes[type].class}`}
@@ -65,7 +76,7 @@ const InformationBoxComponent = ({
       <div className="flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0">
         <div className="flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base">
           <span
-            className={`InformationBox-title text-f5 font-bold ${InformationBoxTypes[type].titleClass}`}
+            className={`InformationBox-title text-f5 font-semibold ${InformationBoxTypes[type].titleClass}`}
           >
             {title || InformationBoxTypes[type].title}
           </span>
@@ -76,6 +87,15 @@ const InformationBoxComponent = ({
           )}
         </div>
       </div>
+
+      {(showClose || onClose) && (
+        <button
+          className="InformationBox-close absolute top-4 right-4 text-on-base-2"
+          onClick={handleOnClose}
+        >
+          <Icon icon="close" size={4} />
+        </button>
+      )}
     </div>
   )
 }
@@ -95,4 +115,12 @@ export interface InformationBoxProps {
    * InformationBox text below title
    */
   subtitle?: string | React.ReactNode
+  /** Show close button
+   * @default false
+   */
+  showClose?: boolean
+  /**
+   * Function to close InformationBox (also activate `showClose`)
+   */
+  onClose?: () => void
 }