fix: adjust InformationBox (#207)

* fix: adjust InformationBox type and change colors

* fix: fix colors

* chore: adjust test

styleguide/src/Indicators/InformationBox/InformationBox.spec.tsx

@@ -5,28 +5,27 @@ import * as stories from './InformationBoxt.stories'
 
 const { Default } = composeStories(stories)
 
-const specTitle = require('cypress-sonarqube-reporter/specTitle');
+const specTitle = require('cypress-sonarqube-reporter/specTitle')
 describe(specTitle('InformationBox tests'), () => {
   it('Default', () => {
     mount(<Default />)
-    cy.get('.InformationBox-title').last().contains('Dica!')
+    cy.get('.InformationBox-title').last().contains('Informação')
   })
 
   it('Variants', () => {
-    mount(<Default type="tip" />)
-    cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
-    cy.get('.InformationBox').should('have.class', 'bg-success-light')
-
     mount(<Default type="warning" />)
-    cy.get('.InformationBox-icon').should('have.class', 'icon-exclamationTriangle')
+    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-ban')
+    cy.get('.InformationBox-icon').should(
+      'have.class',
+      'icon-exclamationTriangle'
+    )
     cy.get('.InformationBox').should('have.class', 'bg-danger-light')
-    
-    mount(<Default type="info" />)
-    cy.get('.InformationBox-icon').should('have.class', 'icon-infoCircle')
-    cy.get('.InformationBox').should('have.class', 'bg-focus-light')
+
+    mount(<Default type="success" />)
+    cy.get('.InformationBox-icon').should('have.class', 'icon-check')
+    cy.get('.InformationBox').should('have.class', 'bg-success-light')
   })
 })

styleguide/src/Indicators/InformationBox/InformationBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, IconProps } from '../../Icons'
 
-type InformationBoxTypesOptions = 'tip' | 'warning' | 'danger' | 'info'
+type InformationBoxTypesOptions = 'success' | 'warning' | 'danger' | 'info'
 
 const InformationBoxTypes: Record<
   InformationBoxTypesOptions,
@@ -12,34 +12,34 @@ const InformationBoxTypes: Record<
     iconClass: string
   }
 > = {
-  tip: {
-    title: 'Dica!',
-    class: 'bg-success-light border-success',
-    icon: 'lightbulb',
-    iconClass: 'text-success',
+  success: {
+    title: 'Sucesso!',
+    class: 'bg-success-light dark:bg-success border-success',
+    icon: 'check',
+    iconClass: 'text-success-dark',
   },
   warning: {
     title: 'Atenção!',
     class: 'bg-warning-light border-warning',
-    icon: 'exclamationTriangle',
-    iconClass: 'text-warning',
+    icon: 'infoCircle',
+    iconClass: 'text-warning-dark',
   },
   danger: {
     title: 'Cuidado!',
     class: 'bg-danger-light border-danger',
-    icon: 'ban',
-    iconClass: 'text-danger',
+    icon: 'exclamationTriangle',
+    iconClass: 'text-danger-dark',
   },
   info: {
-    title: 'Informação!',
+    title: 'Informação',
     class: 'bg-focus-light border-focus-dark',
-    icon: 'infoCircle',
+    icon: 'lightbulb',
     iconClass: 'text-focus-dark',
   },
 }
 
 const InformationBoxComponent = ({
-  type = 'tip',
+  type = 'info',
   subtitle,
   title,
 }: InformationBoxProps) => {

styleguide/src/Indicators/InformationBox/InformationBoxt.stories.tsx

@@ -15,10 +15,15 @@ export default {
   },
   args: {
     title: '',
-    subtitle: 'Como criar um cadastro de produto incrível? No mundo virtual, o consumidor não pode pegar, sentir ou experimentar o produto. Por isso, a imagem que você utiliza faz toda a diferença na hora da venda.',
+    subtitle:
+      'Como criar um cadastro de produto incrível? No mundo virtual, o consumidor não pode pegar, sentir ou experimentar o produto. Por isso, a imagem que você utiliza faz toda a diferença na hora da venda.',
   },
 } as Meta
 
-const Template: Story<InformationBoxProps> = args => <div className="max-w-4xl mx-auto"><InformationBox {...args} /></div>
+const Template: Story<InformationBoxProps> = (args) => (
+  <div className="max-w-4xl mx-auto">
+    <InformationBox {...args} />
+  </div>
+)
 
 export const Default = Template.bind({})

tailwindcss/src/_variables.scss

@@ -25,15 +25,15 @@
   --color-tertiary: 82 91 101;
   --color-tertiary-dark: 99 105 112;
   --color-tertiary-bold: 71 75 80;
-  --color-success-light: 232 246 223;
+  --color-success-light: 242 248 238;
   --color-success: 114 203 59;
   --color-success-dark: 88 161 43;
   --color-success-bold: 62 113 30;
-  --color-danger-light: 255 214 219;
+  --color-danger-light: 247 233 234;
   --color-danger: 229 0 25;
   --color-danger-dark: 184 0 21;
   --color-danger-bold: 122 0 14;
-  --color-warning-light: 255 245 214;
+  --color-warning-light: 251 247 235;
   --color-warning: 255 194 14;
   --color-warning-dark: 224 168 0;
   --color-warning-bold: 163 122 0;
@@ -89,15 +89,15 @@ html {
     --color-tertiary-bold: 171 175 180;
     --color-success-light: 62 76 53;
     --color-success: 114 203 59;
-    --color-success-dark: 88 161 43;
+    --color-success-dark: 178 226 149;
     --color-success-bold: 162 213 130;
     --color-danger-light: 85 44 49;
     --color-danger: 239 85 85;
-    --color-danger-dark: 184 0 21;
+    --color-danger-dark: 241 146 156;
     --color-danger-bold: 122 0 14;
     --color-warning-light: 85 75 44;
     --color-warning: 255 194 14;
-    --color-warning-dark: 224 168 0;
+    --color-warning-dark: 253 221 125;
     --color-warning-bold: 163 122 0;
     --color-secondary-light: 74 80 83;
     --color-secondary: 60 69 69;
@@ -117,6 +117,6 @@ html {
     --color-card-shadow: 100 100 100;
     --color-focus: 221 221 221;
     --color-focus-light: 62 66 74;
-    --color-focus-dark: 37 99 235;
+    --color-focus-dark: 165 196 251;
   }
 }