feat(Alert): small version (#5791)

* feat: small alert

* fix: tests

* fix: icon size

Author: lisalupi

.changeset/dirty-parks-kick.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Alert`: add "size" prop

packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap

@@ -17,10 +17,10 @@ exports[`submitErrorAlert > should display an alert when submitError is present
         Submit
       </button>
       <div
-        class="uv_1b838gx0 uv_1b838gx1 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
+        class="uv_1b838gx0 uv_1b838gx1 uv_1b838gx6 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <div
-          class="uv_1b838gx6 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
+          class="uv_1b838gx8 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
         >
           <div
             class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u5d"
@@ -37,7 +37,7 @@ exports[`submitErrorAlert > should display an alert when submitError is present
               />
             </svg>
             <div
-              class="uv_1b838gx7 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
+              class="uv_1b838gx9 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
               style="--uv_4k0ekn3: 1 1 auto;"
             >
               <p

packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap

@@ -3259,10 +3259,10 @@ exports[`estimateCost - Regular Item > render with alert 1`] = `
         This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.
       </span>
       <div
-        class="uv_1b838gx0 uv_1b838gx4 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
+        class="uv_1b838gx0 uv_1b838gx4 uv_1b838gx6 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <div
-          class="uv_1b838gx6 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
+          class="uv_1b838gx8 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
         >
           <div
             class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u5d"
@@ -3279,7 +3279,7 @@ exports[`estimateCost - Regular Item > render with alert 1`] = `
               />
             </svg>
             <div
-              class="uv_1b838gx7 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
+              class="uv_1b838gx9 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
               style="--uv_4k0ekn3: 1 1 auto;"
             >
               <span

packages/ui/src/components/Alert/__stories__/Size.stories.tsx

@@ -0,0 +1,57 @@
+import type { Decorator } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
+import { Stack } from '../../Stack'
+import { Alert } from '..'
+
+export const Size = (props: ComponentProps<typeof Alert>) => (
+  <>
+    <Alert
+      {...props}
+      onClickButton={() => alert('Button clicked')}
+      title="title"
+    >
+      This is an Alert.
+    </Alert>
+
+    <Alert
+      {...props}
+      onClickButton={() => alert('Button clicked')}
+      size="small"
+      title="title"
+    >
+      This is a small alert
+    </Alert>
+    <Alert
+      {...props}
+      buttonText="More info"
+      onClickButton={() => alert('Button clicked')}
+      size="small"
+      title="title"
+    >
+      Small alert with long children. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum.,
+    </Alert>
+  </>
+)
+
+Size.decorators = [
+  StoryComponent => (
+    <Stack gap={2}>
+      <StoryComponent />
+    </Stack>
+  ),
+] as Decorator[]
+
+Size.parameters = {
+  docs: {
+    description: {
+      story:
+        'Using `sentiment` prop you can change the sentiment of the component. Each sentiment has a default icon set.',
+    },
+  },
+}

packages/ui/src/components/Alert/__stories__/index.stories.tsx

@@ -11,5 +11,6 @@ export { Title } from './Title.stories'
 export { Button } from './Button.stories'
 export { Link } from './Link.stories'
 export { Sentiments } from './Sentiments.stories'
+export { Size } from './Size.stories'
 export { Closable } from './Closable.stories'
 export { LongChildren } from './LongChildren.stories'

packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -75,4 +75,10 @@ describe('alert', () => {
         Sample Alert
       </Alert>,
     ))
+  test('renders correctly small', () =>
+    shouldMatchSnapshot(
+      <Alert className="small" size="small" title="title">
+        Sample Alert
+      </Alert>,
+    ))
 })

packages/ui/src/components/Alert/__tests__/index.test.tsx

@@ -16,6 +16,7 @@ import {
   alert,
   buttonAlert,
   buttonCloseAlert,
+  smallIcon,
   textAlert,
   wrapAlert,
 } from './styles.css'
@@ -47,6 +48,7 @@ type AlertProps = {
    */
   disabled?: boolean
   style?: CSSProperties
+  size?: 'medium' | 'small'
 }
 
 /**
@@ -63,6 +65,7 @@ export const Alert = ({
   className,
   disabled,
   'data-testid': dataTestId,
+  size = 'medium',
   style,
 }: AlertProps) => {
   const [opened, setOpened] = useState(true)
@@ -74,7 +77,7 @@ export const Alert = ({
 
   return (
     <Stack
-      className={`${className ? `${className} ` : ''}${alert({ sentiment })}`}
+      className={`${className ? `${className} ` : ''}${alert({ sentiment, size })}`}
       data-testid={dataTestId}
       direction="row"
       gap={1}
@@ -88,27 +91,40 @@ export const Alert = ({
         justifyContent="space-between"
         wrap
       >
-        <Stack alignItems="start" direction="row" flex="1 1 auto" gap={2}>
+        <Stack
+          alignItems="start"
+          direction="row"
+          flex="1 1 auto"
+          gap={size === 'small' ? 1 : 2}
+        >
           <Icon
             aria-hidden="true"
+            className={size === 'small' ? smallIcon : ''}
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
             sentiment={sentiment}
-            size="large"
+            size={size === 'small' ? 'small' : 'large'}
           />
           <Stack
+            alignItems="center"
             className={textAlert}
             direction="row"
             flex="1 1 auto"
             gap={1.5}
             wrap
           >
             {title ? (
-              <Text as="span" sentiment={sentiment} variant="bodyStronger">
+              <Text
+                as="span"
+                sentiment={sentiment}
+                variant={
+                  size === 'small' ? 'bodySmallStronger' : 'bodyStronger'
+                }
+              >
                 {title}
               </Text>
             ) : null}
             {typeof children === 'string' ? (
-              <Text as="p" variant="body">
+              <Text as="p" variant={size === 'small' ? 'bodySmall' : 'body'}>
                 {children}
               </Text>
             ) : (
@@ -118,7 +134,7 @@ export const Alert = ({
         </Stack>
         {buttonText ? (
           <Button
-            className={buttonAlert}
+            className={buttonAlert[size]}
             disabled={disabled}
             onClick={onClickButton}
             sentiment={sentiment}

packages/ui/src/components/Alert/index.tsx

@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { style } from '@vanilla-extract/css'
+import { style, styleVariants } from '@vanilla-extract/css'
 import type { RecipeVariants } from '@vanilla-extract/recipes'
 import { recipe } from '@vanilla-extract/recipes'
 import type { AlertSentiment } from './type'
@@ -16,7 +16,6 @@ function createStyleAlert(sentiment: AlertSentiment) {
 export const alert = recipe({
   base: {
     borderRadius: theme.radii.default,
-    padding: theme.space[2],
   },
   variants: {
     sentiment: {
@@ -30,9 +29,18 @@ export const alert = recipe({
         borderLeft: `4px solid ${theme.colors.neutral.borderStronger}`,
       },
     },
+    size: {
+      medium: {
+        padding: theme.space[2],
+      },
+      small: {
+        padding: theme.space['1.5'],
+      },
+    },
   },
   defaultVariants: {
     sentiment: 'danger',
+    size: 'medium',
   },
 })
 
@@ -44,12 +52,21 @@ export const textAlert = style({
   color: theme.colors.neutral.text,
 })
 
-export const buttonAlert = style({
-  marginLeft: theme.space[5],
+export const buttonAlert = styleVariants({
+  medium: {
+    marginLeft: theme.space[5],
+  },
+  small: {
+    marginLeft: theme.space[3],
+  },
 })
 
 export const buttonCloseAlert = style({
   alignSelf: 'start',
 })
 
 export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>
+
+export const smallIcon = style({
+  marginTop: theme.space['0.25'],
+})