Skip to content

Commit 11f81d3

Browse files
PelayoFelguerosoPelayoFelgueroso
authored
Merge pull request #2465 from dxc-technology/jialecl/timeComponent
[minor] New component TimeInput
2 parents 93057b9 + 8d48b9e commit 11f81d3

26 files changed

Lines changed: 2411 additions & 2 deletions

‎apps/website/next-env.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3-
import "./.next/types/routes.d.ts";
3+
import "./.next/dev/types/routes.d.ts";
44

55
// NOTE: This file should not be edited
66
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

‎apps/website/pages/components/time-input/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import TimeInputPageLayout from "screens/components/time-input/TimeInputPageLayout";
4+
import TimeInputCodePage from "screens/components/time-input/code/TimeInputCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Time input code — Halstack Design System</title>
10+
</Head>
11+
<TimeInputCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <TimeInputPageLayout>{page}</TimeInputPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/time-input/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import TimeInputOverviewPage from "screens/components/time-input/overview/TimeInputOverviewPage";
4+
import TimeInputPageLayout from "screens/components/time-input/TimeInputPageLayout";
5+
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Time input — Halstack Design System</title>
10+
</Head>
11+
<TimeInputOverviewPage />
12+
</>
13+
);
14+
15+
Index.getLayout = (page: ReactElement) => <TimeInputPageLayout>{page}</TimeInputPageLayout>;
16+
17+
export default Index;

