Quick Use Cases

Message Priority

When deciding what to use for a notification, you have to understand how important the message is to the user and/or the system.

High

Messages that persist across the entire app (system or account level)
Messages that require an interruption and user action to proceed
Messages that are important for users to see from ST’s perspective - new feature announcement etc.

Medium

Messages to indicate status of information on a page
Messages to indicate status of actions taken, including additional information on how to proceed

Low

Messages to indicate status of actions taken, without needing additional information or actions

| Name | High | Medium | Low | | :---------------------------- | :--: | :----: | :-: | | Announcement | ✓ | | | | Dialog | ✓ | | | | Toast | ✓ | ✓ | ✓ | | Banner | | ✓ | ✓ |

Announcement

Announcement component can be used for high priority notification that is persistent across the entire application. Primary use cases are to notify things such as *New Feature *or System-Wide status such as "Server is down" or "Unable to connect to the Internet." Announcements should not stack and only appear one at a time.

Dialog

Dialog is a component that can be used for notification. It can be used for high priority notification that interrupts user until an action is taken. A primary use case is Confirmation of Deletion on critical information.

Toast

Toast component can be used as any priority notifications. The notification is not bound to the current page content, and it can notify users about another part of the app. By default, it can stack up to 5 and also queues after 5 showing visually. A primary use case is a notification to show the progress bar.

<Toast.Group portal={false}>
	<Toast
		status="info"
		title="Import Adjustments"
		portal={false}
		onPrimaryActionClick={() => {}}
		primaryActionName="Cancel"
		duration={0}
	>
		In progress
		<ProgressBar progress={30} small blue className="m-t-1" />
	</Toast>
	<Toast
		status="success"
		title="Successful Import"
		onPrimaryActionClick={() => {}}
		primaryActionName="View Import"
		portal={false}
		duration={0}
	>
		<ProgressBar progress={100} small green className="m-t-3" />
	</Toast>
</Toast.Group>

Banner component is used for contextual(inline) notification for items such as a page or a section on a page. It can be used for medium to low priority notification and ideally placed above the related content. A primary use case is to show error messages for a form group.

<Card>
	<Card.Section>
		<Stack direction="column" spacing={2}>
			<Banner status="critical" title="First name is missing" />
			<Form>
				<Form.Group widths="equal">
					<Form.Input
						label="First Name"
						placeholder="Leia"
						error="Enter the first name"
					/>
					<Form.Input label="Last Name" value="Organa" />
				</Form.Group>
				<Form.Input label="Phone Number" value="000-000-0000" />
			</Form>
		</Stack>
	</Card.Section>
	<Card.Section>
		<ButtonGroup className="justify-content-end">
			<Button>Cancel</Button>
			<Button primary disabled>
				Save Contact
			</Button>
		</ButtonGroup>
	</Card.Section>
</Card>

Multiple Banners

For the same section with the same statuses, combine them into one Banner.

<Card>
	<Card.Section>
		<Banner
			status="critical"
			title="We're unable to submit the Timesheet"
			className="m-b-4"
		>
			<ul className="p-t-1-i">
				<li>A job must be selected.</li>
				<li>Arrived time cannot be before 7:00 AM </li>
				<li>Done date cannot be before arrived date. </li>
			</ul>
		</Banner>
		<Form>
			<Form.AnvilSelect
				trigger={{ placeholder: "Select a Job" }}
				label="Job #"
				error="A job must be selected."
				options={[]}
			/>
			<Form.Group widths="equal">
				<Form.Input label="Arrived Time" value="01/01/2020" />
				<Form.Input
					error="Arrived time cannot be before 7:00 AM."
					label=" "
					value="5:15 AM"
				/>
			</Form.Group>
			<Form.Group widths="equal" className="m-b-0">
				<Form.Input
					label="Done Time"
					value="12/31/2019"
					error="Done date cannot be before arrived date."
				/>
				<Form.Input label=" " value="11:00 AM" />
			</Form.Group>
		</Form>
	</Card.Section>
	<Card.Section>
		<ButtonGroup className="justify-content-end">
			<Button>Cancel</Button>
			<Button primary disabled>
				Submit Timesheet
			</Button>
		</ButtonGroup>
	</Card.Section>
</Card>

For the same section with different statuses, create a Banner for each with higher priority on top (max 2).

<Card>
	<Card.Section>
		<Banner
			status="critical"
			title="We're unable to submit the Timesheet"
			className="m-b-1"
		>
			<ul className="p-t-1-i">
				<li>A job must be selected.</li>
				<li>Arrived time cannot be before 7:00 AM </li>
				<li>Done date cannot be before arrived date. </li>
			</ul>
		</Banner>
		<Banner
			title={
				<>
					Tip: Checkout our guide on{" "}
					<Link primary>How to manage timesheets</Link>
				</>
			}
			className="m-b-4"
		/>
		<Form>
			<Form.AnvilSelect
				trigger={{ placeholder: "Select a Job" }}
				label="Job #"
				error="A job must be selected."
				options={[]}
			/>
			<Form.Group widths="equal">
				<Form.Input label="Arrived Time" value="01/01/2020" />
				<Form.Input
					error="Arrived time cannot be before 7:00 AM."
					label=" "
					value="5:15 AM"
				/>
			</Form.Group>
			<Form.Group widths="equal" className="m-b-0">
				<Form.Input
					label="Done Time"
					value="12/31/2019"
					error="Done date cannot be before arrived date."
				/>
				<Form.Input label=" " value="11:00 AM" />
			</Form.Group>
		</Form>
	</Card.Section>
	<Card.Section>
		<ButtonGroup className="justify-content-end">
			<Button>Cancel</Button>
			<Button primary disabled>
				Submit Timesheet
			</Button>
		</ButtonGroup>
	</Card.Section>
</Card>

Notification