feat: add divider component

Author: Curian Lee

src/@next/Divider/Divider.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Divider } from './Divider';
+
+(Divider as React.FunctionComponent<void>).displayName = 'Divider';
+
+export default {
+  title: '@next/Divider',
+  component: Divider,
+  decorators: [Story => <BaseContainer>{Story()}</BaseContainer>],
+} as Meta;
+
+const Template: Story<void> = () => (
+  <div>
+    some text
+    <Divider />
+    another text after divider
+  </div>
+);
+
+export const Interactive = Template.bind({});
+
+Interactive.args = {};

src/@next/Divider/Divider.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DividerStyle } from './DividerStyle';
+
+export type DividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Divider = ({ ...props }: DividerProps) => (
+  <DividerStyle {...props} />
+);

src/@next/Divider/DividerStyle.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Neutral } from '../utilities/colors';
+import { DividerProps } from './Divider';
+
+export const DividerStyle = styled.div<DividerProps>`
+  margin: 0;
+  background-color: ${Neutral.B85};
+  width: 100%;
+  height: 1px;
+`;

src/@next/Divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider';

test/e2e/divider/divider.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect, Page } from '@playwright/test';
+import { StoryBookPage } from '../storybookPage';
+
+const getPage = (page: Page) =>
+  new StoryBookPage(page, '?path=/story/next-divider--interactive');
+
+test.describe('Badge - standard size', () => {
+  test('default', async ({ page }) => {
+    const dividerPage = getPage(page);
+    await dividerPage.goto();
+    await expect(dividerPage.container).toHaveScreenshot('divider.png');
+  });
+});