@wix/design-system
TypeScript icon, indicating that this package has built-in type declarations

1.110.0 • Public • Published

Wix Design System A collection of React components that conform to Wix Style.

📦 Install

npm install @wix/design-system
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. The Provider injects MadeFor font and enables font smoothing.

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

const App = () => (
  <WixDesignSystemProvider>
    <Button>Hello World!</Button>
  </WixDesignSystemProvider>
);

💫 Testkits

All our components are provided with testkits that help our users test them.

A component testkit provides an interface to the component, enabling automated tests to access component functions without needing to know precise details of the technology being used.

//  Here is an 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 typescript interface.

Our testkits currently support four major testing frameworks: @testing-library/react, puppeteer and vanilla. (https://github.com/wix-private/wix-design-systems/blob/master/packages/wix-design-system/docs/usage/testing.md)

🤝 Contributing PRs Welcome

We welcome contributions to Wix De!

Read our contributing guide and help us build or improve our components.

🙋 Support

Support Channel: #wix-design-system

Check out our support guide

📝 License

This project is offered under MIT License.

Readme

Keywords

none

Package Sidebar

Install

npm i @wix/design-system

Weekly Downloads

6,456

Version

1.110.0

License

MIT

Unpacked Size

58 MB

Total Files

11132

Last publish

Collaborators

  • mayaco
  • itaytay
  • amitde007
  • oferb-wix
  • varzager
  • youngshinobi
  • tombenezra
  • domasmak
  • yurynix
  • tuvit.wix
  • usability-sessions
  • yoav
  • wix-ci
  • shahata
  • wixnpm
  • wix-ambassador
  • netanelgilad
  • wix-ci-publisher
  • wix-bi-publisher
  • galil-team
  • lxgreen
  • ariki
  • liorgwix
  • arielh
  • falconci
  • itai.benda