@atlaskit/tabs 17.2.0 → 17.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +14 -36
  2. package/dist/cjs/components/tab-list.compiled.css +8 -2
  3. package/dist/cjs/components/tab-list.js +1 -2
  4. package/dist/cjs/components/tabs.js +1 -1
  5. package/dist/es2019/components/tab-list.compiled.css +8 -2
  6. package/dist/es2019/components/tab-list.js +1 -1
  7. package/dist/es2019/components/tabs.js +1 -1
  8. package/dist/esm/components/tab-list.compiled.css +8 -2
  9. package/dist/esm/components/tab-list.js +1 -2
  10. package/dist/esm/components/tabs.js +1 -1
  11. package/dist/types/components/tab-panel.d.ts +2 -2
  12. package/dist/types-ts4.5/components/tab-panel.d.ts +2 -2
  13. package/package.json +2 -3
  14. package/codemods/13.0.0-lite-mode.tsx +0 -31
  15. package/codemods/__tests__/13.0.0-lite-mode.tsx +0 -569
  16. package/codemods/__tests__/add-id-prop.tsx +0 -77
  17. package/codemods/__tests__/map-tabs-prop.tsx +0 -299
  18. package/codemods/__tests__/on-select-to-on-change.tsx +0 -541
  19. package/codemods/__tests__/remove-components-prop.tsx +0 -151
  20. package/codemods/__tests__/remove-is-selected-test-prop.tsx +0 -147
  21. package/codemods/__tests__/remove-tab-item-tab-content.tsx +0 -86
  22. package/codemods/__tests__/remove-types.tsx +0 -162
  23. package/codemods/__tests__/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx +0 -311
  24. package/codemods/migrations/add-id-prop.tsx +0 -51
  25. package/codemods/migrations/map-tabs-prop.tsx +0 -171
  26. package/codemods/migrations/on-select-to-on-change.tsx +0 -91
  27. package/codemods/migrations/remove-components-prop.tsx +0 -20
  28. package/codemods/migrations/remove-is-selected-test-prop.tsx +0 -17
  29. package/codemods/migrations/remove-tab-item-tab-content.tsx +0 -26
  30. package/codemods/migrations/remove-types.tsx +0 -45
  31. package/codemods/migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx +0 -62
  32. package/codemods/utils.tsx +0 -39
