Skip to content

Commit 386bf67

Browse files
rvsiarvsia
committed
Update tests for wizard toggle
1 parent 52a2a6a commit 386bf67

6 files changed

Lines changed: 504 additions & 74 deletions

File tree

‎packages/pf4-component-mapper/src/files/wizard.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,7 @@ const WizardInternal = ({
103103
closeButtonAriaLabel={closeButtonAriaLabel}
104104
/>
105105
)}
106-
<WizardToggle
107-
activeStepIndex={activeStepIndex + 1}
108-
activeStepName={currentStep.title}
109-
activeStepSubName={navSchema.find((step) => step.name === currentStep.name)?.substepOfTitle}
110-
isOpen={state.openNav}
111-
dispatch={dispatch}
112-
/>
106+
<WizardToggle activeStepIndex={activeStepIndex} currentStep={currentStep} navSchema={navSchema} isOpen={state.openNav} dispatch={dispatch} />
113107
<div className="pf-c-wizard__outer-wrap">
114108
<div className="pf-c-wizard__inner-wrap">
115109
<WizardNav aria-label={navAriaLabel} isOpen={state.openNav}>

‎packages/pf4-component-mapper/src/files/wizard/wizard-toggle.js‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,41 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { AngleRightIcon, CaretDownIcon } from '@patternfly/react-icons';
44

5-
const WizardToggle = ({ activeStepIndex, activeStepName, activeStepSubName, isOpen, dispatch }) => (
6-
<button
7-
onClick={() => dispatch({ type: isOpen ? 'closeNav' : 'openNav' })}
8-
className={`pf-c-wizard__toggle ${isOpen ? 'pf-m-expanded' : ''}`}
9-
aria-label="Wizard Toggle"
10-
aria-expanded={isOpen}
11-
type="button"
12-
>
13-
<ol className="pf-c-wizard__toggle-list">
14-
<li className="pf-c-wizard__toggle-list-item">
15-
<span className="pf-c-wizard__toggle-num">{activeStepIndex}</span> {activeStepName}
16-
{activeStepSubName && <AngleRightIcon className="pf-c-wizard__toggle-separator" aria-hidden="true" />}
17-
</li>
18-
{activeStepSubName && <li className="pf-c-wizard__toggle-list-item">{activeStepSubName}</li>}
19-
</ol>
20-
<span className="pf-c-wizard__toggle-icon">
21-
<CaretDownIcon aria-hidden="true" />
22-
</span>
23-
</button>
24-
);
5+
const WizardToggle = ({ activeStepIndex, currentStep, navSchema, isOpen, dispatch }) => {
6+
const substepTitle = navSchema.find((step) => step.name === currentStep.name)?.substepOfTitle;
7+
const substepName = navSchema.find((step) => step.name === currentStep.name)?.substepOf;
8+
9+
const index = substepName ? navSchema.find((step) => step.substepOf === substepName)?.index : activeStepIndex;
10+
11+
const activeStepName = substepTitle || currentStep.title;
12+
const activeStepSubName = substepTitle ? currentStep.title : undefined;
13+
14+
return (
15+
<button
16+
onClick={() => dispatch({ type: isOpen ? 'closeNav' : 'openNav' })}
17+
className={`pf-c-wizard__toggle ${isOpen ? 'pf-m-expanded' : ''}`}
18+
aria-label="Wizard Toggle"
19+
aria-expanded={isOpen}
20+
type="button"
21+
>
22+
<ol className="pf-c-wizard__toggle-list">
23+
<li className="pf-c-wizard__toggle-list-item">
24+
<span className="pf-c-wizard__toggle-num">{index + 1}</span> {activeStepName}
25+
{activeStepSubName && <AngleRightIcon className="pf-c-wizard__toggle-separator" aria-hidden="true" />}
26+
</li>
27+
{activeStepSubName && <li className="pf-c-wizard__toggle-list-item">{activeStepSubName}</li>}
28+
</ol>
29+
<span className="pf-c-wizard__toggle-icon">
30+
<CaretDownIcon aria-hidden="true" />
31+
</span>
32+
</button>
33+
);
34+
};
2535

