feat(divider): add divider

packages/divider/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@alfalab/core-components-divider",
+  "version": "0.0.1-alpha.0",
+  "description": "",
+  "keywords": [],
+  "license": "ISC",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^16.9.0"
+  }
+}

packages/divider/src/Component.module.css

@@ -0,0 +1,12 @@
+@import '../../vars/colors.css';
+
+:root {
+  --divider-primary-color: var(--color-dark-indigo-15);
+  --divider-accent-color: var(--color-red-brand);
+}
+
+.component {
+  background-color: var(--divider-primary-color);
+  border-style: unset;
+  height: 1px;
+}

packages/divider/src/Component.stories.tsx

@@ -0,0 +1,28 @@
+/**
+ * Vendor
+ */
+
+import React from 'react';
+
+import { withDesign } from 'storybook-addon-designs';
+import { withKnobs } from '@storybook/addon-knobs';
+
+/**
+ * Components
+ */
+
+import { Divider } from './Component';
+
+export default {
+  title: 'Common|Divider',
+  component: Divider,
+  decorators: [withDesign, withKnobs],
+};
+
+export const Basic = () => (
+  <div>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+    <Divider />
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+  </div>
+);

packages/divider/src/Component.test.tsx

@@ -0,0 +1,35 @@
+/**
+ * Vendor
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+/**
+ * Component
+ */
+
+import { Divider } from './index';
+import styles from './Component.module.css';
+
+describe('Divider', () => {
+  it('should have a default test identifier', () => {
+    const { container } = render(<Divider />);
+
+    expect(container.firstElementChild).toHaveAttribute('data-testid');
+  });
+
+  it('should use a dataTestId prop', () => {
+    const testId = 'header-divider';
+    const { getByTestId } = render(<Divider dataTestId={testId} />);
+
+    expect(getByTestId(testId)).toBeTruthy;
+  });
+
+  it('should use a className prop', () => {
+    const className = 'short';
+    const { container } = render(<Divider className={className} />);
+
+    expect(container.firstElementChild?.classList).toContain(className);
+  });
+});

packages/divider/src/Component.tsx

@@ -0,0 +1,28 @@
+/**
+ * Vendor
+ */
+
+import React from 'react';
+import cn from 'classnames';
+
+/**
+ * Styles
+ */
+
+import styles from './Component.module.css';
+
+/**
+ * Expo
+ */
+
+export type DividerProps = {
+  /** Кастомный класс */
+  className?: string;
+  /** Id компонента для тестов */
+  dataTestId?: string;
+};
+
+/** Разделитель */
+export const Divider: React.FC<DividerProps> = ({ className, dataTestId }) => (
+  <hr className={cn(styles.component, className)} data-testid={dataTestId} />
+);

packages/divider/src/index.ts

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

packages/divider/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "composite": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "types": ["../../typings/module"]
+  },
+  "exclude": ["src/Component.stories.tsx", "src/Component.test.tsx"],
+  "include": ["src"]
+}