Livia-components NPM

Livia Components

Dependencies

Node.js >= v9;

Starting the project

Clone this repository: git clone git@github.com:holding-digital/livia-components.git;
Install all dependencies: npm install (or npm i);
Run npm run dev (or npm run start) for development environment http://localhost:3000
Run npm run start:proxy for use proxy and access the microservices http://localhost:4000/api/:microservice
Run npm run build for production

Patterns

Stylus > CSS

Stylus Doc

Stylus is “pythonic” (i.e. indentation-based). Whitespace is significant, so we substitute { and } with an indent, and an outdent as shown below:

.class-name
  color: $color-name

Structure

├── stylus
│   ├── areas
│   │   ├── *.styl
│   ├── general
│   │   ├── *.styl
│   ├── mixins
│   │   ├── *.styl
│   ├── thirdparty
│   │   ├── *.styl
└── main.styl

Colors

Obs: For declaration of color variables, you must always use hexadecimal, in caps lock and do not use abbreviations.

Example:

`$`color-name = `#FFFFFF`
`$`color-name-surname = `#000000`

Fonts

Sizes

  $font-hero = 36px
  $font-primary = 26px
  $font-second = 22px
  $font-subhead = 18px
  $font-body = 16px

B.E.M Methodology

http://getbem.com/naming/

Tests

This project uses the Jest test framework to run tests and make assertions. This library makes writing tests as easy as speaking - you describe a unit of your code and expect it to do the correct thing.
We use this glob pattern to find unit tests /**/*.spec.js - this tells Jest to run all files that end with .spec.js anywhere within the app folder. Use this to your advantage, and put unit tests next to the files you want to test so relevant files stay together!

Running tests

Run npm run test

Create new test

Sprinkle .spec.js files directly next to the parts of your application you want to test. (Or in __test__/ subdirectories, it doesn't really matter as long as they are directly next to those parts and end in .spec.js)
Write your unit and component tests in those files. e.g:

describe('<Page>', () => {
  it('shold be render page title correctly', async () => {
    await page.goto(url)
    const title = await page.title()
    expect(title).toBe('Sara')
  })
})