From 4fc43afe1b557d93a00b9e5bbd01f2f0576b82bf Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 9 Jun 2022 13:45:09 -0400
Subject: [PATCH] Add new ValidationCheckmark component

---
 .../__tests__/validation-checkmark.test.tsx   | 29 +++++++++++++++++++
 .../components/validation-checkmark.tsx       | 28 ++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 app/soapbox/components/__tests__/validation-checkmark.test.tsx
 create mode 100644 app/soapbox/components/validation-checkmark.tsx

diff --git a/app/soapbox/components/__tests__/validation-checkmark.test.tsx b/app/soapbox/components/__tests__/validation-checkmark.test.tsx
new file mode 100644
index 000000000..d3a02c718
--- /dev/null
+++ b/app/soapbox/components/__tests__/validation-checkmark.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { render, screen } from '../../jest/test-helpers';
+import ValidationCheckmark from '../validation-checkmark';
+
+describe('<ValidationCheckmark />', () => {
+  it('renders text', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid />);
+
+    expect(screen.getByTestId('validation-checkmark')).toHaveTextContent(text);
+  });
+
+  it('uses a green check when valid', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid />);
+
+    expect(screen.getByTestId('svg-icon-loader')).toHaveClass('text-success-500');
+    expect(screen.getByTestId('svg-icon-loader')).not.toHaveClass('text-gray-500');
+  });
+
+  it('uses a gray check when valid', () => {
+    const text = 'some validation';
+    render(<ValidationCheckmark text={text} isValid={false} />);
+
+    expect(screen.getByTestId('svg-icon-loader')).toHaveClass('text-gray-500');
+    expect(screen.getByTestId('svg-icon-loader')).not.toHaveClass('text-success-500');
+  });
+});
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
new file mode 100644
index 000000000..0c0ab42d6
--- /dev/null
+++ b/app/soapbox/components/validation-checkmark.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { HStack, Icon, Text } from 'soapbox/components/ui';
+
+interface IValidationCheckmark {
+  isValid: boolean
+  text: string
+}
+
+const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
+  return (
+    <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
+      <Icon
+        src={require('@tabler/icons/icons/check.svg')}
+        className={classNames({
+          'w-4 h-4': true,
+          'text-gray-500': !isValid,
+          'text-success-500': isValid,
+        })}
+      />
+
+      <Text theme='muted' size='sm'>{text}</Text>
+    </HStack>
+  );
+};
+
+export default ValidationCheckmark;