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

Jump to bottom

chore(vr-tests-v9): Convert Calendar VR tests to CSF #31915

Merged
merged 4 commits into from
Jul 4, 2024
Merged

chore(vr-tests-v9): Convert Calendar VR tests to CSF #31915

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f2dc78
chore(vr-tests-v9): Convert Calendar VR tests to CSF
dmytrokirpa Jul 3, 2024
8849829
Merge branch 'master' into calendar-to-csf
dmytrokirpa Jul 4, 2024
5427031
use satifisfies instead of as for typecasting
dmytrokirpa Jul 4, 2024
e7437e0
Merge branch 'master' into calendar-to-csf
dmytrokirpa Jul 4, 2024
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
65 changes: 39 additions & 26 deletions apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,51 @@
import * as React from 'react';
dmytrokirpa marked this conversation as resolved.
Show resolved Hide resolved
import { storiesOf } from '@storybook/react';
import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
import type { Meta, StoryFn } from '@storybook/react';
import { Steps, StoryWright } from 'storywright';
import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat';
import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons';
import type { CalendarProps } from '@fluentui/react-calendar-compat';

import { getStoryVariant, RTL, TestWrapperDecorator } from '../utilities';

const Calendar = (props: CalendarProps) => {
const today = new Date('3/15/2023');

return <CalendarBase today={today} {...props} />;
};

storiesOf('Calendar Compat', module)
.addDecorator(TestWrapperDecorator)
.addDecorator(story => (
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
))
.addStory('Default', () => <Calendar />, { includeRtl: true })
.addStory('Custom icons', () => (
<Calendar
calendarDayProps={{
navigationIcons: {
upNavigation: <ArrowLeftRegular />,
downNavigation: <ArrowRightRegular />,
dismiss: <DismissCircleRegular />,
},
}}
calendarMonthProps={{
navigationIcons: {
upNavigation: <ArrowLeftRegular />,
downNavigation: <ArrowRightRegular />,
dismiss: <DismissCircleRegular />,
},
}}
/>
));
export default {
title: 'Calendar Compat',
component: CalendarBase,
decorators: [
TestWrapperDecorator,
story => (
<StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
),
],
} as Meta<typeof CalendarBase>;

type Story = StoryFn<typeof CalendarBase>;

export const Default: Story = () => <Calendar />;

export const CustomIcons: Story = () => (
<Calendar
calendarDayProps={{
navigationIcons: {
upNavigation: <ArrowLeftRegular />,
downNavigation: <ArrowRightRegular />,
dismiss: <DismissCircleRegular />,
},
}}
calendarMonthProps={{
navigationIcons: {
upNavigation: <ArrowLeftRegular />,
downNavigation: <ArrowRightRegular />,
dismiss: <DismissCircleRegular />,
},
}}
/>
);
CustomIcons.storyName = 'Custom icons';

export const CustomIconsRTL = getStoryVariant(CustomIcons, RTL);
Loading