From 316f1679b7290917a7e73f0b4eb87a4099a01aed 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 - add in 2.0 component with style/token changes - add in updated design API properties --- .../InlineNotification-v2.module.css | 51 +++++++++ .../InlineNotification-v2.stories.ts | 52 +++++++++ .../InlineNotification-v2.tsx | 101 ++++++++++++++++++ src/util/variant-types.ts | 5 + 4 files changed, 209 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 000000000..99b900f61 --- /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 000000000..ebb377baa --- /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 000000000..a307a9d3a --- /dev/null +++ b/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 = { + 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 a7d426668..fe540f09e 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