New component: Alert (#46)

styleguide/src/Indicators/Alert/Alert.spec.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./Alert.stories"
+
+const { Default } = composeStories(stories)
+
+describe('Alert tests', () => {
+
+  it('Default', () => {
+    const text = 'Example text'
+    mount(<Default content={text} />)
+    cy.get('.alert').contains(text)
+  })
+
+  it('Variants', () => {
+    mount(<Default type="success" />)
+    cy.get('.alert').should('have.class', 'bg-success-light')
+
+    mount(<Default type="warning" />)
+    cy.get('.alert').should('have.class', 'bg-warning-light')
+
+    mount(<Default type="danger" />)
+    cy.get('.alert').should('have.class', 'bg-danger-light')
+  })
+
+})

styleguide/src/Indicators/Alert/Alert.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { Alert, AlertProps } from './Alert'
+
+export default {
+  title: 'Indicators/Alert',
+  component: Alert,
+  args: {
+    content: 'O dinheiro só irá para a conta no mesmo dia se o saque for feito antes das 15h e em dias úteis (segunda a sexta-feira).',
+  },
+} as Meta
+
+const Template: Story<AlertProps> = args => <Alert {...args} />
+
+export const Default = Template.bind({})

styleguide/src/Indicators/Alert/Alert.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+const alertTypes = {
+  success: 'bg-success-light border-success',
+  warning: 'bg-warning-light border-warning',
+  danger: 'bg-danger-light border-danger',
+  info: 'bg-info-light border-info',
+  primary: 'bg-primary-light border-primary',
+}
+
+const AlertComponent = ({ type = 'info', content }: AlertProps) => {
+  return (
+    <div
+      className={`alert border border-l-4 py-3 pl-5 pr-4 rounded text-f6 tracking-4 leading-5 font-semibold w-full relative flex items-center text-on-base ${alertTypes[type]}`}
+    >
+      {content}
+    </div>
+  )
+}
+
+export const Alert = React.memo(AlertComponent)
+
+export interface AlertProps {
+  /** Alert color
+   * @default info
+   * */
+  type?: keyof typeof alertTypes
+  /**
+   * Alert content
+   * */
+  content?: string | React.ReactNode
+  /**
+   * Need to implement
+   * */
+  // onClose
+  // icon
+}

styleguide/src/Indicators/Alert/index.tsx

@@ -0,0 +1 @@
+export * from './Alert'

styleguide/src/Indicators/index.ts

@@ -1,2 +1,3 @@
+export * from './Alert'
 export * from './Status'
 export * from './Toast'