Message
This component fills the width of the container where is placed and its height varies depending on the content in it. The usage of this component is to show a message to call attention to something, be it useful information or a warning message. They should be used to provide context in proximity to a piece of content. Furthermore, it can be used to add an action like a link, by passing it as a children.
Figma Reference
Usage
import { Message, Button } from '@dt-dds/react';
export const App = () => {
const title = 'Some Title';
const description = 'Some Description';
const type = 'Error';
return (
<Message type={type} title={title} description={description}>
<Message.Actions>
<Button size='small' variant='text'>
View action
</Button>
</Message.Actions>
</Message>
);
};
API
Message
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Child components to be rendered. There is flexibility on what the content can be, but the recommendation is that it should be a link with a character count limit of 25. |
dataTestId | string | 'message' | Customizable test identifier. |
style | React.CSSProperties | - | Customizable styles |
type | MessageType | 'default' | Sets the type of the Message, responsible for the icon and It's color, the background color and color of the dashed border |
title | string | - | Optional Text to be presented as Title within the Message.Content, It should have text character count limit: 50. |
description | string | - | Text to be presented as Description within the Message.Content, It should have text character count limit: 230. |
onClose | function | - | When provided, a close button is displayed and, when clicked, it triggers this function. |
orientation | Orientation | 'horizontal' | Sets the orientation of the message component. On mobile the orientation is vertical |
Message.Actions
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Container to render actions. Button is expected. |
dataTestId | string | 'message-action' | Customizable test identifier for the action. |
Stack
- TypeScript for static type checking
- React — JavaScript library for user interfaces
- Emotion — for writing css styles with JavaScript
- Storybook — UI component environment powered by Vite
- Jest - JavaScript Testing Framework
- React Testing Library - to test UI components in a user-centric way
- ESLint for code linting
- Prettier for code formatting
- Tsup — TypeScript bundler powered by esbuild
- Yarn from managing packages
Commands
yarn build- Build the packageyarn dev- Run the package locallyyarn lint- Lint all files within this packageyarn test- Run all unit testsyarn test:report- Open the test coverage reportyarn test:update:snapshot- Run all unit tests and update the snapshot
Compilation
Running yarn build from the root of the package will use tsup to compile the raw TypeScript and React code to plain JavaScript.
The /dist folder contains the compiled output.
message
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
Versioning
Follows semantic versioning
© License
Licensed under MIT License