skin-react

Skin components built with React (Typescript). https://github.com/eBay/skin

Components

• [x] Actionable
• [x] alert-dialog
• [x] badge
• [x] breadcrumbs
• [x] button
• [ ] carousel(in Progress)
• [x] checkbox
• [ ] combobox-readonly
• [ ] combobox
• [x] confirm-dialog
• [x] cta-button
• [x] details
• [x] dialog
• [x] drawer-dialog
• [ ] expand-button(in Progress)
• [ ] fake-menu-button
• [ ] fake-menu
• [ ] fake-tabs
• [ ] filter-menu-button
• [ ] filter-menu
• [ ] filter
• [x] fullscreen-dialog
• [x] icon
• [ ] infotip(in Progress)
• [x] inline-notice
• [ ] legacy-floating-textbox
• [x] lightbox-dialog
• [ ] listbox-button(in Progress)
• [ ] listbox
• [ ] menu-button
• [ ] menu
• [x] notice
• [x] page-notice
• [x] pagination
• [x] panel-dialog
• [x] progress-spinner
• [x] radio
• [x] section-notice
• [x] section-title
• [x] select
• [x] stepper
• [x] switch
• [x] tabs
• [x] textbox
• [x] toast-dialog
• [ ] tooltip(in Progress)
• [ ] tourtip(in Progress)
• [x] window-notice

Install

$ yarn add skin-react
$ yarn add @ebay/skin

Why

skin-react eases the use of the original skin for developers who are more conversant with Rx style programming by condensing it into React-styled components.

html skin

<button class="btn btn--primary btn--large">Button</button>
<a class="fake-btn fake-btn--primary fake-btn--large" href="#">Large Link</a>

skin-react

import * as React from 'react';
import {Button, BtnCell, Icon} from 'skin-react';

function Example() {
  return (<>
    <Button variant="primary" size="large">Button</Button>
    <Button variant="primary" size="large" href="#">Button</Button>
  </>)
}

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Spinner } from 'skin-react';

ReactDOM.render(
    <div>
      <Spinner />
    </div>,
  document.getElementById('root')
);

Stylesheets

stylesheet is required to use these components.

    //The following line can be included in your root .js/ts file
    import '@ebay/skin/_cdn/skin/v12.0.0/ds6/skin.min.css';

Accessibility (A11Y)

We take accessibility very seriously. Very seriously indeed. Therefore all modules are built in accordance to the eBay MIND Patterns. These patterns, in turn, build on from the specifications provided by the WAI-ARIA Authoring Practices.

Issues

Please use our issues page to ask questions, report issues or submit feature requests. To help track your issue, the team will assign it with a label from one or more issue categories.

Developing & Contributing

Interested in contributing? Head over to our contributing guide for information on how to get started.

Contributions don't have to be code! They can be ideas, inspiration, discussion or filing bugs!

License

Copyright 2019 eBay Inc. Developers: Arturo Montoya, Jake Hall

Use of this source code is governed by an MIT-style license that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.