chore(Alert): update to 5.0.0

Author: benjitrosch

src/Alert/Alert.stories.tsx

@@ -152,6 +152,75 @@ ErrorColor.args = {
   status: 'error',
 }
 
+export const SoftStyle: Story<AlertProps> = (args) => {
+  return (
+    <div className="preview bg-base-100 relative flex min-h-[6rem] max-w-4xl min-w-[18rem] flex-wrap items-center justify-center gap-2 overflow-x-hidden bg-cover bg-top p-4 xl:py-10">
+      <Alert {...args} status="info">
+        12 unread messages. Tap to see.
+      </Alert>
+      <Alert {...args} status="success">
+        Your purchase has been confirmed!
+      </Alert>
+      <Alert {...args} status="warning">
+        Warning: Invalid email address!
+      </Alert>
+      <Alert {...args} status="error">
+        Error! Task failed successfully.
+      </Alert>
+    </div>
+  )
+}
+SoftStyle.args = {
+  variant: 'soft',
+  className: 'w-full',
+}
+
+export const OutlineStyle: Story<AlertProps> = (args) => {
+  return (
+    <div className="preview bg-base-100 relative flex min-h-[6rem] max-w-4xl min-w-[18rem] flex-wrap items-center justify-center gap-2 overflow-x-hidden bg-cover bg-top p-4 xl:py-10">
+      <Alert {...args} status="info">
+        12 unread messages. Tap to see.
+      </Alert>
+      <Alert {...args} status="success">
+        Your purchase has been confirmed!
+      </Alert>
+      <Alert {...args} status="warning">
+        Warning: Invalid email address!
+      </Alert>
+      <Alert {...args} status="error">
+        Error! Task failed successfully.
+      </Alert>
+    </div>
+  )
+}
+OutlineStyle.args = {
+  variant: 'outline',
+  className: 'w-full',
+}
+
+export const DashStyle: Story<AlertProps> = (args) => {
+  return (
+    <div className="preview bg-base-100 relative flex min-h-[6rem] max-w-4xl min-w-[18rem] flex-wrap items-center justify-center gap-2 overflow-x-hidden bg-cover bg-top p-4 xl:py-10">
+      <Alert {...args} status="info">
+        12 unread messages. Tap to see.
+      </Alert>
+      <Alert {...args} status="success">
+        Your purchase has been confirmed!
+      </Alert>
+      <Alert {...args} status="warning">
+        Warning: Invalid email address!
+      </Alert>
+      <Alert {...args} status="error">
+        Error! Task failed successfully.
+      </Alert>
+    </div>
+  )
+}
+DashStyle.args = {
+  variant: 'dash',
+  className: 'w-full',
+}
+
 export const WithButtons: Story<AlertProps> = (args) => {
   return (
     <Alert

src/Alert/Alert.tsx

@@ -2,27 +2,39 @@ import React, { forwardRef, ReactNode } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps, ComponentStatus } from '../types'
+import {
+  IComponentBaseProps,
+  ComponentLayout,
+  ComponentStatus,
+  ComponentVariant,
+} from '../types'
 
 export type AlertProps = React.HTMLAttributes<HTMLDivElement> &
   IComponentBaseProps & {
     icon?: ReactNode
+    layout?: ComponentLayout
     status?: ComponentStatus
+    variant?: ComponentVariant
   }
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
-    { children, icon, status, dataTheme, className, ...props },
+    { children, icon, layout, status, variant, dataTheme, className, ...props },
     ref
   ): JSX.Element => {
     const classes = twMerge(
       'alert',
       className,
       clsx({
+        'alert-vertical': layout === 'vertical',
+        'alert-horizontal': layout === 'horizontal',
         'alert-info': status === 'info',
         'alert-success': status === 'success',
         'alert-warning': status === 'warning',
         'alert-error': status === 'error',
+        'alert-soft': variant === 'soft',
+        'alert-dash': variant === 'dash',
+        'alert-outline': variant === 'outline',
       })
     )
 

src/constants.ts

@@ -1,3 +1,4 @@
+export const componentLayouts = ['vertical', 'horizontal'] as const
 export const componentPositions = ['top', 'bottom', 'left', 'right'] as const
 export const componentShapes = ['circle', 'square'] as const
 export const componentSizes = ['lg', 'md', 'sm', 'xs'] as const
@@ -7,6 +8,7 @@ export const componentStatuses = [
   'warning',
   'error',
 ] as const
+export const componentVariants = ['soft', 'dash', 'outline'] as const
 export const brandColors = [
   'neutral',
   'primary',

src/types.ts

@@ -1,9 +1,11 @@
 import {
-  componentStatuses,
   componentColors,
+  componentLayouts,
   componentPositions,
   componentSizes,
   componentShapes,
+  componentStatuses,
+  componentVariants,
   bgColors,
   brandColors,
 } from './constants'
@@ -21,6 +23,8 @@ export type ComponentPosition = typeof componentPositions[number]
 export type ComponentShape = typeof componentShapes[number]
 export type ComponentSize = typeof componentSizes[number]
 export type ComponentStatus = typeof componentStatuses[number]
+export type ComponentVariant = typeof componentVariants[number]
+export type ComponentLayout = typeof componentLayouts[number]
 export type ComponentBrandColors = typeof brandColors[number]
 export type ComponentBgColors = typeof bgColors[number]