Merge pull request #592 from open-formulieren/refactor/3178-page-styl…

…es-to-nlds

Refactor container styles to NL DS

package.json

@@ -30,7 +30,7 @@
     "@floating-ui/react": "^0.24.2",
     "@formio/protected-eval": "^1.2.1",
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@open-formulieren/design-tokens": "^0.47.0",
+    "@open-formulieren/design-tokens": "^0.48.0",
     "@sentry/react": "^6.13.2",
     "@sentry/tracing": "^6.13.2",
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",

src/components/App.js

@@ -8,7 +8,6 @@ import AppDebug from 'components/AppDebug';
 import {Cosign} from 'components/CoSign';
 import Form from 'components/Form';
 import LanguageSelection from 'components/LanguageSelection';
-import {LayoutRow} from 'components/Layout';
 import {CreateAppointment, appointmentRoutes} from 'components/appointments';
 import ManageAppointment from 'components/appointments/ManageAppointment';
 import useFormContext from 'hooks/useFormContext';
@@ -42,13 +41,7 @@ export const routes = [
 
 const LanguageSwitcher = () => {
   const {languageSelectorTarget: target} = useContext(I18NContext);
-  return target ? (
-    ReactDOM.createPortal(<LanguageSelection />, target)
-  ) : (
-    <LayoutRow>
-      <LanguageSelection />
-    </LayoutRow>
-  );
+  return target ? ReactDOM.createPortal(<LanguageSelection />, target) : <LanguageSelection />;
 };
 
 /*

src/components/App.stories.js

@@ -5,14 +5,14 @@ import {RouterProvider, createMemoryRouter} from 'react-router-dom';
 import {FormContext} from 'Context';
 import {buildForm} from 'api-mocks';
 import {mockLanguageChoicePut, mockLanguageInfoGet} from 'components/LanguageSelection/mocks';
-import {ConfigDecorator} from 'story-utils/decorators';
+import {ConfigDecorator, LayoutDecorator} from 'story-utils/decorators';
 
 import App, {routes as nestedRoutes} from './App';
 
 export default {
   title: 'Private API / App',
   component: App,
-  decorators: [ConfigDecorator],
+  decorators: [LayoutDecorator, ConfigDecorator],
   args: {
     'form.translationEnabled': true,
   },

src/components/AppDisplay.js

@@ -1,14 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {Layout, LayoutRow} from 'components/Layout';
-
 const AppDisplay = ({router, languageSwitcher = null, appDebug = null}) => (
-  <Layout>
-    {languageSwitcher}
-    <LayoutRow>{router}</LayoutRow>
-    {appDebug && <LayoutRow>{appDebug}</LayoutRow>}
-  </Layout>
+  <div className="openforms-app">
+    {languageSwitcher && <div className="openforms-app__language-switcher">{languageSwitcher}</div>}
+    <div className="openforms-app__body">{router}</div>
+    {appDebug && <div className="openforms-app__debug">{appDebug}</div>}
+  </div>
 );
 
 AppDisplay.propTypes = {

src/components/Form.js

@@ -10,7 +10,6 @@ import ErrorBoundary from 'components/Errors/ErrorBoundary';
 import FormDisplay from 'components/FormDisplay';
 import FormStart from 'components/FormStart';
 import FormStep from 'components/FormStep';
-import {LayoutColumn} from 'components/Layout';
 import Loader from 'components/Loader';
 import PaymentOverview from 'components/PaymentOverview';
 import ProgressIndicator from 'components/ProgressIndicator';
@@ -258,11 +257,7 @@ const Form = () => {
   }
 
   if (loading || shouldAutomaticallyRedirect) {
-    return (
-      <LayoutColumn>
-        <Loader modifiers={['centered']} />
-      </LayoutColumn>
-    );
+    return <Loader modifiers={['centered']} />;
   }
 
   const progressIndicator = form.showProgressIndicator ? (

src/components/FormDisplay.js

@@ -1,8 +1,7 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {LayoutColumn} from 'components/Layout';
-
 /**
  * Layout component to render the form container.
  * @return {JSX}
@@ -15,14 +14,16 @@ const FormDisplay = ({
 }) => {
   const renderProgressIndicator = progressIndicator && showProgressIndicator && !isPaymentOverview;
   return (
-    <>
-      <LayoutColumn modifiers={['mobile-order-2', 'mobile-padding-top']}>{router}</LayoutColumn>
-      {renderProgressIndicator ? (
-        <LayoutColumn modifiers={['secondary', 'mobile-order-1', 'mobile-sticky']}>
-          {progressIndicator}
-        </LayoutColumn>
-      ) : null}
-    </>
+    <div
+      className={classNames('openforms-form', {
+        'openforms-form--body-only': !renderProgressIndicator,
+      })}
+    >
+      <div className="openforms-form__body">{router}</div>
+      {renderProgressIndicator && (
+        <div className="openforms-form__progress-indicator">{progressIndicator}</div>
+      )}
+    </div>
   );
 };
 

src/components/FormDisplay.stories.js

@@ -7,16 +7,7 @@ import FormDisplay from './FormDisplay';
 export default {
   title: 'Composites / Form display',
   component: FormDisplay,
-  argTypes: {
-    // showProgressIndicator: {control: 'boolean'},
-    // isPaymentOverview: {control: 'boolean'},
-    // router: {table: {disable: true}},
-    // progressIndicator: {table: {disable: true}},
-  },
   decorators: [LayoutDecorator],
-};
-
-export const Default = {
   render: args => (
     <FormDisplay
       router={
@@ -32,14 +23,22 @@ export const Default = {
       {...args}
     />
   ),
+  argTypes: {
+    router: {table: {disable: true}},
+    progressIndicator: {table: {disable: true}},
+  },
+};
+
+export const Default = {
   args: {
     showProgressIndicator: true,
     isPaymentOverview: false,
   },
-  argTypes: {
-    // showProgressIndicator: {control: 'boolean'},
-    // isPaymentOverview: {control: 'boolean'},
-    router: {table: {disable: true}},
-    progressIndicator: {table: {disable: true}},
+};
+
+export const WithoutProgressIndicator = {
+  args: {
+    showProgressIndicator: false,
+    isPaymentOverview: false,
   },
 };

src/components/Summary/CosignSummary.js

@@ -4,7 +4,6 @@ import {FormattedMessage, useIntl} from 'react-intl';
 import {useAsync} from 'react-use';
 
 import {post} from 'api';
-import {LayoutColumn} from 'components/Layout';
 import {LiteralsProvider} from 'components/Literal';
 import {RequireSession} from 'components/Sessions';
 import {SUBMISSION_ALLOWED} from 'components/constants';
@@ -84,26 +83,24 @@ const CosignSummary = ({
 
   return (
     <RequireSession expired={sessionExpired} expiryDate={expiryDate}>
-      <LayoutColumn modifiers={['mobile-order-2', 'mobile-padding-top']}>
-        <LiteralsProvider literals={form.literals}>
-          <GenericSummary
-            title={
-              <FormattedMessage
-                description="Check overview and co-sign"
-                defaultMessage="Check and co-sign submission"
-              />
-            }
-            submissionAllowed={SUBMISSION_ALLOWED.yes}
-            summaryData={summaryData}
-            showPaymentInformation={false}
-            editStepText=""
-            isLoading={loading || loadingData}
-            isAuthenticated={true}
-            onSubmit={onSubmit}
-            onLogout={onLogout}
-          />
-        </LiteralsProvider>
-      </LayoutColumn>
+      <LiteralsProvider literals={form.literals}>
+        <GenericSummary
+          title={
+            <FormattedMessage
+              description="Check overview and co-sign"
+              defaultMessage="Check and co-sign submission"
+            />
+          }
+          submissionAllowed={SUBMISSION_ALLOWED.yes}
+          summaryData={summaryData}
+          showPaymentInformation={false}
+          editStepText=""
+          isLoading={loading || loadingData}
+          isAuthenticated={true}
+          onSubmit={onSubmit}
+          onLogout={onLogout}
+        />
+      </LiteralsProvider>
     </RequireSession>
   );
 };

src/components/Summary/GenericSummary.js

@@ -5,7 +5,6 @@ import React from 'react';
 import Card from 'components/Card';
 import ErrorMessage from 'components/Errors/ErrorMessage';
 import FormStepSummary from 'components/FormStepSummary';
-import {LayoutColumn} from 'components/Layout';
 import Loader from 'components/Loader';
 import LogoutButton from 'components/LogoutButton';
 import Price from 'components/Price';
@@ -30,11 +29,7 @@ const GenericSummary = ({
   const Wrapper = submissionAllowed === SUBMISSION_ALLOWED.yes ? Form : 'div';
 
   if (isLoading) {
-    return (
-      <LayoutColumn>
-        <Loader modifiers={['centered']} />
-      </LayoutColumn>
-    );
+    return <Loader modifiers={['centered']} />;
   }
 
   return (

src/components/Summary/Summary.stories.js

@@ -1,5 +1,5 @@
 import {expect} from '@storybook/jest';
-import {userEvent, waitFor, within} from '@storybook/testing-library';
+import {userEvent, within} from '@storybook/testing-library';
 import cloneDeep from 'lodash/cloneDeep';
 import {withRouter} from 'storybook-addon-react-router-v6';
 
@@ -270,3 +270,14 @@ export const OnlyOneRequiredStatement = {
     expect(checkboxTruth).toBeNull();
   },
 };
+
+export const Loading = {
+  render,
+  parameters: {
+    // loader keeps spinning indefinitely
+    chromatic: {disableSnapshot: true},
+  },
+  args: {
+    isLoading: true,
+  },
+};

src/components/appointments/ManageAppointment.js

@@ -2,27 +2,24 @@ import React from 'react';
 import {Route, Routes} from 'react-router-dom';
 
 import ErrorBoundary from 'components/Errors/ErrorBoundary';
-import {LayoutColumn} from 'components/Layout';
 
 import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
 
 // with react router v6, these routes can be hoisted into the App if we'd like to
 
 const ManageAppointment = () => {
   return (
-    <LayoutColumn modifiers={['mobile-order-2', 'mobile-padding-top']}>
-      <Routes>
-        <Route
-          path=""
-          element={
-            <ErrorBoundary>
-              <CancelAppointment />
-            </ErrorBoundary>
-          }
-        />
-        <Route path="succes" element={<CancelAppointmentSuccess />} />
-      </Routes>
-    </LayoutColumn>
+    <Routes>
+      <Route
+        path=""
+        element={
+          <ErrorBoundary>
+            <CancelAppointment />
+          </ErrorBoundary>
+        }
+      />
+      <Route path="succes" element={<CancelAppointmentSuccess />} />
+    </Routes>
   );
 };
 

src/index.scss

@@ -4,9 +4,13 @@
 @import '~microscope-sass/lib/responsive';
 @import 'scss/settings';
 
+// Only for dev with 'yarn start'!
 body {
+  margin-block-end: 24px;
+  margin-block-start: 24px;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
   padding: 0;
-  margin-top: $grid-margin-4;
   background-color: #e6e6e6;
 
   @include mobile-only {
@@ -17,4 +21,5 @@ body {
 
 #root {
   margin: 0 auto;
+  max-inline-size: 1200px;
 }