‎apps/website/screens/common/componentsList.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,12 @@
189189
"status": "stable",
190190
"icon": "subject"
191191
},
192+
{
193+
"label": "Time input",
194+
"path": "/components/time-input",
195+
"status": "experimental",
196+
"icon": "schedule"
197+
},
192198
{
193199
"label": "Toggle group",
194200
"path": "/components/toggle-group",

‎apps/website/screens/components/time-input/TimeInputPageLayout.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
2+
import PageHeading from "@/common/PageHeading";
3+
import TabsPageHeading from "@/common/TabsPageLayout";
4+
import ComponentHeading from "@/common/ComponentHeading";
5+
import { ReactNode } from "react";
6+
7+
const TimeInputPageHeading = ({ children }: { children: ReactNode }) => {
8+
const tabs = [
9+
{ label: "Overview", path: "/components/time-input" },
10+
{ label: "Code", path: "/components/time-input/code" },
11+
];
12+
13+
return (
14+
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
15+
<PageHeading>
16+
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
17+
<ComponentHeading name="Time input" />
18+
<DxcParagraph>Time input allows users to specify a specific time.</DxcParagraph>
19+
<TabsPageHeading tabs={tabs} />
20+
</DxcFlex>
21+
</PageHeading>
22+
{children}
23+
</DxcFlex>
24+
);
25+
};
26+
27+
export default TimeInputPageHeading;

‎apps/website/screens/components/time-input/code/TimeInputCodePage.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import DocFooter from "@/common/DocFooter";
4+
import Example from "@/common/example/Example";
5+
import Code, { TableCode } from "@/common/Code";
6+
import controlled from "./examples/controlled";
7+
import uncontrolled from "./examples/uncontrolled";
8+
import format from "./examples/format";
9+
import withSeconds from "./examples/withSeconds";
10+
11+
const sections = [
12+
{
13+
title: "Props",
14+
content: (
15+
<DxcTable>
16+
<thead>
17+
<tr>
18+
<th>Name</th>
19+
<th>Type</th>
20+
<th>Description</th>
21+
<th>Default</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td>ariaLabel</td>
27+
<td>
28+
<TableCode>string</TableCode>
29+
</td>
30+
<td>
31+
Specifies a string to be used as the name for the timeInput element when no <Code>label</Code> is
32+
provided.
33+
</td>
34+
<td>
35+
<TableCode>'Time input'</TableCode>
36+
</td>
37+
</tr>
38+
<tr>
39+
<td>clearable</td>
40+
<td>
41+
<TableCode>boolean</TableCode>
42+
</td>
43+
<td>If true, the input will have an action to clear the entered value.</td>
44+
<td>
45+
<TableCode>false</TableCode>
46+
</td>
47+
</tr>
48+
<tr>
49+
<td>defaultValue</td>
50+
<td>
51+
<TableCode>string</TableCode>
52+
</td>
53+
<td>Initial value of the input, only when it is uncontrolled.</td>
54+
<td>-</td>
55+
</tr>
56+
<tr>
57+
<td>disabled</td>
58+
<td>
59+
<TableCode>boolean</TableCode>
60+
</td>
61+
<td>If true, the component will be disabled.</td>
62+
<td>
63+
<TableCode>false</TableCode>
64+
</td>
65+
</tr>
66+
<tr>
67+
<td>error</td>
68+
<td>
69+
<TableCode>string</TableCode>
70+
</td>
71+
<td>
72+
If it is a defined value and also a truthy string, the component will change its appearance, showing the
73+
error below the input component. If the defined value is an empty string, it will reserve a space below
74+
the component for a future error, but it would not change its look. In case of being undefined or null,
75+
both the appearance and the space for the error message would not be modified.
76+
</td>
77+
<td>-</td>
78+
</tr>
79+
<tr>
80+
<td>helperText</td>
81+
<td>
82+
<TableCode>string</TableCode>
83+
</td>
84+
<td>Helper text to be placed above the input.</td>
85+
<td>-</td>
86+
</tr>
87+
<tr>
88+
<td>label</td>
89+
<td>
90+
<TableCode>string</TableCode>
91+
</td>
92+
<td>Text to be placed above the input.</td>
93+
<td>-</td>
94+
</tr>
95+
<tr>
96+
<td>name</td>
97+
<td>
98+
<TableCode>string</TableCode>
99+
</td>
100+
<td>Name attribute of the input element.</td>
101+
<td>-</td>
102+
</tr>
103+
<tr>
104+
<td>onBlur</td>
105+
<td>
106+
<TableCode>{"(val: { value: string; error?: string }) => void"}</TableCode>
107+
</td>
108+
<td>
109+
This function will be called when the input element loses the focus. An object including the input value
110+
and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
111+
<Code>error</Code> will not be defined.
112+
</td>
113+
<td>-</td>
114+
</tr>
115+
<tr>
116+
<td>onChange</td>
117+
<td>
118+
<TableCode>{"(value: string) => void"}</TableCode>
119+
</td>
120+
<td>
121+
This function will be called when the user types within the input or selects a value in the dropdown
122+
element of the component.
123+
</td>
124+
<td>-</td>
125+
</tr>
126+
<tr>
127+
<td>optional</td>
128+
<td>
129+
<TableCode>boolean</TableCode>
130+
</td>
131+
<td>
132+
If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
133+
considered required and an error will be passed as a parameter to the <Code>onBlur</Code> function when it
134+
has not been filled.
135+
</td>
136+
<td>
137+
<TableCode>false</TableCode>
138+
</td>
139+
</tr>
140+
<tr>
141+
<td>readOnly</td>
142+
<td>
143+
<TableCode>boolean</TableCode>
144+
</td>
145+
<td>
146+
If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
147+
clear action will not be displayed even if the flag is set to true.
148+
</td>
149+
<td>
150+
<TableCode>false</TableCode>
151+
</td>
152+
</tr>
153+
<tr>
154+
<td>ref</td>
155+
<td>
156+
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
157+
</td>
158+
<td>Reference to the component.</td>
159+
<td>-</td>
160+
</tr>
161+
<tr>
162+
<td>showSeconds</td>
163+
<td>
164+
<TableCode>boolean</TableCode>
165+
</td>
166+
<td>
167+
If true, the component will display seconds and allow the user to input them. Otherwise, seconds will not
168+
be shown and the user will not be able to input them.
169+
</td>
170+
<td>
171+
<TableCode>false</TableCode>
172+
</td>
173+
</tr>
174+
<tr>
175+
<td>size</td>
176+
<td>
177+
<TableCode>'small' | 'medium' | 'large' | 'fillParent'</TableCode>
178+
</td>
179+
<td>Size of the component.</td>
180+
<td>
181+
<TableCode>'medium'</TableCode>
182+
</td>
183+
</tr>
184+
<tr>
185+
<td>tabIndex</td>
186+
<td>
187+
<TableCode>number</TableCode>
188+
</td>
189+
<td>
190+
Value of the <Code>tabindex</Code> attribute.
191+
</td>
192+
<td>
193+
<TableCode>0</TableCode>
194+
</td>
195+
</tr>
196+
<tr>
197+
<td>timeFormat</td>
198+
<td>
199+
<TableCode>'12' | '24'</TableCode>
200+
</td>
201+
<td>Time format of the input. It can be either 12 or 24.</td>
202+
<td>
203+
<TableCode>'12'</TableCode>
204+
</td>
205+
</tr>
206+
<tr>
207+
<td>value</td>
208+
<td>
209+
<TableCode>string</TableCode>
210+
</td>
211+
<td>
212+
Value of the input. If undefined, the component will be uncontrolled and the value will be managed
213+
internally by the component.
214+
</td>
215+
<td>-</td>
216+
</tr>
217+
</tbody>
218+
</DxcTable>
219+
),
220+
},
221+
{
222+
title: "Examples",
223+
subSections: [
224+
{
225+
title: "Controlled",
226+
content: <Example example={controlled} defaultIsVisible />,
227+
},
228+
{
229+
title: "Uncontrolled",
230+
content: <Example example={uncontrolled} defaultIsVisible />,
231+
},
232+
{
233+
title: "24h format",
234+
content: <Example example={format} defaultIsVisible />,
235+
},
236+
{
237+
title: "With seconds",
238+
content: <Example example={withSeconds} defaultIsVisible />,
239+
},
240+
],
241+
},
242+
];
243+
244+
const TextInputCodePage = () => (
245+
<DxcFlex direction="column" gap="4rem">
246+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
247+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/text-input/code/TextInputCodePage.tsx" />
248+
</DxcFlex>
249+
);
250+
251+
export default TextInputCodePage;

‎apps/website/screens/components/time-input/code/examples/controlled.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { DxcTimeInput, DxcInset } from "@dxc-technology/halstack-react";
2+
import { useState } from "react";
3+
4+
const code = `() => {
5+
const [value, setValue] = useState("");
6+
7+
return (
8+
<DxcInset space="var(--spacing-padding-xl)">
9+
<DxcTimeInput
10+
label="Enter your time"
11+
value={value}
12+
onChange={newValue => setValue(newValue)}
13+
/>
14+
</DxcInset>
15+
);
16+
}`;
17+
18+
const scope = {
19+
DxcTimeInput,
20+
DxcInset,
21+
useState,
22+
};
23+
24+
export default { code, scope };

‎apps/website/screens/components/time-input/code/examples/format.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { DxcTimeInput, DxcInset } from "@dxc-technology/halstack-react";
2+
import { useState } from "react";
3+
4+
const code = `() => {
5+
const onChange = (value) => {
6+
console.log(value);
7+
};
8+
9+
return (
10+
<DxcInset space="var(--spacing-padding-xl)">
11+
<DxcTimeInput
12+
label="Enter your time"
13+
defaultValue="20:00"
14+
timeFormat="24"
15+
onChange={onChange}
16+
/>
17+
</DxcInset>
18+
);
19+
}`;
20+
21+
const scope = {
22+
DxcTimeInput,
23+
DxcInset,
24+
useState,
25+
};
26+
27+
export default { code, scope };

0 commit comments

Comments
 (0)