From 3dc60f2cd8d4ddc9351b7c557af93df06b62cab9 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 7 Jun 2022 11:24:40 -0400
Subject: [PATCH] Add Divider

---
 .../ui/divider/__tests__/divider.test.tsx     | 19 ++++++++++++++++
 app/soapbox/components/ui/divider/divider.tsx | 22 +++++++++++++++++++
 app/soapbox/components/ui/index.ts            |  1 +
 .../features/compose/components/poll-form.tsx |  3 ++-
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/components/ui/divider/__tests__/divider.test.tsx
 create mode 100644 app/soapbox/components/ui/divider/divider.tsx

diff --git a/app/soapbox/components/ui/divider/__tests__/divider.test.tsx b/app/soapbox/components/ui/divider/__tests__/divider.test.tsx
new file mode 100644
index 0000000000..c0d2441875
--- /dev/null
+++ b/app/soapbox/components/ui/divider/__tests__/divider.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import Divider from '../divider';
+
+describe('<Divider />', () => {
+  it('renders without text', () => {
+    render(<Divider />);
+
+    expect(screen.queryAllByTestId('divider-text')).toHaveLength(0);
+  });
+
+  it('renders text', () => {
+    const text = 'Hello';
+    render(<Divider text={text} />);
+
+    expect(screen.getByTestId('divider-text')).toHaveTextContent(text);
+  });
+});
diff --git a/app/soapbox/components/ui/divider/divider.tsx b/app/soapbox/components/ui/divider/divider.tsx
new file mode 100644
index 0000000000..40ba6f310d
--- /dev/null
+++ b/app/soapbox/components/ui/divider/divider.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface IDivider {
+  text?: string
+}
+
+/** Divider */
+const Divider = ({ text }: IDivider) => (
+  <div className='relative' data-testid='divider'>
+    <div className='absolute inset-0 flex items-center' aria-hidden='true'>
+      <div className='w-full border-t-2 border-gray-100 border-solid' />
+    </div>
+
+    {text && (
+      <div className='relative flex justify-center'>
+        <span className='px-2 bg-white text-gray-400' data-testid='divider-text'>{text}</span>
+      </div>
+    )}
+  </div>
+);
+
+export default Divider;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 27acc184b2..cd48426b65 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -5,6 +5,7 @@ export { default as Checkbox } from './checkbox/checkbox';
 export { default as Column } from './column/column';
 export { default as Counter } from './counter/counter';
 export { default as Datepicker } from './datepicker/datepicker';
+export { default as Divider } from './divider/divider';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as FileInput } from './file-input/file-input';
diff --git a/app/soapbox/features/compose/components/poll-form.tsx b/app/soapbox/features/compose/components/poll-form.tsx
index 4939b9e3fe..06c6feaab7 100644
--- a/app/soapbox/features/compose/components/poll-form.tsx
+++ b/app/soapbox/features/compose/components/poll-form.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import AutosuggestInput from 'soapbox/components/autosuggest_input';
-import { Button, HStack, Stack, Text } from 'soapbox/components/ui';
+import { Button, Divider, HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import DurationSelector from './polls/duration-selector';
@@ -187,6 +187,7 @@ const PollForm = (props: IPollForm) => {
         </HStack>
       </Stack>
 
+      <Divider />
 
       {/* Duration */}
       <Stack space={2}>