fix(AppNotification): apply usage feedback (#1949)

- spacing for close button when text is brief
- better storybook handling
- add type exports

src/components/AppNotification/AppNotification.module.css

@@ -46,6 +46,10 @@
     max-width: 1320px;
     display: flex;
     gap: 0.5rem;
+
+    & > section {
+        width: 100%;
+    }
 }
 
 .app-notification__close-btn {

src/components/AppNotification/AppNotification.stories.tsx

@@ -24,6 +24,9 @@ export default {
         type: null,
       },
     },
+    subTitle: {
+      control: 'text',
+    },
   },
 } as Meta<Args>;
 
@@ -63,6 +66,7 @@ export const LightColor: StoryObj<Args> = {
 export const WithDismissAndControls: StoryObj<Args> = {
   args: {
     ...WithControls.args,
+    subTitle: 'Limited subtitle text',
     onDismiss: () => {
       console.log('dismissing!');
     },

src/components/AppNotification/AppNotification.tsx

@@ -4,7 +4,7 @@ import { ButtonV2 as Button } from '../Button';
 import Text from '../Text';
 import styles from './AppNotification.module.css';
 
-export interface Props {
+export interface AppNotificationProps {
   // Design API
   /**
    * The title/heading of the notification
@@ -47,7 +47,7 @@ export const AppNotification = ({
   subTitle,
   title,
   ...other
-}: Props) => {
+}: AppNotificationProps) => {
   const componentClassName = clsx(
     styles['app-notification'],
     color && styles[`app-notification--color-${color}`],

src/components/AppNotification/__snapshots__/AppNotification.test.ts.snap

@@ -224,7 +224,7 @@ exports[`<AppNotification /> WithDismissAndControls story renders snapshot 1`] =
       <p
         class="text text--body-md app-notification__sub-title"
       >
-        Lorem ipsum dolor sit amet consectetur. At et vitae quis amet felis mollis in vitae. Eget in neque et molestie. Luctus sed id commodo volutpat. In a eu in id molestie consectetur pellentesque.
+        Limited subtitle text
       </p>
       <div
         class="app-notification__actions"

src/components/AppNotification/index.ts

@@ -1 +1,2 @@
 export { AppNotification as default } from './AppNotification';
+export type { AppNotificationProps } from './AppNotification';

src/index.ts

@@ -78,3 +78,4 @@ export type { IconNameV2 } from './components/Icon';
 export type { ButtonV2Props } from './components/Button';
 export type { LinkV2Props } from './components/Link';
 export type { PageNotificationProps as PageNotificationV2Props } from './components/PageNotification';
+export type { AppNotificationProps as AppNotificationV2Props } from './components/AppNotification';