eesg v1.9.23

EE STYLE GUIDE

The current version of the Style Guide is v.EESG.VERSION

"A consistent visual language helps all of EE work as one brand, delivering the quality people expect in everything we do."

The Style Guide is for developers, designers and QA to use. It is a reference for all existing "atoms", "molecules", components etc. The purpose is to promote re-use of existing code and modules, and to ensure consistency across all the digital estate.

Contact

If you have any questions about the EE Style Guide, please contact either Dianne French (dianne.french@ee.co.uk) or Andrei Svistunou (Andrei_Svistunou@epam.com).

Quickstart

StyleGuide uses NPM. Before you start working with StyleGuide, you have to install Node 10 and NPM 5+ (better to install at least NPM 6).

Clone project from /develop branch in StyleGuide repository to your local machine.

Go to folder with cloned StyleGuide and then run npm install

To launch the StyleGuide, run npm start

Open any browser and visit http://localhost:3000 (or http://127.0.0.1:3000)

For more information see the : Quick start on the wiki

Running with Docker

The styleguide can also be run in a Docker container. We use Docker to ensure consistency on screen snapshot testing.

If you want to use Docker, you will need to install it first. Once installed, follow the steps below:

Build docker:

npm run docker:build

Start container:

npm run docker:start

On Windows:

npm run docker:start:win

Run tests inside ee-style-guide-runner container (accessibility/image snapshot):

npm run docker:test // Unit tests
npm run docker:test:web // All Web
npm run docker:test:axe // accessibility only
npm run docker:test:screenshots //image snapshot
npm run docker:test:screenshots:update // update screenshots

Run tests inside ee-style-guide-runner container with custome configs options:

// Run for section 5.3 only, watch and display test details
docker exec -it ee-style-guide-runner npm run test:web -- -t \/5.3\/ --watch --verbose

Stop container:

npm run docker:stop

Stop container and start again: npm run docker:reload

SCSS styles tests:

npm run docker:test
npm run docker:test:update

Along with normal tests this will parse all SCSS files using node-sass and snapshot them. Currently runs on following folders:

• src/styles/components
• src/styles/base/typography
• src/styles/forms
• src/styles/modules

Run just style tests: npm run test -- --testPathPattern styles

Style Guide with Docker FAQ

Index