Skip to content

Commit

Permalink
split
Browse files Browse the repository at this point in the history
  • Loading branch information
@YuanboXue-Amber
YuanboXue-Amber committed Jul 19, 2023
1 parent 2d831c3 commit 984f200
Show file tree
Hide file tree
Showing 6 changed files with 286 additions and 229 deletions.
152 changes: 13 additions & 139 deletions apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,202 +8,76 @@ import { Steps } from 'storywright';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const contentId = 'content-id';
const dismissButtonId = 'dismiss-button-id';
const steps = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover(`#${contentId}`)
.snapshot('hover content', { cropTo: '.testWrapper' })
.mouseDown(`#${contentId}`)
.snapshot('pressed content', { cropTo: '.testWrapper' })
.hover(`#${dismissButtonId}`)
.snapshot('hover dismiss', { cropTo: '.testWrapper' })
.mouseDown(`#${dismissButtonId}`)
.snapshot('pressed dismiss', { cropTo: '.testWrapper' })
.end();
const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();

export default {
title: 'InteractionTag Converged',
Component: InteractionTag,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof InteractionTag>;

export const Default = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
export const Default = () => <InteractionTag>Primary Text</InteractionTag>;

export const DefaultRTL = getStoryVariant(Default, RTL);
export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);

// slots
export const Icon = () => (
<InteractionTag content={{ id: contentId }} icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const IconRTL = getStoryVariant(Icon, RTL);

export const Media = () => (
<InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);
export const MediaRTL = getStoryVariant(Media, RTL);

export const Dismissible = () => (
<InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
Primary Text
</InteractionTag>
);
export const DismissibleRTL = getStoryVariant(Dismissible, RTL);

export const SecondaryText = () => (
<InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
Primary Text
</InteractionTag>
);

// shape
export const Circular = () => (
<InteractionTag content={{ id: contentId }} shape="circular">
Primary Text
</InteractionTag>
);
export const CircularWithMedia = () => (
<InteractionTag
content={{ id: contentId }}
shape="circular"
media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
>
Primary Text
</InteractionTag>
);
export const CircularDismissible = () => (
<InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
Primary Text
</InteractionTag>
);

// appearance
export const Outline = () => (
<InteractionTag
content={{ id: contentId }}
appearance="outline"
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
Primary Text
</InteractionTag>
);
export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);

export const Brand = () => (
<InteractionTag
content={{ id: contentId }}
appearance="brand"
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
Primary Text
</InteractionTag>
);
export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);

// disabled
export const Disabled = () => (
<InteractionTag
content={{ id: contentId }}
disabled
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
<InteractionTag disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);

export const OutlineDisabled = () => (
<InteractionTag
content={{ id: contentId }}
appearance="outline"
disabled
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
<InteractionTag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);

export const BrandDisabled = () => (
<InteractionTag
content={{ id: contentId }}
appearance="brand"
disabled
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
<InteractionTag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);

// size
export const SizeSmall = () => (
<InteractionTag content={{ id: contentId }} size="small">
Primary Text
</InteractionTag>
);
export const SizeSmall = () => <InteractionTag size="small">Primary Text</InteractionTag>;
export const SizeSmallDismissible = () => (
<InteractionTag content={{ id: contentId }} size="small" dismissible dismissButton={{ id: dismissButtonId }}>
<InteractionTag size="small" dismissible>
Primary Text
</InteractionTag>
);
export const SizeSmallWithIcon = () => (
<InteractionTag content={{ id: contentId }} size="small" icon={<CalendarMonth />}>
<InteractionTag size="small" icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const SizeSmallWithMedia = () => (
<InteractionTag
content={{ id: contentId }}
size="small"
media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
>
<InteractionTag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);

export const SizeExtraSmall = () => (
<InteractionTag content={{ id: contentId }} size="extra-small">
Primary Text
</InteractionTag>
);
export const SizeExtraSmall = () => <InteractionTag size="extra-small">Primary Text</InteractionTag>;
export const SizeExtraSmallDismissible = () => (
<InteractionTag content={{ id: contentId }} size="extra-small" dismissible dismissButton={{ id: dismissButtonId }}>
<InteractionTag size="extra-small" dismissible>
Primary Text
</InteractionTag>
);
export const SizeExtraSmallWithIcon = () => (
<InteractionTag content={{ id: contentId }} size="extra-small" icon={<CalendarMonth />}>
<InteractionTag size="extra-small" icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const SizeExtraSmallWithMedia = () => (
<InteractionTag
content={{ id: contentId }}
size="extra-small"
media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
>
<InteractionTag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);
70 changes: 70 additions & 0 deletions apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import * as React from 'react';
import { InteractionTag } from '@fluentui/react-tags-preview';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
import { Steps } from 'storywright';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const contentId = 'content-id';
const dismissButtonId = 'dismiss-button-id';
const steps = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover(`#${contentId}`)
.snapshot('hover content', { cropTo: '.testWrapper' })
.mouseDown(`#${contentId}`)
.snapshot('pressed content', { cropTo: '.testWrapper' })
.hover(`#${dismissButtonId}`)
.snapshot('hover dismiss', { cropTo: '.testWrapper' })
.mouseDown(`#${dismissButtonId}`)
.snapshot('pressed dismiss', { cropTo: '.testWrapper' })
.end();

export default {
title: 'InteractionTag Converged',
Component: InteractionTag,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof InteractionTag>;

export const Filled = () => (
<InteractionTag
content={{ id: contentId }}
appearance="filled"
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
Primary Text
</InteractionTag>
);
export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);

export const Outline = () => (
<InteractionTag
content={{ id: contentId }}
appearance="outline"
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
Primary Text
</InteractionTag>
);
export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);

export const Brand = () => (
<InteractionTag
content={{ id: contentId }}
appearance="brand"
dismissible
dismissButton={{ id: dismissButtonId }}
icon={<CalendarMonth />}
>
Primary Text
</InteractionTag>
);
export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
74 changes: 74 additions & 0 deletions apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import * as React from 'react';
import { InteractionTag } from '@fluentui/react-tags-preview';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
import { Avatar } from '@fluentui/react-avatar';
import { Steps } from 'storywright';

const contentId = 'content-id';
const dismissButtonId = 'dismiss-button-id';
const steps = new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.focus(`#${contentId}`)
.snapshot('focus content', { cropTo: '.testWrapper' })
.focus(`#${dismissButtonId}`)
.snapshot('focus dismiss', { cropTo: '.testWrapper' })
.end();

export default {
title: 'InteractionTag Converged',
Component: InteractionTag,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof InteractionTag>;

export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;

export const RoundedWithSecondaryText = () => (
<InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
Primary Text
</InteractionTag>
);

export const RoundedWithMedia = () => (
<InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);
export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);

export const RoundedDismissible = () => (
<InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
Primary Text
</InteractionTag>
);
export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);

export const Circular = () => (
<InteractionTag content={{ id: contentId }} shape="circular">
Primary Text
</InteractionTag>
);

export const CircularWithSecondaryText = () => (
<InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
Primary Text
</InteractionTag>
);

export const CircularWithMedia = () => (
<InteractionTag
content={{ id: contentId }}
shape="circular"
media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
>
Primary Text
</InteractionTag>
);
export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);

export const CircularDismissible = () => (
<InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
Primary Text
</InteractionTag>
);
export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);
Loading

0 comments on commit 984f200

Please sign in to comment.