@latte-macchiat-io/latte-vanilla-components 0.0.456 → 0.0.458

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.456",
+  "version": "0.0.458",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Box/Alert/index.tsx

@@ -1,25 +1,24 @@
-import { alertBox, alertBoxContent } from './styles.css';
+import { alertBoxContent, AlertBoxVariants } from './styles.css';
 
-import { AlertVariant } from './types';
 import { Box } from '..';
 
 import { themeContract } from '../../../theme/contract.css';
-import { cn } from '../../../utils/styleOverride';
+
 import { Heading } from '../../Heading';
 import { Icon } from '../../Icon';
 import icons from '../../Icon/path';
 import { Paragraph } from '../../Paragraph';
 
-export type AlertBoxProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
-  title?: string | null;
-  text: string;
-  noIcon?: boolean;
-  variant?: AlertVariant;
-};
+export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
+  AlertBoxVariants & {
+    text: string;
+    noIcon?: boolean;
+    title?: string | null;
+  };
 
 export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
   return (
-    <Box className={className} variant={variant}>
+    <Box className={className} variant={variant} direction="row">
       {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
       <div className={alertBoxContent}>
         {title && <Heading as="h4">{title}</Heading>}

package/src/components/Box/Alert/stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AlertBox } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof AlertBox> = {
+  title: 'Latte Components / 1. Global / AlertBox',
+  component: AlertBox,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    title: 'Lorem ipsum',
+    text: 'Lorem ipsum Lorem ipsum',
+  },
+};

package/src/components/Box/Alert/theme.ts

@@ -10,7 +10,7 @@ export const themeBoxAlertLight = {
         iconColor: '',
         backgroundColor: '',
       },
-      info: { iconColor: '', backgroundColor: '' },
+      info: { iconColor: '', backgroundColor: '#FF0000' },
       success: { iconColor: '', backgroundColor: '' },
       danger: { iconColor: '', backgroundColor: '' },
     },