Skip to content

Commit

Permalink
fix(DatePicker): use the HvFormStatus type for its status prop (#3453)
Browse files Browse the repository at this point in the history 
Co-authored-by: Paulo Lagoá <paulo.lagoa@@hitachivantara.com>
  • Loading branch information
@plagoa
plagoa and Paulo Lagoá committed Jun 23, 2023
1 parent 316dca5 commit 4d500f2
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 66 deletions.
118 changes: 54 additions & 64 deletions packages/core/src/components/DatePicker/DatePicker.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,17 @@ import styled from "@emotion/styled";
import { theme } from "@hitachivantara/uikit-styles";
import { Meta, StoryObj } from "@storybook/react";
import { useEffect, useState } from "react";
import { CSSInterpolation, css } from "@emotion/css";
import {
HvButton,
HvFormStatus,
HvGrid,
HvListContainer,
HvListItem,
HvRadio,
HvRadioGroup,
} from "@core/components";
import {
HvDatePicker,
HvDatePickerProps,
HvDatePickerStatus,
} from "./DatePicker";
import { HvDatePicker, HvDatePickerProps } from "./DatePicker";

const Decorator = ({ children }) => {
return <div style={{ width: 340, height: 600, padding: 10 }}>{children}</div>;
Expand All @@ -23,7 +21,6 @@ const Decorator = ({ children }) => {
const meta: Meta<typeof HvDatePicker> = {
title: "Components/Date Picker",
component: HvDatePicker,
decorators: [(Story) => <Decorator>{Story()}</Decorator>],
};
export default meta;

Expand All @@ -42,6 +39,7 @@ export const Main: StoryObj<HvDatePickerProps> = {
argTypes: {
classes: { control: { disable: true } },
},
decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: (args) => {
return (
<HvDatePicker
Expand All @@ -54,6 +52,46 @@ export const Main: StoryObj<HvDatePickerProps> = {
},
};

export const Variants: StoryObj<HvDatePickerProps> = {
parameters: {
docs: {
description: {
story:
"Date Pickers in their various form state variants. `value` is used to configure the _uncontrolled_ initial value.",
},
},
},
render: () => {
const value = new Date("2023-01-01");

const styles: { root: CSSInterpolation } = {
root: {
display: "flex",
height: 550,
gap: 20,
flexWrap: "wrap",
"& > div": {
width: 200,
},
},
};

return (
<div className={css(styles.root)}>
<HvDatePicker required label="Required" value={value} />
<HvDatePicker disabled label="Disabled" value={value} />
<HvDatePicker readOnly label="Read-only" value={value} />
<HvDatePicker
label="Invalid"
status="invalid"
statusMessage="This is an invalid date"
value={value}
/>
</div>
);
},
};

export const DefaultValue: StoryObj<HvDatePickerProps> = {
parameters: {
eyes: { include: false },
Expand All @@ -63,6 +101,7 @@ export const DefaultValue: StoryObj<HvDatePickerProps> = {
},
},
},
decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand All @@ -84,7 +123,7 @@ export const Localized: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
// Locales must be imported beforehand:
// import "dayjs/locale/pt";
Expand Down Expand Up @@ -126,7 +165,7 @@ export const WithActions: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand All @@ -150,7 +189,7 @@ export const WithCustomLabels: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand Down Expand Up @@ -179,7 +218,7 @@ export const RangeMode: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand Down Expand Up @@ -207,7 +246,7 @@ export const RangeModeWithNoValues: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand All @@ -232,7 +271,7 @@ export const NearInvalid: StoryObj<HvDatePickerProps> = {
},
},
},

decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
return (
<HvDatePicker
Expand All @@ -245,6 +284,7 @@ export const NearInvalid: StoryObj<HvDatePickerProps> = {
};

export const WithValueChange: StoryObj<HvDatePickerProps> = {
decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
const [date, setDate] = useState<Date | undefined>(new Date(2020, 0, 1));

Expand Down Expand Up @@ -278,6 +318,7 @@ export const WithValueChange: StoryObj<HvDatePickerProps> = {
};

export const WithSelectionList: StoryObj<HvDatePickerProps> = {
decorators: [(Story) => <Decorator>{Story()}</Decorator>],
render: () => {
const [startDate, setStartDate] = useState<Date>(new Date(2020, 8, 5));
const [endDate, setEndDate] = useState<Date>(new Date(2020, 8, 10));
Expand Down Expand Up @@ -371,43 +412,6 @@ export const WithSelectionList: StoryObj<HvDatePickerProps> = {
},
};

export const Disable: StoryObj<HvDatePickerProps> = {
render: () => {
return (
<HvDatePicker
id="DatePicker"
placeholder="Can't select a date now"
disabled
aria-label="Disabled date picker"
/>
);
},
};

export const Invalid: StoryObj<HvDatePickerProps> = {
parameters: {
eyes: { include: false },
docs: {
description: {
story:
"Datepicker sample with invalid status. It is a Form Element and it inherits all Form capabilities.",
},
},
},

render: () => {
return (
<HvDatePicker
placeholder="Select date"
id="DatePicker"
status="invalid"
statusMessage="This date picker is always invalid"
aria-label="Invalid date picker"
/>
);
},
};

export const ExternalErrorMessage: StoryObj<HvDatePickerProps> = {
parameters: {
eyes: { include: false },
Expand All @@ -418,10 +422,9 @@ export const ExternalErrorMessage: StoryObj<HvDatePickerProps> = {
},
},
},

render: () => {
const [deathValidationState, setDeathValidationState] =
useState<HvDatePickerStatus>("invalid");
useState<HvFormStatus>("invalid");

const [birthErrorMessage, setBirthErrorMessage] = useState<
string | undefined
Expand Down Expand Up @@ -514,16 +517,3 @@ ExternalErrorMessage.decorators = [
</div>
),
];

export const ReadOnly: StoryObj<HvDatePickerProps> = {
render: () => {
return (
<HvDatePicker
id="DatePicker"
placeholder="Can't select a date now"
aria-label="Read only date picker"
readOnly
/>
);
},
};
6 changes: 4 additions & 2 deletions packages/core/src/components/DatePicker/DatePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
HvTypography,
HvBaseDropdown,
HvLabel,
HvFormStatus,
} from "@core/components";
import { useControlled, useLabels, useTheme, useUniqueId } from "@core/hooks";
import { HvBaseProps } from "@core/types";
Expand All @@ -34,7 +35,8 @@ const DEFAULT_LABELS = {
invalidLabel: "Invalid date",
};

export type HvDatePickerStatus = "standBy" | "valid" | "invalid";
/** @deprecated use `HvFormStatus` instead */
export type HvDatePickerStatus = HvFormStatus;

export interface HvDatePickerProps
extends HvBaseProps<HTMLDivElement, "onChange"> {
Expand Down Expand Up @@ -100,7 +102,7 @@ export interface HvDatePickerProps
* When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
* or "invalid" after any change to the state.
*/
status?: HvDatePickerStatus;
status?: HvFormStatus;
/**
* The error message to show when the validation status is "invalid".
*
Expand Down

0 comments on commit 4d500f2

Please sign in to comment.