https://mashmatrix.github.io/react-lightning-design-system/

Salesforce Lightning Design System components built with React
https://mashmatrix.github.io/react-lightning-design-system/

react salesforce salesforce-lightning

Last synced: 3 months ago
JSON representation

Salesforce Lightning Design System components built with React

• Host: GitHub
• URL: https://mashmatrix.github.io/react-lightning-design-system/
• Owner: mashmatrix
• License: other
• Created: 2015-08-25T16:59:50.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-11-11T06:11:48.000Z (8 months ago)
• Last Synced: 2024-04-09T01:20:39.859Z (3 months ago)
• Topics: react, salesforce, salesforce-lightning
• Language: TypeScript
• Homepage: https://mashmatrix.github.io/react-lightning-design-system/
• Size: 28.4 MB
• Stars: 255
• Watchers: 26
• Forks: 85
• Open Issues: 39
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-storybook - Salesforce Design System

README

        
# [React Lightning Design System](https://mashmatrix.github.io/react-lightning-design-system/)

[![Build Status](https://travis-ci.org/mashmatrix/react-lightning-design-system.svg?branch=master)](https://travis-ci.org/mashmatrix/react-lightning-design-system)

[Salesforce Lightning Design System](http://www.lightningdesignsystem.com/) components built with React.

See the [demo](https://mashmatrix.github.io/react-lightning-design-system/).

## Install

```

$ npm install react-lightning-design-system

```

## Example

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { Button } from 'react-lightning-design-system';

function click() { alert('Clicked'); }

ReactDOM.render(

  


    Simple

    Neutral

    Brand

    Icon #1

    Disabled Neutral

    Disabled Brand

  

, document.body);

```


See more examples in [examples](https://github.com/mashmatrix/react-lightning-design-system/tree/master/stories) directory.

## Running example stories locally

This repo ships with a react storybook based story scripts.

To run stories and get component examples, follow these steps:

1. run ```npm install```

2. run ```npm run storybook```

3. Find the stories running on [localhost:9001](http://localhost:9001).

## Snapshot testing in react storybook

This repo ships with story snapshots to examine differences in rendering as a result of changes to source code.

To identify render differences run ```npm run test:storyshots```.  If  all changes are intentional run ```npm run test:storyshots -- -u```.  To learn about other run options including *interactive mode*, read

[Snapshot Testing in React Storybook](https://voice.kadira.io/snapshot-testing-in-react-storybook-43b3b71cec4f)