feat: add toast notification

player/react/src/lib/components/ui-toast-notification.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { CssClasses, SendSignal } from '../types';
+import {
+	ToastNotification
+} from '@carbon/react';
+
+import { commonSlots, slotsDisabled } from '../common-slots';
+
+export interface ToastNotificationState {
+	id: string;
+	type: string;
+	iconDescription?: string;
+	lowContrast?: boolean;
+	closeButtonHidden?: boolean;
+	kind?: string;
+	subtitle?: string;
+	title?: string;
+	caption?: string;
+	cssClasses?: CssClasses[];
+}
+
+export const type = 'toast-notification';
+
+export const signals = ['valueChange', 'click'];
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	isLowContrast: 'boolean',
+	setLowContrast: (state: ToastNotificationState) => ({
+		...state,
+		isLowContrast: true
+	}),
+	setHighContrast: (state: ToastNotificationState) => ({
+		...state,
+		isLowContrast: false
+	}),
+	toggleContrast: (state: ToastNotificationState) => ({
+		...state,
+		isLowContrast: !state.lowContrast
+	}),
+	closeButtonHidden: 'boolean',
+	hideCloseButton: (state: ToastNotificationState) => ({
+		...state,
+		closeButtonHidden: true
+	}),
+	showCloseButton: (state: ToastNotificationState) => ({
+		...state,
+		closeButtonHidden: false
+	}),
+	toggleCloseButtonVisibility: (state: ToastNotificationState) => ({
+		...state,
+		closeButtonHidden: !state.closeButtonHidden
+	}),
+	type: 'string',
+	kind: 'string',
+	subtitle: 'string',
+	title: 'string',
+	caption: 'string'
+};
+
+export const UIToastNotification = ({ state, sendSignal }: {
+	state: ToastNotificationState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'notification') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	return <ToastNotification
+		className={state.cssClasses?.map((cc: any) => cc.id).join(' ')}
+		onClose={() => sendSignal(state.id, 'close')}
+		caption={state.caption}
+		statusIconDescription={state.iconDescription}
+		hideCloseButton={state.closeButtonHidden}
+		lowContrast={state.lowContrast}
+		kind={state.kind}
+		subtitle={state.subtitle}
+		title={state.title} />;
+};

player/react/src/lib/utils.tsx

@@ -33,6 +33,7 @@ import { UITextAreaInput } from './components/ui-text-area';
 import { UITextInput } from './components/ui-text-input';
 import { UITile } from './components/ui-tile';
 import { UITileFold } from './components/ui-tile-fold';
+import { UIToastNotification } from './components/ui-toast-notification';
 import { UIToggle } from './components/ui-toggle';
 import { kebabCase } from 'lodash';
 import { SendSignal } from './types';