package/codemods/__tests__/remove-is-selected-test-prop.tsx DELETED
@@ -1,147 +0,0 @@
1
- import { createTransformer } from '@atlaskit/codemod-utils';
2
-
3
- import { removeIsSelectedTestProp } from '../migrations/remove-is-selected-test-prop';
4
-
5
- const transformer = createTransformer([removeIsSelectedTestProp]);
6
-
7
- const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
8
-
9
- describe('remove isSelectedTest prop', () => {
10
- defineInlineTest(
11
- { default: transformer, parser: 'tsx' },
12
- {},
13
- `
14
- import React from 'react';
15
-
16
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
17
-
18
- export default function defaultTabs() {
19
- const isSelectedTest = (selected, tab, tabIndex) => tabIndex === 0;
20
-
21
- return (
22
- <Tabs
23
- onChange={index => console.log('Selected Tab', index + 1)}
24
- id="default"
25
- testId="default"
26
- isSelectedTest={isSelectedTest}
27
- >
28
- <TabList>
29
- <Tab>Tab 1</Tab>
30
- <Tab>Tab 2</Tab>
31
- <Tab>Tab 3</Tab>
32
- <Tab>Tab 4</Tab>
33
- </TabList>
34
- <TabPanel>One</TabPanel>
35
- <TabPanel>Two</TabPanel>
36
- <TabPanel>Three</TabPanel>
37
- <TabPanel>Four</TabPanel>
38
- </Tabs>
39
- );
40
- }
41
- `,
42
- `
43
- /* TODO: (from codemod)
44
- We could not automatically convert this code to the new API.
45
-
46
- This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way
47
- to make \`Tabs\` controlled and is not needed.
48
-
49
- You will have to change your usage of \`tabs\` to use the \`selected\` prop.
50
- This is documented at https:atlassian.design/components/tabs/examples#controlled */
51
- import React from 'react';
52
-
53
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
54
-
55
- export default function defaultTabs() {
56
- const isSelectedTest = (selected, tab, tabIndex) => tabIndex === 0;
57
-
58
- return (
59
- <Tabs
60
- onChange={index => console.log('Selected Tab', index + 1)}
61
- id="default"
62
- testId="default">
63
- <TabList>
64
- <Tab>Tab 1</Tab>
65
- <Tab>Tab 2</Tab>
66
- <Tab>Tab 3</Tab>
67
- <Tab>Tab 4</Tab>
68
- </TabList>
69
- <TabPanel>One</TabPanel>
70
- <TabPanel>Two</TabPanel>
71
- <TabPanel>Three</TabPanel>
72
- <TabPanel>Four</TabPanel>
73
- </Tabs>
74
- );
75
- }
76
- `,
77
- 'should remove isSelectedTest if it is defined inline',
78
- );
79
-
80
- defineInlineTest(
81
- { default: transformer, parser: 'tsx' },
82
- {},
83
- `
84
- import React from 'react';
85
-
86
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
87
- import { isSelectedTest } from 'utils';
88
-
89
- export default function defaultTabs() {
90
- return (
91
- <Tabs
92
- onChange={index => console.log('Selected Tab', index + 1)}
93
- id="default"
94
- testId="default"
95
- isSelectedTest={isSelectedTest}
96
- >
97
- <TabList>
98
- <Tab>Tab 1</Tab>
99
- <Tab>Tab 2</Tab>
100
- <Tab>Tab 3</Tab>
101
- <Tab>Tab 4</Tab>
102
- </TabList>
103
- <TabPanel>One</TabPanel>
104
- <TabPanel>Two</TabPanel>
105
- <TabPanel>Three</TabPanel>
106
- <TabPanel>Four</TabPanel>
107
- </Tabs>
108
- );
109
- }
110
- `,
111
- `
112
- /* TODO: (from codemod)
113
- We could not automatically convert this code to the new API.
114
-
115
- This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way
116
- to make \`Tabs\` controlled and is not needed.
117
-
118
- You will have to change your usage of \`tabs\` to use the \`selected\` prop.
119
- This is documented at https:atlassian.design/components/tabs/examples#controlled */
120
- import React from 'react';
121
-
122
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
123
- import { isSelectedTest } from 'utils';
124
-
125
- export default function defaultTabs() {
126
- return (
127
- <Tabs
128
- onChange={index => console.log('Selected Tab', index + 1)}
129
- id="default"
130
- testId="default">
131
- <TabList>
132
- <Tab>Tab 1</Tab>
133
- <Tab>Tab 2</Tab>
134
- <Tab>Tab 3</Tab>
135
- <Tab>Tab 4</Tab>
136
- </TabList>
137
- <TabPanel>One</TabPanel>
138
- <TabPanel>Two</TabPanel>
139
- <TabPanel>Three</TabPanel>
140
- <TabPanel>Four</TabPanel>
141
- </Tabs>
142
- );
143
- }
144
- `,
145
- 'should remove isSelectedTest if it is imported',
146
- );
147
- });
package/codemods/__tests__/remove-tab-item-tab-content.tsx DELETED
@@ -1,86 +0,0 @@
1
- import { createTransformer } from '@atlaskit/codemod-utils';
2
-
3
- import { removeTabItemTabContent } from '../migrations/remove-tab-item-tab-content';
4
-
5
- const transformer = createTransformer([removeTabItemTabContent]);
6
-
7
- const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
8
-
9
- // I'm not adding a comment here as the components codemod will add one
10
- describe('remove TabItem and TabContent import', () => {
11
- defineInlineTest(
12
- { default: transformer, parser: 'tsx' },
13
- {},
14
- `
15
- import React from 'react';
16
- import Tabs, { TabItem, TabContent } from '@atlaskit/tabs';
17
-
18
- const TooltipItem = (props: TabItemComponentProvided) => (
19
- <Tooltip content={props.data.tooltip}>
20
- <TabItem {...props} />
21
- </Tooltip>
22
- );
23
-
24
- const CustomContent = (props) => (
25
- <Tooltip content={props.data.tooltip}>
26
- <TabContent {...props} />
27
- </Tooltip>
28
- );
29
-
30
- const tabs = [
31
- { label: 'Tab 1', content: One, testId: 'one' },
32
- { label: 'Tab 2', content: Two },
33
- { label: 'Tab 3', content: Three },
34
- { label: 'Tab 4', content: Four },
35
- ];
36
-
37
- export default function defaultTabs() {
38
- return (
39
- <Tabs
40
- onChange={index => console.log('Selected Tab', index + 1)}
41
- id="default"
42
- testId="default"
43
- tabs={tabs}
44
- components={{ Item: TooltipItem, Content: CustomContent}}
45
- />
46
- );
47
- }
48
- `,
49
- `
50
- import React from 'react';
51
- import Tabs from '@atlaskit/tabs';
52
-
53
- const TooltipItem = (props: TabItemComponentProvided) => (
54
- <Tooltip content={props.data.tooltip}>
55
- <TabItem {...props} />
56
- </Tooltip>
57
- );
58
-
59
- const CustomContent = (props) => (
60
- <Tooltip content={props.data.tooltip}>
61
- <TabContent {...props} />
62
- </Tooltip>
63
- );
64
-
65
- const tabs = [
66
- { label: 'Tab 1', content: One, testId: 'one' },
67
- { label: 'Tab 2', content: Two },
68
- { label: 'Tab 3', content: Three },
69
- { label: 'Tab 4', content: Four },
70
- ];
71
-
72
- export default function defaultTabs() {
73
- return (
74
- <Tabs
75
- onChange={index => console.log('Selected Tab', index + 1)}
76
- id="default"
77
- testId="default"
78
- tabs={tabs}
79
- components={{ Item: TooltipItem, Content: CustomContent}}
80
- />
81
- );
82
- }
83
- `,
84
- 'should remove TabItem and TabContent',
85
- );
86
- });
package/codemods/__tests__/remove-types.tsx DELETED
@@ -1,162 +0,0 @@
1
- import { createTransformer } from '@atlaskit/codemod-utils';
2
-
3
- import { removeTypes } from '../migrations/remove-types';
4
-
5
- const transformer = createTransformer([removeTypes]);
6
-
7
- const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
8
-
9
- describe('remove components prop', () => {
10
- defineInlineTest(
11
- { default: transformer, parser: 'tsx' },
12
- {},
13
- `
14
- import React from 'react';
15
-
16
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
17
- import {
18
- TabItemElementProps,
19
- TabItemComponentProvided,
20
- TabContentComponentProvided,
21
- TabItemType,
22
- TabContentType,
23
- SelectedProp,
24
- IsSelectedTestFunction,
25
- OnSelectCallback,
26
- TabsState,
27
- TabsNavigationProps,
28
- Mode,
29
- } from '@atlaskit/tabs/types';
30
- import { customComponents } from './custom';
31
-
32
- export default function defaultTabs() {
33
- return (
34
- <Tabs
35
- onChange={index => console.log('Selected Tab', index + 1)}
36
- id="default"
37
- testId="default"
38
- components={customComponents}
39
- >
40
- <TabList>
41
- <Tab>Tab 1</Tab>
42
- <Tab>Tab 2</Tab>
43
- <Tab>Tab 3</Tab>
44
- <Tab>Tab 4</Tab>
45
- </TabList>
46
- <TabPanel>One</TabPanel>
47
- <TabPanel>Two</TabPanel>
48
- <TabPanel>Three</TabPanel>
49
- <TabPanel>Four</TabPanel>
50
- </Tabs>
51
- );
52
- }
53
- `,
54
- `
55
- import React from 'react';
56
-
57
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
58
- import { customComponents } from './custom';
59
-
60
- export default function defaultTabs() {
61
- return (
62
- <Tabs
63
- onChange={index => console.log('Selected Tab', index + 1)}
64
- id="default"
65
- testId="default"
66
- components={customComponents}
67
- >
68
- <TabList>
69
- <Tab>Tab 1</Tab>
70
- <Tab>Tab 2</Tab>
71
- <Tab>Tab 3</Tab>
72
- <Tab>Tab 4</Tab>
73
- </TabList>
74
- <TabPanel>One</TabPanel>
75
- <TabPanel>Two</TabPanel>
76
- <TabPanel>Three</TabPanel>
77
- <TabPanel>Four</TabPanel>
78
- </Tabs>
79
- );
80
- }
81
- `,
82
- 'should remove types that no longe exist and remove line',
83
- );
84
-
85
- defineInlineTest(
86
- { default: transformer, parser: 'tsx' },
87
- {},
88
- `
89
- import React from 'react';
90
-
91
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
92
- import {
93
- TabData,
94
- TabItemElementProps,
95
- TabItemComponentProvided,
96
- TabContentComponentProvided,
97
- TabItemType,
98
- TabContentType,
99
- SelectedProp,
100
- IsSelectedTestFunction,
101
- OnSelectCallback,
102
- TabsState,
103
- TabsNavigationProps,
104
- TabsProps as NewTabsProps,
105
- Mode,
106
- } from '@atlaskit/tabs/types';
107
- import { customComponents } from './custom';
108
-
109
- export default function defaultTabs() {
110
- return (
111
- <Tabs
112
- onChange={index => console.log('Selected Tab', index + 1)}
113
- id="default"
114
- testId="default"
115
- components={customComponents}
116
- >
117
- <TabList>
118
- <Tab>Tab 1</Tab>
119
- <Tab>Tab 2</Tab>
120
- <Tab>Tab 3</Tab>
121
- <Tab>Tab 4</Tab>
122
- </TabList>
123
- <TabPanel>One</TabPanel>
124
- <TabPanel>Two</TabPanel>
125
- <TabPanel>Three</TabPanel>
126
- <TabPanel>Four</TabPanel>
127
- </Tabs>
128
- );
129
- }
130
- `,
131
- `
132
- import React from 'react';
133
-
134
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
135
- import { TabData, TabsProps as NewTabsProps } from '@atlaskit/tabs/types';
136
- import { customComponents } from './custom';
137
-
138
- export default function defaultTabs() {
139
- return (
140
- <Tabs
141
- onChange={index => console.log('Selected Tab', index + 1)}
142
- id="default"
143
- testId="default"
144
- components={customComponents}
145
- >
146
- <TabList>
147
- <Tab>Tab 1</Tab>
148
- <Tab>Tab 2</Tab>
149
- <Tab>Tab 3</Tab>
150
- <Tab>Tab 4</Tab>
151
- </TabList>
152
- <TabPanel>One</TabPanel>
153
- <TabPanel>Two</TabPanel>
154
- <TabPanel>Three</TabPanel>
155
- <TabPanel>Four</TabPanel>
156
- </Tabs>
157
- );
158
- }
159
- `,
160
- 'should remove types that no longer exist but keep ones that do exist',
161
- );
162
- });
package/codemods/__tests__/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx DELETED
@@ -1,311 +0,0 @@
1
- import { createTransformer } from '@atlaskit/codemod-utils';
2
-
3
- import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from '../migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change';
4
-
5
- const transformer = createTransformer([renameIsContentPersistedToShouldUnmountTabPanelOnChange]);
6
-
7
- const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
8
-
9
- describe('remove isSelectedTest prop', () => {
10
- defineInlineTest(
11
- { default: transformer, parser: 'tsx' },
12
- {},
13
- `
14
- import React from 'react';
15
-
16
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
17
-
18
- export default function defaultTabs() {
19
- return (
20
- <Tabs
21
- onChange={index => console.log('Selected Tab', index + 1)}
22
- id="default"
23
- testId="default"
24
- isContentPersisted={false}
25
- >
26
- <TabList>
27
- <Tab>Tab 1</Tab>
28
- <Tab>Tab 2</Tab>
29
- <Tab>Tab 3</Tab>
30
- <Tab>Tab 4</Tab>
31
- </TabList>
32
- <TabPanel>One</TabPanel>
33
- <TabPanel>Two</TabPanel>
34
- <TabPanel>Three</TabPanel>
35
- <TabPanel>Four</TabPanel>
36
- </Tabs>
37
- );
38
- }
39
- `,
40
- `
41
- import React from 'react';
42
-
43
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
44
-
45
- export default function defaultTabs() {
46
- return (
47
- <Tabs
48
- onChange={index => console.log('Selected Tab', index + 1)}
49
- id="default"
50
- testId="default"
51
- shouldUnmountTabPanelOnChange
52
- >
53
- <TabList>
54
- <Tab>Tab 1</Tab>
55
- <Tab>Tab 2</Tab>
56
- <Tab>Tab 3</Tab>
57
- <Tab>Tab 4</Tab>
58
- </TabList>
59
- <TabPanel>One</TabPanel>
60
- <TabPanel>Two</TabPanel>
61
- <TabPanel>Three</TabPanel>
62
- <TabPanel>Four</TabPanel>
63
- </Tabs>
64
- );
65
- }
66
- `,
67
- 'should change isContentPersisted=false to shouldUnmountTabPanelOnChange',
68
- );
69
-
70
- defineInlineTest(
71
- { default: transformer, parser: 'tsx' },
72
- {},
73
- `
74
- import React from 'react';
75
-
76
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
77
-
78
- export default function defaultTabs() {
79
- return (
80
- <Tabs
81
- onChange={index => console.log('Selected Tab', index + 1)}
82
- id="default"
83
- testId="default"
84
- isContentPersisted={true}
85
- >
86
- <TabList>
87
- <Tab>Tab 1</Tab>
88
- <Tab>Tab 2</Tab>
89
- <Tab>Tab 3</Tab>
90
- <Tab>Tab 4</Tab>
91
- </TabList>
92
- <TabPanel>One</TabPanel>
93
- <TabPanel>Two</TabPanel>
94
- <TabPanel>Three</TabPanel>
95
- <TabPanel>Four</TabPanel>
96
- </Tabs>
97
- );
98
- }
99
- `,
100
- `
101
- import React from 'react';
102
-
103
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
104
-
105
- export default function defaultTabs() {
106
- return (
107
- <Tabs
108
- onChange={index => console.log('Selected Tab', index + 1)}
109
- id="default"
110
- testId="default">
111
- <TabList>
112
- <Tab>Tab 1</Tab>
113
- <Tab>Tab 2</Tab>
114
- <Tab>Tab 3</Tab>
115
- <Tab>Tab 4</Tab>
116
- </TabList>
117
- <TabPanel>One</TabPanel>
118
- <TabPanel>Two</TabPanel>
119
- <TabPanel>Three</TabPanel>
120
- <TabPanel>Four</TabPanel>
121
- </Tabs>
122
- );
123
- }
124
- `,
125
- 'should remove isContentPersisted if set to true as that is now default behaviour',
126
- );
127
-
128
- defineInlineTest(
129
- { default: transformer, parser: 'tsx' },
130
- {},
131
- `
132
- import React from 'react';
133
-
134
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
135
-
136
- export default function defaultTabs() {
137
- return (
138
- <Tabs
139
- onChange={index => console.log('Selected Tab', index + 1)}
140
- id="default"
141
- isContentPersisted
142
- testId="default"
143
- >
144
- <TabList>
145
- <Tab>Tab 1</Tab>
146
- <Tab>Tab 2</Tab>
147
- <Tab>Tab 3</Tab>
148
- <Tab>Tab 4</Tab>
149
- </TabList>
150
- <TabPanel>One</TabPanel>
151
- <TabPanel>Two</TabPanel>
152
- <TabPanel>Three</TabPanel>
153
- <TabPanel>Four</TabPanel>
154
- </Tabs>
155
- );
156
- }
157
- `,
158
- `
159
- import React from 'react';
160
-
161
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
162
-
163
- export default function defaultTabs() {
164
- return (
165
- <Tabs
166
- onChange={index => console.log('Selected Tab', index + 1)}
167
- id="default"
168
- testId="default">
169
- <TabList>
170
- <Tab>Tab 1</Tab>
171
- <Tab>Tab 2</Tab>
172
- <Tab>Tab 3</Tab>
173
- <Tab>Tab 4</Tab>
174
- </TabList>
175
- <TabPanel>One</TabPanel>
176
- <TabPanel>Two</TabPanel>
177
- <TabPanel>Three</TabPanel>
178
- <TabPanel>Four</TabPanel>
179
- </Tabs>
180
- );
181
- }
182
- `,
183
- 'should remove isContentPersisted if its a simple boolean prop "true" as that is now default behaviour',
184
- );
185
-
186
- defineInlineTest(
187
- { default: transformer, parser: 'tsx' },
188
- {},
189
- `
190
- import React from 'react';
191
-
192
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
193
-
194
- const isContentPersisted = false;
195
-
196
- export default function defaultTabs() {
197
-
198
- return (
199
- <Tabs
200
- onChange={index => console.log('Selected Tab', index + 1)}
201
- id="default"
202
- testId="default"
203
- isContentPersisted={isContentPersisted}
204
- >
205
- <TabList>
206
- <Tab>Tab 1</Tab>
207
- <Tab>Tab 2</Tab>
208
- <Tab>Tab 3</Tab>
209
- <Tab>Tab 4</Tab>
210
- </TabList>
211
- <TabPanel>One</TabPanel>
212
- <TabPanel>Two</TabPanel>
213
- <TabPanel>Three</TabPanel>
214
- <TabPanel>Four</TabPanel>
215
- </Tabs>
216
- );
217
- }
218
- `,
219
- `
220
- import React from 'react';
221
-
222
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
223
-
224
- const isContentPersisted = false;
225
-
226
- export default function defaultTabs() {
227
-
228
- return (
229
- <Tabs
230
- onChange={index => console.log('Selected Tab', index + 1)}
231
- id="default"
232
- testId="default"
233
- shouldUnmountTabPanelOnChange={!isContentPersisted}
234
- >
235
- <TabList>
236
- <Tab>Tab 1</Tab>
237
- <Tab>Tab 2</Tab>
238
- <Tab>Tab 3</Tab>
239
- <Tab>Tab 4</Tab>
240
- </TabList>
241
- <TabPanel>One</TabPanel>
242
- <TabPanel>Two</TabPanel>
243
- <TabPanel>Three</TabPanel>
244
- <TabPanel>Four</TabPanel>
245
- </Tabs>
246
- );
247
- }
248
- `,
249
- 'should use the negation of isContentPersisted for shouldUnmountTabPanelOnChange',
250
- );
251
-
252
- defineInlineTest(
253
- { default: transformer, parser: 'tsx' },
254
- {},
255
- `
256
- import React from 'react';
257
-
258
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
259
-
260
- export default function defaultTabs() {
261
-
262
- return (
263
- <Tabs
264
- onChange={index => console.log('Selected Tab', index + 1)}
265
- id="default"
266
- testId="default"
267
- >
268
- <TabList>
269
- <Tab>Tab 1</Tab>
270
- <Tab>Tab 2</Tab>
271
- <Tab>Tab 3</Tab>
272
- <Tab>Tab 4</Tab>
273
- </TabList>
274
- <TabPanel>One</TabPanel>
275
- <TabPanel>Two</TabPanel>
276
- <TabPanel>Three</TabPanel>
277
- <TabPanel>Four</TabPanel>
278
- </Tabs>
279
- );
280
- }
281
- `,
282
- `
283
- import React from 'react';
284
-
285
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
286
-
287
- export default function defaultTabs() {
288
-
289
- return (
290
- <Tabs
291
- onChange={index => console.log('Selected Tab', index + 1)}
292
- id="default"
293
- testId="default"
294
- shouldUnmountTabPanelOnChange>
295
- <TabList>
296
- <Tab>Tab 1</Tab>
297
- <Tab>Tab 2</Tab>
298
- <Tab>Tab 3</Tab>
299
- <Tab>Tab 4</Tab>
300
- </TabList>
301
- <TabPanel>One</TabPanel>
302
- <TabPanel>Two</TabPanel>
303
- <TabPanel>Three</TabPanel>
304
- <TabPanel>Four</TabPanel>
305
- </Tabs>
306
- );
307
- }
308
- `,
309
- 'should add shouldUnmountTabPanelOnChange if not defined',
310
- );
311
- });