Merge pull request #343 from wwnorton/feedback-modal

Feedback modal

package.json

@@ -93,6 +93,8 @@
     "@types/react-dom": "^17.0.19",
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.54.0",
+    "@types/sinon": "^17.0.3",
+    "sinon": "^17.0.1",
     "ava": "^3.15.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "cspell": "^6.28.0",

packages/core/src/_system.scss

@@ -29,6 +29,7 @@
 @forward 'components/checkbox' as checkbox-*;
 @forward 'components/disclosure' as disclosure-*;
 @forward 'components/dropdown' as dropdown-*;
+@forward 'components/feedback-modal' as feedback-modal-*;
 @forward 'components/field' as field-*;
 @forward 'components/icon' as icon-*;
 @forward 'components/link' as link-*;

packages/core/src/components/feedback-modal/index.scss

@@ -0,0 +1,34 @@
+@use 'tokens';
+@use '../../util';
+
+@mixin style {
+	@include util.declare(tokens.$name) {
+		.nds-#{tokens.$name} {
+			&__container {
+				display: flex;
+				gap: 1rem;
+			}
+
+			&__icon-container {
+				min-width: tokens.$icon-width;
+			}
+
+			&__icon {
+				width: tokens.$icon-width;
+				height: tokens.$icon-width;
+
+				&--correct {
+					color: tokens.$correct;
+				}
+
+				&--incorrect {
+					color: tokens.$incorrect;
+				}
+			}
+
+			&__heading {
+				margin-bottom: 0;
+			}
+		}
+	}
+}

packages/core/src/components/feedback-modal/tokens.scss

@@ -0,0 +1,4 @@
+$name: 'feedback-modal';
+$icon-width: 2.5rem;
+$correct: var(--nds-green-60);
+$incorrect: var(--nds-red-60);

packages/core/src/index.scss

@@ -90,6 +90,7 @@
 	@include nds.checkbox-style;
 	@include nds.disclosure-style;
 	@include nds.dropdown-style;
+	@include nds.feedback-modal-style;
 	@include nds.field-style;
 	@include nds.icon-style;
 	@include nds.link-style;

packages/react/src/components/FeedbackModal/FeedbackModal.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Modal } from '../Modal';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { FeedbackModalProps } from './types';
+import { css } from './tokens';
+
+/**
+ * A modal dialog that provides feedback about the chosen answer after it is submitted.
+ *
+ * Supplementary Feedback can be passed in `children`.
+ */
+export const FeedbackModal = ({
+	isCorrect, choiceLabel, choiceText, ...modalProps
+}: FeedbackModalProps) => {
+	const title = isCorrect ? 'Correct' : 'Incorrect';
+	const icon = isCorrect ? 'check-circle' : 'cancel';
+
+	return (
+		<Modal
+			title={title}
+			actions={(
+				<div>
+					<Button variant="outline" onClick={modalProps.onRequestClose}>Close</Button>
+				</div>
+			)}
+			{...modalProps}
+		>
+			<div className={css.container}>
+				<div className={css.iconContainer}>
+					<Icon
+						className={
+							classNames(
+								css.icon,
+								{ [css.iconCorrect]: isCorrect, [css.iconIncorrect]: !isCorrect },
+							)
+						}
+						variant={icon}
+					/>
+				</div>
+				<div>
+					<p className={css.heading}>
+						<strong>
+							Your answer was
+							{' '}
+							{' '}
+							{title.toLowerCase()}
+							:
+						</strong>
+					</p>
+					<p>
+						{choiceLabel}
+						.
+						{' '}
+						{choiceText}
+					</p>
+					{modalProps.children}
+				</div>
+			</div>
+		</Modal>
+	);
+};

packages/react/src/components/FeedbackModal/index.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeedbackModal } from '.';
+
+const meta: Meta<typeof FeedbackModal> = {
+	title: 'FeedbackModal',
+	component: FeedbackModal,
+};
+export default meta;
+
+type Story = StoryObj<typeof FeedbackModal>;
+
+const template: Story = {
+	render: ({ ...args }) => (
+		<FeedbackModal {...args}>
+			<p>
+				Answer feedback lorem ipsum dolor sit amet, consectetur adipiscing elit,
+				sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			</p>
+		</FeedbackModal>
+	),
+};
+
+export const Incorrect: Story = {
+	...template,
+	args: {
+		isOpen: true,
+		choiceText: 'Answer Choice 3',
+		choiceLabel: 'C',
+	},
+};
+
+export const Correct: Story = {
+	...template,
+	args: {
+		isOpen: true,
+		isCorrect: true,
+		choiceText: 'Answer Choice 3',
+		choiceLabel: 'C',
+	},
+};