@kaizen/components 2.2.4 → 2.3.1

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 (37) hide show
  1. package/dist/cjs/src/MenuV1/index.cjs +4 -3
  2. package/dist/cjs/src/TitleBlock/TitleBlock.cjs +26 -36
  3. package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs +3 -0
  4. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs +90 -45
  5. package/dist/cjs/src/TitleBlock/subcomponents/MainActions.module.scss.cjs +3 -1
  6. package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs +51 -14
  7. package/dist/esm/src/MenuV1/index.mjs +5 -3
  8. package/dist/esm/src/TitleBlock/TitleBlock.mjs +27 -37
  9. package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs +3 -0
  10. package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs +92 -47
  11. package/dist/esm/src/TitleBlock/subcomponents/MainActions.module.scss.mjs +3 -1
  12. package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs +51 -14
  13. package/dist/styles.css +78 -207
  14. package/dist/types/TitleBlock/TitleBlock.d.ts +1 -1
  15. package/dist/types/TitleBlock/subcomponents/MainActions.d.ts +4 -3
  16. package/package.json +1 -1
  17. package/src/TitleBlock/TitleBlock.module.scss +51 -14
  18. package/src/TitleBlock/TitleBlock.spec.tsx +33 -461
  19. package/src/TitleBlock/TitleBlock.tsx +4 -24
  20. package/src/TitleBlock/_docs/TitleBlock.stories.tsx +78 -100
  21. package/src/TitleBlock/_mixins.scss +6 -0
  22. package/src/TitleBlock/subcomponents/MainActions.module.scss +27 -2
  23. package/src/TitleBlock/subcomponents/MainActions.tsx +127 -70
  24. package/src/TitleBlock/subcomponents/SecondaryActions.tsx +105 -45
  25. package/src/TitleBlock/subcomponents/Toolbar.tsx +1 -0
  26. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.cjs +0 -27
  27. package/dist/cjs/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.cjs +0 -6
  28. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.cjs +0 -306
  29. package/dist/cjs/src/TitleBlock/subcomponents/MobileActions.module.scss.cjs +0 -16
  30. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.mjs +0 -21
  31. package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.mjs +0 -4
  32. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.mjs +0 -300
  33. package/dist/esm/src/TitleBlock/subcomponents/MobileActions.module.scss.mjs +0 -14
  34. package/dist/types/TitleBlock/subcomponents/MobileActions.d.ts +0 -14
  35. package/src/TitleBlock/subcomponents/MobileActions.module.scss +0 -208
  36. package/src/TitleBlock/subcomponents/MobileActions.spec.tsx +0 -210
  37. package/src/TitleBlock/subcomponents/MobileActions.tsx +0 -472
@@ -35,25 +35,15 @@ describe('<TitleBlock />', () => {
35
35
  }
36
36
 
37
37
  it('renders the primary action button label and href', () => {
38
- const { getByTestId } = render(
38
+ const { getByRole } = render(
39
39
  <TitleBlock title="Test Title" primaryAction={primaryActionAsLink}>
40
40
  Example
41
41
  </TitleBlock>,
42
42
  )
43
- const btn = getByTestId('title-block-primary-action-button')
43
+ const btn = getByRole('link', { name: primaryActionAsLink.label })
44
44
  expect(btn.textContent).toEqual(primaryActionAsLink.label)
45
45
  expect(btn.getAttribute('href')).toEqual(primaryActionAsLink.href)
46
46
  })
47
-
48
- it('passes the href to the mobile action drawer button', () => {
49
- const { getByTestId } = render(
50
- <TitleBlock title="Test Title" primaryAction={primaryActionAsLink}>
51
- Example
52
- </TitleBlock>,
53
- )
54
- const btn = getByTestId('title-block-mobile-actions-primary-button')
55
- expect(btn.getAttribute('href')).toEqual(primaryActionAsLink.href)
56
- })
57
47
  })
58
48
 
