GaYa Design System - React

React components for web development inside Natura&Co.

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

```shell script // 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.

```tsx
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.

包详细信息

@naturacosmeticos/natds-react

自述文件