Skip to content

Capgemini/dcx-react-library

Repository files navigation

CircleCI

DCX React library

Motivation

dcx-react-library is a React library with a set of components ready to use in your project.
There are plenty of libraries available in React that can help to increase your productivity however most of them contain lots of css and are hard to style based on your project's requirements.
dcx-react-library is UI/UX agnostic, this allows the dcx-react-library to be easily integrated into any project.
You have few options to make your components good looking 💄:

  1. You can provide the styling to match the look and feel of your application passing the class to every component 👷
  2. 🔥 🔥You can use the design system tokens that we built for you - from version 1.0.0 🔥 🔥

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 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.
  • design system: an example of how to style the component using the tokens exposed by the design system.

How to use it

Using dcx-react-library should not require any particular setup.
You only need to import the component and use it 😃

Steps:

  • yarn add @capgeminiuk/dcx-react-library
  • Import the component you need and use it. For example:
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).

/* 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';

Design System

The dcx-react-library supports opt-in styling customizable via CSS custom properties.

To keep the library UI/UX agnostic the styles are not shipped by default. In order to include them in your project you can import them as follows:

/* main.jsx */

import '@capgeminiuk/dcx-react-library/design-system/index.css';

Note that this will setup the styling for all the components in the library. You may want to fine-tune the imports if performance is critical for your application.

All the components have their own stylesheet and can be imported individually when needed:

/* Needed for core styles */
import '@capgeminiuk/dcx-react-library/design-system/base.css';

/* Individual imports, works well with tree-shaking */
import '@capgeminiuk/dcx-react-library/design-system/form-control.css';
import '@capgeminiuk/dcx-react-library/design-system/button.css';
// ...

Don't forget to add the base.css import before loading the individual stylesheets. It contains the core definitions used for the design system to work.

Contributing

If you'd like to contribute, please follow our CONTRIBUTING section.

Blog posts

Raise a bug or enhancement

If you find a bug or you would like to recommend an improvement, please raise an issue and use the appropriate template. We will be more than happy to improve the library, smashing all the bugs found and improve the functionality.

Contributors ✨ ✨

Thanks goes to these wonderful people

daniele-zurico
Daniele Zurico
marius-mirca
Marius Mirca
isaac-babalola
Isaac Babalola
alex-webber
Alex Webber
nikki-algar
Nikki Algar
niku-sharma
Niku Sharma
claudio-ricci
Claudio Ricci
sandra-ro-diaz
Sandra Ro Diaz
ellie-tahmasebi
Ellie Tahmasebi
sri-viswanathan"/
Sri Viswanathan
julian-taylor"/
Julian Taylor
sergio-bandera-garcia"/
Sergio Bandera Garcia
szilvi-horvath
Szilvi Horvath
jaya-rathore
Jaya Rathore
arpana-kumari
Arpana Kumari
caner-shefik
Caner Shefik
jadhav-jeet
Jadhav Jeet
soundar-arumugam
Soundar Arumugam
j-gonzales
Javier Gonzalez Moya
kavitha-kurella
Kavitha Kurella
yunus-firat
Yunus Firat
yohannes-berhane
Yohannes Berhane
ahmet-kucukibrahimoglu
Ahmet Kucukibrahimoglu
ismael-akhtaab
Ismael Akhtaab
ybayraktutan
Bayraktutan Yasemin
shivammuttoo
Muttoo Shivam
Joseph-Oldfield
Joseph Oldfield
AranzazuVM
Aranzazu Vázquez Moreno