Skip to content

Commit

Permalink
chore: address comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuria1110
nuria1110 committed Nov 22, 2024
1 parent 053a581 commit 7d5888b
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 189 deletions.
2 changes: 0 additions & 2 deletions playwright/components/numeral-date/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,3 @@ export const numeralDateComponent = (page: Page) =>
page.locator(NUMERAL_DATE_COMPONENT);
export const numeralDateInput = (page: Page, index: number) =>
page.locator(DATE_INPUT).nth(index);
export const numeralDateInputLabel = (page: Page, index: number) =>
page.locator("p").nth(index);
222 changes: 79 additions & 143 deletions src/components/numeral-date/numeral-date.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Events from "../../__internal__/utils/helpers/events";
import {
StyledNumeralDate,
StyledDateField,
StyledDateLabel,
StyledFieldset,
} from "./numeral-date.style";
import Textbox from "../textbox";
Expand Down Expand Up @@ -263,13 +262,12 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
const { validationRedesignOptIn } = useContext(NewValidationContext);

const { current: uniqueId } = useRef(id || guid());
const inputIds = useRef({ dd: guid(), mm: guid(), yyyy: guid() });
const isControlled = useRef(value !== undefined);
const initialValue = isControlled.current ? value : defaultValue;

const refs = useRef<(HTMLInputElement | null)[]>(dateFormat.map(() => null));

const labelIds = useRef([guid(), guid(), guid()]);

