[MMI] compliance settings component (#18274)

* MMI-2657 adds the compliance settings screen * MMI-2657 adds stories file * review fixes * review fixes * lint fix * clean up * Update ui/components/institutional/compliance-settings/compliance-settings.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * lint fix * snaps update * Button update --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
2024-10-22 11:22:43 +02:00 · 2023-03-30 11:40:37 +01:00 · 2023-03-30 11:40:37 +01:00 · 9f89d71c6f
commit 9f89d71c6f
parent b5184db620
4 changed files with 75 additions and 74 deletions
--- a/ui/components/institutional/compliance-settings/snapshots/compliance-settings.test.js.snap
+++ b/ui/components/institutional/compliance-settings/snapshots/compliance-settings.test.js.snap
@ -5,31 +5,27 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
  <div
    class="box box--flex-direction-row"
  >
-    <div
-      class="box institutional-feature__content box--flex-direction-row"
+    <h6
+      class="box mm-text institutional-feature__content mm-text--body-sm box--flex-direction-row box--color-text-default"
    >
      Change your settings or view reports by opening up Codefi Compliance or disconnect below.
-    </div>
-    <footer
-      class="institutional-feature__footer"
+    </h6>
+    <div
+      class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
    >
      <button
-        class="button btn--rounded btn-default btn--large"
+        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
        data-testid="disconnect-compliance"
-        role="button"
-        tabindex="0"
      >
        Disconnect
      </button>
      <button
-        class="button btn--rounded btn-primary"
+        class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
        data-testid="start-compliance"
-        role="button"
-        tabindex="0"
      >
        Open Codefi Compliance
      </button>
-    </footer>
+    </div>
  </div>
 </div>
 `;
@ -42,6 +38,7 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
  >
    <div
      class="box institutional-feature__content box--flex-direction-row"
+      variant="body-sm"
    >
      <p
        class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
@ -79,19 +76,16 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
    <div
      class="box box--display-flex box--flex-direction-row box--justify-content-center"
    >
-      <footer
-        class="institutional-feature__footer"
-        padding="4,6"
+      <div
+        class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
      >
        <button
-          class="button btn--rounded btn-primary"
+          class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
          data-testid="start-compliance"
-          role="button"
-          tabindex="0"
        >
          Open Codefi Compliance
        </button>
-      </footer>
+      </div>
    </div>
  </div>
 </div>
--- a/ui/components/institutional/compliance-settings/compliance-settings.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.js
@ -5,12 +5,19 @@ import {
  DISPLAY,
  TextColor,
  FLEX_DIRECTION,
+  TextVariant,
+  BorderStyle,
+  BorderColor,
 } from '../../../helpers/constants/design-system';
 import { I18nContext } from '../../../contexts/i18n';
 import { mmiActionsFactory } from '../../../store/institutional/institution-background';
-import { Text } from '../../component-library';
+import {
+  Text,
+  Button,
+  BUTTON_TYPES,
+  BUTTON_SIZES,
+} from '../../component-library';
 import Box from '../../ui/box';
-import Button from '../../ui/button';

 const ComplianceSettings = () => {
  const t = useContext(I18nContext);
@ -21,48 +28,48 @@ const ComplianceSettings = () => {
    Boolean(state.metamask.institutionalFeatures?.complianceProjectId),
  );

-  const disconnectFromCompliance = async () => {
-    await dispatch(mmiActions.deleteComplianceAuthData());
-  };
-
-  const renderDisconnect = () => {
-    return (
-      <Button
-        type="default"
-        large
-        onClick={disconnectFromCompliance}
-        data-testid="disconnect-compliance"
-      >
-        {t('disconnect')}
-      </Button>
-    );
-  };
-
-  const renderLinkButton = () => {
-    return (
-      <Button
-        type="primary"
-        data-testid="start-compliance"
-        onClick={() => {
-          global.platform.openTab({
-            url: 'https://start.compliance.codefi.network/',
-          });
-        }}
-      >
-        {t('openCodefiCompliance')}
-      </Button>
-    );
-  };
+  const linkButton = (
+    <Button
+      type={BUTTON_TYPES.LINK}
+      size={BUTTON_SIZES.LG}
+      data-testid="start-compliance"
+      onClick={() => {
+        global.platform.openTab({
+          url: 'https://start.compliance.codefi.network/',
+        });
+      }}
+    >
+      {t('openCodefiCompliance')}
+    </Button>
+  );

  return complianceActivated ? (
    <Box>
-      <Box className="institutional-feature__content">
+      <Text
+        variant={TextVariant.bodySm}
+        as="h6"
+        className="institutional-feature__content"
+      >
        {t('complianceSettingsExplanation')}
+      </Text>
+      <Box
+        padding={[4, 6]}
+        borderWidth={1}
+        borderStyle={BorderStyle.solid}
+        borderColor={BorderColor.borderMuted}
+        className="institutional-feature__footer"
+      >
+        <Button
+          size={BUTTON_SIZES.LG}
+          onClick={() => {
+            dispatch(mmiActions.deleteComplianceAuthData());
+          }}
+          data-testid="disconnect-compliance"
+        >
+          {t('disconnect')}
+        </Button>
+        {linkButton}
      </Box>
-      <footer className="institutional-feature__footer">
-        {renderDisconnect()}
-        {renderLinkButton()}
-      </footer>
    </Box>
  ) : (
    <Box
@ -70,7 +77,10 @@ const ComplianceSettings = () => {
      color={TextColor.textAlternative}
      data-testid="institutional-content"
    >
-      <Box className="institutional-feature__content">
+      <Box
+        variant={TextVariant.bodySm}
+        className="institutional-feature__content"
+      >
        <Text paddingBottom={3}>{t('complianceBlurb0')}</Text>
        <Text paddingBottom={3}>{t('complianceBlurb1')}</Text>
        <Text paddingBottom={3}>{t('complianceBlurpStep0')}</Text>
@ -87,9 +97,15 @@ const ComplianceSettings = () => {
        flexDirection={FLEX_DIRECTION.ROW}
        justifyContent={JustifyContent.center}
      >
-        <footer padding={[4, 6]} className="institutional-feature__footer">
-          {renderLinkButton()}
-        </footer>
+        <Box
+          padding={[4, 6]}
+          borderWidth={1}
+          borderStyle={BorderStyle.solid}
+          borderColor={BorderColor.borderMuted}
+          className="institutional-feature__footer"
+        >
+          {linkButton}
+        </Box>
      </Box>
    </Box>
  );
--- a/ui/components/institutional/compliance-settings/compliance-settings.stories.js
+++ b/ui/components/institutional/compliance-settings/compliance-settings.stories.js
@ -1,6 +1,5 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { action } from '@storybook/addon-actions';
 import configureStore from '../../../store/store';
 import testData from '../../../../.storybook/test-data';
 import ComplianceSettings from '.';
@ -23,9 +22,9 @@ export default {
  title: 'Components/Institutional/ComplianceSettings',
  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
  component: ComplianceSettings,
-  args: {
-    onClick: () => {
-      action('onClick');
+  argTypes: {
+    onClick: {
+      action: 'onClick',
    },
  },
 };
--- a/ui/components/institutional/compliance-settings/index.scss
+++ b/ui/components/institutional/compliance-settings/index.scss
@ -1,9 +1,5 @@
 .institutional-feature {
  &__footer {
-    border-top: 1px solid var(--color-text-muted);
-    padding: 16px 30px;
-    flex: 0 0 auto;
-
    button {
      min-width: 0;
      margin-right: 16px;
@ -15,10 +11,6 @@
  }

  &__content {
-    @include H6;
-
-    line-height: 22px;
-
    ol {
      list-style: decimal;
      list-style-position: inside;