1286-feui-create-banner-molecule (#1287)

* Basic component

* changelog

* Banner story

* Some styles

* Component styled

* styles

* Banner tests

* Banner tests ok

---------

Co-authored-by: Maria Llenas <mallecat12@gmail.com>
Co-authored-by: Natàlia <nataliaroca30@gmail.com>

packages/ui/CHANGELOG.md

@@ -2,7 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.31.8] - 2024-05-23
+## [0.33.0] - 2024-05-23
+
+### Added
+
+- Added Banner molecule
+
+## [0.32.0] - 2024-05-23
 
 ### Changed
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itacademy/ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "React FE components for ITAcademy projects.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.es.js",

packages/ui/src/__tests__/molecules/Banner.test.tsx

@@ -0,0 +1,51 @@
+import { vi } from 'vitest'
+import { screen, render, fireEvent } from '@testing-library/react'
+import { Banner } from '../../components/molecules'
+
+const mockClick = vi.fn()
+
+describe('Banner', () => {
+  it('renders correctly and button can be clicked', () => {
+    render(
+      <Banner
+        title="Banner title"
+        description="Fake text for banner description"
+        buttonText="Accept"
+        imgUrl="https://picsum.photos/200"
+        imgAltText="Alt text for img"
+        onClick={mockClick}
+      />
+    )
+
+    expect(screen.getByText('Banner title')).toBeInTheDocument()
+    expect(
+      screen.getByText('Fake text for banner description')
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Accept' })).toBeInTheDocument()
+    const image: HTMLImageElement = screen.getByRole('img')
+    expect(image).toBeInTheDocument()
+    expect(image).toHaveAttribute('src', 'https://picsum.photos/200')
+    expect(image).toHaveAttribute('alt', 'Alt text for img')
+    fireEvent.click(screen.getByTestId('button'))
+    expect(mockClick).toHaveBeenCalled()
+  })
+
+  it('renders placeholder image and alt attribute when not provided', () => {
+    render(
+      <Banner
+        title="No image title"
+        description="Fake text for a banner without image"
+        buttonText="Accept"
+        onClick={mockClick}
+      />
+    )
+
+    const defaultImage: HTMLImageElement = screen.getByRole('img')
+    expect(defaultImage).toBeInTheDocument()
+    expect(defaultImage).toHaveAttribute(
+      'src',
+      '/src/components/molecules/Banner/defaultImg.svg'
+    )
+    expect(defaultImage).toHaveAttribute('alt', 'e-book')
+  })
+})

packages/ui/src/components/molecules/Banner/index.tsx

@@ -0,0 +1,81 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+import { Button, Text, Title } from '../../atoms'
+import { FlexBox, colors, dimensions } from '../../../styles'
+import defaultImg from './defaultImg.svg'
+
+const BannerStyled = styled(FlexBox)`
+  width: 34.65rem;
+  height: auto;
+  background-color: ${colors.primary};
+  border-radius: ${dimensions.borderRadius.base};
+  padding: ${dimensions.spacing.lg};
+`
+
+const InfoStyled = styled(FlexBox)`
+  width: 24.5rem;
+`
+
+const TitleStyled = styled(Title)`
+  font-size: 32px;
+  margin-top: ${dimensions.spacing.xxxs};
+  margin-bottom: 0;
+`
+
+const TextStyled = styled(Text)`
+  color: ${colors.white};
+  margin: 0;
+`
+
+const ButtonStyled = styled(Button)`
+  background-color: ${colors.black.black1};
+  width: 11rem;
+  font-weight: 700;
+  font-size: 16px;
+`
+
+const ImageContainer = styled(FlexBox)`
+  width: 33%;
+  height: auto;
+`
+
+const ImageStyled = styled.img`
+  width: 100%;
+  border-radius: ${dimensions.borderRadius.base};
+  object-fit: cover;
+`
+
+export type TBanner = {
+  title: string
+  description: string
+  buttonText: string
+  imgUrl?: string
+  imgAltText?: string
+  onClick: () => void
+}
+
+export const Banner: FC<TBanner> = ({
+  title,
+  description,
+  buttonText,
+  imgUrl = defaultImg,
+  imgAltText = 'e-book',
+  onClick,
+}) => (
+  <BannerStyled direction="row" align="stretch" gap={dimensions.spacing.xs}>
+    <InfoStyled
+      align="start"
+      justify="space-between"
+      gap={dimensions.spacing.md}
+    >
+      <TitleStyled as="h1" fontWeight="bold" color={colors.white}>
+        {title}
+      </TitleStyled>
+      <TextStyled fontSize="16px">{description}</TextStyled>
+      <ButtonStyled onClick={onClick}>{buttonText}</ButtonStyled>
+    </InfoStyled>
+    <ImageContainer>
+      <ImageStyled src={imgUrl} alt={imgAltText} />
+    </ImageContainer>
+  </BannerStyled>
+)

packages/ui/src/components/molecules/index.ts

@@ -3,6 +3,7 @@ export {
   type TAccessModalContent,
 } from './AccessModalContent'
 export { BackButton, type TBackButton } from './BackButton'
+export { Banner, type TBanner } from './Banner'
 export { CardProfile, type TCardProfile } from './CardProfile'
 export { CardHome, type TCardHome } from './CardHome'
 export {

packages/ui/src/stories/molecules/Banner.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Banner } from '../../components/molecules'
+
+const meta = {
+  title: 'Molecules/Banner',
+  component: Banner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    buttonText: { control: 'text' },
+    imgUrl: { control: 'text' },
+    imgAltText: { control: 'text' },
+    onClick: { action: 'clicked' },
+  },
+} satisfies Meta<typeof Banner>
+
+export default meta
+type BannerStory = StoryObj<typeof Banner>
+
+export const Default: BannerStory = {
+  args: {
+    title: 'Sample Title',
+    description: 'This is a sample description for the banner.',
+    buttonText: 'Accept',
+  },
+}
+
+export const WithImg: BannerStory = {
+  args: {
+    title: 'Banner with image',
+    description:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry´s standard dummy text ever since the 1500s,',
+    buttonText: 'Accept',
+    imgUrl:
+      'https://images.unsplash.com/photo-1601467295274-f2408b6e90f2?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    imgAltText: 'Alt image text',
+  },
+}