Livia Components

Dependencies

• Node.js >= v9;

Starting the project

• Clone this repository: git clone [email protected]: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')
  })
})

• Run npm test in your terminal and see all the tests pass! (hopefully)