Skip to content

Commit

Permalink
De-couple v8 and converged vr-tests and storybooks (#20907)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ecraig12345
ecraig12345 authored Dec 6, 2021
1 parent 6b1ea43 commit 3defe84
Show file tree
Hide file tree
Showing 16 changed files with 212 additions and 339 deletions.
14 changes: 7 additions & 7 deletions apps/vr-tests/src/stories/AccordionConverged.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
AccordionHeader,
AccordionPanel,
} from '@fluentui/react-accordion';
import { CircleRingIcon } from '@fluentui/react-icons-mdl2';
import { CircleRegular } from '@fluentui/react-icons';

storiesOf('Accordion Converged', module)
.addDecorator(story => (
Expand Down Expand Up @@ -97,19 +97,19 @@ storiesOf('Accordion Converged', module)
() => (
<Accordion openItems={[]}>
<AccordionItem value={0}>
<AccordionHeader expandIcon={<CircleRingIcon />} expandIconPosition="start">
<AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="start">
Expand Icon Start
</AccordionHeader>
<AccordionPanel>Expand Icon Start Panel</AccordionPanel>
</AccordionItem>
<AccordionItem value={1}>
<AccordionHeader expandIcon={<CircleRingIcon />} expandIconPosition="end">
<AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="end">
Expand Icon End
</AccordionHeader>
<AccordionPanel>Expand Icon End Panel</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionHeader inline expandIcon={<CircleRingIcon />} expandIconPosition="end">
<AccordionHeader inline expandIcon={<CircleRegular />} expandIconPosition="end">
Expand Icon Inline End
</AccordionHeader>
<AccordionPanel>Expand Icon Inline End Panel</AccordionPanel>
Expand All @@ -123,19 +123,19 @@ storiesOf('Accordion Converged', module)
() => (
<Accordion openItems={[]}>
<AccordionItem value={0}>
<AccordionHeader icon={<CircleRingIcon />} expandIconPosition="start">
<AccordionHeader icon={<CircleRegular />} expandIconPosition="start">
Icon Start
</AccordionHeader>
<AccordionPanel>Icon Start Panel</AccordionPanel>
</AccordionItem>
<AccordionItem value={1}>
<AccordionHeader icon={<CircleRingIcon />} expandIconPosition="end">
<AccordionHeader icon={<CircleRegular />} expandIconPosition="end">
Icon End
</AccordionHeader>
<AccordionPanel>Icon End Panel</AccordionPanel>
</AccordionItem>
<AccordionItem value={2}>
<AccordionHeader inline icon={<CircleRingIcon />} expandIconPosition="end">
<AccordionHeader inline icon={<CircleRegular />} expandIconPosition="end">
Icon Inline End
</AccordionHeader>
<AccordionPanel>Icon Inline End Panel</AccordionPanel>
Expand Down
162 changes: 130 additions & 32 deletions apps/vr-tests/src/stories/AvatarConverged.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,107 @@ import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Avatar, AvatarProps } from '@fluentui/react-avatar';
import { Stack } from '@fluentui/react';
import { People20Regular, PersonCall20Regular } from '@fluentui/react-icons';
import { AvatarExamples as examples } from '@fluentui/example-data';

const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar';

/** Sample names and images for use in Avatar examples */
const nameAndImage = [
{ name: 'Katri Athokas', image: `${imageRoot}/KatriAthokas.jpg` },
{ name: 'Elvia Atkins', image: `${imageRoot}/ElviaAtkins.jpg` },
{ name: 'Mauricio August', image: `${imageRoot}/MauricioAugust.jpg` },
{ name: 'Colin Ballinger', image: `${imageRoot}/ColinBallinger.jpg` },
{ name: 'Lydia Bauer', image: `${imageRoot}/LydiaBauer.jpg` },
{ name: 'Amanda Brady', image: `${imageRoot}/AmandaBrady.jpg` },
{ name: 'Henry Brill', image: `${imageRoot}/HenryBrill.jpg` },
{ name: 'Celeste Burton', image: `${imageRoot}/CelesteBurton.jpg` },
{ name: 'Robin Counts', image: `${imageRoot}/RobinCounts.jpg` },
{ name: 'Tim Deboer', image: `${imageRoot}/TimDeboer.jpg` },
{ name: 'Cameron Evans', image: `${imageRoot}/CameronEvans.jpg` },
{ name: 'Isaac Fielder', image: `${imageRoot}/IsaacFielder.jpg` },
{ name: 'Cecil Folk', image: `${imageRoot}/CecilFolk.jpg` },
{ name: 'Miguel Garcia', image: `${imageRoot}/MiguelGarcia.jpg` },
{ name: 'Wanda Howard', image: `${imageRoot}/WandaHoward.jpg` },
{ name: 'Mona Kane', image: `${imageRoot}/MonaKane.jpg` },
{ name: 'Kat Larsson', image: `${imageRoot}/KatLarsson.jpg` },
{ name: 'Ashley McCarthy', image: `${imageRoot}/AshleyMcCarthy.jpg` },
{ name: 'Johnie McConnell', image: `${imageRoot}/JohnieMcConnell.jpg` },
{ name: 'Allan Munger', image: `${imageRoot}/AllanMunger.jpg` },
{ name: 'Erik Nason', image: `${imageRoot}/ErikNason.jpg` },
{ name: 'Kristin Patterson', image: `${imageRoot}/KristinPatterson.jpg` },
{ name: 'Daisy Phillips', image: `${imageRoot}/DaisyPhillips.jpg` },
{ name: 'Carole Poland', image: `${imageRoot}/CarolePoland.jpg` },
{ name: 'Carlos Slattery', image: `${imageRoot}/CarlosSlattery.jpg` },
{ name: 'Robert Tolbert', image: `${imageRoot}/RobertTolbert.jpg` },
{ name: 'Kevin Sturgis', image: `${imageRoot}/KevinSturgis.jpg` },
{ name: 'Charlotte Waltson', image: `${imageRoot}/CharlotteWaltson.jpg` },
{ name: 'Elliot Woodward', image: `${imageRoot}/ElliotWoodward.jpg` },
];

/** Arrays of example values for each Avatar prop */
const examples = {
size: [20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128],
nameAndImage: nameAndImage,
name: nameAndImage.map(p => p.name),
image: nameAndImage.map(p => p.image),
badge: [
{ status: 'available' },
{ status: 'away' },
{ status: 'busy' },
{ status: 'doNotDisturb' },
{ status: 'offline' },
{ status: 'outOfOffice' },
{ status: 'available', outOfOffice: true },
{ status: 'away', outOfOffice: true },
{ status: 'busy', outOfOffice: true },
{ status: 'doNotDisturb', outOfOffice: true },
{ status: 'offline', outOfOffice: true },
{ status: 'outOfOffice', outOfOffice: true },
],
activeDisplay: ['ring', 'ring-shadow', 'ring-glow', 'shadow', 'glow'],
color: ['neutral', 'brand', 'colorful'],
namedColors: [
'darkRed',
'cranberry',
'red',
'pumpkin',
'peach',
'marigold',
'gold',
'brass',
'brown',
'forest',
'seafoam',
'darkGreen',
'lightTeal',
'teal',
'steel',
'blue',
'royalBlue',
'cornflower',
'navy',
'lavender',
'purple',
'grape',
'lilac',
'pink',
'magenta',
'plum',
'beige',
'mink',
'platinum',
'anchor',
],
/** A SVG hexagon data URL used by the CustomShape example */
hexagon:
'data:image/svg+xml;utf8,' +
'<svg width="36" height="32" viewBox="0 0 36 32" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path fill="rgb(232,232,232)" d="M0.407926 17.528C-0.135976 16.5859 -0.135975 15.4141 0.407926 14.472' +
'L7.91541 1.46793C8.44076 0.557947 9.39444 0 10.4245 0H25.5755C26.6056 0 27.5592 0.557951 28.0846 1.46793' +
'L35.5921 14.472C36.136 15.4141 36.136 16.5859 35.5921 17.528L28.0846 30.5321' +
'C27.5592 31.4421 26.6056 32 25.5755 32H10.4245C9.39443 32 8.44076 31.4421 7.91541 30.5321L0.407926 17.528Z"/>' +
'</svg>',
} as const;

/** Renders an Avatar at every standard size */
const AvatarList: React.FC<
Expand All @@ -15,7 +113,7 @@ const AvatarList: React.FC<
> = props => {
const { names, images, ...restOfProps } = props;
return (
<Stack wrap horizontal tokens={{ childrenGap: 48 }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '48px', padding: '24px' }}>
{examples.size.map((size, i) => (
<Avatar
key={size}
Expand All @@ -25,7 +123,7 @@ const AvatarList: React.FC<
{...restOfProps}
/>
))}
</Stack>
</div>
);
};

Expand All @@ -48,7 +146,7 @@ const AvatarCustomSizeList: React.FC<
const { names, images, ...restOfProps } = props;

return (
<Stack wrap horizontal tokens={{ childrenGap: 48 }}>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '48px', padding: '24px' }}>
{customSizes.map(({ baseSize, customSize }, i) => (
<Avatar
key={customSize}
Expand All @@ -59,20 +157,16 @@ const AvatarCustomSizeList: React.FC<
{...restOfProps}
/>
))}
</Stack>
</div>
);
};

