@naturacosmeticos/natds-react
v2.64.0
Published
A collection of components from Natura Design System for React
Downloads
2,968
Readme
GaYa Design System - React
React components for web development inside Natura&Co.
Getting started
Requirements
- Please note that
react >= 16.8.4
andreact-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.