Installation

Quantum design system - Quantum react components library.

Install package

After installing npm or yarn, and having configured the artifactory, you can install @qtm/react with this command:

npm

npm install -S @qtm/react@latest

yarn

yarn add @qtm/react@latest

Install fonts

The Quantum design system was designed with the Roboto font in mind. The Roboto fonts will not be automatically loaded by the Thales design system. The developer is responsible for loading all fonts used in their application.

Roboto & Roboto Mono fonts have a few easy ways to get started.

cdn

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
  rel="stylesheet"
/>

npm

npm install -S @fontsource/roboto @fontsource/roboto-mono

Import in JS (example: src/index.js in Create React App):

import '@fontsource/roboto';
import '@fontsource/roboto-mono';

or import in CSS:

@import '@fontsource/roboto';
@import '@fontsource/roboto-mono';

info

As the fontsource documentation says, importing the '@fontsource/roboto'or the '@fontsource/roboto-mono' only imports the font weight 400. In order to support more weight or styles, and to import the same configuration as the CDN, you can import the fontsource as below:

import '@fontsource/roboto/100.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import '@fontsource/roboto/900.css';

import '@fontsource/roboto/100-italic.css';
import '@fontsource/roboto/300-italic.css';
import '@fontsource/roboto/400-italic.css';
import '@fontsource/roboto/500-italic.css';
import '@fontsource/roboto/700-italic.css';
import '@fontsource/roboto/900-italic.css';

Install icons

The Quantum Design System was designed with the Material icons in mind.

The Material icons will not automatically be loaded by the Quantum Design System. The developer is responsible for loading all icons used in their application.

cdn

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
  rel="stylesheet"
/>

npm

npm install material-icons@latest

Import in JS (example: src/index.js in Create React App):

import 'material-icons/iconfont/material-icons.css';

or import in CSS:

@import 'material-icons/iconfont/material-icons.css';

or import in HTML:

<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">

Usage

Once you have installed this package, you just have to import components you need in your React application!

Here is an example of the integration of a Button component:

import { QtmButton } from '@qtm/react';

function App() {
  return <QtmButton onClickEvent={() => console.log('clicked')}>Click</QtmButton>;
}

Import styles

You need to import the css file into the global.css to see the component styling.

@import '@qtm/web-components/dist/web-components/web-components.css';

Utilities (Optional)

It provides you with a complete CSS with a huge set of utility classes as it is generated with Tailwind CSS. Then it will be up to you to optimize for production by purging the CSS according to the classes used in your HTML.

By importing into the global.css file:

@import '@qtm/css/dist/utilities.css';

For example:

<div className="flex p-m mb-m">
  <p className="text-primary-500">
    Hello
    <span className="font-bold">World!</span>
    <span role="img" aria-label="Tada!"> 🎉 </span>
  </p>
</div>

If you already using Tailwind CSS in your project or you want to take full advantage of all its features like functions & directives by building your own classes via @apply for example. You can check our package @qtm/tailwind-preset which will explain to you how to use Quantum styles in a Tailwind project.