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';