storiesOf('Avatar Converged', module)
.addDecorator(story => (
<div style={{ display: 'flex' }}>
<Stack
className="testWrapper"
horizontal
tokens={{ childrenGap: '24px', padding: '24px', maxWidth: '750px' }}
>
<div className="testWrapper" style={{ maxWidth: '750px' }}>
{story()}
</Stack>
</div>
</div>
))
.addDecorator(story => (
Expand All @@ -83,7 +177,7 @@ storiesOf('Avatar Converged', module)
.addStory(
'basic',
() => (
<>
<div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
<Avatar />
<Avatar name="First Last" />
<Avatar name="Three Word Name" />
Expand All @@ -97,7 +191,7 @@ storiesOf('Avatar Converged', module)
image={{ src: examples.image[7] }}
badge={{ status: 'available' }}
/>
</>
</div>
),
{ includeRtl: true, includeHighContrast: true, includeDarkMode: true },
)
Expand Down Expand Up @@ -133,23 +227,27 @@ storiesOf('Avatar Converged', module)
.addStory('customSize+icon+active', () => <AvatarCustomSizeList active="active" />)
.addStory(
'color',
() => (
<Stack tokens={{ childrenGap: 24 }}>
<Stack wrap horizontal tokens={{ childrenGap: 8 }}>
<Avatar color="neutral" />
<Avatar color="brand" />
</Stack>
<Stack wrap horizontal tokens={{ childrenGap: 8 }}>
{examples.name.map(name => (
<Avatar color="colorful" name={name} key={name} />
))}
</Stack>
<Stack wrap horizontal tokens={{ childrenGap: 8 }}>
{examples.namedColors.map(color => (
<Avatar color={color} key={color} />
))}
</Stack>
</Stack>
),
() => {
const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' };

return (
<div style={{ display: 'flex', gap: '24px', flexDirection: 'row' }}>
<div style={rowStyles}>
<Avatar color="neutral" />
<Avatar color="brand" />
</div>
<div style={rowStyles}>
{examples.name.map(name => (
<Avatar color="colorful" name={name} key={name} />
))}
</div>
<div style={rowStyles}>
{examples.namedColors.map(color => (
<Avatar color={color} key={color} />
))}
</div>
</div>
);
},
{ includeHighContrast: true, includeDarkMode: true },
);
Loading

0 comments on commit 3defe84

Please sign in to comment.