richie-education 2.24.0 → 2.25.0-b2.dev101

package/scss/vendors/cunningham-tokens.scss

@@ -1,133 +1,213 @@
-$theme: (
-  'colors': (
-    'primary-text': #ffffff,
-    'primary-100': #ffcad1,
-    'primary-200': #f19597,
-    'primary-300': #e86a6f,
-    'primary-400': #f2444b,
-    'primary-500': #f72c30,
-    'primary-600': #e81f2f,
-    'primary-700': #d60f29,
-    'primary-800': #c90022,
-    'primary-900': #bb0014,
-    'secondary-text': #555f6b,
-    'secondary-100': #eff8ff,
-    'secondary-200': #eaf3fd,
-    'secondary-300': #e2ebf5,
-    'secondary-400': #c0c9d3,
-    'secondary-500': #a3abb4,
-    'secondary-600': #79818a,
-    'secondary-700': #656c75,
-    'secondary-800': #454d55,
-    'secondary-900': #242b32,
-    'greyscale-000': #ffffff,
-    'greyscale-100': #fafafb,
-    'greyscale-200': #f3f4f4,
-    'greyscale-300': #e7e8ea,
-    'greyscale-400': #c2c6ca,
-    'greyscale-500': #9ea3aa,
-    'greyscale-600': #79818a,
-    'greyscale-700': #555f6b,
-    'greyscale-800': #303c4b,
-    'greyscale-900': #0c1a2b,
-    'success-text': #ffffff,
-    'success-100': #effcd3,
-    'success-200': #dbfaa9,
-    'success-300': #bef27c,
-    'success-400': #a0e659,
-    'success-500': #76d628,
-    'success-600': #5ab81d,
-    'success-700': #419a14,
-    'success-800': #2c7c0c,
-    'success-900': #1d6607,
-    'info-text': #ffffff,
-    'info-100': #ebf2fc,
-    'info-200': #8cb5ea,
-    'info-300': #5894e1,
-    'info-400': #377fdb,
-    'info-500': #055fd2,
-    'info-600': #0556bf,
-    'info-700': #044395,
-    'info-800': #033474,
-    'info-900': #022858,
-    'warning-text': #ffffff,
-    'warning-100': #fff8cd,
-    'warning-200': #ffef9b,
-    'warning-300': #ffe469,
-    'warning-400': #ffda43,
-    'warning-500': #ffc805,
-    'warning-600': #dba603,
-    'warning-700': #b78702,
-    'warning-800': #936901,
-    'warning-900': #7a5400,
-    'danger-text': #ffffff,
-    'danger-100': #f4b0b0,
-    'danger-200': #ee8a8a,
-    'danger-300': #e65454,
-    'danger-400': #e13333,
-    'danger-500': #da0000,
-    'danger-600': #c60000,
-    'danger-700': #9b0000,
-    'danger-800': #780000,
-    'danger-900': #5c0000,
-    'black': #090909,
-    'dark-grey': #232323,
-    'charcoal': #29303b,
-    'slate-grey': #686868,
-    'battleship-grey': #686f7a,
-    'light-grey': #d2d2d2,
-    'silver': #d5dbe0,
-    'azure2': #eceff1,
-    'smoke': #fdfdfd,
-    'white': #ffffff,
-    'denim': #0067b7,
-    'firebrick6': #f72c30,
-    'purplish-grey': #726c74,
-    'grey32': #525151,
-    'grey59': #969696,
-    'grey87': #dfdfdf,
-    'indianred3': #df484b,
-    'midnightblue': #141b2c,
-    'mantis': #76ce68,
-  ),
-  'font': (
-    'sizes': (
-      'h1': 1.75rem,
-      'h2': 1.375rem,
-      'h3': 1.125rem,
-      'h4': 0.8125rem,
-      'h5': 0.625rem,
-      'h6': 0.5rem,
-      'l': 1rem,
-      'm': 0.8125rem,
-      's': 0.6875rem,
-    ),
-    'weights': (
-      'thin': 200,
-      'light': 300,
-      'regular': 400,
-      'medium': 500,
-      'bold': 600,
-      'extrabold': 700,
-      'black': 800,
+$themes: (
+  'default': (
+    'theme': (
+      'colors': (
+        'secondary-text': #555f6b,
+        'secondary-100': #eff8ff,
+        'secondary-200': #eaf3fd,
+        'secondary-300': #e2ebf5,
+        'secondary-400': #c0c9d3,
+        'secondary-500': #a3abb4,
+        'secondary-600': #79818a,
+        'secondary-700': #656c75,
+        'secondary-800': #454d55,
+        'secondary-900': #242b32,
+        'info-text': #ffffff,
+        'info-100': #ebf2fc,
+        'info-200': #8cb5ea,
+        'info-300': #5894e1,
+        'info-400': #377fdb,
+        'info-500': #055fd2,
+        'info-600': #0556bf,
+        'info-700': #044395,
+        'info-800': #033474,
+        'info-900': #022858,
+        'greyscale-100': #fafafb,
+        'greyscale-200': #f3f4f4,
+        'greyscale-300': #e7e8ea,
+        'greyscale-400': #c2c6ca,
+        'greyscale-500': #9ea3aa,
+        'greyscale-600': #79818a,
+        'greyscale-700': #555f6b,
+        'greyscale-800': #303c4b,
+        'greyscale-900': #0c1a2b,
+        'greyscale-000': #ffffff,
+        'primary-100': #ffcad1,
+        'primary-200': #f19597,
+        'primary-300': #e86a6f,
+        'primary-400': #f2444b,
+        'primary-500': #f72c30,
+        'primary-600': #e81f2f,
+        'primary-700': #d60f29,
+        'primary-800': #c90022,
+        'primary-900': #bb0014,
+        'success-100': #effcd3,
+        'success-200': #dbfaa9,
+        'success-300': #bef27c,
+        'success-400': #a0e659,
+        'success-500': #76d628,
+        'success-600': #5ab81d,
+        'success-700': #419a14,
+        'success-800': #2c7c0c,
+        'success-900': #1d6607,
+        'warning-100': #fff8cd,
+        'warning-200': #ffef9b,
+        'warning-300': #ffe469,
+        'warning-400': #ffda43,
+        'warning-500': #ffc805,
+        'warning-600': #dba603,
+        'warning-700': #b78702,
+        'warning-800': #936901,
+        'warning-900': #7a5400,
+        'danger-100': #f4b0b0,
+        'danger-200': #ee8a8a,
+        'danger-300': #e65454,
+        'danger-400': #e13333,
+        'danger-500': #da0000,
+        'danger-600': #c60000,
+        'danger-700': #9b0000,
+        'danger-800': #780000,
+        'danger-900': #5c0000,
+        'primary-text': #ffffff,
+        'success-text': #ffffff,
+        'warning-text': #ffffff,
+        'danger-text': #ffffff,
+        'black': #090909,
+        'dark-grey': #232323,
+        'charcoal': #29303b,
+        'slate-grey': #686868,
+        'battleship-grey': #686f7a,
+        'light-grey': #d2d2d2,
+        'silver': #d5dbe0,
+        'azure2': #eceff1,
+        'smoke': #fdfdfd,
+        'white': #ffffff,
+        'denim': #0067b7,
+        'firebrick6': #f72c30,
+        'purplish-grey': #726c74,
+        'grey32': #525151,
+        'grey59': #969696,
+        'grey87': #dfdfdf,
+        'indianred3': #df484b,
+        'midnightblue': #141b2c,
+        'mantis': #76ce68,
+      ),
+      'font': (
+        'sizes': (
+          'h1': 1.75rem,
+          'h2': 1.375rem,
+          'h3': 1.125rem,
+          'h4': 0.8125rem,
+          'h5': 0.625rem,
+          'h6': 0.5rem,
+          'l': 1rem,
+          'm': 0.8125rem,
+          's': 0.6875rem,
+        ),
+        'weights': (
+          'thin': 200,
+          'light': 300,
+          'regular': 400,
+          'medium': 500,
+          'bold': 600,
+          'extrabold': 700,
+          'black': 800,
+        ),
+        'families': (
+          'base': Hind,
+          'accent': Montserrat,
+        ),
+        'letterSpacings': (
+          'h1': normal,
+          'h2': normal,
+          'h3': normal,
+          'h4': normal,
+          'h5': 1px,
+          'h6': normal,
+          'l': normal,
+          'm': normal,
+          's': normal,
+        ),
+      ),
+      'spacings': (
+        'xl': 4rem,
+        'l': 3rem,
+        'b': 1.625rem,
+        's': 1rem,
+        't': 0.5rem,
+        'st': 0.25rem,
+      ),
+      'transitions': (
+        'ease-in': cubic-bezier(0.32, 0, 0.67, 0),
+        'ease-out': cubic-bezier(0.33, 1, 0.68, 1),
+        'ease-in-out': cubic-bezier(0.65, 0, 0.35, 1),
+        'duration': 250ms,
+      ),
+      'breakpoints': (
+        'xs': 0,
+        'sm': 576px,
+        'md': 768px,
+        'lg': 992px,
+        'xl': 1200px,
+        'xxl': 1400px,
+      ),
     ),
-    'families': (
-      'base': Hind,
-      'accent': Montserrat,
+    'components': (
+      'button': (
+        'font-family': Montserrat,
+      ),
     ),
   ),
-  'spacings': (
-    'xl': 4rem,
-    'l': 3rem,
-    'b': 1.625rem,
-    's': 1rem,
-    't': 0.5rem,
-    'st': 0.25rem,
-  ),
-  'transitions': (
-    'ease-in': cubic-bezier(0.32, 0, 0.67, 0),
-    'ease-out': cubic-bezier(0.33, 1, 0.68, 1),
-    'ease-in-out': cubic-bezier(0.65, 0, 0.35, 1),
-    'duration': 250ms,
+  'dark': (
+    'theme': (
+      'colors': (
+        'greyscale-100': #182536,
+        'greyscale-200': #303c4b,
+        'greyscale-300': #555f6b,
+        'greyscale-400': #79818a,
+        'greyscale-500': #9ea3aa,
+        'greyscale-600': #c2c6ca,
+        'greyscale-700': #e7e8ea,
+        'greyscale-800': #f3f4f4,
+        'greyscale-900': #fafafb,
+        'greyscale-000': #0c1a2b,
+        'primary-100': #3b4c62,
+        'primary-200': #4d6481,
+        'primary-300': #6381a6,
+        'primary-400': #7fa5d5,
+        'primary-500': #8cb5ea,
+        'primary-600': #a3c4ee,
+        'primary-700': #c3d8f4,
+        'primary-800': #dde9f8,
+        'primary-900': #f4f8fd,
+        'success-100': #eef8d7,
+        'success-200': #d9f1b2,
+        'success-300': #bde985,
+        'success-400': #a0e25d,
+        'success-500': #76d628,
+        'success-600': #5bb520,
+        'success-700': #43941a,
+        'success-800': #307414,
+        'success-900': #225d10,
+        'warning-100': #f7f3d5,
+        'warning-200': #f0e5aa,
+        'warning-300': #e8d680,
+        'warning-400': #e3c95f,
+        'warning-500': #d9b32b,
+        'warning-600': #bd9721,
+        'warning-700': #9d7b1c,
+        'warning-800': #7e6016,
+        'warning-900': #684d12,
+        'danger-100': #f8d0d0,
+        'danger-200': #f09898,
+        'danger-300': #f09898,
+        'danger-400': #ed8585,
+        'danger-500': #e96666,
+        'danger-600': #dd6666,
+        'danger-700': #c36666,
+        'danger-800': #ae6666,
+        'danger-900': #9d6666,
+      ),
+    ),
   ),
 ) !default;

package/js/components/AddressesManagement/AddressForm.spec.tsx

@@ -1,206 +0,0 @@
-import { act, fireEvent, getByText, render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { Address } from 'types/Joanie';
-import { AddressFactory } from 'utils/test/factories/joanie';
-import AddressForm from './AddressForm';
-import { ErrorKeys } from './ValidationErrors';
-
-jest.mock('hooks/useAddresses', () => ({
-  useAddresses: () => ({
-    states: {
-      creating: false,
-      updating: false,
-    },
-  }),
-}));
-
-describe('AddressForm', () => {
-  const handleReset = jest.fn();
-  const onSubmit = jest.fn();
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-    jest.resetModules();
-  });
-
-  it('shows a note about required fields', () => {
-    const { container } = render(
-      <IntlProvider locale="en">
-        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
-      </IntlProvider>,
-    );
-
-    // we use this form of testing because screen.getByText doesn't seem
-    // to handle text broken into multiple DOM elements correctly
-    expect(container).toHaveTextContent('Fields marked with * are required');
-
-    // the note should be rendered before any inputs
-    // we assume that it's the case if it's the first child of the form
-    expect(
-      container.querySelector(
-        'form[name="address-form"] > .form__required-fields-note:first-child',
-      ),
-    ).not.toBeNull();
-  });
-
-  it('renders a button with label "Use this address" when no address is provided', () => {
-    render(
-      <IntlProvider locale="en">
-        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
-      </IntlProvider>,
-    );
-
-    screen.getByRole('button', { name: 'Use this address' });
-    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
-  });
-
-  it('renders a button with label "Use this address" and a cancel button when no address is provided', async () => {
-    const address: Address = AddressFactory().one();
-    render(
-      <IntlProvider locale="en">
-        <AddressForm handleReset={handleReset} onSubmit={onSubmit} address={address} />
-      </IntlProvider>,
-    );
-
-    screen.getByRole('button', { name: 'Update this address' });
-
-    const $button = screen.getByRole('button', { name: 'Cancel' });
-    await act(async () => {
-      fireEvent.click($button);
-    });
-    expect(handleReset).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders an error message when a value in the form is invalid', async () => {
-    render(
-      <IntlProvider locale="en">
-        <AddressForm handleReset={handleReset} onSubmit={onSubmit} />
-      </IntlProvider>,
-    );
-
-    screen.getByRole('form');
-    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
-    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
-    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
-    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
-    const $cityInput = screen.getByRole('textbox', { name: 'City' });
-    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
-    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
-    const $submitButton = screen.getByRole('button', {
-      name: 'Use this address',
-    }) as HTMLButtonElement;
-
-    // - submit button should be enabled even when the form is not valid,
-    //   so that every user can get feedback easily (especially screen reader users)
-    expect($submitButton.disabled).toBe(false);
-
-    // - User fulfills address fields
-    const address = AddressFactory().one();
-
-    await act(async () => {
-      fireEvent.input($titleInput, { target: { value: address.title } });
-      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
-      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
-      fireEvent.change($addressInput, { target: { value: address.address } });
-      fireEvent.change($cityInput, { target: { value: address.city } });
-      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
-      fireEvent.change($countryInput, { target: { value: address.country } });
-      // - As form validation is triggered on blur, we need to trigger this event in
-      //   order to update form state.
-      fireEvent.blur($countryInput);
-    });
-
-    // Once the form has been fulfilled properly, submit button should still be enabled.
-    expect($submitButton.disabled).toBe(false);
-
-    // Before submitting, we change field values to corrupt the form data
-    await act(async () => {
-      fireEvent.input($titleInput, { target: { value: 'a' } });
-      fireEvent.input($firstnameInput, { target: { value: '' } });
-      fireEvent.change($countryInput, { target: { value: '-' } });
-      fireEvent.click($submitButton);
-    });
-
-    expect(onSubmit).not.toHaveBeenCalled();
-
-    // Error messages should have been displayed.
-    // Title field should have a message saying that the value is too short.
-    getByText($titleInput.closest('.form-field')!, 'The minimum length is 2 chars.');
-    // Firstname field should have a message saying that the value is required.
-    getByText($firstnameInput.closest('.form-field')!, 'This field is required.');
-    // Country field should have a message saying that the value is not valid.
-    getByText($countryInput.closest('.form-field')!, `You must select a value.`);
-  });
-
-  it('renders default error message when error message does not exist', async () => {
-    jest.doMock('./ValidationErrors', () => ({
-      __esModule: true,
-      ...jest.requireActual('./ValidationErrors'),
-      errorMessages: {
-        [ErrorKeys.MIXED_INVALID]: {
-          id: 'components.AddressesManagement.validationSchema.mixedInvalid',
-          defaultMessage: 'This field is invalid.',
-          description: 'Error message displayed when a field value is invalid.',
-        },
-      },
-    }));
-
-    // Import locally to get module with mocked error messages.
-    const Form = jest.requireActual('./AddressForm').default;
-
-    render(
-      <IntlProvider locale="en">
-        <Form handleReset={handleReset} onSubmit={onSubmit} />
-      </IntlProvider>,
-    );
-
-    screen.getByRole('form');
-    const $titleInput = screen.getByRole('textbox', { name: 'Address title' });
-    const $firstnameInput = screen.getByRole('textbox', { name: "Recipient's first name" });
-    const $lastnameInput = screen.getByRole('textbox', { name: "Recipient's last name" });
-    const $addressInput = screen.getByRole('textbox', { name: 'Address' });
-    const $cityInput = screen.getByRole('textbox', { name: 'City' });
-    const $postcodeInput = screen.getByRole('textbox', { name: 'Postcode' });
-    const $countryInput = screen.getByRole('combobox', { name: 'Country' });
-    const $submitButton = screen.getByRole('button', {
-      name: 'Use this address',
-    }) as HTMLButtonElement;
-
-    // - button should never be disabled to allow user feedback at any time
-    expect($submitButton.disabled).toBe(false);
-
-    // - User fulfills address fields
-    const address = AddressFactory().one();
-
-    await act(async () => {
-      fireEvent.input($titleInput, { target: { value: address.title } });
-      fireEvent.change($firstnameInput, { target: { value: address.first_name } });
-      fireEvent.change($lastnameInput, { target: { value: address.last_name } });
-      fireEvent.change($addressInput, { target: { value: address.address } });
-      fireEvent.change($cityInput, { target: { value: address.city } });
-      fireEvent.change($postcodeInput, { target: { value: address.postcode } });
-      fireEvent.change($countryInput, { target: { value: address.country } });
-      // - As form validation is triggered on blur, we need to trigger this event in
-      //   order to update form state.
-      fireEvent.blur($countryInput);
-    });
-
-    // button should still be enabled especially now that there is no error
-    expect($submitButton.disabled).toBe(false);
-
-    // Before submitting, we change field values to corrupt the form data
-    await act(async () => {
-      fireEvent.input($titleInput, { target: { value: 'a' } });
-      fireEvent.input($firstnameInput, { target: { value: '' } });
-      fireEvent.change($countryInput, { target: { value: '-' } });
-      fireEvent.click($submitButton);
-    });
-
-    expect(onSubmit).not.toHaveBeenCalled();
-
-    // Default error messages should have been displayed.
-    getByText($titleInput.closest('.form-field')!, 'This field is invalid.');
-    getByText($firstnameInput.closest('.form-field')!, 'This field is invalid.');
-    getByText($countryInput.closest('.form-field')!, `This field is invalid.`);
-  });
-});