0 ? ' govuk-tabs__panel--hidden' : ''
61 | }`}
62 | id={panelId}
63 | {...panel}
64 | />
65 | );
66 | });
67 |
68 | return (
69 |
76 |
{title}
77 | {tabs}
78 | {panels}
79 |
80 | );
81 | }
82 |
83 | Tabs.defaultProps = {
84 | title: 'Contents',
85 | idPrefix: '',
86 | };
87 |
88 | export { Tabs };
89 |
--------------------------------------------------------------------------------
/src/govuk/components/tabs/tabs.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import fixtures from 'govuk-frontend/govuk/components/tabs/fixtures.json';
4 | import { Tabs } from '.';
5 | import processExampleData from '../../../../utils/processExampleData';
6 |
7 | const stories = storiesOf('tabs', module);
8 |
9 | for (const example of Object.values(
10 | processExampleData(fixtures.fixtures.filter((fixture) => !fixture.hidden))
11 | )) {
12 | stories.add(example.name, () =>
);
13 | }
14 |
--------------------------------------------------------------------------------
/src/govuk/components/tag/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Tag(props) {
4 | const { children, className, ...attributes } = props;
5 |
6 | return (
7 |
8 | {children}
9 |
10 | );
11 | }
12 |
13 | export { Tag };
14 |
--------------------------------------------------------------------------------
/src/govuk/components/tag/tag.story.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import fixtures from 'govuk-frontend/govuk/components/tag/fixtures.json';
4 | import { Tag } from '.';
5 | import processExampleData from '../../../../utils/processExampleData';
6 |
7 | const stories = storiesOf('tag', module);
8 |
9 | for (const example of Object.values(
10 | processExampleData(fixtures.fixtures.filter((fixture) => !fixture.hidden))
11 | )) {
12 | stories.add(example.name, () =>
);
13 | }
14 |
--------------------------------------------------------------------------------
/src/govuk/components/textarea/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Label, Hint, ErrorMessage } from '../..';
4 |
5 | const Textarea = React.forwardRef((props, ref) => {
6 | const {
7 | className,
8 | 'aria-describedby': describedBy,
9 | errorMessage,
10 | formGroup,
11 | hint,
12 | label,
13 | id,
14 | ...attributes
15 | } = props;
16 |
17 | let describedByValue = describedBy;
18 | let hintComponent;
19 | let errorMessageComponent;
20 |
21 | if (hint) {
22 | const hintId = `${id}-hint`;
23 | describedByValue += ` ${hintId}`;
24 | hintComponent =
;
25 | }
26 |
27 | if (errorMessage) {
28 | const errorId = id ? `${id}-error` : '';
29 | describedByValue += ` ${errorId}`;
30 | errorMessageComponent =
;
31 | }
32 |
33 | return (
34 |
39 |
40 | {hintComponent}
41 | {errorMessageComponent}
42 |
51 |
52 | );
53 | });
54 |
55 | Textarea.displayName = 'Textarea';
56 |
57 | Textarea.defaultProps = {
58 | 'aria-describedby': '',
59 | rows: 5,
60 | id: '',
61 | name: '',
62 | };
63 |
64 | export { Textarea };
65 |
--------------------------------------------------------------------------------
/src/govuk/components/textarea/textarea.story.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { storiesOf } from '@storybook/react';
3 | import fixtures from 'govuk-frontend/govuk/components/textarea/fixtures.json';
4 | import { Textarea as TextareaComponent } from '.';
5 | import processExampleData from '../../../../utils/processExampleData';
6 | import { WithRef } from '../../../../utils/WithRef';
7 |
8 | const stories = storiesOf('textarea', module);
9 |
10 | const Textarea = React.forwardRef((props, ref) => {
11 | const { value: initialValue, ...restProps } = props;
12 | const [value, setValue] = useState(initialValue);
13 |
14 | const onChangeHandler = (e) => {
15 | setValue(e.target.value);
16 | };
17 |
18 | return (
19 |
25 | );
26 | });
27 |
28 | Textarea.displayName = 'Textarea';
29 |
30 | for (const example of Object.values(
31 | processExampleData(
32 | fixtures.fixtures.filter((fixture) => !fixture.hidden),
33 | 'textarea'
34 | )
35 | )) {
36 | stories.add(example.name, () =>
);
37 | }
38 |
39 | stories.add('with ref', () => (
40 |
41 | ));
42 |
--------------------------------------------------------------------------------
/src/govuk/components/textarea/textarea.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import fixtures from 'govuk-frontend/govuk/components/textarea/fixtures.json';
4 | import { Textarea } from '.';
5 |
6 | describe('textarea', () => {
7 | it('correctly assigns a ref', () => {
8 | const ref = React.createRef();
9 | const { container } = render(
10 |