A React Component and Icon Library using Zeppelin Element Library

Please see (Zeppelin Design System)[https://live-zds.zepdev.net/] for more detailed information.

install

``
yarn add @zlab-de/zel-react
`

Getting Started: Components

This library requires the import of \*zel.css for apply all styles from the Zeppelin Element Library.

`
// MyComponent.jsx
import React from 'react'
import Button from '@zlab-de/zel-react/Button'

function MyComponent(){
return(


export default App;
`

guidelines.json from Zeppelin Element Library

This repository also have a guidelines.json file available for you to help with styling. This file contains the following information (see the guidelines section for more information); colors, spacing, and typography specifications. Its intended use if for users using a CSS-in-JS solution to be able to call colors and spacing easier.

Example with React-JSS Theming

`
import React from 'react'
import withStyles, {ThemeProvider} from 'react-jss'
import theme from '@zlab-de/zel-react/guidelines.json'

const styles = theme => ({
div: {
marginBottom: ${ theme.spacing.component.xxl.rem }rem,
color: theme.colors.primary.indigoBlue.hex,
},
})

function MyComponent(){
return(


const App = () => (

I am a button with green background

)
`

Props

Any alternative props that you wish to pass to a component (ie inline styles) will always be passed to the outer element of that component. For example, see the code for Tag below.

`
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import ZepiconsClose from '@zlab-de/zel-react-icons/ZepiconsClose';

const Tag = ({ className: classNameProp, children, onClose, ...other }) => {
return (

{children}




);
};

Tag.propTypes = {
className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
children: PropTypes.string
};

export default Tag;
``

Build files

This project uses the build files from Material UI (../../babel.config.js). To build this package successfully, you must first clone the Material UI repository and then add this package into @material-ui/packages/.

Note if we remove Downshift, please update the rollup file. We had to change ForwardRef to isForwardRef.

Publish TO NPM from build folder after running yarn build