Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(InputField): add stories for date and time support #2009

Merged
merged 1 commit into from
Jul 11, 2024
Merged

docs(InputField): add stories for date and time support #2009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion src/components/InputField/InputField.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ const meta: Meta<typeof InputField> = {
options: [
'text',
'password',
'datetime',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was removed form the supported standard, and get treated like a text field, so removing from our types and storybook control

'datetime-local',
'date',
'month',
Expand Down Expand Up @@ -194,6 +193,39 @@ export const PasswordWithShownText: Story = {
},
};

/**
* You can specify dates of varying details (including full date, month and year, etc.).
* It uses the built-in browser UI to handle date/time input.
*/
export const DateHandling: Story = {
args: {
...Default.args,
type: 'date',
},
argTypes: {
type: {
control: 'select',
options: ['datetime-local', 'date', 'month', 'time', 'week'],
},
},
};

/**
* You can specify time as well, which uses a different internal glyph to trigger the browser UI.
*/
export const TimeHandling: Story = {
args: {
...Default.args,
type: 'time',
},
argTypes: {
type: {
control: 'select',
options: ['datetime-local', 'date', 'month', 'time', 'week'],
},
},
};

/**
* Fields can have an optional field hint added, for extra clarity.
*/
Expand Down
5 changes: 4 additions & 1 deletion src/components/InputField/InputField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,11 @@ import { InputField } from './InputField';
import * as stories from './InputField.stories';
import type { StoryFile } from '../../util/utility-types';

// rest-ing out password stories to avoid incorrect act() warnings after storybook 8 upgrade
const { Password, PasswordWithShownText, ...otherStories } = stories;

describe('<InputField />', () => {
generateSnapshots(stories as StoryFile);
generateSnapshots(otherStories as StoryFile);

it('handles changes to the text within the component', async () => {
const user = userEvent.setup();
Expand Down
1 change: 0 additions & 1 deletion src/components/InputField/InputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
React.InputHTMLAttributes<HTMLInputElement>['type'],
| 'text'
| 'password'
| 'datetime'
| 'datetime-local'
| 'date'
| 'month'
Expand Down
196 changes: 76 additions & 120 deletions src/components/InputField/__snapshots__/InputField.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<InputField /> DateHandling story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="w-96"
>
<div
class="input-field__overline"
>
<label
class="label label--lg input-field__label"
for=":rm:"
>
Default input field
</label>
</div>
<div
class="input-field__body input-field--has-fieldNote"
>
<input
aria-describedby=":rn:"
aria-invalid="false"
class="input"
id=":rm:"
type="date"
/>
</div>
<div
class="field-note"
id=":rn:"
>
This is a fieldnote.
</div>
</div>
</div>
`;

exports[`<InputField /> Default story renders snapshot 1`] = `
<div
class="p-8"
Expand Down Expand Up @@ -283,126 +321,6 @@ exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
</div>
`;

exports[`<InputField /> Password story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="w-96"
>
<div
class="input-field__overline"
>
<label
class="label label--lg input-field__label"
for=":rm:"
>
Password
</label>
</div>
<div
class="input-field__body"
>
<input
aria-invalid="false"
class="input"
id=":rm:"
type="password"
value="secret123"
/>
<div
class="input-field__input-within"
>
<button
aria-label="Show password"
class="button button--layout-icon-only button--tertiary button--md button--variant-default"
type="button"
>
<span
class="button__text"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1rem"
style="--icon-size: 1rem;"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4ZM12 16.5C9.24 16.5 7 14.26 7 11.5C7 8.74 9.24 6.5 12 6.5C14.76 6.5 17 8.74 17 11.5C17 14.26 14.76 16.5 12 16.5ZM12 8.5C10.34 8.5 9 9.84 9 11.5C9 13.16 10.34 14.5 12 14.5C13.66 14.5 15 13.16 15 11.5C15 9.84 13.66 8.5 12 8.5Z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
`;

exports[`<InputField /> PasswordWithShownText story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="w-96"
>
<div
class="input-field__overline"
>
<label
class="label label--lg input-field__label"
for=":ro:"
>
Password
</label>
</div>
<div
class="input-field__body"
>
<input
aria-invalid="false"
class="input"
id=":ro:"
type="text"
value="secret123"
/>
<div
class="input-field__input-within"
>
<button
aria-label="Hide password"
class="button button--layout-icon-only button--tertiary button--md button--variant-default"
type="button"
>
<span
class="button__text"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
height="1rem"
style="--icon-size: 1rem;"
viewBox="0 0 24 24"
width="1rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 6.49969C14.76 6.49969 17 8.73969 17 11.4997C17 12.0097 16.9 12.4997 16.76 12.9597L19.82 16.0197C21.21 14.7897 22.31 13.2497 23 11.4897C21.27 7.10969 17 3.99969 12 3.99969C10.73 3.99969 9.51 4.19969 8.36 4.56969L10.53 6.73969C11 6.59969 11.49 6.49969 12 6.49969ZM2.71 3.15969C2.32 3.54969 2.32 4.17969 2.71 4.56969L4.68 6.53969C3.06 7.82969 1.77 9.52969 1 11.4997C2.73 15.8897 7 18.9997 12 18.9997C13.52 18.9997 14.97 18.6997 16.31 18.1797L19.03 20.8997C19.42 21.2897 20.05 21.2897 20.44 20.8997C20.83 20.5097 20.83 19.8797 20.44 19.4897L4.13 3.15969C3.74 2.76969 3.1 2.76969 2.71 3.15969ZM12 16.4997C9.24 16.4997 7 14.2597 7 11.4997C7 10.7297 7.18 9.99969 7.49 9.35969L9.06 10.9297C9.03 11.1097 9 11.2997 9 11.4997C9 13.1597 10.34 14.4997 12 14.4997C12.2 14.4997 12.38 14.4697 12.57 14.4297L14.14 15.9997C13.49 16.3197 12.77 16.4997 12 16.4997ZM14.97 11.1697C14.82 9.76969 13.72 8.67969 12.33 8.52969L14.97 11.1697Z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
`;

exports[`<InputField /> ReadOnly story renders snapshot 1`] = `
<div
class="p-8"
Expand Down Expand Up @@ -643,6 +561,44 @@ exports[`<InputField /> TabularInput story renders snapshot 1`] = `
</div>
`;

exports[`<InputField /> TimeHandling story renders snapshot 1`] = `
<div
class="p-8"
>
<div
class="w-96"
>
<div
class="input-field__overline"
>
<label
class="label label--lg input-field__label"
for=":ro:"
>
Default input field
</label>
</div>
<div
class="input-field__body input-field--has-fieldNote"
>
<input
aria-describedby=":rp:"
aria-invalid="false"
class="input"
id=":ro:"
type="time"
/>
</div>
<div
class="field-note"
id=":rp:"
>
This is a fieldnote.
</div>
</div>
</div>
`;

exports[`<InputField /> Warning story renders snapshot 1`] = `
<div
class="p-8"
Expand Down
Loading