Add Divider

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);
+  });
+});

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;

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';

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}>