feat(divider): add new divider component

packages/divider/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/divider/README.md

@@ -0,0 +1,29 @@
+# HeyCar-UIKit - Divider
+
+[![Tests](https://github.com/hey-car/heycar-uikit/actions/workflows/build.yml/badge.svg)](https://github.com/hey-car/heycar-uikit/actions/workflows/build.yml)
+[![Coverage Status](https://coveralls.io/repos/github/hey-car/heycar-uikit/badge.svg)](https://coveralls.io/github/hey-car/heycar-uikit)
+[![Demo build](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml/badge.svg)](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml)
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+A divider line separates different content.
+
+## Installation
+
+To install and save in your package.json dependencies, run the command below using npm:
+
+```bash
+npm install @heycar-uikit/divider
+```
+
+## Usage
+
+```tsx
+import Divider from '@heycar-uikit/divider';
+function App() {
+  render(<Divider />);
+}
+```
+
+## Documentation and sandbox
+
+[Storybook](https://hey-car.github.io/heycar-uikit/main/?path=/docs/components-atoms-divider--divider) documentation and sandbox

packages/divider/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@heycar-uikit/divider",
+  "version": "1.0.0",
+  "description": "HeyCar-UIKit divider",
+  "main": "dist/index.js",
+  "module": "./dist/esm/index.js",
+  "keywords": [
+    "ui",
+    "uikit",
+    "react",
+    "components",
+    "heycar",
+    "typescript",
+    "ui-components",
+    "design-systems",
+    "divider"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hey-car/heycar-uikit.git"
+  },
+  "homepage": "https://github.com/hey-car/heycar-uikit/tree/main/packages/divider#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1"
+  },
+  "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0",
+  "author": "HeyCar Team",
+  "license": "UNLICENSED",
+  "gitHead": "58e9efe350cbc1d37ba37590f55347f2fd23ad13"
+}

packages/divider/src/Divider.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import Grid from '@heycar-uikit/grid';
+
+import { DividerProps } from './Divider.types';
+
+import styles from './styles/default.module.css';
+
+const Divider: FC<DividerProps> = ({ dataTestId, ...restProps }) => (
+  <Grid.Container>
+    <div className={styles.divider} data-test-id={dataTestId} {...restProps}>
+      <div className={styles.border}></div>
+    </div>
+  </Grid.Container>
+);
+
+export default Divider;

packages/divider/src/Divider.types.tsx

@@ -0,0 +1,3 @@
+export interface DividerProps {
+  dataTestId?: string;
+}

packages/divider/src/__tests__/Divider.test.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Divider from '../Divider';
+const dataTestId = 'test-id';
+
+describe('Divider', () => {
+  describe('Prop tests', () => {
+    it('should set value', () => {
+      const { getByTestId } = render(<Divider dataTestId={dataTestId} />);
+
+      expect(getByTestId(dataTestId).tagName).toBe('DIV');
+    });
+  });
+});

packages/divider/src/docs/Component.stories.mdx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+import { Meta, Story, Props } from '@storybook/addon-docs';
+import { ComponentHeader, CssVars, TabContainer } from 'storybook/blocks';
+
+import Divider from '../Divider';
+import { version } from '../../package.json';
+import Description from './Description.mdx';
+import Changelog from '../../CHANGELOG.md';
+
+<!-- Meta -->
+
+<Meta title="Components/Atoms/Divider" component={Divider} />
+
+export const DividerTemplate = args => <Divider {...args} />;
+
+<!-- Canvas -->
+
+<Story
+  name="Divider"
+>
+  {DividerTemplate.bind({})}
+</Story>
+<!-- Docs -->
+
+<ComponentHeader
+  name="DividerTemplate"
+  version={version}
+  stage={1}
+  design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/OTP-Global-Design-System?node-id=4289%3A100591"
+/>
+
+```tsx
+// TSX/JSX file
+// Core import is recomended
+import Divider from '@heycar-uikit/core/divider';
+// or
+import Divider from '@heycar-uikit/divider';
+function App() {
+  return <Divider />;
+}
+```
+
+```css
+// CSS file
+// Core import is recomended
+@import '@heycar-uikit/core/divider/esm/Divider.css';
+// or
+@import '@heycar-uikit/divider/dist/esm/Divider.css';
+```
+
+<!-- Description -->
+
+<TabContainer
+  tabs={[
+    { label: 'Description', component: <Description /> },
+    { label: 'Props', component: <Props of={Divider} /> },
+    { label: 'Changelog', component: <Changelog /> },
+  ]}
+/>

packages/divider/src/docs/Description.mdx

@@ -0,0 +1,18 @@
+import { Container, Row, Col } from 'storybook/blocks';
+import Divider from '../Divider';
+
+## Usage
+
+A divider line separates different content.
+
+```tsx live
+render(
+  <Container>
+    <Row align="middle">
+      <Col>
+        <Divider />
+      </Col>
+    </Row>
+  </Container>,
+);
+```

packages/divider/src/index.ts

@@ -0,0 +1 @@
+export { default } from './Divider';

packages/divider/src/styles/default.module.css

@@ -0,0 +1,17 @@
+@import '../../../themes/src/default.css';
+
+.divider {
+  padding-top: 40px;
+  padding-bottom: 40px;
+
+  @media (--mobile) {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
+}
+
+.border {
+  background: var(--color-tarmac-grey-300);
+  max-width: 100%;
+  height: 1px;
+}

packages/divider/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "include": ["src", "../../typings"],
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDirs": ["src"],
+    "baseUrl": ".",
+    "paths": {
+      "@heycar-uikit/*": ["../*/src"]
+    }
+  },
+  "references": []
+}