hsl-shared-components
v7.0.3-0
Published
Shared components to be used in HSL projects. React and styled components.
Downloads
76
Readme
Project @ gitLab --> https://gitlab.hsl.fi/mobidigi/shared-components
Changelog: --> https://gitlab.hsl.fi/mobidigi/shared-components/blob/master/CHANGELOG.md
Install package
yarn add hsl-shared-components
- Add required peer dependencies to your project
Install fonts
Required font --> https://www.typography.com/fonts/gotham-rounded/styles/
For web app
- Use embed code / method provided for your app
- For
*.hsl.fi
-domains:
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6364294/7319392/css/fonts.css" />
For react native app
- copy
assets/
-folder to your project --> https://gitlab.hsl.fi/mobidigi/shared-components - package.json:
"rnpm": {
"assets": [
"./assets/fonts"
]
},
- run
react-native link
Add required providers
import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';
import Theme from 'hsl-shared-components/lib/Theme';
const App = () => (
<ThemeProvider theme={Theme}>
...
</ThemeProvider>
);
export default App;
Add required polyfills
Your application may need to polyfill Promise, Object.assign, and Array.from as necessary for your desired browser support.
Easiest way to achieve this is using babel-polyfill
yarn install babel-polyfill
- In project root add
import 'babel-polyfill'
Usage
Standard
import ToggleButton from 'hsl-shared-components/lib/ToggleButton';
...
<ToggleButton title="Toggle me!" />
Custom positioning
import ToggleButton from 'hsl-shared-components/lib/ToggleButton';
const StyledToggleButton = ToggleButton.extend`
position: absolute;
bottom: 10px;
width: 200px;
`;
...
<StyledToggleButton title="Toggle me!" />
Different styles with custom props
import ToggleButton from 'hsl-shared-components/lib/ToggleButton';
const StyledToggleButton = styled(({
floating,
...rest
}) =>
<ToggleButton {...rest} />
)`
${props => props.floating && `
position: absolute;
bottom: 10px;
`}
`;
...
<StyledToggleButton title="Toggle me!" floating={trueOrFalse} />
Theme
Use theme outside styled-components
import { withTheme } from 'styled-components';
const MyComponent = withTheme(props =>
<InfoIcon fill={props.theme.colors.primary.hslBlue} />
);
Add your own stuff or override theme vars
Theme source: https://gitlab.hsl.fi/mobidigi/shared-components/tree/master/packages/hsl-shared-components/src/Theme
import React from 'react';
import PropTypes from 'prop-types';
import { ThemeProvider } from 'styled-components';
import Theme from 'hsl-shared-components/lib/Theme';
const MyModifiedTheme = {
...Theme,
custom: {
aliceblue: '#f0f8ff',
}
};
const App = () => (
<ThemeProvider theme={MyModifiedTheme}>
...
</ThemeProvider>
);
export default App;