Merge pull request #580 from open-formulieren/feature/467-alert-refactor

[#467] Alert refactor
open-formulieren · Nov 8, 2023 · a9dc69b · a9dc69b
2 parents 4e6604e + 8146c19
commit a9dc69b
Show file tree

Hide file tree

Showing 39 changed files with 303 additions and 147 deletions.
diff --git a/.storybook/decorators.js b/.storybook/decorators.js
@@ -8,3 +8,11 @@ export const withClearSessionStorage = Story => {
   window.sessionStorage.clear();
   return <Story />;
 };
+
+/**
+ * This decorator wraps stories so that they are inside a container with the class name "utrecht-document". This is
+ * needed so that components inherit the right font.
+ */
+export const utrechtDocumentDecorator = Story => {
+  return (<div className="utrecht-document utrecht-document--surface" ><Story/></div>);
+};
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -18,7 +18,7 @@ import 'styles.scss';
 import OpenFormsModule from 'formio/module';
 import OFLibrary from 'formio/templates';
 
-import {withClearSessionStorage} from './decorators';
+import {utrechtDocumentDecorator, withClearSessionStorage} from './decorators';
 import {reactIntl} from './reactIntl.js';
 
 initialize({
@@ -36,7 +36,7 @@ Formio.use(OpenFormsModule);
 Templates.current = OFLibrary;
 
 export default {
-  decorators: [mswDecorator, withClearSessionStorage],
+  decorators: [mswDecorator, withClearSessionStorage, utrechtDocumentDecorator],
   globals: {
     locale: reactIntl.defaultLocale,
     locales: {

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -37,6 +37,18 @@ should be set:
   looks of the cursor when hovering over a submit button. For the Open Forms theme, this is now
   ``pointer``.
 
+The alert component has also been refactored to use the Utrecht alert component. In order to
+maintain the same styles as in the previous version, the following Utrecht design tokens should be
+set:
+
+* ``--utrecht-alert-warning-background-color`` with the value of ``--of-alert-warning-bg``.
+* ``--utrecht-alert-info-background-color`` with the value of ``--of-alert-info-bg``.
+* ``--utrecht-alert-error-background-color`` with the value of ``--of-alert-error-bg``.
+* ``--utrecht-alert-icon-error-color`` with the value of ``--of-color-danger``.
+* ``--utrecht-alert-icon-info-color`` with the value of ``--of-color-info``.
+* ``--utrecht-alert-icon-warning-color`` with the value of ``--of-color-warning``.
+* ``--utrecht-alert-icon-ok-color`` with the value of ``--of-color-success``.
+
 1.5.4 (2023-10-30)
 ==================
 

diff --git a/design-tokens b/design-tokens
diff --git a/package.json b/package.json
@@ -30,11 +30,12 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.45.1",
+    "@open-formulieren/design-tokens": "^0.46.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "classnames": "^2.3.1",
+    "date-fns": "^2.30.0",
     "flatpickr": "^4.6.9",
     "formik": "^2.2.9",
     "formiojs": "4.13.12",
@@ -136,10 +137,10 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@utrecht/component-library-css": "^1.0.0-alpha.526",
-    "@utrecht/component-library-react": "^1.0.0-alpha.353",
-    "@utrecht/components": "^1.0.0-alpha.473",
-    "@utrecht/design-tokens": "^1.0.0-alpha.505",
+    "@utrecht/component-library-css": "1.0.0-alpha.604",
+    "@utrecht/component-library-react": "1.0.0-alpha.353",
+    "@utrecht/components": "1.0.0-alpha.565",
+    "@utrecht/design-tokens": "1.0.0-alpha.597",
     "babel-jest": "^27.4.2",
     "babel-loader": "^9.1.2",
     "babel-plugin-formatjs": "^10.3.8",

diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,7 @@
     />
     <title>Open Forms SDK</title>
   </head>
-  <body>
+  <body class="utrecht-document">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/components/CoSign/Cosign.js b/src/components/CoSign/Cosign.js
@@ -4,7 +4,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {CosignSummary} from 'components/Summary';
 import useFormContext from 'hooks/useFormContext';
 

diff --git a/src/components/CoSign/index.js b/src/components/CoSign/index.js
@@ -6,7 +6,7 @@ import {useAsync} from 'react-use';
 import {ConfigContext, SubmissionContext} from 'Context';
 import {get} from 'api';
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 import LoginOptionsDisplay from 'components/LoginOptions/LoginOptionsDisplay';
 import {getLoginUrl} from 'components/utils';

diff --git a/src/components/ErrorMessage.js b/src/components/ErrorMessage.js
diff --git a/src/components/ErrorBoundary.js → src/components/Errors/ErrorBoundary.js b/src/components/ErrorBoundary.js → src/components/Errors/ErrorBoundary.js
@@ -4,11 +4,12 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
 import Link from 'components/Link';
 import MaintenanceMode from 'components/MaintenanceMode';
 import {DEBUG} from 'utils';
 
+import ErrorMessage from './ErrorMessage';
+
 const logError = (error, errorInfo) => {
   DEBUG && console.error(error, errorInfo);
 };

diff --git a/src/components/Errors/ErrorMessage.js b/src/components/Errors/ErrorMessage.js
@@ -0,0 +1,32 @@
+import {Alert} from '@utrecht/component-library-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import useScrollIntoView from 'hooks/useScrollIntoView';
+
+const ICONS = {
+  error: <i className="fa fas fa-exclamation-circle" />,
+  info: <i className="fa fas fa-info-circle" />,
+  warning: <i className="fa fas fa-exclamation-triangle" />,
+  ok: <i className="fa fas fa-check-circle" />,
+};
+
+const ALERT_MODIFIERS = ['info', 'warning', 'error', 'ok'];
+
+const ErrorMessage = ({children, modifier = 'error'}) => {
+  const errorRef = useScrollIntoView();
+  if (!children) return null;
+  return (
+    <Alert type={modifier} icon={ICONS[modifier]} ref={errorRef}>
+      {children}
+    </Alert>
+  );
+};
+
+ErrorMessage.propTypes = {
+  children: PropTypes.node,
+  modifier: PropTypes.oneOf(ALERT_MODIFIERS),
+};
+
+export {ALERT_MODIFIERS};
+export default ErrorMessage;
diff --git a/src/components/Errors/Errors.mdx b/src/components/Errors/Errors.mdx
@@ -0,0 +1,21 @@
+import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
+
+import * as ErrorsStories from './Errors.stories';
+
+<Meta of={ErrorsStories} />
+
+# Error Message
+
+The error message component uses the
+[Utrecht Alert component](https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-alert--docs).
+
+<Canvas>
+  <Story of={ErrorsStories.ErrorMessageOkStory} />
+  <Story of={ErrorsStories.ErrorMessageInfoStory} />
+  <Story of={ErrorsStories.ErrorMessageErrorStory} />
+  <Story of={ErrorsStories.ErrorMessageWarningStory} />
+</Canvas>
+
+## Props
+
+<ArgTypes of={ErrorsStories} />
diff --git a/src/components/Errors/Errors.stories.js b/src/components/Errors/Errors.stories.js
@@ -0,0 +1,48 @@
+import ErrorMessage from './ErrorMessage';
+import {ALERT_MODIFIERS} from './ErrorMessage';
+
+export default {
+  title: 'Private API / Error Message',
+  render: ({message, modifier}) => <ErrorMessage modifier={modifier}>{message}</ErrorMessage>,
+  argTypes: {
+    modifier: {
+      options: ALERT_MODIFIERS,
+      control: {
+        type: 'radio',
+      },
+    },
+    children: {control: false},
+  },
+};
+
+export const ErrorMessageErrorStory = {
+  name: 'Error Message',
+  args: {
+    modifier: 'error',
+    message: 'Sadness, something went wrong.',
+  },
+};
+
+export const ErrorMessageOkStory = {
+  name: 'Ok Message',
+  args: {
+    modifier: 'ok',
+    message: 'Something went OK.',
+  },
+};
+
+export const ErrorMessageInfoStory = {
+  name: 'Info Message',
+  args: {
+    modifier: 'info',
+    message: 'This is an info!',
+  },
+};
+
+export const ErrorMessageWarningStory = {
+  name: 'Warning Message',
+  args: {
+    modifier: 'warning',
+    message: 'You are being warned.',
+  },
+};
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -6,7 +6,7 @@ import {useImmerReducer} from 'use-immer';
 
 import {ConfigContext} from 'Context';
 import {destroy} from 'api';
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';

diff --git a/src/components/LanguageSelection/LanguageSelection.stories.js b/src/components/LanguageSelection/LanguageSelection.stories.js
@@ -4,7 +4,7 @@ import {getWorker} from 'msw-storybook-addon';
 import React, {useState} from 'react';
 import {IntlProvider} from 'react-intl';
 
-import ErrorBoundary from 'components/ErrorBoundary';
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import {I18NContext} from 'i18n';
 import {ConfigDecorator} from 'story-utils/decorators';
 

diff --git a/src/components/MaintenanceMode.js b/src/components/MaintenanceMode.js
@@ -2,14 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import Body from 'components/Body';
 import Card from 'components/Card';
-import FAIcon from 'components/FAIcon';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {IsFormDesigner} from 'headers';
-import {getBEMClassName} from 'utils';
 
 const MaintenanceModeAlert = () => {
-  const alertClassName = getBEMClassName('alert', ['info']);
   const userIsFormDesigner = IsFormDesigner.getValue();
 
   let message;
@@ -32,14 +29,7 @@ const MaintenanceModeAlert = () => {
     );
   }
 
-  return (
-    <div className={alertClassName}>
-      <span className={getBEMClassName('alert__icon')}>
-        <FAIcon icon="info" />
-      </span>
-      <Body>{message}</Body>
-    </div>
-  );
+  return <ErrorMessage modifier="info">{message}</ErrorMessage>;
 };
 
 const MaintenanceMode = ({title, asToast = false}) => {

diff --git a/src/components/PaymentOverview/__snapshots__/test.spec.js.snap b/src/components/PaymentOverview/__snapshots__/test.spec.js.snap
@@ -18,18 +18,17 @@ exports[`navigation without context displays a generic error message 1`] = `
   >
      
     <div
-      className="openforms-alert openforms-alert--error"
+      className="utrecht-alert utrecht-alert--error"
     >
-      <span
-        className="openforms-alert__icon openforms-alert__icon--wide"
+      <div
+        className="utrecht-alert__icon"
       >
         <i
-          aria-hidden="true"
-          className="fa fas fa-icon fa-exclamation-circle"
+          className="fa fas fa-exclamation-circle"
         />
-      </span>
+      </div>
       <div
-        className="openforms-body"
+        className="utrecht-alert__message"
       >
         We can't display any payment information - did you maybe get here by accident?
       </div>
@@ -60,18 +59,17 @@ exports[`on valid redirect renders an error message on failure 1`] = `
       className="openforms-body"
     >
       <div
-        className="openforms-alert openforms-alert--error"
+        className="utrecht-alert utrecht-alert--error"
       >
-        <span
-          className="openforms-alert__icon openforms-alert__icon--wide"
+        <div
+          className="utrecht-alert__icon"
         >
           <i
-            aria-hidden="true"
-            className="fa fas fa-icon fa-exclamation-circle"
+            className="fa fas fa-exclamation-circle"
           />
-        </span>
+        </div>
         <div
-          className="openforms-body"
+          className="utrecht-alert__message"
         >
           The payment has failed. If you aborted the payment, please complete payment from the confirmation email.
         </div>

diff --git a/src/components/PaymentOverview/index.js b/src/components/PaymentOverview/index.js
@@ -5,7 +5,7 @@ import {useLocation} from 'react-router-dom';
 
 import Body from 'components/Body';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import useTitle from 'hooks/useTitle';
 

diff --git a/src/components/Sessions/RequireSession.js b/src/components/Sessions/RequireSession.js
@@ -7,7 +7,7 @@ import {ConfigContext} from 'Context';
 import {apiCall} from 'api';
 import {OFButton} from 'components/Button';
 import Card from 'components/Card';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import Link from 'components/Link';
 import {Toolbar, ToolbarList} from 'components/Toolbar';
 import Modal from 'components/modals/Modal';
@@ -137,7 +137,7 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
         setWarningDismissed(true);
       }}
     >
-      <ErrorMessage modifiers={['warning']}>
+      <ErrorMessage modifier="warning">
         <FormattedMessage
           description="Session expiry warning message (in modal)"
           defaultMessage="Your session is about to expire {delta}. Extend your session if you wish to continue."

diff --git a/src/components/StatementCheckboxes/StatementCheckbox.js b/src/components/StatementCheckboxes/StatementCheckbox.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 
 import Body from 'components/Body';
-import ErrorMessage from 'components/ErrorMessage';
+import ErrorMessage from 'components/Errors/ErrorMessage';
 import {FormioComponent} from 'components/formio';
 
 import './StatementCheckbox.scss';
@@ -41,7 +41,7 @@ const StatementCheckbox = ({configuration, showWarning = false}) => {
     <div className="openforms-privacy-checkbox">
       <FormioComponent component={formioDefinition} />
       {showWarning && (
-        <ErrorMessage modifiers={['warning']}>
+        <ErrorMessage modifier="warning">
           {intl.formatMessage(WARNINGS[configuration.key])}
         </ErrorMessage>
       )}
+2 −2		package-lock.json
+1 −1		package.json
+56 −0		src/community/utrecht/alert.tokens.json
+0 −18		src/components/alert.tokens.json