1 | import React from 'react'
|
2 | import PropTypes from 'prop-types'
|
3 | import styled from 'styled-components'
|
4 |
|
5 | const Bold = styled.div`
|
6 | background: red;
|
7 | color: #fff;
|
8 | padding: 5px;
|
9 | `
|
10 |
|
11 | /**
|
12 | * Some documented component
|
13 | *
|
14 | * @component
|
15 | * @example <caption>Default example</caption>
|
16 | * const text = 'Meva'
|
17 | * return (
|
18 | * <Documented2>
|
19 | * <Documented text={text} />
|
20 | * </Documented2>
|
21 | * )
|
22 | *
|
23 | * @example <caption>Ala ma kota</caption>
|
24 | * const text = 'some example text 2'
|
25 | * return (
|
26 | * <Documented2>
|
27 | * <Documented text={text} header={'sime'} />
|
28 | * </Documented2>
|
29 | * )
|
30 | */
|
31 | const Documented = (props) => {
|
32 | const { text, header } = props
|
33 | return (
|
34 | <p>
|
35 | {header}
|
36 | <Bold>
|
37 | {text}
|
38 | </Bold>
|
39 | </p>
|
40 | )
|
41 | }
|
42 |
|
43 | Documented.propTypes = {
|
44 | /**
|
45 | * Text is a text
|
46 | */
|
47 | text: PropTypes.string,
|
48 | header: PropTypes.string.isRequired,
|
49 | }
|
50 |
|
51 | Documented.defaultProps = {
|
52 | text: 'Hello World',
|
53 | }
|
54 |
|
55 | export default Documented
|