Omaposti-web-components NPM

React web componets for OmaPosti

Storybook

Live storybook at storybook.oma.postinext.fi

Usage

In your React Project

npm install omaposti-web-components --save

Theme provider

All components rely on Styled components ThemeProvider to be configured.

**You could also inject theme object to every component manually (NOT RECOMMENDED)

Install styled components

npm install styled-components --save

Configure theme provider to your app

import { ThemeProvider } from 'styled-components';
import { PostiTheme } from 'omaposti-web-components'

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={PostiTheme}>
        <App className="App">
        ...
        </App>
      </ThemeProvider>
    );
  }
}
export default App;

Now you can import components and use them in your application

import React from 'react';
import styled from 'styled-components';
import { Heading } from 'omaposti-web-components'

const MyElement = styled.div`
  display: flex;
`;

export class MyComponent extends React.Component {
  render() {
    return (
      <MyElement>
        <Heading level={1}>Hello</Heading>        
      </MyElement>
    );
  }
}

Component props

All components have prop types definitions to help using them

Overriding styles

If you must override component default styles or props don't support your use case you can manually override styles by providing styleOverride object

<Heading
  level={1}
  styleOverride={
    {
      'text-decoration': 'italic'
    }
  }

To change default values please discuss with designers and submit an Pull Request

NOTE: Only few components support overriding at the moment

To enable overriding for a component see how it is implemented for example in Line element, implement it and submit and Pull Request.

Development

If you have not already cloned the repo run:

git clone git@github.com:PostiDigital/omaposti-web-components.git &&
cd omaposti-web-components

Install dependencies and start

npm install &&
npm start

Local development

To develop components live at your own application use npm link

cd omaposti-web-components
npm link
npm start

At your own application

cd your-own-application
npm link omaposti-web-components
npm start

Now all changes to components should automatically be reflected to your application if your application has been configured to watch changes

Now to see local storybook open browser at http://localhost:9010 **SEE "knobs" TAB on the right hand panel for prop options!

Contributing

All changes must be submitted trough Pull Requests. For now OmaPosti team will review Pull Requests until something else is agreed.

IMPORTANT

All components must be visible in storybook.
Storybook stories must have knobs defined for all the props.
All props must have prop types definitions.

husky prop-types react react-burger-menu react-dom react-pdf react-qr-svg react-sizeme

@infinitebrahmanuniverse/nolb-oma @everything-registry/sub-chunk-2374

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago