@naturacosmeticos/natds-react
TypeScript icon, indicating that this package has built-in type declarations

2.60.0 • Public • Published

Natura Design System - React

React components for web development inside Natura&Co.

npm package Monthly downloads codecov GitHub Issues License


Getting started

Requirements

  • Please note that react >= 16.8.4 and react-dom >= 16.8.4 are peer dependencies.
  • We recommend node >= 8.0.0
  • If your project uses TypeScript, we need TypeScript >=2.1;

Installation

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

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

Installing @naturacosmeticos/natds-react will also install the packages @naturacosmeticos/natds-icons, @naturacosmeticos/natds-themes and react-jss

Usage

Theme Setup

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

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

/**
 * The `buildTheme` function accepts two parameters:
 *
 * — brand: the name of the brand to applied
 *    ('natura' | 'theBodyShop' | 'avon' | 'aesop')
 *
 * — mode: the color scheme for the current branch
 *    ('light' | 'dark')
 *
*/
const theme = buildTheme('natura', 'light')

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

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:

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 '@naturacosmeticos/natds-icons/natds-icons.css'

UI Documentation

Changelog

Recently updated? Please read the changelog.

Package Sidebar

Install

npm i @naturacosmeticos/natds-react

Weekly Downloads

311

Version

2.60.0

License

ISC

Unpacked Size

1.22 MB

Total Files

815

Last publish

Collaborators

  • marcelofabricanti
  • designsystemnatura
  • mukaportes
  • vicentelyrio
  • robert-lichtnow
  • douglasofreitas
  • jimmyandrade
  • lauralucca
  • marcelsaitonatura
  • eliisrael