From 9794b620f737d193bc4dac18a538237695caa58e Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 25 Mar 2024 10:42:53 -0500 Subject: [PATCH] feat(InlineNotification)!: introduce 2.0 component --- .../InlineNotification-v2.module.css | 51 +++++++++ .../InlineNotification-v2.stories.ts | 52 +++++++++ .../InlineNotification-v2.tsx | 102 ++++++++++++++++++ src/util/variant-types.ts | 5 + 4 files changed, 210 insertions(+) create mode 100644 src/components/InlineNotification/InlineNotification-v2.module.css create mode 100644 src/components/InlineNotification/InlineNotification-v2.stories.ts create mode 100644 src/components/InlineNotification/InlineNotification-v2.tsx diff --git a/src/components/InlineNotification/InlineNotification-v2.module.css b/src/components/InlineNotification/InlineNotification-v2.module.css new file mode 100644 index 0000000000..99b900f61f --- /dev/null +++ b/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) +} diff --git a/src/components/InlineNotification/InlineNotification-v2.stories.ts b/src/components/InlineNotification/InlineNotification-v2.stories.ts new file mode 100644 index 0000000000..ebb377baa4 --- /dev/null +++ b/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; + +type Args = React.ComponentProps; + +export const Default: StoryObj = {}; + +export const WithSubTitle: StoryObj = { + args: { + ...Default.args, + subTitle: 'Additional text which provides additional detail', + }, +}; + +export const Favorable: StoryObj = { + args: { + ...WithSubTitle.args, + status: 'favorable', + }, +}; + +export const Warning: StoryObj = { + args: { + ...WithSubTitle.args, + status: 'warning', + }, +}; + +export const Critical: StoryObj = { + args: { + ...WithSubTitle.args, + status: 'critical', + }, +}; + +export const LongText: StoryObj = { + 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.', + }, +}; diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx new file mode 100644 index 0000000000..5dd6846721 --- /dev/null +++ b/src/components/InlineNotification/InlineNotification-v2.tsx @@ -0,0 +1,102 @@ +import clsx from 'clsx'; +import React from 'react'; +import type { ReactNode } 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: ReactNode; + /** + * + */ + status?: Status; + /** + * + */ + subTitle?: ReactNode; +}; + +/** + * Map statuses to existing icon names + * @param status component status + * @returns the matching icon name + */ +function getIconNameFromStatus(status: Status): IconName { + const map: Record = { + 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 ( +
+ +
+ + {title} + + {subTitle && ( + + {subTitle} + + )} +
+
+ ); +}; + +InlineNotification.displayName = 'InlineNotification'; diff --git a/src/util/variant-types.ts b/src/util/variant-types.ts index a7d4266687..fe540f09ea 100644 --- a/src/util/variant-types.ts +++ b/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