Add variant in Badge component (#213)

lojaintegrada · May 20, 2024 · 78a6ede · 78a6ede
1 parent 734bba6
commit 78a6ede
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 32 deletions.
diff --git a/styleguide/src/Forms/Toggle/Toggle.tsx b/styleguide/src/Forms/Toggle/Toggle.tsx
@@ -81,5 +81,5 @@ export const Toggle = React.memo(ToggleWithForwardRef)
 
 export interface ToggleProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string
+  label?: React.ReactNode | string
 }
diff --git a/styleguide/src/Indicators/Badge/Badge.spec.tsx b/styleguide/src/Indicators/Badge/Badge.spec.tsx
@@ -6,7 +6,6 @@ import { Badge } from "./Badge"
 
 const { Default, Small, Expanded } = composeStories(stories)
 const badgeClass = '.badge'
-const badgeTextClass = '.badgeText'
 
 const specTitle = require('cypress-sonarqube-reporter/specTitle');
 describe(specTitle('Badge tests'), () => {
@@ -49,25 +48,27 @@ describe(specTitle('Badge tests'), () => {
 
   it('Variants', () => {
     mount(<Default type="neutral" />)
-    cy.get(badgeClass).should('have.class', 'bg-inverted-2')
+    cy.get(badgeClass).should('have.class', 'bg-inverted-2 text-base-1')
 
     mount(<Default type="neutralLight" />)
-    cy.get(badgeClass).should('have.class', 'bg-inverted-3')
-    cy.get(badgeTextClass).should('have.class', 'text-tertiary')
+    cy.get(badgeClass).should('have.class', 'bg-inverted-3 text-tertiary')
 
     mount(<Default type="primary" />)
-    cy.get(badgeClass).should('have.class', 'bg-primary-dark')
+    cy.get(badgeClass).should('have.class', 'bg-primary-dark text-base-1')
+
+    mount(<Default type="primaryLight" />)
+    cy.get(badgeClass).should('have.class', 'bg-primary-light text-primary-bold')
 
     mount(<Default type="success" />)
-    cy.get(badgeClass).should('have.class', 'bg-success-dark')
+    cy.get(badgeClass).should('have.class', 'bg-success-dark text-base-1')
 
     mount(<Default type="warning" />)
-    cy.get(badgeClass).should('have.class', 'bg-warning-dark')
+    cy.get(badgeClass).should('have.class', 'bg-warning-dark text-base-1')
 
     mount(<Default type="danger" />)
-    cy.get(badgeClass).should('have.class', 'bg-danger-dark')
+    cy.get(badgeClass).should('have.class', 'bg-danger-dark text-base-1')
 
     mount(<Default type="focus" />)
-    cy.get(badgeClass).should('have.class', 'bg-focus')
+    cy.get(badgeClass).should('have.class', 'bg-focus text-base-1')
   })
 })
diff --git a/styleguide/src/Indicators/Badge/Badge.tsx b/styleguide/src/Indicators/Badge/Badge.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
 
 const badgeTypes = {
-  neutral: 'bg-inverted-2',
-  neutralLight: 'bg-inverted-3',
-  primary: 'bg-primary-dark',
-  danger: 'bg-danger-dark',
-  success: 'bg-success-dark',
-  warning: 'bg-warning-dark',
-  focus: 'bg-focus',
+  neutral: 'bg-inverted-2 text-base-1',
+  neutralLight: 'bg-inverted-3 text-tertiary',
+  primary: 'bg-primary-dark text-base-1',
+  primaryLight: 'bg-primary-light text-primary-bold',
+  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',
 }
 
 const badgeRounded = {
@@ -43,13 +44,7 @@ const BadgeComponent = ({
         expanded ? 'flex w-full' : 'inline-flex'
       }`}
     >
-      <span
-        className={`badgeText tracking-4 font-semibold ${
-          type === 'neutralLight' ? 'text-tertiary' : 'text-base-1'
-        }`}
-      >
-        {text}
-      </span>
+      <span className="badgeText tracking-4 font-semibold">{text}</span>
     </div>
   )
 }

diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx
@@ -13,19 +13,24 @@ describe(specTitle('InformationBox tests'), () => {
   })
 
   it('Variants', () => {
+    mount(<Default type="success" />)
+    cy.get('.InformationBox-title').should('have.class', 'text-success-dark')
+    cy.get('.InformationBox-icon').should('have.class', 'icon-check')
+    cy.get('.InformationBox').should('have.class', 'bg-success-light')
+
     mount(<Default type="warning" />)
+    cy.get('.InformationBox-title').should('have.class', 'text-warning-bold')
     cy.get('.InformationBox-icon').should('have.class', 'icon-infoCircle')
     cy.get('.InformationBox').should('have.class', 'bg-warning-light')
 
     mount(<Default type="danger" />)
-    cy.get('.InformationBox-icon').should(
-      'have.class',
-      'icon-exclamationTriangle'
-    )
+    cy.get('.InformationBox-title').should('have.class', 'text-danger-dark')
+    cy.get('.InformationBox-icon').should('have.class', 'icon-exclamationTriangle')
     cy.get('.InformationBox').should('have.class', 'bg-danger-light')
 
-    mount(<Default type="success" />)
-    cy.get('.InformationBox-icon').should('have.class', 'icon-check')
-    cy.get('.InformationBox').should('have.class', 'bg-success-light')
+    mount(<Default type="info" />)
+    cy.get('.InformationBox-title').should('have.class', 'text-focus-dark')
+    cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
+    cy.get('.InformationBox').should('have.class', 'bg-focus-light')
   })
 })
diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.tsx
@@ -7,31 +7,36 @@ const InformationBoxTypes: Record<
   InformationBoxTypesOptions,
   {
     title: string
+    titleClass: string
     class: string
     icon: IconProps['icon']
     iconClass: string
   }
 > = {
   success: {
     title: 'Sucesso!',
+    titleClass: 'text-success-dark',
     class: 'bg-success-light dark:bg-success border-success',
     icon: 'check',
     iconClass: 'text-success-dark',
   },
   warning: {
     title: 'Atenção!',
+    titleClass: 'text-warning-bold',
     class: 'bg-warning-light border-warning',
     icon: 'infoCircle',
     iconClass: 'text-warning-dark',
   },
   danger: {
     title: 'Cuidado!',
+    titleClass: 'text-danger-dark',
     class: 'bg-danger-light border-danger',
     icon: 'exclamationTriangle',
     iconClass: 'text-danger-dark',
   },
   info: {
     title: 'Informação',
+    titleClass: 'text-focus-dark',
     class: 'bg-focus-light border-focus-dark',
     icon: 'lightbulb',
     iconClass: 'text-focus-dark',
@@ -60,7 +65,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].iconClass}`}
+            className={`InformationBox-title text-f5 font-bold ${InformationBoxTypes[type].titleClass}`}
           >
             {title || InformationBoxTypes[type].title}
           </span>