@wix/design-system/README.md

@wix/design-system

<p>
  <a href="https://www.wix-pages.com/wix-design-system-employees">
    <img src="https://www.wix-pages.com/wix-design-system/static/media/logo.3dd9ea44.svg" alt="Wix Design System" width="400">
  </a>

  <br />

  <span>
    A collection of React components that conform to Wix Style.
  </span>
</p>

<div>

[![](https://badgen.net/jsdelivr/v/npm/@wix/design-system)](https://www.npmjs.com/package/wix/design-system)

</div>

<div>
 <a href="https://www.wix-pages.com/wix-design-system-employees">Wix Design System</a>
</div>

## 📦 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 = () => (
  <WixDesignSystemProvider>
    <Button>Hello World!</Button>
  </WixDesignSystemProvider>
);
```

## 💫 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](https://discord.com/channels/773211030314418196/1144282838502477945) or reach out in Slack `#wix-design-system`

## 📝 License

This project is offered under the [MIT License](https://opensource.org/license/mit).