feat: small alert

Author: lisalupi

.changeset/dirty-parks-kick.md

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

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

@@ -72,4 +72,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

@@ -47,6 +47,7 @@ type AlertProps = {
    */
   disabled?: boolean
   style?: CSSProperties
+  size?: 'medium' | 'small'
 }
 
 /**
@@ -63,6 +64,7 @@ export const Alert = ({
   className,
   disabled,
   'data-testid': dataTestId,
+  size = 'medium',
   style,
 }: AlertProps) => {
   const [opened, setOpened] = useState(true)
@@ -74,7 +76,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 +90,39 @@ 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"
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
             sentiment={sentiment}
             size="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 +132,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',
   },
 })
 
@@ -42,10 +50,16 @@ export const wrapAlert = style({
 
 export const textAlert = style({
   color: theme.colors.neutral.text,
+  paddingTop: theme.space['0.25'],
 })
 
-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({