From 1cd362b7325fbee9a987c247c4c1b9c4cb407e88 Mon Sep 17 00:00:00 2001 From: Esra Altintas Date: Tue, 13 Jun 2023 15:32:33 +0200 Subject: [PATCH] feat(divider): add new divider component Add new divider component --- packages/divider/CHANGELOG.md | 4 ++ packages/divider/README.md | 29 +++++++++ packages/divider/package.json | 33 ++++++++++ packages/divider/src/Divider.tsx | 17 ++++++ packages/divider/src/Divider.types.tsx | 3 + .../divider/src/__tests__/Divider.test.tsx | 16 +++++ .../divider/src/docs/Component.stories.mdx | 60 +++++++++++++++++++ packages/divider/src/docs/Description.mdx | 18 ++++++ packages/divider/src/index.ts | 1 + .../divider/src/styles/default.module.css | 17 ++++++ packages/divider/tsconfig.json | 13 ++++ 11 files changed, 211 insertions(+) create mode 100644 packages/divider/CHANGELOG.md create mode 100644 packages/divider/README.md create mode 100644 packages/divider/package.json create mode 100644 packages/divider/src/Divider.tsx create mode 100644 packages/divider/src/Divider.types.tsx create mode 100644 packages/divider/src/__tests__/Divider.test.tsx create mode 100644 packages/divider/src/docs/Component.stories.mdx create mode 100644 packages/divider/src/docs/Description.mdx create mode 100644 packages/divider/src/index.ts create mode 100644 packages/divider/src/styles/default.module.css create mode 100644 packages/divider/tsconfig.json diff --git a/packages/divider/CHANGELOG.md b/packages/divider/CHANGELOG.md new file mode 100644 index 000000000..e4d87c4d4 --- /dev/null +++ b/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. diff --git a/packages/divider/README.md b/packages/divider/README.md new file mode 100644 index 000000000..8580177f8 --- /dev/null +++ b/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(); +} +``` + +## Documentation and sandbox + +[Storybook](https://hey-car.github.io/heycar-uikit/main/?path=/docs/components-atoms-divider--divider) documentation and sandbox diff --git a/packages/divider/package.json b/packages/divider/package.json new file mode 100644 index 000000000..453160bff --- /dev/null +++ b/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" +} diff --git a/packages/divider/src/Divider.tsx b/packages/divider/src/Divider.tsx new file mode 100644 index 000000000..3b3e3c512 --- /dev/null +++ b/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 = ({ dataTestId, ...restProps }) => ( + +
+
+
+ +); + +export default Divider; diff --git a/packages/divider/src/Divider.types.tsx b/packages/divider/src/Divider.types.tsx new file mode 100644 index 000000000..d1db67812 --- /dev/null +++ b/packages/divider/src/Divider.types.tsx @@ -0,0 +1,3 @@ +export interface DividerProps { + dataTestId?: string; +} diff --git a/packages/divider/src/__tests__/Divider.test.tsx b/packages/divider/src/__tests__/Divider.test.tsx new file mode 100644 index 000000000..9ac516644 --- /dev/null +++ b/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(); + + expect(getByTestId(dataTestId).tagName).toBe('DIV'); + }); + }); +}); diff --git a/packages/divider/src/docs/Component.stories.mdx b/packages/divider/src/docs/Component.stories.mdx new file mode 100644 index 000000000..d0ee1189e --- /dev/null +++ b/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'; + + + + + +export const DividerTemplate = args => ; + + + + + {DividerTemplate.bind({})} + + + + + +```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 ; +} +``` + +```css +// CSS file +// Core import is recomended +@import '@heycar-uikit/core/divider/esm/Divider.css'; +// or +@import '@heycar-uikit/divider/dist/esm/Divider.css'; +``` + + + + }, + { label: 'Props', component: }, + { label: 'Changelog', component: }, + ]} +/> diff --git a/packages/divider/src/docs/Description.mdx b/packages/divider/src/docs/Description.mdx new file mode 100644 index 000000000..f7a230f2f --- /dev/null +++ b/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( + + + + + + + , +); +``` diff --git a/packages/divider/src/index.ts b/packages/divider/src/index.ts new file mode 100644 index 000000000..b6de1e2ba --- /dev/null +++ b/packages/divider/src/index.ts @@ -0,0 +1 @@ +export { default } from './Divider'; diff --git a/packages/divider/src/styles/default.module.css b/packages/divider/src/styles/default.module.css new file mode 100644 index 000000000..cadba75b4 --- /dev/null +++ b/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; +} diff --git a/packages/divider/tsconfig.json b/packages/divider/tsconfig.json new file mode 100644 index 000000000..b4395053b --- /dev/null +++ b/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": [] +}