@@ -274,6 +275,9 @@ export const renderComponents = (
 		case 'tag':
 			return <UITag key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'toast-notification':
+			return <UIToastNotification key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'text':
 			return <UIText key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 

sdk/react/src/lib/fragment-components/a-toast-notification.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { AComponent, ComponentInfo } from './a-component';
+import image from './../assets/component-icons/toast-notification.svg';
+import { css, cx } from 'emotion';
+import {
+	Dropdown,
+	Checkbox,
+	TextInput,
+	ToastNotification
+} from '@carbon/react';
+import {
+	angularClassNamesFromComponentObj,
+	nameStringToVariableString,
+	reactClassNamesFromComponentObj
+} from '../helpers/tools';
+
+const preventCheckEventStyle = css`
+	pointer-events: none;
+`;
+
+export const AToastNotificationSettingsUI = ({ selectedComponent, setComponent }: any) => {
+	const kind = [
+		{ id: 'error', text: 'Error' },
+		{ id: 'info', text: 'Info' },
+		{ id: 'info-square', text: 'Info square' },
+		{ id: 'success', text: 'Success' },
+		{ id: 'warning', text: 'Warning' },
+		{ id: 'warning-alt', text: 'Alternative warning' }
+	];
+
+	return <>
+		<Checkbox
+			labelText='Hide close button'
+			id='hide-close-button'
+			checked={selectedComponent.closeButtonHidden}
+			onChange={(_: any, { checked }: any) => {
+				setComponent({
+					...selectedComponent,
+					closeButtonHidden: checked
+				});
+			}} />
+		<Checkbox
+			labelText='Low contrast'
+			id='low-contrast'
+			checked={selectedComponent.lowContrast}
+			onChange={(_: any, { checked }: any) => {
+				setComponent({
+					...selectedComponent,
+					lowContrast: checked
+				});
+			}} />
+		<Dropdown
+			id='notification-kind'
+			label='Notification kind'
+			titleText='Notification kind'
+			items={kind}
+			selectedItem={kind.find(item => item.id === selectedComponent.kind)}
+			itemToString={(item: any) => (item ? item.text : '')}
+			onChange={(event: any) => {
+				setComponent({
+					...selectedComponent,
+					kind: event.selectedItem.id
+				});
+			}} />
+		<TextInput
+			light
+			value={selectedComponent.title}
+			labelText='Title'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				title: event.currentTarget.value
+			})} />
+		<TextInput
+			light
+			value={selectedComponent.subtitle}
+			labelText='Subtitle text'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				subtitle: event.currentTarget.value
+			})} />
+		<TextInput
+			light
+			value={selectedComponent.caption}
+			labelText='Caption text'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				caption: event.currentTarget.value
+			})} />
+	</>;
+};
+
+export const AToastNotificationCodeUI = ({ selectedComponent, setComponent }: any) => {
+	return <TextInput
+		id='input-name'
+		value={selectedComponent.codeContext?.name}
+		labelText='Input name'
+		onChange={(event: any) => {
+			setComponent({
+				...selectedComponent,
+				codeContext: {
+					...selectedComponent.codeContext,
+					name: event.currentTarget.value
+				}
+			});
+		}}
+	/>;
+};
+
+export const AToastNotification = ({
+	componentObj,
+	...rest
+}: any) => {
+	return (
+		<AComponent
+		componentObj={componentObj}
+		rejectDrop={true}
+		{...rest}>
+			<ToastNotification
+				className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))}
+				caption={componentObj.caption}
+				hideCloseButton={componentObj.closeButtonHidden}
+				lowContrast={componentObj.lowContrast}
+				kind={componentObj.kind}
+				subtitle={componentObj.subtitle}
+				title={componentObj.title} />
+		</AComponent>
+	);
+};
+
+export const componentInfo: ComponentInfo = {
+	component: AToastNotification,
+	settingsUI: AToastNotificationSettingsUI,
+	codeUI: AToastNotificationCodeUI,
+	keywords: ['notification', 'toast', 'notify', 'alert'],
+	name: 'Toast notification',
+	type: 'toast-notification',
+	defaultComponentObj: {
+		type: 'toast-notification'
+	},
+	image,
+	codeExport: {
+		angular: {
+			latest: {
+				inputs: ({ json }) => `
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}NotificationObj: any = {
+					type: "${json.kind ? json.kind : 'error'}",
+					title: "${json.title ? json.title : ''}",
+					subtitle: "${json.subtitle ? json.subtitle : ''}",
+					caption: "${json.caption ? json.caption : ''}",
+					lowContrast:${!!json.lowContrast},
+					showClose: ${!!json.closeButtonHidden}
+				};`,
+				outputs: () => '',
+				imports: ['NotificationModule', 'ButtonModule'],
+				code: ({ json }) => `<cds-toast
+					${angularClassNamesFromComponentObj(json)}
+					[notificationObj]="${nameStringToVariableString(json.codeContext?.name)}NotificationObj">
+				</cds-toast>`
+			},
+			v10: {
+				inputs: ({ json }) => `
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}NotificationObj: any = {
+					type: "${json.kind ? json.kind : 'error'}",
+					title: "${json.title ? json.title : ''}",
+					subtitle: "${json.subtitle ? json.subtitle : ''}",
+					caption: "${json.caption ? json.caption : ''}",
+					lowContrast:${!!json.lowContrast},
+					showClose: ${!!json.closeButtonHidden}
+				};`,
+				outputs: () => '',
+				imports: ['NotificationModule', 'ButtonModule'],
+				code: ({ json }) => `<ibm-toast
+					${angularClassNamesFromComponentObj(json)}
+					[notificationObj]="${nameStringToVariableString(json.codeContext?.name)}NotificationObj">
+				</ibm-toast>`
+			}
+		},
+		react: {
+			latest: {
+				imports: ['ToastNotification'],
+				code: ({ json }) => `<ToastNotification
+					caption="${json.caption ? json.caption : ''}"
+					hideCloseButton={${!!json.closeButtonHidden}}
+					lowContrast={${!!json.lowContrast}}
+					kind="${json.kind ? json.kind : 'error'}"
+					${json.subtitle ? `subtitle="${json.subtitle}"`: ''}
+					timeout={${0}}
+					title="${json.title ? json.title : ''}"
+					onClose={(selectedItem) => handleInputChange({
+						target: {
+							name: "${nameStringToVariableString(json.codeContext?.name)}",
+							value: selectedItem
+						}
+					})}
+				${reactClassNamesFromComponentObj(json)} />`
+			},
+			v10: {
+				imports: ['ToastNotification'],
+				code: ({ json }) => `<ToastNotification
+					caption="${json.caption ? json.caption : ''}"
+					hideCloseButton={${!!json.closeButtonHidden}}
+					lowContrast={${!!json.lowContrast}}
+					kind="${json.kind ? json.kind : 'error'}"
+					${json.subtitle ? `subtitle="${json.subtitle}"`: ''}
+					timeout={${0}}
+					title="${json.title ? json.title : ''}"
+					onClose={(selectedItem) => handleInputChange({
+						target: {
+							name: "${nameStringToVariableString(json.codeContext?.name)}",
+							value: selectedItem
+						}
+					})}
+				${reactClassNamesFromComponentObj(json)} />`
+			}
+		}
+	}
+};

sdk/react/src/lib/fragment-components/index.ts

@@ -17,6 +17,7 @@ import * as radioGroup from './a-radio-group';
 import * as progressIndicator from './a-progress-indicator';
 import * as row from './a-row';
 import * as tag from './a-tag';
+import * as toastNotification from './a-toast-notification';
 import * as searchinput from './a-searchinput';
 import * as text from './a-text';
 import * as textarea from './a-text-area';
@@ -98,6 +99,7 @@ export const allComponents = {
 	row,
 	searchinput,
 	tag,
+	toastNotification,
 	text,
 	textarea,
 	textinput,