https://github.com/conduitio/mx-ui-components
ConduitIO UI component library
https://github.com/conduitio/mx-ui-components
Last synced: 4 months ago
JSON representation
ConduitIO UI component library
- Host: GitHub
- URL: https://github.com/conduitio/mx-ui-components
- Owner: ConduitIO
- License: apache-2.0
- Created: 2021-03-10T22:26:43.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-19T20:23:02.000Z (6 months ago)
- Last Synced: 2024-12-19T21:24:29.390Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.21 MB
- Stars: 2
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
> [!IMPORTANT]
> This repository was archived on December 19, 2024, due to https://github.com/ConduitIO/conduit/pull/2036 as part of [this Conduit initiative](https://github.com/ConduitIO/conduit/issues/1911).
# mx-ui-components
Meroxa UI component library.
## Compatibility
* Ember.js v4.4 or above
* Ember CLI v4.4 or above
* Node.js v16 or above
## Installation
```
ember install mx-ui-components
```
## Usage
All component usage is documented via Storybook stories. Please see the instructions below on how to run storybook.
Or you can view [the demo storybook site](https://6109b9596e1c1300390c39c5-gbnmeyicen.chromatic.com/?path=/story/fonts--font-sizes)
## Contributing
This addon uses [Storybook](https://storybook.js.org/) to allow the development
and display of UI components. Add new and modify existing components via
[Stories](https://storybook.js.org/docs/react/get-started/whats-a-story)
located in the `stories` folder.
## Run Storybook
- `yarn run storybook`
For more info on testing, building and linting the project,
see the [Contributing](CONTRIBUTING.md) guide for details.
## Accessibility
This addon uses [ember-a11y-testing](https://emberobserver.com/addons/ember-a11y-testing)
to verify that UI components are accessible.
When creating a new component, you can create an integration test case and
add the `a11yAudit` test helper after rendering the component to surface
and fix any a11y bugs.
Example test case:
```javascript
import { a11yAudit } from 'ember-a11y-testing/test-support';
// ...
module('Integration | Component | my-accessible-form-field', function (hooks) {
test('test for a11y', async function (assert) {
await render(hbs`
`);
await a11yAudit();
assert.ok(true, 'no a11y detected');
});
});
```
For more information, check out the documentation for [ember-a11y-testing](https://github.com/ember-a11y/ember-a11y-testing#ember-a11y-testing).
When encountering any accessibility bugs, you can review strategies on fixing
them with the list of [WCAG rules by Axe Core](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md).
## License
This project is licensed under the [Apache 2.0 License](LICENSE).