Azure
/
communication-ui-library
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Task/2403313 Improves VideoTile and GridLayout Storybook Docs (#171) 

* [#2426485] initial docs for selectors

* [#2426485] Initial docs for chat declarative

* [#2426485] Improving docs

* Update packages/storybook/stories/StatefulChatSDK/ChatSDKIntroduction.stories.mdx

Co-authored-by: Dominik <domessin@microsoft.com>

* Update packages/storybook/stories/StatefulChatSDK/ChatSDKIntroduction.stories.mdx

Co-authored-by: Dominik <domessin@microsoft.com>

* Update packages/storybook/stories/StatefulChatSDK/ChatSDKIntroduction.stories.mdx

Co-authored-by: Dominik <domessin@microsoft.com>

* Update packages/storybook/stories/StatefulChatSDK/ChatSDKIntroduction.stories.mdx

Co-authored-by: Dominik <domessin@microsoft.com>

* [#2426485] Improving docs based on suggestion on PR

* [#2426485] Improving docs based on suggestion on PR

* [#2426485] Improving docs based on suggestion on PR

* naming tweaks

* [#2426485] Improving docs based on PR suggestions

* [#2403313] Improving docs for VideoTile and GridLayout

* [#2403313] Improving docs for VideoTile and GridLayout

* Updating snapshot

* updating snapshot

Co-authored-by: Dominik <domessin@microsoft.com>
This commit is contained in:
Anjul Garg 2021-04-26 10:31:43 -07:00 коммит произвёл GitHub
Родитель 876a3aad94
Коммит a6c5a52f2f
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
6 изменённых файлов: 93 добавлений и 284 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

86
packages/storybook/stories/GridLayout/GridLayoutDocs.tsx
Просмотреть файл

@ -2,97 +2,33 @@
import React from 'react';
import { Title, Description, Props, Heading, Source, Canvas } from '@storybook/addon-docs/blocks';
import { GridLayout, VideoTile } from '@azure/communication-ui';
import { GridLayout } from '@azure/communication-ui';
import { GridLayoutExample } from './snippets/GridLayout.snippet';
const GridLayoutExampleText = require('!!raw-loader!./snippets/GridLayout.snippet').default;
const importStatement = `
import { GridLayout, VideoTile } from '@azure/communication-ui';
`;
const GridLayoutExample: () => JSX.Element = () => {
return (
<div
style={{
height: '530px',
width: '830px'
}}
>
<GridLayout>
<VideoTile isVideoReady={false} videoProvider={null} avatarName={'Michael'}>
<label>Michael</label>
</VideoTile>
<VideoTile isVideoReady={false} videoProvider={null} avatarName={'Jim'}>
<label>Jim</label>
</VideoTile>
<VideoTile isVideoReady={false} videoProvider={null} avatarName={'Pam'}>
<label>Pam</label>
</VideoTile>
<VideoTile isVideoReady={false} videoProvider={null} avatarName={'Dwight'}>
<label>Dwight</label>
</VideoTile>
</GridLayout>
</div>
);
};
const exampleCode = `
const GridLayoutExample: () => JSX.Element = () => {
return (
<div
style={{
height: '530px',
width: '830px'
}}
>
<GridLayout>
<VideoTile
isVideoReady={false}
videoProvider={null}
avatarName={'Michael'}
>
<label>Michael</label>
</VideoTile>
<VideoTile
isVideoReady={false}
videoProvider={null}
avatarName={'Jim'}
>
<label>Jim</label>
</VideoTile>
<VideoTile
isVideoReady={false}
videoProvider={null}
avatarName={'Pam'}
>
<label>Pam</label>
</VideoTile>
<VideoTile
isVideoReady={false}
videoProvider={null}
avatarName={'Dwight'}
>
<label>Dwight</label>
</VideoTile>
</GridLayout>
</div>
);
};
`;
export const getDocs: () => JSX.Element = () => {
return (
<>
<Title>GridLayout</Title>
<Description>
The GridLayout component displays all participants in a call including the user in a gallery. Each tile will
display participant available stream or a static image.
The `GridLayout` organizes components passed to it as children in a grid layout. It can display a grid of call
participants through the use of `VideoTile` component.
</Description>
<Heading>Importing</Heading>
<Source code={importStatement} />
<Heading>Example</Heading>
<Description>
The following example shows how you can render `VideoTile` components inside a grid layout. For styling the
children video tiles, please read the [VideoTile component
docs](./?path=/docs/ui-components-videotile--video-tile-component).
</Description>
<Canvas>
<GridLayoutExample />
</Canvas>
<Source code={exampleCode} />
<Source code={GridLayoutExampleText} />
<Heading>Props</Heading>
<Props of={GridLayout} />
</>

24
packages/storybook/stories/GridLayout/snippets/GridLayout.snippet.tsx Normal file
Просмотреть файл

@ -0,0 +1,24 @@
import React from 'react';
import { GridLayout, VideoTile } from '@azure/communication-ui';
export const GridLayoutExample = (): JSX.Element => {
const videoTileStyles = { root: { padding: '10px', border: '1px solid #999' } };
return (
<div style={{ height: '530px', width: '830px' }}>
<GridLayout>
<VideoTile styles={videoTileStyles} avatarName={'Michael'}>
<label>Michael</label>
</VideoTile>
<VideoTile styles={videoTileStyles} avatarName={'Jim'}>
<label>Jim</label>
</VideoTile>
<VideoTile styles={videoTileStyles} avatarName={'Pam'}>
<label>Pam</label>
</VideoTile>
<VideoTile styles={videoTileStyles} avatarName={'Dwight'}>
<label>Dwight</label>
</VideoTile>
</GridLayout>
</div>
);
};

18
packages/storybook/stories/VideoTile/VideoTileDocs.tsx
Просмотреть файл

@ -1,10 +1,12 @@
// © Microsoft Corporation. All rights reserved.
import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
import { Canvas, Description, Heading, Props, Source, Title, Subheading } from '@storybook/addon-docs/blocks';
import React from 'react';
import { VideoTile } from '../../../communication-ui/src';
import { VideoTileExample } from './snippets/VideoTile.snippet';
const VideoTileExampleText = require('!!raw-loader!./snippets/VideoTile.snippet').default;
import { VideoTilePlaceholderExample } from './snippets/VideoTilePlaceholder.snippet';
const VideoTilePlaceholderText = require('!!raw-loader!./snippets/VideoTilePlaceholder.snippet').default;
import { VideoTileExample as VideoTileStylineExample } from '../Styling/snippets/StylingVideoTile.snippet';
const VideoTileStylineExampleText = require('!!raw-loader!../Styling/snippets/StylingVideoTile.snippet').default;
@ -22,11 +24,25 @@ export const getDocs: () => JSX.Element = () => {
<Source code={importStatement} />
<Heading>Example</Heading>
<Subheading>Default Usage</Subheading>
<Description>
The default VideoTile component shows a Persona with the initials of `avatarName` when no video is available.
</Description>
<Canvas>
<VideoTileExample />
</Canvas>
<Source code={VideoTileExampleText} />
<Subheading>Custom Placeholder</Subheading>
<Description>
A custom placeholder can be provided to override the default Persona avatar by providing a JSX element to the
`placeholderProvider` prop.
</Description>
<Canvas>
<VideoTilePlaceholderExample />
</Canvas>
<Source code={VideoTilePlaceholderText} />
<Heading>Styling</Heading>
<Description>
A VideoTile component can be styled just like other components using the `styles` property.

3
packages/storybook/stories/VideoTile/snippets/VideoTile.snippet.tsx
Просмотреть файл

@ -3,10 +3,11 @@ import { VideoTile, FluentThemeProvider, StreamMedia } from '@azure/communicatio
import { renderVideoStream } from '../../utils';
export const VideoTileExample: () => JSX.Element = () => {
const videoTileStyles = { root: { height: '300px', width: '400px', border: '1px solid #999' } };
return (
<FluentThemeProvider>
<VideoTile
styles={{ root: { height: '300px', width: '400px' } }}
styles={videoTileStyles}
avatarName={'Maximus Aurelius'}
videoProvider={
// NOTE: Replace with your own video provider. (An html element with video stream)

39
packages/storybook/stories/VideoTile/snippets/VideoTilePlaceholder.snippet.tsx Normal file
Просмотреть файл

@ -0,0 +1,39 @@
import React from 'react';
import { VideoTile, FluentThemeProvider, StreamMedia } from '@azure/communication-ui';
import { renderVideoStream } from '../../utils';
import { Stack } from '@fluentui/react';
export const VideoTilePlaceholderExample: () => JSX.Element = () => {
const videoTileStyles = { root: { height: '300px', width: '400px', border: '1px solid #999' } };
return (
<FluentThemeProvider>
<VideoTile
styles={videoTileStyles}
avatarName={'Maximus Aurelius'}
videoProvider={
// NOTE: Replace with your own video provider. (An html element with video stream)
<StreamMedia videoStreamElement={renderVideoStream()} />
}
isVideoReady={false}
invertVideo={true}
placeholderProvider={
<Stack>
<img
src="https://media.giphy.com/media/4Zo41lhzKt6iZ8xff9/giphy.gif"
style={{
borderRadius: '150px',
width: '150px',
position: 'absolute',
margin: 'auto',
left: 0,
right: 0,
top: 0,
bottom: 0
}}
/>
</Stack>
}
/>
</FluentThemeProvider>
);
};

207
packages/storybook/stories/__snapshots__/storybook.test.ts.snap
Просмотреть файл

@ -1053,213 +1053,6 @@ exports[`storybook snapshot tests Storyshots Settings/Manage Cookies Manage Cook
</div>
`;
exports[`storybook snapshot tests Storyshots UI Components/GridLayout Grid Layout Component 1`] = `
<div
className="css-75 root-0 body-1"
>
<div
className="css-75"
data-uses-unhanded-props={true}
dir="ltr"
>
<div
style={
Object {
"alignItems": "center",
"display": "flex",
"height": "100vh",
"justifyContent": "center",
}
}
>
<div
style={
Object {
"height": "500px",
"width": "600px",
}
}
>
<div
className="css-55"
style={
Object {
"gridTemplateColumns": "repeat(2, 1fr)",
"gridTemplateRows": "repeat(2, minmax(0, 1fr))",
}
}
>
<div
className="ms-Stack css-5"
>
<div
className="ms-Stack css-6"
>
<div
className="ms-Stack css-8"
>
<div
className="ms-Persona ms-Persona--size100 root-9"
>
<div
className="ms-Persona-coin ms-Persona--size100 coin-16"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-18"
role="presentation"
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-21"
>
<span>
M
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="ms-Stack css-24"
>
<label>
Michael
</label>
</div>
</div>
<div
className="ms-Stack css-5"
>
<div
className="ms-Stack css-6"
>
<div
className="ms-Stack css-8"
>
<div
className="ms-Persona ms-Persona--size100 root-9"
>
<div
className="ms-Persona-coin ms-Persona--size100 coin-16"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-18"
role="presentation"
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-25"
>
<span>
J
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="ms-Stack css-24"
>
<label>
Jim
</label>
</div>
</div>
<div
className="ms-Stack css-5"
>
<div
className="ms-Stack css-6"
>
<div
className="ms-Stack css-8"
>
<div
className="ms-Persona ms-Persona--size100 root-9"
>
<div
className="ms-Persona-coin ms-Persona--size100 coin-16"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-18"
role="presentation"
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-26"
>
<span>
P
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="ms-Stack css-24"
>
<label>
Pam
</label>
</div>
</div>
<div
className="ms-Stack css-5"
>
<div
className="ms-Stack css-6"
>
<div
className="ms-Stack css-8"
>
<div
className="ms-Persona ms-Persona--size100 root-9"
>
<div
className="ms-Persona-coin ms-Persona--size100 coin-16"
role="presentation"
>
<div
className="ms-Persona-imageArea imageArea-18"
role="presentation"
>
<div
aria-hidden="true"
className="ms-Persona-initials initials-27"
>
<span>
D
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="ms-Stack css-24"
>
<label>
Dwight
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`storybook snapshot tests Storyshots UI Components/ReadReceipt Read Reciept Icon Component 1`] = `
<div
className="css-75 root-0 body-1"