Part #19737 - Replace deprecated FormField component with TextField, Label, HelpText (#19859)

* Replacing deprecated components for component library components

* Update

* Lint fix

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

test/e2e/tests/custom-token-add-approve.spec.js

@@ -376,7 +376,7 @@ describe('Create token, approve token and approve token without gas', function (
 
         // set max spending cap
         await driver.clickElement({
-          css: '.custom-spending-cap__max',
+          css: '[data-testid="custom-spending-cap-max-button"]',
           text: 'Max',
         });
 

ui/components/app/app-components.scss

@@ -20,7 +20,6 @@
 @import 'connected-accounts-permissions/index';
 @import 'connected-sites-list/index';
 @import 'create-new-vault/create-new-vault.scss';
-@import 'custom-spending-cap/index';
 @import 'edit-gas-display/index';
 @import 'edit-gas-fee-button/index';
 @import 'edit-gas-fee-popover/index';

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -3,34 +3,20 @@
 exports[`CustomSpendingCap should match snapshot 1`] = `
 <div>
   <div
-    class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
+    class="mm-box custom-spending-cap mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
   >
     <div
-      class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
+      class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--width-full"
     >
+      <div>
         <label
+          class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-right-1 mm-box--display-inline mm-box--align-items-center mm-box--color-text-default"
           for="custom-spending-cap"
-      >
-        <div
-          class="form-field"
-        >
-          <div
-            class="mm-box"
-          >
-            <div
-              class="form-field__heading"
-            >
-              <div
-                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
-              >
-                <h6
-                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
         >
           Custom spending cap
-                </h6>
-                
+        </label>
         <div
-                  class="box box--display-inline-block box--flex-direction-row"
+          class="mm-box mm-box--display-inline-flex mm-box--align-items-center"
         >
           <div>
             <div
@@ -42,7 +28,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
               tabindex="0"
             >
               <span
-                        class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
+                class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-icon-alternative"
                 style="mask-image: url('./images/icons/question.svg');"
               />
             </div>
@@ -50,37 +36,34 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
         </div>
       </div>
     </div>
+    <div
+      class="box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate box--padding-right-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
+    >
       <input
-              class="form-field__input"
+        autocomplete="off"
+        class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--padding-inline-end-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
         data-testid="custom-spending-cap-input"
+        focused="true"
         id="custom-spending-cap"
         placeholder="Enter a number"
         type="text"
         value="7"
       />
-            
-          </div>
-        </div>
-        <div
-          class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
-        >
       <button
         class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+        data-testid="custom-spending-cap-max-button"
       >
         Max
       </button>
     </div>
     <div
-          class="mm-box custom-spending-cap__description"
-        >
-          <h6
-            class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
+      class="mm-box mm-text mm-help-text mm-text--body-sm mm-box--color-text-default"
     >
       <span>
          
         This allows the third party to spend 
         <span
-                class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
+          class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
         >
           7
            
@@ -89,17 +72,15 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
          from your current balance.
          
       </span>
-          </h6>
+    </div>
     <a
-            class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+      class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
       href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+      rel="noopener noreferrer"
       target="_blank"
     >
       Learn more
     </a>
   </div>
-      </label>
-    </div>
-  </div>
 </div>
 `;

ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

@@ -1,31 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '../../ui/box';
 import Tooltip from '../../ui/tooltip';
 import {
   TextColor,
   TextVariant,
   Display,
+  AlignItems,
+  IconColor,
 } from '../../../helpers/constants/design-system';
 
-import { Icon, IconName, IconSize, Text } from '../../component-library';
+import { Icon, IconName, IconSize, Text, Box } from '../../component-library';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,
   tooltipIcon,
 }) => (
-  <Box display={Display.InlineBlock}>
+  <Box display={Display.InlineFlex} alignItems={AlignItems.center}>
     <Tooltip
       interactive
       position="top"
       html={
-        <Text
-          variant={TextVariant.bodySm}
-          as="h6"
-          margin={3}
-          color={TextColor.textAlternative}
-          className="form-field__heading-title__tooltip"
-        >
+        <Text variant={TextVariant.bodySm} color={TextColor.textAlternative}>
           {tooltipContentText}
         </Text>
       }
@@ -33,13 +28,16 @@ export const CustomSpendingCapTooltip = ({
       {tooltipIcon ? (
         <Icon
           name={IconName.Danger}
-          className="form-field__heading-title__tooltip__warning-icon"
           size={IconSize.Inherit}
-          style={{ 'vertical-align': 'bottom' }}
+          color={IconColor.errorDefault}
         />
       ) : (
         tooltipIcon !== '' && (
-          <Icon name={IconName.Question} size={IconSize.Inherit} />
+          <Icon
+            name={IconName.Question}
+            size={IconSize.Inherit}
+            color={IconColor.iconAlternative}
+          />
         )
       )}
     </Tooltip>

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -1,25 +1,30 @@
 import React, { useState, useContext, useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import BigNumber from 'bignumber.js';
 import { addHexPrefix } from 'ethereumjs-util';
-
 import { I18nContext } from '../../../contexts/i18n';
-import FormField from '../../ui/form-field';
-import { Text, ButtonLink, Icon, IconName, Box } from '../../component-library';
 import {
   AlignItems,
   Display,
   FlexDirection,
-  TextAlign,
   TextVariant,
-  JustifyContent,
   Size,
-  BlockSize,
   BackgroundColor,
   TextColor,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
+import {
+  Text,
+  ButtonLink,
+  Icon,
+  IconName,
+  IconSize,
+  Label,
+  TextField,
+  HelpText,
+  Box,
+} from '../../component-library';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
 import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
@@ -81,7 +86,6 @@ export default function CustomSpendingCap({
             key="custom-spending-cap"
             variant={TextVariant.bodySmBold}
             as="span"
-            className="custom-spending-cap__input-value-and-token-name"
           >
             {replaceCommaToDot(inputNumber)} {tokenName}
           </Text>,
@@ -198,7 +202,8 @@ export default function CustomSpendingCap({
           as="span"
           color={TextColor.errorDefault}
         >
-          <Icon name={IconName.Warning} /> {t('beCareful')}
+          <Icon name={IconName.Danger} size={IconSize.Inherit} />{' '}
+          {t('beCareful')}
         </Text>,
       ])
     : t('inputLogicEmptyState');
@@ -207,38 +212,28 @@ export default function CustomSpendingCap({
     <>
       <Box
         className="custom-spending-cap"
-        borderRadius={Size.SM}
-        paddingTop={2}
-        paddingRight={6}
-        paddingLeft={6}
         display={Display.Flex}
         alignItems={AlignItems.flexStart}
         flexDirection={FlexDirection.Column}
-        backgroundColor={BackgroundColor.backgroundAlternative}
         gap={2}
+        padding={4}
+        backgroundColor={BackgroundColor.backgroundAlternative}
+        borderRadius={Size.SM}
       >
         <Box
-          justifyContent={JustifyContent.center}
-          display={Display.Block}
-          className="custom-spending-cap__input"
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          gap={1}
+          width={BlockSize.Full}
         >
-          <label
-            htmlFor={
-              decConversionGreaterThan(customSpendingCap, currentTokenBalance)
-                ? 'custom-spending-cap-input-value'
-                : 'custom-spending-cap'
-            }
+          <div>
+            <Label
+              htmlFor="custom-spending-cap"
+              display={Display.Inline}
+              marginRight={1}
             >
-            <FormField
-              inputRef={inputRef}
-              dataTestId="custom-spending-cap-input"
-              wrappingLabelProps={{ as: 'div' }}
-              id={
-                decConversionGreaterThan(customSpendingCap, currentTokenBalance)
-                  ? 'custom-spending-cap-input-value'
-                  : 'custom-spending-cap'
-              }
-              TooltipCustomComponent={
+              {t('customSpendingCap')}
+            </Label>
             <CustomSpendingCapTooltip
               tooltipContentText={
                 replaceCommaToDot(customSpendingCap)
@@ -254,15 +249,10 @@ export default function CustomSpendingCap({
                   : ''
               }
             />
-              }
-              onChange={handleChange}
-              titleText={t('customSpendingCap')}
-              placeholder={t('enterANumber')}
-              error={error}
-              value={customSpendingCap}
-              titleDetail={
-                showUseSiteSuggestionButton && (
+          </div>
+          {showUseSiteSuggestionButton && (
             <ButtonLink
+              marginLeft="auto"
               size={Size.auto}
               onClick={(e) => {
                 e.preventDefault();
@@ -272,57 +262,54 @@ export default function CustomSpendingCap({
             >
               {t('useSiteSuggestion')}
             </ButtonLink>
+          )}
+        </Box>
+        <TextField
+          inputRef={inputRef}
+          inputProps={{
+            'data-testid': 'custom-spending-cap-input',
+            color: decConversionGreaterThan(
+              customSpendingCap,
+              currentTokenBalance,
             )
-              }
-              titleDetailWrapperProps={{ marginBottom: 2, marginRight: 0 }}
-            />
-            <Box
-              width={BlockSize.Max}
-              marginLeft="auto"
-              paddingRight={4}
-              paddingBottom={2}
-              textAlign={TextAlign.End}
-              className={classnames('custom-spending-cap__max', {
-                'custom-spending-cap__max--with-error-message': error,
-              })}
-            >
+              ? TextColor.errorDefault
+              : TextColor.textDefault,
+            paddingInlineEnd: 4,
+          }}
+          id="custom-spending-cap"
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder={t('enterANumber')}
+          value={customSpendingCap}
+          endAccessory={
             <ButtonLink
-                size={Size.auto}
               onClick={(e) => {
                 e.preventDefault();
                 handleChange(currentTokenBalance);
               }}
+              data-testid="custom-spending-cap-max-button"
             >
               {t('max')}
             </ButtonLink>
-            </Box>
-            <Box
-              className={classnames('custom-spending-cap__description', {
-                'custom-spending-cap__description--with-error-message': error,
-              })}
-            >
-              <Text
-                color={TextColor.textDefault}
+          }
+          width={BlockSize.Full}
+        />
+        <HelpText
+          color={error ? TextColor.errorDefault : TextColor.textDefault}
           variant={TextVariant.bodySm}
-                as="h6"
-                paddingTop={2}
         >
-                {replaceCommaToDot(customSpendingCap)
+          {error ||
+            (replaceCommaToDot(customSpendingCap)
               ? customSpendingCapText
-                  : inputLogicEmptyStateText}
-              </Text>
+              : inputLogicEmptyStateText)}
+        </HelpText>
         <ButtonLink
           size={Size.SM}
           href={ZENDESK_URLS.TOKEN_ALLOWANCE_WITH_SPENDING_CAP}
-                target="_blank"
-                marginBottom={2}
+          externalLink
         >
           {t('learnMoreUpperCase')}
         </ButtonLink>
       </Box>
-          </label>
-        </Box>
-      </Box>
     </>
   );
 }

ui/components/app/custom-spending-cap/custom-spending-cap.stories.js

@@ -1,21 +1,25 @@
 import React from 'react';
+import { useArgs } from '@storybook/client-api';
+
 import CustomSpendingCap from './custom-spending-cap';
 
 export default {
   title: 'Components/App/CustomSpendingCap',
-
   argTypes: {
+    txParams: {
+      control: 'object',
+    },
     tokenName: {
-      control: { type: 'text' },
+      control: 'text',
     },
     currentTokenBalance: {
-      control: { type: 'number' },
+      control: 'text',
     },
     dappProposedValue: {
-      control: { type: 'text' },
+      control: 'text',
     },
     siteOrigin: {
-      control: { type: 'text' },
+      control: 'text',
     },
     passTheErrorText: {
       action: 'passTheErrorText',
@@ -23,32 +27,55 @@ export default {
     decimals: {
       control: 'text',
     },
+    setInputChangeInProgress: {
+      action: 'setInputChangeInProgress',
+    },
     customSpendingCap: {
-      control: { type: 'text' },
+      control: 'text',
+    },
+    setCustomSpendingCap: {
+      action: 'setCustomSpendingCap',
     },
   },
   args: {
     tokenName: 'DAI',
-    currentTokenBalance: 200.12,
+    currentTokenBalance: '200.12',
     dappProposedValue: '7',
     siteOrigin: 'Uniswap.org',
     decimals: '4',
     customSpendingCap: '7',
+    txParams: {
+      data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+      from: '0x8eeee1781fd885ff5ddef7789486676961873d12',
+      gas: '0xb41b',
+      maxFeePerGas: '0x4a817c800',
+      maxPriorityFeePerGas: '0x4a817c800',
+      to: '0x665933d73375e385bef40abcccea8b4cccc32d4c',
+      value: '0x0',
+    },
   },
 };
 
-export const DefaultStory = (args) => {
-  return <CustomSpendingCap {...args} />;
+const Template = (args) => {
+  const [{ customSpendingCap }, updateArgs] = useArgs();
+  const handleOnChange = (value) => {
+    updateArgs({ customSpendingCap: value });
+  };
+  return (
+    <CustomSpendingCap
+      {...args}
+      customSpendingCap={customSpendingCap}
+      setCustomSpendingCap={handleOnChange}
+    />
+  );
 };
 
+export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const CustomSpendingCapStory = (args) => {
-  return <CustomSpendingCap {...args} />;
-};
-CustomSpendingCapStory.storyName = 'CustomSpendingCapStory';
+export const CustomSpendingCapStory = Template.bind({});
+CustomSpendingCapStory.storyName = 'CustomSpendingCap';
 
 CustomSpendingCapStory.args = {
-  ...DefaultStory.args,
   customSpendingCap: '8',
 };

ui/components/app/custom-spending-cap/index.scss

@@ -1,41 +0,0 @@
-.custom-spending-cap {
-  &__input-value-and-token-name {
-    display: contents;
-  }
-
-  &__max {
-    position: relative;
-    margin-top: -30px;
-
-    &--with-error-message {
-      margin-top: -66px;
-    }
-  }
-
-  &__input {
-    width: 100%;
-  }
-
-  &__description {
-    word-break: break-word;
-
-    &--with-error-message {
-      margin-top: 30px;
-    }
-  }
-
-  #custom-spending-cap-input-value {
-    color: var(--color-error-default);
-    padding-inline-end: 60px;
-  }
-
-  #custom-spending-cap {
-    padding-inline-end: 60px;
-  }
-
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']:hover::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-}

ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -344,34 +344,20 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
       class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row"
     >
       <div
-        class="mm-box custom-spending-cap mm-box--padding-top-2 mm-box--padding-right-6 mm-box--padding-left-6 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
+        class="mm-box custom-spending-cap mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column mm-box--align-items-flex-start mm-box--background-color-background-alternative mm-box--rounded-sm"
       >
         <div
-          class="mm-box custom-spending-cap__input mm-box--display-block mm-box--justify-content-center"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--align-items-center mm-box--width-full"
         >
+          <div>
             <label
+              class="mm-box mm-text mm-label mm-label--html-for mm-text--body-md mm-text--font-weight-medium mm-box--margin-right-1 mm-box--display-inline mm-box--align-items-center mm-box--color-text-default"
               for="custom-spending-cap"
-          >
-            <div
-              class="form-field"
-            >
-              <div
-                class="mm-box"
-              >
-                <div
-                  class="form-field__heading"
-                >
-                  <div
-                    class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
-                  >
-                    <h6
-                      class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
             >
               Custom spending cap
-                    </h6>
-                    
+            </label>
             <div
-                      class="box box--display-inline-block box--flex-direction-row"
+              class="mm-box mm-box--display-inline-flex mm-box--align-items-center"
             >
               <div>
                 <div
@@ -383,7 +369,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
                   tabindex="0"
                 >
                   <span
-                            class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-inherit"
+                    class="mm-box mm-icon mm-icon--size-inherit mm-box--display-inline-block mm-box--color-icon-alternative"
                     style="mask-image: url('./images/icons/question.svg');"
                   />
                 </div>
@@ -391,37 +377,34 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="box mm-text-field mm-text-field--size-md mm-text-field--focused mm-text-field--truncate box--padding-right-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid"
+        >
           <input
-                  class="form-field__input"
+            autocomplete="off"
+            class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--padding-inline-end-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
             data-testid="custom-spending-cap-input"
+            focused="true"
             id="custom-spending-cap"
             placeholder="Enter a number"
             type="text"
             value="7"
           />
-                
-              </div>
-            </div>
-            <div
-              class="mm-box custom-spending-cap__max mm-box--margin-left-auto mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--text-align-end mm-box--width-max"
-            >
           <button
             class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+            data-testid="custom-spending-cap-max-button"
           >
             Max
           </button>
         </div>
         <div
-              class="mm-box custom-spending-cap__description"
-            >
-              <h6
-                class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
+          class="mm-box mm-text mm-help-text mm-text--body-sm mm-box--color-text-default"
         >
           <span>
              
             This allows the third party to spend 
             <span
-                    class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
+              class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
             >
               7
                
@@ -430,18 +413,16 @@ exports[`TokenAllowancePage should match snapshot 1`] = `
              from your current balance.
              
           </span>
-              </h6>
+        </div>
         <a
-                class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+          class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+          rel="noopener noreferrer"
           target="_blank"
         >
           Learn more
         </a>
       </div>
-          </label>
-        </div>
-      </div>
     </div>
     <div
       class="box box--display-flex box--flex-direction-row box--justify-content-center"