59
49
  describe('when the primary action is a button with only an onClick', () => {
@@ -69,12 +59,12 @@ describe('<TitleBlock />', () => {
69
59
  })
70
60
 
71
61
  it('renders the primary action button label and onClick', async () => {
72
- const { getByTestId } = render(
62
+ const { getByRole } = render(
73
63
  <TitleBlock title="Test Title" primaryAction={primaryActionAsButton}>
74
64
  Example
75
65
  </TitleBlock>,
76
66
  )
77
- const btn = getByTestId('title-block-primary-action-button')
67
+ const btn = getByRole('button', { name: primaryActionAsButton.label })
78
68
  expect(btn.textContent).toEqual(primaryActionAsButton.label)
79
69
  await user.click(btn)
80
70
 
@@ -82,21 +72,6 @@ describe('<TitleBlock />', () => {
82
72
  expect(testOnClickFn).toHaveBeenCalled()
83
73
  })
84
74
  })
85
-
86
- it('creates a mobile actions primary button', async () => {
87
- const { getByTestId } = render(
88
- <TitleBlock title="Test Title" primaryAction={primaryActionAsButton}>
89
- Example
90
- </TitleBlock>,
91
- )
92
-
93
- const btn = getByTestId('title-block-mobile-actions-primary-button')
94
- expect(btn.textContent).toEqual(primaryActionAsButton.label)
95
- await user.click(btn)
96
- await waitFor(() => {
97
- expect(testOnClickFn).toHaveBeenCalled()
98
- })
99
- })
100
75
  })
101
76
 
102
77
  describe('when the primary action is disabled', () => {
@@ -118,12 +93,12 @@ describe('<TitleBlock />', () => {
118
93
  })
119
94
 
120
95
  it('renders a disabled primary action button', async () => {
121
- const { getByTestId } = render(
96
+ const { getByRole } = render(
122
97
  <TitleBlock title="Test Title" primaryAction={primaryActionAsButton}>
123
98
  Example
124
99
  </TitleBlock>,
125
100
  )
126
- const btn = getByTestId('title-block-primary-action-button') as HTMLButtonElement
101
+ const btn = getByRole('button', { name: primaryActionAsButton.label }) as HTMLButtonElement
127
102
  expect(btn.textContent).toEqual(primaryActionAsButton.label)
128
103
  expect(btn.disabled).toBeTruthy()
129
104
  await user.click(btn)
@@ -134,40 +109,12 @@ describe('<TitleBlock />', () => {
134
109
  })
135
110
 
136
111
  it('renders a disabled primary action link button', () => {
137
- const { getByTestId } = render(
112
+ const { getByRole } = render(
138
113
  <TitleBlock title="Test Title" primaryAction={primaryActionAsLink}>
139
114
  Example
140
115
  </TitleBlock>,
141
116
  )
142
- const btn = getByTestId('title-block-primary-action-button') as HTMLButtonElement
143
- expect(btn.textContent).toEqual(primaryActionAsLink.label)
144
- expect(btn.getAttribute('href')).not.toEqual(primaryActionAsLink.href)
145
- })
146
-
147
- it('creates a mobile actions primary button with disabled styles and no onClick', async () => {
148
- const { getByTestId } = render(
149
- <TitleBlock title="Test Title" primaryAction={primaryActionAsButton}>
150
- Example
151
- </TitleBlock>,
152
- )
153
-
154
- const btn = getByTestId('title-block-mobile-actions-primary-button') as HTMLButtonElement
155
- expect(btn.textContent).toEqual(primaryActionAsButton.label)
156
- await user.click(btn)
157
-
158
- await waitFor(() => {
159
- expect(testOnClickFn).not.toHaveBeenCalled()
160
- })
161
- })
162
-
163
- it('creates a mobile actions primary button with disabled styles and no href', () => {
164
- const { getByTestId } = render(
165
- <TitleBlock title="Test Title" primaryAction={primaryActionAsLink}>
166
- Example
167
- </TitleBlock>,
168
- )
169
-
170
- const btn = getByTestId('title-block-mobile-actions-primary-button') as HTMLButtonElement
117
+ const btn = getByRole('button', { name: primaryActionAsButton.label }) as HTMLButtonElement
171
118
  expect(btn.textContent).toEqual(primaryActionAsLink.label)
172
119
  expect(btn.getAttribute('href')).not.toEqual(primaryActionAsLink.href)
173
120
  })
@@ -187,12 +134,12 @@ describe('<TitleBlock />', () => {
187
134
  })
188
135
 
189
136
  it('renders the primary action button label, href and onClick', async () => {
190
- const { getByTestId } = render(
137
+ const { getByRole } = render(
191
138
  <TitleBlock title="Test Title" primaryAction={primaryActionAsLinkAndOnClick}>
192
139
  Example
193
140
  </TitleBlock>,
194
141
  )
195
- const btn = getByTestId('title-block-primary-action-button')
142
+ const btn = getByRole('link', { name: primaryActionAsLinkAndOnClick.label })
196
143
  expect(btn.textContent).toEqual(primaryActionAsLinkAndOnClick.label)
197
144
  expect(btn.getAttribute('href')).toEqual(primaryActionAsLinkAndOnClick.href)
198
145
  await user.click(btn)
@@ -201,21 +148,6 @@ describe('<TitleBlock />', () => {
201
148
  expect(testOnClickFn).toHaveBeenCalled()
202
149
  })
203
150
  })
204
-
205
- it('passes both the href and onClick to the mobile action drawer button', async () => {
206
- const { getByTestId } = render(
207
- <TitleBlock title="Test Title" primaryAction={primaryActionAsLinkAndOnClick}>
208
- Example
209
- </TitleBlock>,
210
- )
211
- const btn = getByTestId('title-block-mobile-actions-primary-button')
212
- expect(btn.getAttribute('href')).toEqual(primaryActionAsLinkAndOnClick.href)
213
- await user.click(btn)
214
-
215
- await waitFor(() => {
216
- expect(testOnClickFn).toHaveBeenCalled()
217
- })
218
- })
219
151
  })
220
152
 
221
153
  describe('when the primary action is a menu', () => {
@@ -234,30 +166,20 @@ describe('<TitleBlock />', () => {
234
166
  }
235
167
 
236
168
  it('renders the primary action menu button with label and menu items', async () => {
237
- const { getByTestId, getAllByTestId } = render(
169
+ const { getByRole, getAllByRole } = render(
238
170
  <TitleBlock title="Test Title" primaryAction={primaryActionAsMenu}>
239
171
  Example
240
172
  </TitleBlock>,
241
173
  )
242
- const btn = getByTestId('title-block-primary-action-button')
174
+ const btn = getByRole('button', { name: primaryActionAsMenu.label })
243
175
  expect(btn).toHaveAccessibleName(primaryActionAsMenu.label)
244
176
  await user.click(btn)
245
177
 
246
178
  await waitFor(() => {
247
- const menuItems = getAllByTestId(/^main-action-primary-menu-item-/)
179
+ const menuItems = getAllByRole('listitem')
248
180
  expect(menuItems.length).toEqual(2)
249
181
  })
250
182
  })
251
-
252
- it('passes the primary menu items to the mobile actions drawer', () => {
253
- const { getAllByTestId } = render(
254
- <TitleBlock title="Test Title" primaryAction={primaryActionAsMenu}>
255
- Example
256
- </TitleBlock>,
257
- )
258
- const menuItems = getAllByTestId(/^title-block-mobile-actions-primary-link-/)
259
- expect(menuItems.length).toEqual(2)
260
- })
261
183
  })
262
184
 
263
185
  describe('when the default action is a button with only an href', () => {
@@ -267,45 +189,22 @@ describe('<TitleBlock />', () => {
267
189
  }
268
190
 
269
191
  it('renders the default action button label and href', () => {
270
- const { getByTestId } = render(
192
+ const { getByRole } = render(
271
193
  <TitleBlock title="Test Title" defaultAction={defaultActionAsLink}>
272
194
  Example
273
195
  </TitleBlock>,
274
196
  )
275
- const btn = getByTestId('title-block-default-action-button')
197
+ const btn = getByRole('link', { name: defaultActionAsLink.label })
276
198
  expect(btn.textContent).toEqual(defaultActionAsLink.label)
277
199
  expect(btn.getAttribute('href')).toEqual(defaultActionAsLink.href)
278
200
  })
279
-
280
- it('creates a mobile actions default action menu item', () => {
281
- const { getByTestId } = render(
282
- <TitleBlock title="Test Title" defaultAction={defaultActionAsLink}>
283
- Example
284
- </TitleBlock>,
285
- )
286
-
287
- const menuItem = getByTestId('title-block-mobile-actions-default-link')
288
- expect(menuItem.getAttribute('href')).toEqual(defaultActionAsLink.href)
289
- expect(menuItem.textContent).toEqual(defaultActionAsLink.label)
290
- })
291
-
292
- it('renders the mobile actions menu drawer handle even with no primary action', () => {
293
- const { getByTestId } = render(
294
- <TitleBlock title="Test Title" defaultAction={defaultActionAsLink}>
295
- Example
296
- </TitleBlock>,
297
- )
298
-
299
- expect(getByTestId('title-block-mobile-actions-drawer-handle')).toBeTruthy()
300
- })
301
201
  })
302
202
 
303
203
  describe('when the default action is a button with only an onClick', () => {
304
204
  const testOnClickFn = vi.fn()
305
205
  const defaultActionAsButton = {
306
- 'label': 'defaultActionLabel',
307
- 'onClick': testOnClickFn,
308
- 'data-testid': 'title-block-mobile-actions-default-action',
206
+ label: 'defaultActionLabel',
207
+ onClick: testOnClickFn,
309
208
  }
310
209
 
311
210
  beforeEach(() => {
@@ -313,12 +212,12 @@ describe('<TitleBlock />', () => {
313
212
  })
314
213
 
315
214
  it('renders the default action button label and onClick', async () => {
316
- const { getByTestId } = render(
215
+ const { getByRole } = render(
317
216
  <TitleBlock title="Test Title" defaultAction={defaultActionAsButton}>
318
217
  Example
319
218
  </TitleBlock>,
320
219
  )
321
- const btn = getByTestId('title-block-default-action-button')
220
+ const btn = getByRole('button', { name: defaultActionAsButton.label })
322
221
  expect(btn.textContent).toEqual(defaultActionAsButton.label)
323
222
  await user.click(btn)
324
223
 
@@ -326,32 +225,6 @@ describe('<TitleBlock />', () => {
326
225
  expect(testOnClickFn).toHaveBeenCalled()
327
226
  })
328
227
  })
329
-
330
- it('creates a mobile actions default action menu item', async () => {
331
- const { getByTestId } = render(
332
- <TitleBlock title="Test Title" defaultAction={defaultActionAsButton}>
333
- Example
334
- </TitleBlock>,
335
- )
336
-
337
- const menuItem = getByTestId('title-block-mobile-actions-default-action')
338
- expect(menuItem.textContent).toEqual(defaultActionAsButton.label)
339
- await user.click(menuItem)
340
-
341
- await waitFor(() => {
342
- expect(testOnClickFn).toHaveBeenCalled()
343
- })
344
- })
345
-
346
- it('renders the mobile actions menu drawer handle even with no primary action', () => {
347
- const { getByTestId } = render(
348
- <TitleBlock title="Test Title" defaultAction={defaultActionAsButton}>
349
- Example
350
- </TitleBlock>,
351
- )
352
-
353
- expect(getByTestId('title-block-mobile-actions-drawer-handle')).toBeTruthy()
354
- })
355
228
  })
356
229
 
357
230
  describe('when the default action is a button with both an href and an onClick', () => {
@@ -367,12 +240,12 @@ describe('<TitleBlock />', () => {
367
240
  })
368
241
 
369
242
  it('renders the default action button label, href and onClick', async () => {
370
- const { getByTestId } = render(
243
+ const { getByRole } = render(
371
244
  <TitleBlock title="Test Title" defaultAction={defaultActionAsLinkAndOnClick}>
372
245
  Example
373
246
  </TitleBlock>,
374
247
  )
375
- const btn = getByTestId('title-block-default-action-button')
248
+ const btn = getByRole('link', { name: defaultActionAsLinkAndOnClick.label })
376
249
  expect(btn.textContent).toEqual(defaultActionAsLinkAndOnClick.label)
377
250
  expect(btn.getAttribute('href')).toEqual(defaultActionAsLinkAndOnClick.href)
378
251
  await user.click(btn)
@@ -381,25 +254,6 @@ describe('<TitleBlock />', () => {
381
254
  expect(testOnClickFn).toHaveBeenCalled()
382
255
  })
383
256
  })
384
-
385
- it('creates a single mobile actions default link menu item with both href and onClick', async () => {
386
- const { getByTestId, queryByTestId } = render(
387
- <TitleBlock title="Test Title" defaultAction={defaultActionAsLinkAndOnClick}>
388
- Example
389
- </TitleBlock>,
390
- )
391
-
392
- const menuItem = getByTestId('title-block-mobile-actions-default-link')
393
- const defaultAction = queryByTestId('title-block-mobile-actions-default-action')
394
- expect(defaultAction).toBeFalsy()
395
- expect(menuItem.getAttribute('href')).toEqual(defaultActionAsLinkAndOnClick.href)
396
- expect(menuItem.textContent).toEqual(defaultActionAsLinkAndOnClick.label)
397
- await user.click(menuItem)
398
-
399
- await waitFor(() => {
400
- expect(testOnClickFn).not.toHaveBeenCalled()
401
- })
402
- })
403
257
  })
404
258
 
405
259
  describe('when the default action is disabled', () => {
@@ -420,12 +274,12 @@ describe('<TitleBlock />', () => {
420
274
  })
421
275
 
422
276
  it('renders a disabled default action button', async () => {
423
- const { getByTestId } = render(
277
+ const { getByRole } = render(
424
278
  <TitleBlock title="Test Title" defaultAction={defaultActionAsButton}>
425
279
  Example
426
280
  </TitleBlock>,
427
281
  )
428
- const btn = getByTestId('title-block-default-action-button') as HTMLButtonElement
282
+ const btn = getByRole('button', { name: defaultActionAsButton.label }) as HTMLButtonElement
429
283
  expect(btn.textContent).toEqual(defaultActionAsButton.label)
430
284
  expect(btn.disabled).toBeTruthy()
431
285
  await user.click(btn)
@@ -436,40 +290,12 @@ describe('<TitleBlock />', () => {
436
290
  })
437
291
 
438
292
  it('renders a disabled default action link button', () => {
439
- const { getByTestId } = render(
293
+ const { getByRole } = render(
440
294
  <TitleBlock title="Test Title" defaultAction={defaultActionAsLink}>
441
295
  Example
442
296
  </TitleBlock>,
443
297
  )
444
- const btn = getByTestId('title-block-default-action-button') as HTMLButtonElement
445
- expect(btn.textContent).toEqual(defaultActionAsLink.label)
446
- expect(btn.getAttribute('href')).not.toEqual(defaultActionAsLink.href)
447
- })
448
-
449
- it('creates a mobile actions default action menu item with disabled styles and no onClick', async () => {
450
- const { getByTestId } = render(
451
- <TitleBlock title="Test Title" defaultAction={defaultActionAsButton}>
452
- Example
453
- </TitleBlock>,
454
- )
455
-
456
- const btn = getByTestId('title-block-mobile-actions-default-action') as HTMLButtonElement
457
- expect(btn.textContent).toEqual(defaultActionAsButton.label)
458
- await user.click(btn)
459
-
460
- await waitFor(() => {
461
- expect(testOnClickFn).not.toHaveBeenCalled()
462
- })
463
- })
464
-
465
- it('creates a mobile actions default link menu item with disabled styles and no href', () => {
466
- const { getByTestId } = render(
467
- <TitleBlock title="Test Title" defaultAction={defaultActionAsLink}>
468
- Example
469
- </TitleBlock>,
470
- )
471
-
472
- const btn = getByTestId('title-block-mobile-actions-default-link') as HTMLButtonElement
298
+ const btn = getByRole('button', { name: defaultActionAsLink.label }) as HTMLButtonElement
473
299
  expect(btn.textContent).toEqual(defaultActionAsLink.label)
474
300
  expect(btn.getAttribute('href')).not.toEqual(defaultActionAsLink.href)
475
301
  })
@@ -490,12 +316,14 @@ describe('<TitleBlock />', () => {
490
316
  it('renders the secondary action with both the href and onClick', async () => {
491
317
  const mockWarnFn = vi.fn()
492
318
  const spy = vi.spyOn(global.console, 'warn').mockImplementation(mockWarnFn)
493
- const { getByTestId } = render(
319
+ const { getByRole } = render(
494
320
  <TitleBlock title="Test Title" secondaryActions={[secondaryActionWithLinkAndOnClick]}>
495
321
  Example
496
322
  </TitleBlock>,
497
323
  )
498
- const btn = getByTestId('title-block-secondary-actions-button')
324
+ const btn = getByRole('link', {
325
+ name: secondaryActionWithLinkAndOnClick.label,
326
+ })
499
327
  expect(btn).toBeTruthy()
500
328
  expect(mockWarnFn).toBeCalled()
501
329
  expect(btn.textContent).toEqual(secondaryActionWithLinkAndOnClick.label)
@@ -506,28 +334,9 @@ describe('<TitleBlock />', () => {
506
334
  })
507
335
  spy.mockRestore()
508
336
  })
509
-
510
- it('renders the action as a single mobile actions drawer item with an onClick', async () => {
511
- const mockWarnFn = vi.fn()
512
- const spy = vi.spyOn(global.console, 'warn').mockImplementation(mockWarnFn)
513
- const { getAllByTestId } = render(
514
- <TitleBlock title="Test Title" secondaryActions={[secondaryActionWithLinkAndOnClick]}>
515
- Example
516
- </TitleBlock>,
517
- )
518
- const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
519
- expect(btn.length).toEqual(1)
520
- expect(btn[0].getAttribute('href')).not.toEqual(secondaryActionWithLinkAndOnClick.href)
521
- await user.click(btn[0])
522
-
523
- await waitFor(() => {
524
- expect(testOnClickFn).toHaveBeenCalled()
525
- })
526
- spy.mockRestore()
527
- })
528
337
  })
529
338
 
530
- describe('when a custom compent is provided for section title', () => {
339
+ describe('when a custom component is provided for section title', () => {
531
340
  it('renders a custom element in section title', async () => {
532
341
  const expectedText = 'This is a button'
533
342
  const CustomComponent = (props: SectionTitleRenderProps): JSX.Element => (
@@ -552,132 +361,6 @@ describe('<TitleBlock />', () => {
552
361
  })
553
362
  })
554
363
 
555
- describe('when a secondary action is passed with only an href', () => {
556
- const secondaryActionWithLink = {
557
- label: 'secondaryActionLabel',
558
- href: '#secondaryActionHref',
559
- }
560
-
561
- it('renders the action as a single mobile actions drawer item with the correct href', () => {
562
- const { getAllByTestId } = render(
563
- <TitleBlock title="Test Title" secondaryActions={[secondaryActionWithLink]}>
564
- Example
565
- </TitleBlock>,
566
- )
567
- const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
568
- expect(btn.length).toEqual(1)
569
- expect(btn[0].getAttribute('href')).toEqual(secondaryActionWithLink.href)
570
- })
571
- })
572
-
573
- describe('when autoHideMobileActionsMenu is true', () => {
574
- const secondaryActionWithLink = {
575
- label: 'secondaryActionLabel',
576
- href: '#secondaryActionHref',
577
- }
578
-
579
- it('hides the other actions menu when user clicks a menu item', async () => {
580
- const { getAllByTestId } = render(
581
- <TitleBlock
582
- title="Test Title"
583
- secondaryActions={[secondaryActionWithLink]}
584
- autoHideMobileActionsMenu
585
- >
586
- Example
587
- </TitleBlock>,
588
- )
589
-
590
- const mobileActionsButton = screen.getByRole('button', {
591
- name: 'Other actions',
592
- })
593
-
594
- expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
595
- await user.click(mobileActionsButton)
596
- await waitFor(() => {
597
- expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('true')
598
- })
599
-
600
- const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
601
- expect(btn.length).toEqual(1)
602
- await user.click(btn[0])
603
-
604
- await waitFor(() => {
605
- expect(mobileActionsButton.getAttribute('aria-expanded')).toEqual('false')
606
- })
607
- })
608
- })
609
-
610
- describe('when a disabled secondary action is passed with only an href', () => {
611
- const secondaryActionWithLink = {
612
- label: 'secondaryActionLabel',
613
- href: '#secondaryActionHref',
614
- disabled: true,
615
- }
616
-
617
- it('renders the action as a single disabled mobile actions drawer item with no href', () => {
618
- const { getAllByTestId } = render(
619
- <TitleBlock title="Test Title" secondaryActions={[secondaryActionWithLink]}>
620
- Example
621
- </TitleBlock>,
622
- )
623
- const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
624
- expect(btn.length).toEqual(1)
625
- expect(btn[0].getAttribute('href')).not.toEqual(secondaryActionWithLink.href)
626
- })
627
- })
628
-
629
- describe('when a disabled secondary action is passed with only an onClick', () => {
630
- const testOnClickFn = vi.fn()
631
- const secondaryActionWithOnClick = {
632
- label: 'secondaryActionLabel',
633
- onClick: testOnClickFn,
634
- disabled: true,
635
- }
636
-
637
- it('renders the action as a single disabled mobile actions drawer item with no onClick', async () => {
638
- const { getAllByTestId } = render(
639
- <TitleBlock title="Test Title" secondaryActions={[secondaryActionWithOnClick]}>
640
- Example
641
- </TitleBlock>,
642
- )
643
- const btn = getAllByTestId('title-block-mobile-actions-secondary-action')
644
- expect(btn.length).toEqual(1)
645
- await user.click(btn[0])
646
-
647
- await waitFor(() => {
648
- expect(testOnClickFn).not.toHaveBeenCalled()
649
- })
650
- })
651
- })
652
-
653
- describe('when a disabled secondary overflow menu item is passed with only an onClick for the action', () => {
654
- const testOnClickFn = vi.fn()
655
- const secondaryOverflowMenuItemWithOnClick = {
656
- label: 'secondaryActionOverflowMenuItemLabel',
657
- action: testOnClickFn,
658
- disabled: true,
659
- }
660
-
661
- it('renders the action as a single disabled mobile actions drawer item with no onClick', async () => {
662
- const { getAllByTestId } = render(
663
- <TitleBlock
664
- title="Test Title"
665
- secondaryActions={[]}
666
- secondaryOverflowMenuItems={[secondaryOverflowMenuItemWithOnClick]}
667
- >
668
- Example
669
- </TitleBlock>,
670
- )
671
- const btn = getAllByTestId('title-block-mobile-actions-overflow-menu-item')
672
- expect(btn.length).toEqual(1)
673
- await user.click(btn[0])
674
-
675
- await waitFor(() => {
676
- expect(testOnClickFn).not.toHaveBeenCalled()
677
- })
678
- })
679
- })
680
-
681
364
  describe('automation ID behaviour', () => {
682
365
  describe('when default automation IDs are not provided alongside required conditional renders', () => {
683
366
  it('renders the default automation IDs', () => {
@@ -870,55 +553,6 @@ describe('<TitleBlock />', () => {
870
553
  ).toHaveAttribute('href', '#test-primary')
871
554
  })
872
555
 
873
- it('will render a custom anchor component in the mobile drawer', () => {
874
- render(
875
- <TitleBlock
876
- title="Test Title"
877
- primaryAction={{
878
- label: 'Primary action',
879
- href: '#test-primary',
880
- component: MockLinkComponent,
881
- }}
882
- >
883
- Example
884
- </TitleBlock>,
885
- )
886
- const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
887
- within(drawer).getByRole('link', {
888
- name: 'Primary action',
889
- })
890
- expect(
891
- within(drawer).getByRole('link', {
892
- name: 'Primary action',
893
- }),
894
- ).toHaveAttribute('href', '#test-primary')
895
- })
896
-
897
- it('will render custom button with functional onClick', async () => {
898
- const testClickFunc = vi.fn()
899
- render(
900
- <TitleBlock
901
- title="Test Title"
902
- primaryAction={{
903
- label: 'Primary action',
904
- onClick: testClickFunc,
905
- component: MockButtonComponent,
906
- }}
907
- >
908
- Example
909
- </TitleBlock>,
910
- )
911
- const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
912
- const drawerBtn = within(drawer).getByRole('button', {
913
- name: 'Primary action',
914
- })
915
- await user.click(drawerBtn)
916
-
917
- await waitFor(() => {
918
- expect(testClickFunc).toBeCalledTimes(1)
919
- })
920
- })
921
-
922
556
  it('will render custom button with children and not label', () => {
923
557
  const testClickFunc = vi.fn()
924
558
  render(
@@ -935,12 +569,12 @@ describe('<TitleBlock />', () => {
935
569
  Example
936
570
  </TitleBlock>,
937
571
  )
938
- const drawer = screen.getByTestId('title-block-mobile-actions-drawer-handle')
939
- within(drawer).getByRole('button', {
572
+ const toolbar = screen.getByTestId('title-block-main-actions-toolbar')
573
+ within(toolbar).getByRole('button', {
940
574
  name: 'This will replace label',
941
575
  })
942
576
  expect(
943
- within(drawer).queryByRole('button', {
577
+ within(toolbar).queryByRole('button', {
944
578
  name: 'Primary action',
945
579
  }),
946
580
  ).toBeFalsy()
@@ -974,32 +608,6 @@ describe('<TitleBlock />', () => {
974
608
  expect(links[0]).toHaveAttribute('href', '#test-secondary')
975
609
  expect(links[1]).toHaveAttribute('href', '#test-secondary-2')
976
610
  })
977
-
978
- it('will render multiple custom anchor components in the secondary actions mobile Drawer', () => {
979
- render(
980
- <TitleBlock
981
- title="Test Title"
982
- secondaryActions={[
983
- {
984
- label: 'Secondary action 1',
985
- href: '#test-secondary',
986
- component: MockLinkComponent,
987
- },
988
- {
989
- label: 'Secondary action 2',
990
- href: '#test-secondary-2',
991
- component: MockLinkComponent,
992
- },
993
- ]}
994
- >
995
- Example
996
- </TitleBlock>,
997
- )
998
- const links = screen.getAllByTestId('title-block-mobile-actions-secondary-action')
999
- expect(links.length).toBe(2)
1000
- expect(links[0]).toHaveAttribute('href', '#test-secondary')
1001
- expect(links[1]).toHaveAttribute('href', '#test-secondary-2')
1002
- })
1003
611
  })
1004
612
 
1005
613
  describe('defaultAction', () => {
@@ -1022,42 +630,6 @@ describe('<TitleBlock />', () => {
1022
630
  })
1023
631
  expect(defaultActionAnchor).toHaveAttribute('href', '#test-default')
1024
632
  })
1025
-
1026
- it('will render the component above primary action in the Drawer content if it is a link', () => {
1027
- render(
1028
- <TitleBlock
1029
- title="Test Title"
1030
- defaultAction={{
1031
- label: 'Default action',
1032
- href: '#test-default',
1033
- component: MockLinkComponent,
1034
- }}
1035
- >
1036
- Example
1037
- </TitleBlock>,
1038
- )
1039
- const mobileActionLink = screen.getByTestId('title-block-mobile-actions-default-link')
1040
-
1041
- expect(mobileActionLink).toBeInTheDocument()
1042
- })
1043
-
1044
- it('will render the component in the top list of the Drawer content if it is a clickable button', () => {
1045
- const testClickFunc = vi.fn()
1046
- render(
1047
- <TitleBlock
1048
- title="Test Title"
1049
- defaultAction={{
1050
- label: 'Default action',
1051
- onClick: testClickFunc,
1052
- component: MockButtonComponent,
1053
- }}
1054
- >
1055
- Example
1056
- </TitleBlock>,
1057
- )
1058
- expect(screen.queryByTestId('title-block-mobile-actions-default-link')).toBeFalsy()
1059
- expect(screen.getByTestId('title-block-mobile-actions-default-action')).toBeInTheDocument()
1060
- })
1061
633
  })
1062
634
  })
1063
635
  })