hsl-shared-components

Project @ gitLab --> https://gitlab.hsl.fi/mobidigi/shared-components

Changelog: --> https://gitlab.hsl.fi/mobidigi/shared-components/blob/master/CHANGELOG.md

Install package

1. yarn add hsl-shared-components
2. Add required peer dependencies to your project

Install fonts

Required font --> https://www.typography.com/fonts/gotham-rounded/styles/

For web app

1. Use embed code / method provided for your app
2. For *.hsl.fi-domains:

<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6364294/7319392/css/fonts.css" />

For react native app

1. copy assets/ -folder to your project --> https://gitlab.hsl.fi/mobidigi/shared-components
2. package.json:

  "rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  },

1. 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

1. yarn install babel-polyfill
2. 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;