Docs: Story for the Alert component #645#653
Conversation
|
Gridiron Survivor Application
Project name: Gridiron Survivor Application
Only deployments on the production branch are activated automatically. If you'd like to activate this deployment, navigate to your deployments. Learn more about Appwrite Function deployments.
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@MichaelLarocca This is the Storybook inspiration I want to shoot for. Let's discuss next week. https://react.carbondesignsystem.com/?path=/docs/components-button--overview |
| @@ -0,0 +1,87 @@ | |||
| // Copyright (c) Gridiron Survivor. | |||
| // Licensed under the MIT License. | |||
|
|
|||
There was a problem hiding this comment.
Are you supposed to write tests for this Alert story? Please confirm with Shashi if this is the case of not
| docs: { | ||
| description: { | ||
| component: ` | ||
| The \`Alert\` component is a dynamic UI element from the Shadcn UI library, designed to display important notifications to users. It combines several subcomponents—\`AlertTitle\`, \`AlertDescription\`, and \`AlertDefault\`—into a cohesive \`AlertNotification\` component. This component is exported as \`<Alert variant={variant} message="Whatever message" />\`, making it easy to use across applications. |
There was a problem hiding this comment.
Shadcn UI library link to the Shadcn UI library docs
|
|
||
| - **Success**: Indicates successful operations, such as a successful user sign-in. | ||
| - **Error**: Alerts users to errors, like incorrect login information. | ||
| - **Warning**: Reserved for potential issues. |
There was a problem hiding this comment.
could you provide an example of when a warning message would occur, like the Success and error variants, for consistency?
| - **Success**: Indicates successful operations, such as a successful user sign-in. | ||
| - **Error**: Alerts users to errors, like incorrect login information. | ||
| - **Warning**: Reserved for potential issues. | ||
| - **Default**: Used for general information. |
There was a problem hiding this comment.
could you provide an example of when a default message would occur, like the Success and error variants, for consistency?
|
|
||
| ### Usage | ||
|
|
||
| The \`Alert\` component is primarily used to provide users with visual feedback on the status of their actions, such as confirming successful operations or notifying them of errors. It is integrated with \`react-hot-toast\` to enable popup notifications, enhancing user experience by providing immediate feedback. |
| \`\`\`jsx | ||
| <Alert variant="success" message="This is a success alert" /> | ||
| \`\`\` |
There was a problem hiding this comment.
Please take a look at how the other stories are being defined in stories.tsx files
| - **variant**: Determines the type of alert, affecting its title and color. Options include 'success', 'error', 'warning', and 'default'. | ||
| - **message**: The content of the alert message, rendered within the \`AlertDescription\`. |
There was a problem hiding this comment.
Would this be better as a table?
|
|
||
| ### Integration with Toast | ||
|
|
||
| The component's notification functionality is powered by \`react-hot-toast\`, a package that handles popup notifications. By wrapping \`toast.custom()\` around \`<Alert variant={} message="" />\`, the component can display alerts as pop-up notifications, providing users with immediate visual feedback.`, |
There was a problem hiding this comment.
popup notifications should be pop-up notifications
4 participants
Docs: Add Alert Story (#645)
Closes #645