feat(notification): implement top-left alignment for all elements

- Update NotificationItem to always use flex-start alignment
- Add alignSelf: 'flex-start' to icon styles for consistent top-left positioning
- Add TopLeftAlignment and MultipleLineParagraph stories to showcase the alignment behavior
- Ensure all notification elements (icon, title, content, close button) align to top-left

Author: toniwowtscherk

packages/components/notification/src/NotificationItem/NotificationItem.styles.ts

@@ -36,6 +36,7 @@ const getIconStyle = ({ variant }) =>
     fill: variantColors[variant],
     marginRight: tokens.spacingM,
     alignItems: 'flex-start',
+    alignSelf: 'flex-start',
   });
 
 export const getStyles = ({ variant }: { variant: NotificationVariant }) => ({

packages/components/notification/src/NotificationItem/NotificationItem.tsx

@@ -95,7 +95,7 @@ const _NotificationItem = (props: ExpandProps<NotificationItemProps>, ref) => {
       data-intent={intents[variant]}
       aria-live={variant === 'positive' ? 'polite' : 'assertive'}
       className={cx(styles.wrapper, className)}
-      alignItems={title ? 'flex-start' : 'center'}
+      alignItems="flex-start"
       {...otherProps}
       ref={ref}
     >

packages/components/notification/stories/Notification.stories.tsx

@@ -184,3 +184,84 @@ overview.args = {
   onClose: action('onClose'),
   children: 'Body for the notification',
 };
+
+export const TopLeftAlignment = () => {
+  return (
+    <Flex fullWidth flexDirection="column">
+      <SectionHeading marginBottom="spacingS" as="h3">
+        Top-Left Alignment Preview
+      </SectionHeading>
+      <Flex marginBottom="spacingL">
+        <NotificationItem
+          variant="positive"
+          title="Long notification title that spans multiple lines to demonstrate top-left alignment"
+          cta={{
+            label: 'Call to Action',
+          }}
+          onClose={action('onClose')}
+        >
+          This is a longer notification body that contains multiple lines of
+          text to demonstrate how all elements align to the top-left when the
+          notification has both a title and content.
+        </NotificationItem>
+      </Flex>
+
+      <Flex marginBottom="spacingL">
+        <NotificationItem
+          variant="negative"
+          title="Error Title"
+          cta={{
+            label: 'Resolve Error',
+          }}
+          onClose={action('onClose')}
+        >
+          Short error message.
+        </NotificationItem>
+      </Flex>
+
+      <Flex marginBottom="spacingL">
+        <NotificationItem variant="warning" onClose={action('onClose')}>
+          Notification without title - icon should still align to top-left with
+          the text content.
+        </NotificationItem>
+      </Flex>
+
+      <Flex marginBottom="spacingL">
+        <NotificationItem
+          variant="primary"
+          title="Info Notification"
+          onClose={action('onClose')}
+        >
+          This demonstrates the alignment of icon, title, content, and close
+          button when all elements are present.
+        </NotificationItem>
+      </Flex>
+    </Flex>
+  );
+};
+
+TopLeftAlignment.args = {};
+
+// Example story with multiple line blind text for the paragraph
+export const MultipleLineParagraph = (args) => {
+  return (
+    <NotificationItem
+      {...args}
+      title="Notification with multiple line paragraph"
+      variant="primary"
+      onClose={action('onClose')}
+    >
+      {`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.`}
+    </NotificationItem>
+  );
+};
+
+MultipleLineParagraph.args = {
+  cta: {
+    label: 'Learn more',
+  },
+  closeButtonAriaLabel: 'Close',
+};