7.0.3-0 • Published 5 years ago

hsl-shared-components v7.0.3-0

Weekly downloads
844
License
-
Repository
-
Last release
5 years ago

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;
7.0.3-0

5 years ago

7.0.2-0

5 years ago

7.0.1-0

5 years ago

7.0.0-0

5 years ago

6.0.0

5 years ago

6.0.0-1

6 years ago

5.2.2

6 years ago

6.0.0-0

6 years ago

5.2.1

6 years ago

5.2.0

6 years ago

5.1.0

6 years ago

5.0.0

6 years ago

4.3.1-0

6 years ago

4.3.0-1

6 years ago

4.3.0-0

6 years ago

4.2.0

6 years ago

4.2.0-0

6 years ago

4.1.1

6 years ago

4.1.0-2

6 years ago

4.1.0-1

6 years ago

4.1.0-0

6 years ago

4.0.3

6 years ago

4.0.2-0

6 years ago

4.0.1

6 years ago

4.0.0-0

6 years ago

4.0.0

6 years ago

3.5.0-2

6 years ago

3.5.0-1

6 years ago

3.5.0-0

6 years ago

3.5.0

6 years ago

3.4.2-1

6 years ago

3.4.2-0

7 years ago

3.4.1-0

7 years ago

3.4.1

7 years ago

3.4.0

7 years ago

3.4.0-0

7 years ago

3.3.0

7 years ago

3.3.0-2

7 years ago

3.3.0-1

7 years ago

3.3.0-0

7 years ago

3.2.1

7 years ago

3.1.0

7 years ago

3.0.0

7 years ago

3.0.0-2

7 years ago

2.2.0

7 years ago

3.0.0-1

7 years ago

2.1.0

7 years ago

2.0.0

7 years ago

3.0.0-0

7 years ago

1.0.2-0

7 years ago

2.0.0-0

7 years ago

1.0.1-0

7 years ago

1.0.0

7 years ago

0.16.3-9

7 years ago

0.16.3-8

7 years ago

0.16.13-7

7 years ago

0.16.12-25

7 years ago

0.16.12-24

7 years ago

0.16.13-0

7 years ago

0.16.12-23

7 years ago

0.16.12-22

7 years ago

0.16.12-21

7 years ago

0.16.12-20

7 years ago

0.16.1-2.20

7 years ago

0.16.12-19

7 years ago

0.16.12-18

7 years ago

0.16.12-17

7 years ago

0.16.13-3

7 years ago

0.16.12-16

7 years ago

0.16.12-15

7 years ago

0.16.12-14

7 years ago

0.16.13-2

7 years ago

0.16.13-1

7 years ago

0.16.12-13

7 years ago

0.16.12-12

7 years ago

0.16.12-11

7 years ago

0.16.12-10

7 years ago

0.16.13

7 years ago

0.16.12-9

7 years ago

0.16.12-8

7 years ago

0.16.12-7

7 years ago

0.16.12-6

7 years ago

0.16.12-5

7 years ago

0.16.12-4

7 years ago

0.16.12-3

7 years ago

0.16.12-2

7 years ago

0.16.12-1

7 years ago

0.16.12-0

7 years ago

0.16.11-21

7 years ago

0.16.11-20

7 years ago

0.16.11-19

7 years ago

0.16.1-1.19

7 years ago

0.16.11-17

7 years ago

0.16.11-16

7 years ago

0.16.11-15

7 years ago

0.16.11-14

7 years ago

0.16.11-13

7 years ago

0.16.11-12

7 years ago

0.16.11-11

7 years ago

0.16.11-10

7 years ago

0.16.11-9

7 years ago

0.16.11-8

7 years ago

0.16.11-7

7 years ago

0.16.11-6

7 years ago

0.16.11-4

7 years ago

0.16.11-3

7 years ago

0.16.11-0

7 years ago

0.16.10-19

7 years ago

0.16.10-21

7 years ago

0.16.10-17

7 years ago

0.16.10-16

7 years ago

0.16.10-15

7 years ago

0.16.10-14

7 years ago

0.16.10-13

7 years ago

0.16.10-12

7 years ago

0.16.10-11

7 years ago

0.16.10-10

7 years ago

0.16.10-9

7 years ago

0.16.10-8