const [internalMessages, setInternalMessages] = useState<DateType>({
...(Object.fromEntries(
dateFormat.map((datePart) => [datePart, ""]),
Expand Down Expand Up @@ -414,11 +412,85 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
}
};

const renderInputs = () => {
const hasInfo = validationRedesignOptIn ? info : undefined;

return (
<StyledNumeralDate onKeyDown={onKeyDown}>
{dateFormat.map((datePart, index) => {
const isEnd = index === dateFormat.length - 1;
let inputRef: React.ForwardedRef<HTMLInputElement> | undefined;

const validation = internalError || internalWarning || hasInfo;
const validationInField =
!validationRedesignOptIn && typeof validation === "string";

switch (datePart.slice(0, 2)) {
case "dd":
inputRef = dayRef;
break;
case "mm":
inputRef = monthRef;
break;
case "yy":
inputRef = yearRef;
break;
/* istanbul ignore next */
default:
break;
}

return (
<NumeralDateContext.Provider
value={{ disableErrorBorder: true }}
key={datePart}
>
<StyledDateField
key={datePart}
size={size}
isYearInput={datePart.length === 4}
hasValidationIconInField={
!validationOnLabel && isEnd && validationInField
}
>
<Textbox
id={inputIds.current[datePart]}
label={getDateLabel(datePart, locale)}
disabled={disabled}
readOnly={readOnly}
required={required}
error={!!internalError}
warning={!!internalWarning}
info={!!hasInfo}
size={size}
value={dateValue[datePart as keyof NumeralDateObject]}
onChange={(e) =>
handleChange(e, datePart as keyof NumeralDateObject)
}
onBlur={handleBlur}
ref={(element) => handleRef(element, index, inputRef)}
{...(isEnd &&
!validationOnLabel &&
!validationRedesignOptIn && {
error: internalError,
warning: internalWarning,
info,
})}
tooltipPosition={tooltipPosition}
/>
</StyledDateField>
</NumeralDateContext.Provider>
);
})}
</StyledNumeralDate>
);
};

if (!validationRedesignOptIn) {
return (
<TooltipProvider helpAriaLabel={helpAriaLabel}>
<StyledFieldset
data-component={dataComponent}
data-component={dataComponent || "numeral-date"}
data-element={dataElement}
data-role={dataRole}
id={uniqueId}
Expand All @@ -438,84 +510,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
{...filterStyledSystemMarginProps(rest)}
>
<Box display="block" mt={1}>
<StyledNumeralDate
name={name}
onKeyDown={onKeyDown}
data-component="numeral-date"
>
{dateFormat.map((datePart, index) => {
const isEnd = index === dateFormat.length - 1;
const labelId = labelIds.current[index];
let inputRef: React.ForwardedRef<HTMLInputElement> | undefined;

const validation = internalError || internalWarning || info;
const validationInField = typeof validation === "string";

switch (datePart.slice(0, 2)) {
case "dd":
inputRef = dayRef;
break;
case "mm":
inputRef = monthRef;
break;
case "yy":
inputRef = yearRef;
break;
/* istanbul ignore next */
default:
break;
}

return (
<NumeralDateContext.Provider
value={{ disableErrorBorder: true }}
key={datePart}
>
<StyledDateField
key={datePart}
size={size}
isYearInput={datePart.length === 4}
hasValidationIconInField={
!validationOnLabel && isEnd && validationInField
}
isEnd={isEnd}
>
<StyledDateLabel
id={labelId}
data-role="numeral-date-input-text"
isDisabled={disabled}
>
{getDateLabel(datePart, locale)}
</StyledDateLabel>
<Textbox
{...(index === 0 && { id: uniqueId })}
disabled={disabled}
readOnly={readOnly}
required={required}
error={!!internalError}
warning={!!internalWarning}
info={!!info}
size={size}
aria-labelledby={labelId}
value={dateValue[datePart as keyof NumeralDateObject]}
onChange={(e) =>
handleChange(e, datePart as keyof NumeralDateObject)
}
onBlur={handleBlur}
ref={(element) => handleRef(element, index, inputRef)}
{...(isEnd &&
!validationOnLabel && {
error: internalError,
warning: internalWarning,
info,
})}
tooltipPosition={tooltipPosition}
/>
</StyledDateField>
</NumeralDateContext.Provider>
);
})}
</StyledNumeralDate>
{renderInputs()}
{fieldHelp && <FieldHelp>{fieldHelp}</FieldHelp>}
</Box>
</StyledFieldset>
Expand All @@ -525,7 +520,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({

return (
<StyledFieldset
data-component={dataComponent}
data-component={dataComponent || "numeral-date"}
data-element={dataElement}
data-role={dataRole}
id={uniqueId}
Expand Down Expand Up @@ -554,66 +549,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
<ErrorBorder warning={!!(!internalError && internalWarning)} />
</>
)}

<StyledNumeralDate onKeyDown={onKeyDown} data-component="numeral-date">
{dateFormat.map((datePart, index) => {
const labelId = labelIds.current[index];
let inputRef: React.ForwardedRef<HTMLInputElement> | undefined;

switch (datePart.slice(0, 2)) {
case "dd":
inputRef = dayRef;
break;
case "mm":
inputRef = monthRef;
break;
case "yy":
inputRef = yearRef;
break;
/* istanbul ignore next */
default:
break;
}

return (
<NumeralDateContext.Provider
value={{ disableErrorBorder: true }}
key={datePart}
>
<StyledDateField
key={datePart}
size={size}
isYearInput={datePart.length === 4}
>
<StyledDateLabel
id={labelId}
data-role="numeral-date-input-text"
isDisabled={disabled}
>
{getDateLabel(datePart, locale)}
</StyledDateLabel>

<Textbox
{...(index === 0 && { id: uniqueId })}
disabled={disabled}
readOnly={readOnly}
required={required}
error={!!internalError}
warning={!!internalWarning}
size={size}
aria-labelledby={labelId}
value={dateValue[datePart as keyof NumeralDateObject]}
onChange={(e) =>
handleChange(e, datePart as keyof NumeralDateObject)
}
onBlur={handleBlur}
ref={(element) => handleRef(element, index, inputRef)}
/>
</StyledDateField>
</NumeralDateContext.Provider>
);
})}
</StyledNumeralDate>
{renderInputs()}
</Box>
</StyledFieldset>
);
Expand Down
35 changes: 17 additions & 18 deletions src/components/numeral-date/numeral-date.pw.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
import {
numeralDateComponent,
numeralDateInput,
numeralDateInputLabel,
} from "../../../playwright/components/numeral-date";

import Box from "../box";
Expand Down Expand Up @@ -81,8 +80,8 @@ test.describe("NumeralDate component", () => {
test("should render NumeralDate with id prop", async ({ mount, page }) => {
await mount(<NumeralDateComponent id={CHARACTERS.STANDARD} />);

const input = numeralDateInput(page, 0);
await expect(input).toHaveId(CHARACTERS.STANDARD);
const fieldset = page.locator("fieldset");
await expect(fieldset).toHaveId(CHARACTERS.STANDARD);
});

testData.forEach((label) => {
Expand Down Expand Up @@ -431,9 +430,9 @@ test.describe("NumeralDate component", () => {
}) => {
await mount(<NumeralDateComponent dateFormat={["dd", "mm", "yyyy"]} />);

await expect(numeralDateInputLabel(page, 0)).toHaveText("Day");
await expect(numeralDateInputLabel(page, 1)).toHaveText("Month");
await expect(numeralDateInputLabel(page, 2)).toHaveText("Year");
await expect(numeralDateInput(page, 0)).toHaveAccessibleName("Day");
await expect(numeralDateInput(page, 1)).toHaveAccessibleName("Month");
await expect(numeralDateInput(page, 2)).toHaveAccessibleName("Year");
});

test('should render NumeralDate with `["mm", "dd", "yyyy"]` dateFormat prop', async ({
Expand All @@ -442,9 +441,9 @@ test.describe("NumeralDate component", () => {
}) => {
await mount(<NumeralDateComponent dateFormat={["mm", "dd", "yyyy"]} />);

await expect(numeralDateInputLabel(page, 0)).toHaveText("Month");
await expect(numeralDateInputLabel(page, 1)).toHaveText("Day");
await expect(numeralDateInputLabel(page, 2)).toHaveText("Year");
await expect(numeralDateInput(page, 0)).toHaveAccessibleName("Month");
await expect(numeralDateInput(page, 1)).toHaveAccessibleName("Day");
await expect(numeralDateInput(page, 2)).toHaveAccessibleName("Year");
});

test('should render NumeralDate with `["dd", "mm"]` dateFormat prop', async ({
Expand All @@ -453,9 +452,9 @@ test.describe("NumeralDate component", () => {
}) => {
await mount(<NumeralDateComponent dateFormat={["dd", "mm"]} />);

await expect(numeralDateInputLabel(page, 0)).toHaveText("Day");
await expect(numeralDateInputLabel(page, 1)).toHaveText("Month");
await expect(numeralDateInputLabel(page, 2)).not.toBeVisible();
await expect(numeralDateInput(page, 0)).toHaveAccessibleName("Day");
await expect(numeralDateInput(page, 1)).toHaveAccessibleName("Month");
await expect(numeralDateInput(page, 2)).not.toBeVisible();
});

test('should render NumeralDate with `["mm", "dd"]` dateFormat prop', async ({
Expand All @@ -464,9 +463,9 @@ test.describe("NumeralDate component", () => {
}) => {
await mount(<NumeralDateComponent dateFormat={["mm", "dd"]} />);

await expect(numeralDateInputLabel(page, 0)).toHaveText("Month");
await expect(numeralDateInputLabel(page, 1)).toHaveText("Day");
await expect(numeralDateInputLabel(page, 2)).not.toBeVisible();
await expect(numeralDateInput(page, 0)).toHaveAccessibleName("Month");
await expect(numeralDateInput(page, 1)).toHaveAccessibleName("Day");
await expect(numeralDateInput(page, 2)).not.toBeVisible();
});

test('should render NumeralDate with `["mm", "yyyy"]` dateFormat prop', async ({
Expand All @@ -475,9 +474,9 @@ test.describe("NumeralDate component", () => {
}) => {
await mount(<NumeralDateComponent dateFormat={["mm", "yyyy"]} />);

await expect(numeralDateInputLabel(page, 0)).toHaveText("Month");
await expect(numeralDateInputLabel(page, 1)).toHaveText("Year");
await expect(numeralDateInputLabel(page, 2)).not.toBeVisible();
await expect(numeralDateInput(page, 0)).toHaveAccessibleName("Month");
await expect(numeralDateInput(page, 1)).toHaveAccessibleName("Year");
await expect(numeralDateInput(page, 2)).not.toBeVisible();
});

(
Expand Down
10 changes: 4 additions & 6 deletions src/components/numeral-date/numeral-date.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import styled, { css } from "styled-components";
import StyledIconSpan from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
import StyledInput from "../../__internal__/input/input.style";
import Typography from "../typography";
import Fieldset from "../../__internal__/fieldset";
import { StyledLegend } from "../../__internal__/fieldset/fieldset.style";

interface StyledDateFieldProps {
isEnd?: boolean;
isYearInput?: boolean;
hasValidationIconInField?: boolean;
size?: "small" | "medium" | "large";
Expand All @@ -30,10 +28,6 @@ export const StyledNumeralDate = styled.div<{ name?: string }>`
gap: var(--spacing150);
`;

export const StyledDateLabel = styled(Typography)`
margin-bottom: var(--spacing050);
`;

export const StyledDateField = styled.div<StyledDateFieldProps>`
${({ isYearInput, hasValidationIconInField, size }) => css`
${size &&
Expand All @@ -53,6 +47,10 @@ export const StyledDateField = styled.div<StyledDateFieldProps>`
width: var(--spacing400);
z-index: 999;
}
label {
font-weight: var(--fontWeights400);
}
`}
`;

Expand Down
Loading

0 comments on commit 7d5888b

Please sign in to comment.