-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #21 from miksrv/develop
New UI Message Component
- Loading branch information
Showing
14 changed files
with
275 additions
and
37 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react' | ||
|
|
||
| import '@testing-library/jest-dom' | ||
|
|
||
| import Message from './Message' | ||
|
|
||
| import { render, screen } from '@testing-library/react' | ||
|
|
||
| describe('Message Component', () => { | ||
| it('renders the Message component with title and children', () => { | ||
| render(<Message title='Test Title'>This is a test message</Message>) | ||
|
|
||
| const titleElement = screen.getByText(/Test Title/i) | ||
| expect(titleElement).toBeInTheDocument() | ||
|
|
||
| const contentElement = screen.getByText(/This is a test message/i) | ||
| expect(contentElement).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('applies correct styles based on message type', () => { | ||
| render( | ||
| <Message | ||
| type='warning' | ||
| title='Warning Title' | ||
| > | ||
| Warning content | ||
| </Message> | ||
| ) | ||
|
|
||
| const titleElement = screen.getByText(/Warning Title/i) | ||
| expect(titleElement).toBeInTheDocument() | ||
|
|
||
| const sectionElement = titleElement.closest('section') | ||
| expect(sectionElement).toHaveClass('warning') | ||
| }) | ||
|
|
||
| it('renders correctly without a title or list', () => { | ||
| render(<Message>This message has no title or list</Message>) | ||
|
|
||
| const contentElement = screen.getByText(/This message has no title or list/i) | ||
| expect(contentElement).toBeInTheDocument() | ||
|
|
||
| expect(screen.queryByRole('heading')).not.toBeInTheDocument() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React from 'react' | ||
|
|
||
| import { cn } from '../../utils' | ||
|
|
||
| import styles from './styles.module.sass' | ||
|
|
||
| /** | ||
| * Message component properties | ||
| */ | ||
| export interface MessageProps extends React.HTMLAttributes<HTMLDivElement> { | ||
| /** Type of the message that defines the visual style ('negative', 'positive', 'warning', or 'info') */ | ||
| type?: 'error' | 'warning' | 'success' | 'info' | ||
| /** Title to be displayed at the top of the message */ | ||
| title?: string | ||
| /** Content or children elements inside the message */ | ||
| children?: React.ReactNode | ||
| } | ||
|
|
||
| const Message: React.FC<MessageProps> = ({ title, children, type, ...props }) => ( | ||
| <section | ||
| {...props} | ||
| className={cn(styles.message, type && styles[type])} | ||
| > | ||
| {title && <div className={styles.title}>{title}</div>} | ||
| {children && <div className={styles.content}>{children}</div>} | ||
| </section> | ||
| ) | ||
|
|
||
| export default Message |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { default } from './Message' | ||
| export type { MessageProps } from './Message' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .message | ||
| border-radius: var(--border-radius) | ||
| font-family: var(--font-family), sans-serif | ||
| font-size: var(--font-size) | ||
| box-sizing: border-box | ||
| width: 100% | ||
| padding: 8px 12px | ||
| position: relative | ||
|
|
||
| &.error | ||
| background-color: var(--color-red-background) | ||
| color: var(--color-red) | ||
|
|
||
| &.warning | ||
| background-color: var(--color-orange-background) | ||
| color: var(--color-orange) | ||
|
|
||
| &.success | ||
| background-color: var(--color-green-background) | ||
| color: var(--color-green) | ||
|
|
||
| &.info | ||
| background-color: var(--color-main-background) | ||
| color: var(--color-main) | ||
|
|
||
| .title | ||
| margin: 0 0 5px | ||
| font-weight: 600 | ||
|
|
||
| .content, ul | ||
| margin: 0 | ||
| font-size: var(--font-size-small) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.