Skip to content

Commit 4788f24

Browse files
marcialfpsmarcialfps
committed
Merge branch 'master' of https://github.com/dxc-technology/halstack-react into marcialfps-issue-889
2 parents cfed6f1 + 2b773b3 commit 4788f24

File tree

15 files changed

+145
-91
lines changed

15 files changed

+145
-91
lines changed

‎docs/src/pages/components/cdk-components/accordion-group/AccordionGroup.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ function AccordionGroup() {
1414
return (
1515
<ComponentDoc>
1616
<ComponentHeader title="Accordion Group" status="ready"></ComponentHeader>
17-
1817
<Section>
1918
<DxcHeading level={3} text="Props" margin={{ bottom: "small" }} />
2019
<AccordionGroupPropsTable />
@@ -47,14 +46,14 @@ function AccordionGroup() {
4746
</Section>
4847
<Section>
4948
<DxcHeading level={3} text="Examples" margin={{ bottom: "small" }} />
50-
<Example
51-
title="Uncontrolled Accordion Group"
52-
example={uncontrolledAccordionGroup}
53-
></Example>
5449
<Example
5550
title="Controlled Accordion Group"
5651
example={controlledAccordionGroup}
5752
></Example>
53+
<Example
54+
title="Uncontrolled Accordion Group"
55+
example={uncontrolledAccordionGroup}
56+
></Example>
5857
<Example title="Disabled Accordion Group" example={disabled}></Example>
5958
</Section>
6059
</ComponentDoc>

‎docs/src/pages/components/cdk-components/accordion-group/api.jsx‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,45 @@ const AccordionGroupPropsTable = () => {
99
<th>Default</th>
1010
<th>Description</th>
1111
</tr>
12+
<tr>
13+
<td>defaultIndexActive: number</td>
14+
<td></td>
15+
<td>Initially active accordion, only when it is uncontrolled.</td>
16+
</tr>
1217
<tr>
1318
<td>indexActive: number</td>
1419
<td></td>
15-
<td>The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component. If null, the component will be controlled and all accordions will be closed.</td>
20+
<td>
21+
The index of the active accordion. If undefined, the component will be
22+
uncontrolled and the active accordion will be managed internally by
23+
the component. If null, the component will be controlled and all
24+
accordions will be closed.
25+
</td>
1626
</tr>
1727
<tr>
18-
<td>disabled: boolean</td>
19-
<td><code>false</code></td>
20-
<td>If true, the component will be disabled.</td>
28+
<td>disabled: boolean</td>
29+
<td>
30+
<code>false</code>
31+
</td>
32+
<td>If true, the component will be disabled.</td>
2133
</tr>
2234
<tr>
23-
<td>onActiveChange: function</td>
24-
<td></td>
25-
<td>This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.</td>
35+
<td>onActiveChange: function</td>
36+
<td></td>
37+
<td>
38+
This function will be called when the user clicks on an accordion. The
39+
index of the clicked accordion will be passed as a parameter.
40+
</td>
2641
</tr>
27-
<tr>
28-
<td>margin: string | object</td>
29-
<td></td>
30-
<td>Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.</td>
42+
<tr>
43+
<td>margin: string | object</td>
44+
<td></td>
45+
<td>
46+
Size of the margin to be applied to the component ('xxsmall' |
47+
'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
48+
can pass an object with 'top', 'bottom', 'left' and 'right' properties
49+
in order to specify different margin sizes.
50+
</td>
3151
</tr>
3252
</DxcTable>
3353
);

‎docs/src/pages/components/cdk-components/accordion-group/examples/controlledAccordionGroup.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useState } from "react";
44
const code = `() => {
55
const [indexAccordion, setIndexAccordion] = useState(0);
66
7-
const onActiveChange = (i) => {
8-
setIndexAccordion((prevValue) => prevValue === i ? null : i);
7+
const onActiveChange = (index) => {
8+
setIndexAccordion((currentIndex) => currentIndex === index ? -1 : index);
99
};
1010
1111
return (

‎docs/src/pages/components/cdk-components/accordion-group/examples/uncontrolledAccordionGroup.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DxcAccordionGroup } from "@dxc-technology/halstack-react";
33
const code = `() => {
44
return (
55
<div>
6-
<DxcAccordionGroup margin="medium">
6+
<DxcAccordionGroup margin="medium" defaultIndexActive={0}>
77
<DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
88
<div>
99
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -24,7 +24,7 @@ const code = `() => {
2424
}`;
2525

2626
const scope = {
27-
DxcAccordionGroup
27+
DxcAccordionGroup,
2828
};
2929

3030
export default { code, scope };

‎docs/src/pages/components/cdk-components/date-input/api.jsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const DateInputPropsTable = () => {
1414
<td>
1515
<code></code>
1616
</td>
17-
<td>Initial value of the input element, only when it is uncontrolled.</td>
17+
<td>
18+
Initial value of the input element, only when it is uncontrolled.
19+
</td>
1820
</tr>
1921
<tr>
2022
<td>value: string</td>
@@ -98,8 +100,8 @@ const DateInputPropsTable = () => {
98100
of this object is: {"{ "}
99101
<code>value: value, error: error, date: date</code>
100102
{" }"}. If the string value is a valid date, <code>error</code> will
101-
be null. Also, if the string value is not a valid date,{" "}
102-
<code>date</code> will be null.
103+
be undefined. Also, if the string value is not a valid date,{" "}
104+
<code>date</code> will be undefined.
103105
</td>
104106
</tr>
105107
<tr>
@@ -111,18 +113,20 @@ const DateInputPropsTable = () => {
111113
will be passed to this function. An example of this object is: {"{ "}
112114
<code>value: value, error: error, date: date</code>
113115
{" }"}. If the string value is a valid date, <code>error</code> will
114-
be null. Also, if the string value is not a valid date,{" "}
115-
<code>date</code> will be null.
116+
be undefined. Also, if the string value is not a valid date,{" "}
117+
<code>date</code> will be undefined.
116118
</td>
117119
</tr>
118120
<tr>
119121
<td>error: string</td>
120122
<td></td>
121123
<td>
122-
If it is defined, the component will change its appearance, showing
123-
the error below the date input component. If it is not defined, the
124-
error messages will be managed internally, but never displayed on its
125-
own.
124+
If it is a defined value and also a truthy string, the component will
125+
change its appearance, showing the error below the date input
126+
component. If the defined value is an empty string, it will reserve a
127+
space below the component for a future error, but it would not change
128+
its look. In case of being undefined or null, both the appearance and
129+
the space for the error message would not be modified.
126130
</td>
127131
</tr>
128132
<tr>

‎docs/src/pages/components/cdk-components/date-input/examples/customErrorDateInput.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
const onChange = ({ value, error, date }) => {
88
setValue(value);
99
};
1010
const onBlur = ({ value, error, date }) => {
1111
setValue(value);
12-
error ? setError("The typed date is invalid.") : setError("");
12+
setError(error);
1313
};
1414
1515
return (
@@ -20,6 +20,7 @@ const code = `() => {
2020
onChange={onChange}
2121
onBlur={onBlur}
2222
error={error}
23+
error={error == undefined ? "" : "The typed date is invalid."}
2324
margin="medium"
2425
optional
2526
/>

‎docs/src/pages/components/cdk-components/date-input/examples/formattedDateInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState } from "react";
33

44
const code = `() => {
55
const [value, setValue] = useState("");
6-
const [error, setError] = useState("");
6+
const [error, setError] = useState();
77
const onChange = ({ value }) => {
88
setValue(value);
99
};
@@ -20,7 +20,7 @@ const code = `() => {
2020
value={value}
2121
onChange={onChange}
2222
onBlur={onBlur}
23-
error={error}
23+
error={error == undefined ? "" : error}
2424
clearable
2525
placeholder
2626
margin="medium"

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"test": "jest",
3939
"test:watch": "npm test -- --watch --coverage",
4040
"build": "babel src --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose && node ../scripts/build/copy-package.js && tsc ",
41-
"build:watch": "babel src --watch --out-dir ../dist --copy-files --verbose",
41+
"build:watch": "babel src --watch --extensions .js,.jsx,.ts,.tsx --out-dir ../dist --copy-files --verbose",
4242
"storybook": "start-storybook -p 6006",
4343
"build-storybook": "build-storybook"
4444
},

‎lib/src/accordion-group/AccordionGroup.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const Chromatic = () => (
3636
</ExampleContainer>
3737
<ExampleContainer>
3838
<Title title="Expanded" theme="light" level={4} />
39-
<DxcAccordionGroup indexActive={1}>
39+
<DxcAccordionGroup defaultIndexActive={1}>
4040
<DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
4141
<div>
4242
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et

‎lib/src/accordion-group/AccordionGroup.test.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ describe("Accordion component tests", () => {
2626
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
2727
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
2828
});
29-
3029
test("Uncontrolled accordion group renders with only one children", () => {
3130
const { getByText, getAllByRole } = render(
3231
<DxcAccordionGroup>
@@ -42,7 +41,6 @@ describe("Accordion component tests", () => {
4241
expect(getByText("Accordion1")).toBeTruthy();
4342
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
4443
});
45-
4644
test("Uncontrolled accordion group calls correct function on click", () => {
4745
const onActiveChange = jest.fn();
4846
const { getByText, getAllByRole } = render(
@@ -69,7 +67,28 @@ describe("Accordion component tests", () => {
6967
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
7068
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
7169
});
72-
70+
test("Uncontrolled accordion group renders initially with an accordion expanded", () => {
71+
const { getByText, getAllByRole } = render(
72+
<DxcAccordionGroup defaultIndexActive={1}>
73+
<DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
74+
<div>
75+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
76+
leo lobortis eget.
77+
</div>
78+
</DxcAccordionGroup.Accordion>
79+
<DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
80+
<div>
81+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
82+
leo lobortis eget.
83+
</div>
84+
</DxcAccordionGroup.Accordion>
85+
</DxcAccordionGroup>
86+
);
87+
expect(getByText("Accordion1")).toBeTruthy();
88+
expect(getByText("Accordion2")).toBeTruthy();
89+
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
90+
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
91+
});
7392
test("Controlled accordion with indexActive change", () => {
7493
const onActiveChange = jest.fn();
7594
const { getByText, getAllByRole, rerender } = render(
@@ -105,7 +124,6 @@ describe("Accordion component tests", () => {
105124
expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
106125
expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
107126
});
108-
109127
test("Disabled uncontrolled accordion group", () => {
110128
const onActiveChange = jest.fn();
111129
const { getByText } = render(

0 commit comments

Comments
 (0)