7 years ago

0.16.10-7

7 years ago

0.16.10-6

7 years ago

0.16.10-5

7 years ago

0.16.10-4

7 years ago

0.16.10-3

7 years ago

0.16.10-2

7 years ago

0.16.10-1

7 years ago

0.16.10-0

7 years ago

0.16.9-6

7 years ago

0.16.9-5

7 years ago

0.16.9-4

7 years ago

0.16.9-3

7 years ago

0.16.9-2

7 years ago

0.16.9-1

7 years ago

0.16.9-0

7 years ago

0.16.8-5

7 years ago

0.16.8-4

7 years ago

0.16.8-3

7 years ago

0.16.8-2

7 years ago

0.16.8

7 years ago

0.16.8-1

7 years ago

0.16.8-0

7 years ago

0.16.7

7 years ago

0.16.6-2

8 years ago

0.16.6-1

8 years ago

0.16.6-0

8 years ago

0.16.5-0

8 years ago

0.15.5

8 years ago

0.16.4-13

8 years ago

0.16.4-12

8 years ago

0.16.4-11

8 years ago

0.16.4-10

8 years ago

0.16.4-9

8 years ago

0.15.4-1

8 years ago

0.16.4-8

8 years ago

0.16.4-7

8 years ago

0.16.4-6

8 years ago

0.16.4-5

8 years ago

0.16.4-4

8 years ago

0.16.4-3

8 years ago

0.16.4-2

8 years ago

0.16.4-1

8 years ago

0.16.4-0

8 years ago

0.15.4-0

8 years ago

0.15.2-16

8 years ago

0.15.2-15

8 years ago

0.15.3-3

8 years ago

0.15.3-2

8 years ago

0.16.3-0

8 years ago

0.15.3-1

8 years ago

0.15.2-14

8 years ago

0.15.2-13

8 years ago

0.15.3-0

8 years ago

0.16.2-1

8 years ago

0.16.2-0

8 years ago

0.15.2-12

8 years ago

0.16.1-2

8 years ago

0.16.1-1

8 years ago

0.15.2-11

8 years ago

0.15.2-10

8 years ago

0.15.2-9

8 years ago

0.15.2-8

8 years ago

0.16.1-0

8 years ago

0.16.0-6

8 years ago

0.16.0-5

8 years ago

0.16.0-4

8 years ago

0.16.0-3

8 years ago

0.16.0-2

8 years ago

0.16.0-1

8 years ago

0.16.0-0

8 years ago

0.15.2-7

8 years ago

0.15.2-6

8 years ago

0.15.2-5

8 years ago

0.15.2-4

8 years ago

0.15.2-3

8 years ago

0.15.2-2

8 years ago

0.15.2-1

8 years ago

0.15.2-0

8 years ago

0.15.1-0

8 years ago

0.15.0-43

8 years ago

0.15.0-42

8 years ago

0.15.0-41

8 years ago

0.15.0-40

8 years ago

0.15.0-37

8 years ago

0.15.0-36

8 years ago

0.15.0-35

8 years ago

0.15.0-34

8 years ago

0.15.0-33

8 years ago

0.15.0-32

8 years ago

0.15.0-31

8 years ago

0.15.0-30

8 years ago

0.15.0-22

8 years ago

0.15.0-21

8 years ago

0.15.0-20

8 years ago

0.15.0-2

8 years ago

0.15.0-1

8 years ago

0.15.0-0

8 years ago

0.14.0-4

8 years ago

0.14.0-3

8 years ago

0.14.0-2

8 years ago

0.14.0-1

8 years ago

0.14.0

8 years ago

0.13.1-1

8 years ago

0.13.1-0

8 years ago

0.13.0-2

8 years ago

0.13.0-1

8 years ago

0.13.0-0

8 years ago

0.12.0

8 years ago

0.11.2

8 years ago

0.11.1

8 years ago

0.10.0

8 years ago

0.9.7

8 years ago

0.9.6

8 years ago

0.9.5

8 years ago

0.9.4

8 years ago

0.9.3

8 years ago

0.9.2

8 years ago

0.9.1

8 years ago

0.9.0

8 years ago

0.8.0

8 years ago

0.7.2

8 years ago

0.7.0

8 years ago

0.6.0

8 years ago