Merge branch 'feat/profiles' into feat/profiles-edit-create-form

jwplayer · Jul 14, 2023 · 9b4f95c · 9b4f95c
2 parents b40c144 + a35f4d1
commit 9b4f95c
Show file tree

Hide file tree

Showing 68 changed files with 119 additions and 68 deletions.
diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Alert> > renders and matches snapshot 1`] = `<div />`;
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap b/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap b/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CardGrid> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap b/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<OffersForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap b/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/components/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationDialog> > renders and matches snapshot 1`] = `<div />`;
diff --git a/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap b/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Dialog> > renders and matches snapshot 1`] = `
 <body

diff --git a/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ErrorPage> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap b/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Favorites> > renders and matches snapshot 1`] = `<div />`;
diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Filter> > renders Filter 1`] = `
 <div>

diff --git a/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
 <div>

diff --git a/src/components/Form/__snapshots__/Form.test.tsx.snap b/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Form> > renders Form 1`] = `
 <div>

diff --git a/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap b/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<FormFeedback> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Header /> > renders header 1`] = `
 <div>

diff --git a/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap b/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<HelperText> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<IconButton> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Link> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/LoadingOverlay/LoadingOverlay.module.scss b/src/components/LoadingOverlay/LoadingOverlay.module.scss
@@ -29,3 +29,12 @@
   height: 100%;
   background-color: rgba(variables.$black, 0.3);
 }
+
+.profile {
+  img {
+    position: absolute;
+    width: calc(#{variables.$base-spacing} * 8);
+    height: calc(#{variables.$base-spacing} * 8);
+    border-radius: 50%;
+  }
+}
diff --git a/src/components/LoadingOverlay/LoadingOverlay.tsx b/src/components/LoadingOverlay/LoadingOverlay.tsx
@@ -8,18 +8,21 @@ import Spinner from '#components/Spinner/Spinner';
 type Props = {
   transparentBackground?: boolean;
   inline?: boolean;
+  profileImageUrl?: string;
 };
 
-const LoadingOverlay = ({ transparentBackground = false, inline = false }: Props): JSX.Element => {
+const LoadingOverlay = ({ transparentBackground = false, inline = false, profileImageUrl = '' }: Props): JSX.Element => {
   const className = classNames(styles.loadingOverlay, {
     [styles.transparent]: transparentBackground,
     [styles.fixed]: !inline,
     [styles.inline]: inline,
+    [styles.profile]: profileImageUrl,
   });
 
   return (
     <div className={className}>
-      <Spinner />
+      {profileImageUrl && <img src={profileImageUrl} alt="Profile Avatar" />}
+      <Spinner size={profileImageUrl ? 'large' : 'medium'} />
     </div>
   );
 };

diff --git a/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LoginForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Logo/__snapshots__/Logo.test.tsx.snap b/src/components/Logo/__snapshots__/Logo.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Logo/> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/MarkdownComponent/__snapshots__/MarkdownComponent.test.tsx.snap b/src/components/MarkdownComponent/__snapshots__/MarkdownComponent.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<MarkdownComponent> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap b/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<MenuButton> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Modal> > renders and matches snapshot 1`] = `<div />`;
diff --git a/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap b/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap b/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<NoPaymentRequired> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<PasswordField> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap b/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<PasswordStrength> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap b/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<PayPal> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Payment> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap b/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<PaymentFailed> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
 <div>

diff --git a/src/components/Player/__snapshots__/Player.test.tsx.snap b/src/components/Player/__snapshots__/Player.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Player> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Popover> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Radio> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap b/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<RenewSubscriptionForm> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap b/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ResetPassword> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<SearchBar> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap b/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ShareButton> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap b/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Shelf Component tests > Featured shelf 1`] = `
 <div>

diff --git a/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<SideBar /> > renders sideBar 1`] = `
 <div>

diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss
@@ -30,6 +30,20 @@
   height: variables.$base-spacing;
 }
 
+.large {
+  width: 142px;
+  height: 142px;
+}
+
+.large div {
+  width: calc(#{variables.$base-spacing} * 8);
+  height: calc(#{variables.$base-spacing} * 8);
+}
+
+.large.buffer div {
+  border-color: variables.$red-dark variables.$white variables.$white variables.$white;
+}
+
 .buffer div:nth-child(1) {
   animation-delay: -0.45s;
 }

diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 import styles from './Spinner.module.scss';
 
 type Props = {
-  size?: 'small' | 'medium';
+  size?: 'small' | 'medium' | 'large';
   className?: string;
 };
 
 const Spinner = ({ size = 'medium', className = '' }: Props): JSX.Element => {
   return (
-    <div className={classNames(styles.buffer, className, { [styles.small]: size === 'small' })}>
+    <div className={classNames(styles.buffer, className, { [styles.small]: size === 'small', [styles.large]: size === 'large' })}>
       <div />
       <div />
       <div />

diff --git a/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap b/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<SubscriptionCancelled> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap b/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<SubscriptionRenewed> > renders and matches snapshot 1`] = `
 <div>

diff --git a/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 <div>