Salesforce Lightning Design System
This project utilizes Storybook for component development. If you would like to know more about Storybook or how it works, check out their website.
cdinto the project and run
npm installto install all project dependencies.
The Storybook development environment can be started by running
Whenever you add, remove, or alter a component's css annotation metadata, you'll need to restart Storybook to see those changes.
Node v12 is recommended for use with the Design System repository, and NVM is the recommended choice for managing multiple versions of Node on your computer.
A .nvmrc file is included in this project to aid in local development. To utilize it for setting your project's node version, run
nvm usein the root of the directory. Additionally, you can set up a deeper shell integration for automatically invoking the nvmrc file when you change into the project directory by following these instructions.
Once the development server is started with
npm start, you can load it at http://localhost:9002.
See the annotations guide.
Starts the Storybook server for local development.
npm run gulp -- lint
Lint the code base for syntax and stylistic errors.
Lint languages independently
npm run gulp -- lint:vnu
HTML5 validation on comma separated blueprint names
npm run gulp -- lint:vnu --components button,path,trees
npm run gulp -- lint:a11y
a11y validation on comma separated blueprint names
npm run gulp -- lint:a11y --components button,path,trees
Lint examples using vnu, aXe, slds validation, and HTML5 validation
npm run gulp -- lint:examples
To run all the checks a pull request will run in Travis use the following command.
# To run every check against all blueprints npm run pr-checks
To run every check but target certain blueprints for slow checks like aXe and vnu
npm run pr-checks -- --components button,path,trees
npm run build-dist
Generate the Lightning Design System into the
npm run gulp -- styles
Compile Sass to CSS into
npm run gulp -- clean
Delete temporary build and local files.
npm run gulp -- styles:stats: Useful stats about the project's deliverables.
npm test: run all tests
See the troubleshooting guide.
See the contributing guide.
Please open a new GitHub Issue.