Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,14 @@ dcx-react-library is **UI/UX agnostic** so you need to provide styling to match

## Components

To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://www.chromatic.com/library?appId=6069a6f47f4b9f002171f8e1) (Click on View Storybook to see the list of components)
To see the full list of components built in dcx-react-library, and how to use it, have a look on our [storybook-showcase](https://main--6069a6f47f4b9f002171f8e1.chromatic.com)
In Storybook, each component is presented with 4 main sections:

- **documentation**: describes the list of properties available, optional and mandatory;
- **live**: you can play directly with all the properties and see the component's behaviour;
- **unstyled**: the bare component without any styling applied;
- **styled**: an example (mainly based on GDS) of how to style the component and the final result.

![Image of dcx-react-library showcase](https://github.com/Capgemini/dcx-react-library/blob/main/stories/img/storybook-doc.png)

## How to use it

Using dcx-react-library should not require any particular setup. You only need to import the component and use it :smiley:
Expand All @@ -32,13 +30,22 @@ Steps:
- Import the component you need and use it. For example:

```js
import { Button } from 'dcx-react-library';
import { Button } from '@capgeminiuk/dcx-react-library';

const App = () => {
return <Button label="start" onClick={() => {}} />;
};
```

## Styling

We don't ship `dcx-react-library` with any included CSS. However, some stylesheet is required to use some components (for example, `toggle` and `tooltip`).

```js
/* The following line can be included in your src/index.js or App.js file */
import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
```

## Contributing

If you'd like to contribute, please follow our [CONTRIBUTING section](https://github.com/Capgemini/dcx-react-library/blob/main/CONTRIBUTING.md).
Expand Down
19 changes: 17 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "@capgeminiuk/dcx-react-library",
"author": "Daniele Zurico",
"author": "Capgemini UK",
"license": "MIT",
"version": "0.3.4",
"version": "0.4.0",
"source": "src/index.ts",
"main": "dist/dcx-react-library.js",
"module": "dist/dcx-react-library.module.js",
Expand All @@ -11,6 +11,21 @@
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/Capgemini/dcx-react-library.git"
},
"keywords": [
"react",
"library",
"agnostic",
"dcx",
"capgemini"
],
"bugs": {
"url": "https://github.com/Capgemini/dcx-react-library/issues"
},
"homepage": "https://github.com/Capgemini/dcx-react-library#readme",
"scripts": {
"build": "microbundle --jsx React.createElement",
"dev": "microbundle watch --jsx React.createElement",
Expand Down