@wix/design-system

A collection of React components that conform to Wix Style.

📦 Install

To install the Wix Design System, use one of the following commands:

``bash
npm install @wix/design-system
`

or

`bash
yarn add @wix/design-system
`

#### Browsers support

- Google Chrome (version 92 and above)
- Safari for Mac (version 14 and above)
- Microsoft Edge (version 100 and above)
- Firefox (version 91 and above)

#### Setting up your app

All @wix/design-system applications start with a WixDesignSystemProvider, which injects the MadeFor font and enables font smoothing.

`jsx
import { WixDesignSystemProvider, Button } from '@wix/design-system';

const App = () => (

Hello World!

);
`

💫 Testkits

All our components come with Testkits that assist users in testing them effectively.

A component's Testkit provides an interface to the component, enabling automated tests to access its functions without requiring detailed knowledge of the underlying technology.

`jsx
// Example

// 1. Import
import { InputTestkit } from '@wix/design-system/dist/testkit';

// 2. Initialize
const inputDriver = InputTestkit({
wrapper: document.body,
dataHook: 'name-input',
});

// 3. Interact
it('test', async () => {
await inputDriver.enterText('hello world');
expect(await inputDriver.getText()).toBe('hello world');
});
`

All methods are documented in our Storybook components stories, and some can be viewed through the TypeScript interface.

Our Testkits currently support three major testing frameworks: @testing-library/react, puppeteer, and vanilla.

🙋 Support

Connect with our team and network with other app developers using the Wix Design System in our Discord channel or reach out in Slack #wix-design-system`

📝 License

This project is offered under the MIT License.