@latte-macchiat-io/latte-vanilla-components 0.0.455 → 0.0.457

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.455",
+  "version": "0.0.457",
   "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,26 +1,25 @@
-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={cn(alertBox({ variant }), className)} variant={variant}>
-      {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
+    <Box className={className} variant={variant}>
+      {/* {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />} */}
       <div className={alertBoxContent}>
         {title && <Heading as="h4">{title}</Heading>}
         <Paragraph>{text}</Paragraph>

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

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+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/styles.css.ts

@@ -54,16 +54,16 @@ export const box = recipe({
         backgroundColor: themeContract.section.variant.transparent.backgroundColor,
       },
       warning: {
-        backgroundColor: themeContract.section.variant.primary.backgroundColor,
+        backgroundColor: themeContract.boxAlert.variant.warning.backgroundColor,
       },
       info: {
-        backgroundColor: themeContract.section.variant.primary.backgroundColor,
+        backgroundColor: themeContract.boxAlert.variant.info.backgroundColor,
       },
       success: {
-        backgroundColor: themeContract.section.variant.primary.backgroundColor,
+        backgroundColor: themeContract.boxAlert.variant.success.backgroundColor,
       },
       danger: {
-        backgroundColor: themeContract.section.variant.primary.backgroundColor,
+        backgroundColor: themeContract.boxAlert.variant.danger.backgroundColor,
       },
     },