2636
WizardToggle.propTypes = {
2737
activeStepIndex: PropTypes.number,
28-
activeStepName: PropTypes.node,
29-
activeStepSubName: PropTypes.node,
38+
currentStep: PropTypes.object,
39+
navSchema: PropTypes.array,
3040
isOpen: PropTypes.bool,
3141
dispatch: PropTypes.func
3242
};

‎packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap‎

Lines changed: 53 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -761,7 +761,7 @@ exports[`FormFields should render DatePicker correctly 1`] = `
761761
<div
762762
className="pf-c-form__group-control"
763763
>
764-
<ForwardRef
764+
<TextInput
765765
id="someIdKey"
766766
name="Name of the field"
767767
onBlur={[Function]}
@@ -804,7 +804,7 @@ exports[`FormFields should render DatePicker correctly 1`] = `
804804
value=""
805805
/>
806806
</TextInputBase>
807-
</ForwardRef>
807+
</TextInput>
808808
</div>
809809
</div>
810810
</FormGroup>
@@ -1265,7 +1265,7 @@ exports[`FormFields should render TextField correctly 1`] = `
12651265
<div
12661266
className="pf-c-form__group-control"
12671267
>
1268-
<ForwardRef
1268+
<TextInput
12691269
id="someIdKey"
12701270
name="Name of the field"
12711271
onBlur={[Function]}
@@ -1307,7 +1307,7 @@ exports[`FormFields should render TextField correctly 1`] = `
13071307
value=""
13081308
/>
13091309
</TextInputBase>
1310-
</ForwardRef>
1310+
</TextInput>
13111311
</div>
13121312
</div>
13131313
</FormGroup>
@@ -1380,7 +1380,7 @@ exports[`FormFields should render TextField with description correctly 1`] = `
13801380
</Text>
13811381
</div>
13821382
</TextContent>
1383-
<ForwardRef
1383+
<TextInput
13841384
id="someIdKey"
13851385
name="Name of the field"
13861386
onBlur={[Function]}
@@ -1422,7 +1422,7 @@ exports[`FormFields should render TextField with description correctly 1`] = `
14221422
value=""
14231423
/>
14241424
</TextInputBase>
1425-
</ForwardRef>
1425+
</TextInput>
14261426
</div>
14271427
</div>
14281428
</FormGroup>
@@ -1476,7 +1476,7 @@ exports[`FormFields should render TextField without id correctly 1`] = `
14761476
<div
14771477
className="pf-c-form__group-control"
14781478
>
1479-
<ForwardRef
1479+
<TextInput
14801480
id="Name of the field"
14811481
name="Name of the field"
14821482
onBlur={[Function]}
@@ -1518,7 +1518,7 @@ exports[`FormFields should render TextField without id correctly 1`] = `
15181518
value=""
15191519
/>
15201520
</TextInputBase>
1521-
</ForwardRef>
1521+
</TextInput>
15221522
</div>
15231523
</div>
15241524
</FormGroup>
@@ -1574,30 +1574,41 @@ exports[`FormFields should render Textarea correctly 1`] = `
15741574
className="pf-c-form__group-control"
15751575
>
15761576
<TextArea
1577-
aria-label={null}
1578-
className=""
15791577
id="someIdKey"
1580-
isRequired={false}
15811578
name="Name of the field"
15821579
onBlur={[Function]}
15831580
onChange={[Function]}
15841581
onFocus={[Function]}
1585-
resizeOrientation="both"
15861582
validated="default"
15871583
value=""
15881584
>
1589-
<textarea
1590-
aria-invalid={false}
1585+
<TextArea
15911586
aria-label={null}
1592-
className="pf-c-form-control"
1587+
className=""
15931588
id="someIdKey"
1589+
innerRef={null}
1590+
isRequired={false}
15941591
name="Name of the field"
15951592
onBlur={[Function]}
15961593
onChange={[Function]}
15971594
onFocus={[Function]}
1598-
required={false}
1595+
resizeOrientation="both"
1596+
validated="default"
15991597
value=""
1600-
/>
1598+
>
1599+
<textarea
1600+
aria-invalid={false}
1601+
aria-label={null}
1602+
className="pf-c-form-control"
1603+
id="someIdKey"
1604+
name="Name of the field"
1605+
onBlur={[Function]}
1606+
onChange={[Function]}
1607+
onFocus={[Function]}
1608+
required={false}
1609+
value=""
1610+
/>
1611+
</TextArea>
16011612
</TextArea>
16021613
</div>
16031614
</div>
@@ -1653,7 +1664,7 @@ exports[`FormFields should render TimePicker correctly 1`] = `
16531664
<div
16541665
className="pf-c-form__group-control"
16551666
>
1656-
<ForwardRef
1667+
<TextInput
16571668
id="someIdKey"
16581669
name="Name of the field"
16591670
onBlur={[Function]}
@@ -1696,7 +1707,7 @@ exports[`FormFields should render TimePicker correctly 1`] = `
16961707
value=""
16971708
/>
16981709
</TextInputBase>
1699-
</ForwardRef>
1710+
</TextInput>
17001711
</div>
17011712
</div>
17021713
</FormGroup>
@@ -2921,32 +2932,44 @@ exports[`FormFields should render disabled Textarea correctly 1`] = `
29212932
className="pf-c-form__group-control"
29222933
>
29232934
<TextArea
2924-
aria-label={null}
2925-
className=""
29262935
disabled={true}
29272936
id="someIdKey"
2928-
isRequired={false}
29292937
name="Name of the field"
29302938
onBlur={[Function]}
29312939
onChange={[Function]}
29322940
onFocus={[Function]}
2933-
resizeOrientation="both"
29342941
validated="default"
29352942
value=""
29362943
>
2937-
<textarea
2938-
aria-invalid={false}
2944+
<TextArea
29392945
aria-label={null}
2940-
className="pf-c-form-control"
2946+
className=""
29412947
disabled={true}
29422948
id="someIdKey"
2949+
innerRef={null}
2950+
isRequired={false}
29432951
name="Name of the field"
29442952
onBlur={[Function]}
29452953
onChange={[Function]}
29462954
onFocus={[Function]}
2947-
required={false}
2955+
resizeOrientation="both"
2956+
validated="default"
29482957
value=""
2949-
/>
2958+
>
2959+
<textarea
2960+
aria-invalid={false}
2961+
aria-label={null}
2962+
className="pf-c-form-control"
2963+
disabled={true}
2964+
id="someIdKey"
2965+
name="Name of the field"
2966+
onBlur={[Function]}
2967+
onChange={[Function]}
2968+
onFocus={[Function]}
2969+
required={false}
2970+
value=""
2971+
/>
2972+
</TextArea>
29502973
</TextArea>
29512974
</div>
29522975
</div>
@@ -3008,7 +3031,7 @@ exports[`FormFields should render touched TextField id correctly 1`] = `
30083031
<div
30093032
className="pf-c-form__group-control"
30103033
>
3011-
<ForwardRef
3034+
<TextInput
30123035
id="someIdKey"
30133036
name="Name of the field"
30143037
onBlur={[Function]}
@@ -3050,7 +3073,7 @@ exports[`FormFields should render touched TextField id correctly 1`] = `
30503073
value=""
30513074
/>
30523075
</TextInputBase>
3053-
</ForwardRef>
3076+
</TextInput>
30543077
</div>
30553078
</div>
30563079
</FormGroup>

0 commit comments

Comments
 (0)