feat(InlineNotification)!: introduce 2.0 component (#1903)

- add in 2.0 component with style/token changes
- add in updated design API properties

src/components/InlineNotification/InlineNotification-v2.module.css

@@ -0,0 +1,51 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+ # INLINE NOTIFICATION
+\*------------------------------------*/
+
+/**
+ * A messaging element that is used inline.
+ */
+.inline-notification {
+ display: flex;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+ border: 0.125rem solid;
+ border-left: 0.5rem solid;
+
+ /* NOTE: by specifying no default color for borders, they inherit from color below */
+ &.inline-notification--status-informational {
+ color: var(--eds-theme-color-text-utility-informational);
+ background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+ }
+
+ &.inline-notification--status-critical {
+ color: var(--eds-theme-color-text-utility-critical);
+ background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+ }
+
+ &.inline-notification--status-favorable {
+ color: var(--eds-theme-color-text-utility-favorable);
+ background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+ }
+
+ &.inline-notification--status-warning {
+ color: var(--eds-theme-color-text-utility-warning);
+ background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+ }
+}
+
+.inline-notification__icon {
+ flex-shrink: 0;
+}
+
+.inline-notification__body {
+ flex-grow: 2;
+}
+
+.inline-notification__sub-title {
+ color: var(--eds-theme-color-text-utility-default-secondary)
+}

src/components/InlineNotification/InlineNotification-v2.stories.ts

@@ -0,0 +1,52 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { InlineNotification } from './InlineNotification-v2';
+
+export default {
+ title: 'Components/V2/InlineNotification',
+ component: InlineNotification,
+ parameters: {
+ badges: ['intro-1.0', 'current-2.0'],
+ },
+ args: {
+ title: 'Inline notifications lorem ipsum text',
+ },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof InlineNotification>;
+
+export const Default: StoryObj<Args> = {};
+
+export const WithSubTitle: StoryObj<Args> = {
+ args: {
+ ...Default.args,
+ subTitle: 'Additional text which provides additional detail',
+ },
+};
+
+export const Favorable: StoryObj<Args> = {
+ args: {
+ ...WithSubTitle.args,
+ status: 'favorable',
+ },
+};
+
+export const Warning: StoryObj<Args> = {
+ args: {
+ ...WithSubTitle.args,
+ status: 'warning',
+ },
+};
+
+export const Critical: StoryObj<Args> = {
+ args: {
+ ...WithSubTitle.args,
+ status: 'critical',
+ },
+};
+
+export const LongText: StoryObj<Args> = {
+ args: {
+ title:
+ 'Long text inline notification. 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.',
+ },
+};

src/components/InlineNotification/InlineNotification-v2.tsx

@@ -0,0 +1,101 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import type { Status } from '../../util/variant-types';
+
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
+import styles from './InlineNotification-v2.module.css';
+
+/**
+ * TODO-AH:
+ * - feedback on api naming in figma
+ * - handling of aria-live for a11y
+ */
+
+type InlineNotificationProps = {
+ // Component API
+ /**
+ * CSS class names that can be appended to the component for styling.
+ */
+ className?: string;
+ // Design API
+ /**
+ * The text contents of the tag, nested inside the component, in addition to the icon.
+ */
+ title: string;
+ /**
+ * Text used for the main description of the notification
+ */
+ status?: Status;
+ /**
+ * Secondary text used to describe the notification in more detail
+ */
+ subTitle?: string;
+};
+
+/**
+ * Map statuses to existing icon names
+ * @param status component status
+ * @returns the matching icon name
+ */
+function getIconNameFromStatus(status: Status): IconName {
+ const map: Record<Status, IconName> = {
+ informational: 'info',
+ critical: 'dangerous',
+ warning: 'warning',
+ favorable: 'check-circle',
+ };
+ return map[status];
+}
+
+/**
+ * `import {InlineNotification} from "@chanzuckerberg/eds";`
+ *
+ * This component provides an inline banner accompanied with an icon for messaging users.
+ */
+export const InlineNotification = ({
+ className,
+ status = 'informational',
+ subTitle,
+ title,
+ ...other
+}: InlineNotificationProps) => {
+ const componentClassName = clsx(
+ styles['inline-notification'],
+ status && styles[`inline-notification--status-${status}`],
+ className,
+ );
+
+ return (
+ <div className={componentClassName} {...other}>
+ <Icon
+ className={styles['inline-notification__icon']}
+ name={getIconNameFromStatus(status)}
+ purpose="decorative"
+ size="1rem"
+ />
+ <div className={styles['inline-notication__body']}>
+ <Text
+ as="div"
+ className={styles[`inline-notification__title`]}
+ preset="title-xs"
+ >
+ {title}
+ </Text>
+ {subTitle && (
+ <Text
+ as="div"
+ className={styles[`inline-notification__sub-title`]}
+ preset="body-xs"
+ >
+ {subTitle}
+ </Text>
+ )}
+ </div>
+ </div>
+ );
+};
+
+InlineNotification.displayName = 'InlineNotification';

src/util/variant-types.ts

@@ -24,6 +24,11 @@ export type Align = 'left' | 'center' | 'right';
  */
 export type Hint = 'none' | 'required' | 'optional';
 
+/**
+ * Statuses tied to the state of information being displayed
+ */
+export type Status = 'informational' | 'warning' | 'favorable' | 'critical';
+
 /**
  * List of tier-2 and -3 tokens for use in types:
  * - src/design-tokens/tier-2-usage/typography.json