⚠️ [DEPRECATED]

React Web Lib will be discontinued soon and will no longer receive support and updates. To consult obsolete documentation click here.

NATDS-React is the new React Web Lib for the Natura Design System, see all details here.

Natura Design System - React Web

React components for web development inside Natura.

Getting started

Installation

// with npm
npm install @naturacosmeticos/natds-web

// with yarn
yarn add @naturacosmeticos/natds-web

Usage

Theme Setup

This package only works fine with the use of <Provider />, that is essential for applying styles correctly.

import React from 'react'
import { Button, Provider, buildTheme } from "@naturacosmeticos/natds-web";

const theme = buildTheme('natura', 'light')

export const App = () => (
  <Provider theme={theme} cssPrefix="your-css-prefix">
    <Button color="primary" variant="contained">
      Hello World
    </Button>
  </Provider>
)

To avoid problems with multiple style fonts, it is necessary to add a cssPrefix with theme provider. Please do not try to override theme palette or other tokens. Our Design System themes are ready to use.

Fonts

Roboto

Load the Roboto font with 400 and 500 font weights:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />

This package does not provide Roboto font, only its font family names.

Custom Fonts

Custom fonts are fonts defined by the following brands: avon, aesop, natura and the body shop. They are applied for all components and to use them you need to load the @font-face into your index.html and add a third parameter to buildTheme, called typography:

Available brands: avon, natura, aesop, theBodyShop

<link href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-themes@latest/dist/assets/[BRAND]_fonts.css" rel="stylesheet" />

Icons

Load the font icons from the package @naturacosmeticos/natds-icons:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css">

or load it from the node_modules with a module bundler.

main.js

import React from 'react';
import '@naturacosmeticos/natds-icons/natds-icons.css';

Additional information

Requirements

• Please note that react >= 16.8.4 and react-dom >= 16.8.4 are peer dependencies.
• We recommend at least LTS Node version (v8.0.0+);
• If your project uses TypeScript, we need TypeScript 2.1 at least;

If your project does not meet the minimum requirements, you can use @naturacosmeticos/natds-styles.

Bundled in this package

Installing @naturacosmeticos/natds-web will also install the following packages:

• @material-ui/core
• @naturacosmeticos/natds-icons
• @naturacosmeticos/natds-styles
• Other dependencies for styling.

Thus, it is not necessary to install them separately to use the Design System.

Troubleshooting

Having troubles? Please check our Troubleshooting documentation.

Questions

For how-to questions and other issues, please use the issues section on our GitHub repo.

Documentation

Check out our documentation website.

Changelog

Recently updated? Please read the changelog.

License

This project is licensed under the terms of ISC License.