semanticModalsUsage.mdx

import { Meta } from '@storybook/blocks';

import SemanticModal from './images/SemanticModal.png';

Using semantic modals

Several different popup actions notify the user about what is going on around the platform. Notifications through the Toast component inform him about successful action results, and about what will eventually need the user's attention. The Toast component is mostly not related to the user's immediate actions - so how do we notify the user about immediate problems?

Inside the forms, whenever there's an error, the user gets an error message. When the user clicks on a button and the following action might cause some problems, it's good to send out an alert and ask the user to either proceed with the desired action or cancel it. That's what semantic modals are for.

The difference between notification and semantic modal is that notification displays the information and through actions leads you to where the problem is (another space), whereas the semantic modal allows you to execute the action directly.

Semantic modal parameters

Key	Type	Default	Description
title	string		The title of the modal (main message)
actions	array		Array accepts two ojects with properties described below - for primary and secondary button action
onClose	function		Executes whatever should happen on close button click
variant	string	info	Options are info, warn, error and ban
primaryButtonColor	string	primary	Can be changed to error or success
isPrimaryButtonLoading	boolean	false	If there's an ongoing process, we can turn the button into loading until the process resolves

Action

Key	Type	Default	Description
label	string		Action name of the button
onClick	function		Sets what happens on the button click
name	string		Button name parameter

import { SemanticModal, SemanticModalEnums } from 'securityscorecard/design-system';

/** ex. tries to turn off 2FA for the whole company
* this is not a desired action from the security standpoint
* to make sure this action is not made by accident
* we alert the user to confirm this is really what he wants to do
*/

const turnOff2FAModal = () => (
  <SemanticModal
    title="Turning off 2FA"
    message="You are going to turn off 2FA enforcement for your company. This action will decrease your sign up security. Are you sure you want to proceed?"
    actions={[
      {
        label: "Turn off 2FA",
        name: "turn off 2FA",
        onClick: () => proceed(),
      },
      {
        label: "Cancel",
        name: "cancel",
        onClick: () => cancel(),
      },
    ]}
    variant="danger"
    primaryButtonColor="error"
  />
);

...
  if(set2FA(user, false)) {
    displayModal(turnOff2FAModal, true)
  }