From 78a6edef8743d979891c4faf47c96f74677911b1 Mon Sep 17 00:00:00 2001 From: Matheus Alves Date: Mon, 20 May 2024 14:42:48 -0300 Subject: [PATCH] Add variant in Badge component (#213) --- styleguide/src/Forms/Toggle/Toggle.tsx | 2 +- .../src/Indicators/Badge/Badge.spec.tsx | 19 +++++++-------- styleguide/src/Indicators/Badge/Badge.tsx | 23 ++++++++----------- .../InformationBox/InformationBox.spec.tsx | 19 +++++++++------ .../InformationBox/InformationBox.tsx | 7 +++++- 5 files changed, 38 insertions(+), 32 deletions(-) diff --git a/styleguide/src/Forms/Toggle/Toggle.tsx b/styleguide/src/Forms/Toggle/Toggle.tsx index aad32b98..411acf9b 100644 --- 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 { - label?: string + label?: React.ReactNode | string } diff --git a/styleguide/src/Indicators/Badge/Badge.spec.tsx b/styleguide/src/Indicators/Badge/Badge.spec.tsx index 10a3a59d..cbeb5aca 100644 --- 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() - cy.get(badgeClass).should('have.class', 'bg-inverted-2') + cy.get(badgeClass).should('have.class', 'bg-inverted-2 text-base-1') mount() - 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() - cy.get(badgeClass).should('have.class', 'bg-primary-dark') + cy.get(badgeClass).should('have.class', 'bg-primary-dark text-base-1') + + mount() + cy.get(badgeClass).should('have.class', 'bg-primary-light text-primary-bold') mount() - cy.get(badgeClass).should('have.class', 'bg-success-dark') + cy.get(badgeClass).should('have.class', 'bg-success-dark text-base-1') mount() - cy.get(badgeClass).should('have.class', 'bg-warning-dark') + cy.get(badgeClass).should('have.class', 'bg-warning-dark text-base-1') mount() - cy.get(badgeClass).should('have.class', 'bg-danger-dark') + cy.get(badgeClass).should('have.class', 'bg-danger-dark text-base-1') mount() - 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 index 7a7f5126..6fd467ed 100644 --- 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' }`} > - - {text} - + {text} ) } diff --git a/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx b/styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx index 05f87366..ebc05977 100644 --- 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() + 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() + 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() - 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() - cy.get('.InformationBox-icon').should('have.class', 'icon-check') - cy.get('.InformationBox').should('have.class', 'bg-success-light') + mount() + 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 index 6a26692a..e0061dc9 100644 --- a/styleguide/src/Indicators/InformationBox/InformationBox.tsx +++ b/styleguide/src/Indicators/InformationBox/InformationBox.tsx @@ -7,6 +7,7 @@ const InformationBoxTypes: Record< InformationBoxTypesOptions, { title: string + titleClass: string class: string icon: IconProps['icon'] iconClass: string @@ -14,24 +15,28 @@ const InformationBoxTypes: Record< > = { 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 = ({
{title || InformationBoxTypes[type].title}