Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 02fd238

Browse files
mnajdovaalinais
mnajdova
authored and
alinais
committed
feat(proto): Meeting options page (#331)
* -added meeting options prototype
1 parent 47f8289 commit 02fd238

File tree

14 files changed

+252
-0
lines changed

14 files changed

+252
-0
lines changed

‎docs/src/components/Sidebar/Sidebar.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,14 @@ class Sidebar extends React.Component<any, any> {
258258
>
259259
Async Shorthand
260260
</Menu.Item>
261+
<Menu.Item
262+
as={NavLink}
263+
exact
264+
to="/prototype-meeting-options"
265+
activeClassName="active"
266+
>
267+
Meeting Options
268+
</Menu.Item>
261269
</Menu.Menu>
262270
</Menu.Item>
263271
)}

‎docs/src/prototypes/meetingOptions/components/MSTeamsFooter.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react'
2+
import { Divider, Layout } from '@stardust-ui/react'
3+
4+
export default props => {
5+
return (
6+
<div style={{ position: 'fixed', width: 'inherit', bottom: '0px' }}>
7+
<Divider />
8+
<Layout
9+
renderMainArea={() => {
10+
return <div style={{ lineHeight: '40px', margin: '0 auto' }}>{props.content}</div>
11+
}}
12+
/>
13+
</div>
14+
)
15+
}

‎docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as React from 'react'
2+
import { Provider } from '@stardust-ui/react'
3+
import { middleColumnStyles } from '../styles'
4+
5+
export default props => {
6+
return (
7+
<Provider.Consumer
8+
render={({ siteVariables }) => {
9+
return (
10+
<div style={{ backgroundColor: siteVariables.brand }}>
11+
<div style={{ ...middleColumnStyles }}>{props.content}</div>
12+
</div>
13+
)
14+
}}
15+
/>
16+
)
17+
}

‎docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react'
2+
import { Provider, Text } from '@stardust-ui/react'
3+
4+
export default props => {
5+
const { content, children } = props
6+
return (
7+
<Provider.Consumer
8+
render={({ siteVariables }) => (
9+
<Text as="a" content={content} styles={{ color: siteVariables.brand }}>
10+
{children}
11+
</Text>
12+
)}
13+
/>
14+
)
15+
}

‎docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react'
2+
import { Provider, Text, Icon } from '@stardust-ui/react'
3+
import { ItemShorthand } from '../../../../../dist/types/utils'
4+
5+
export interface ILogoProps {
6+
companyName?: string
7+
icon?: ItemShorthand
8+
style?: React.CSSProperties
9+
}
10+
11+
class MSTeamsLogo extends React.Component<ILogoProps, any> {
12+
render() {
13+
const { companyName, icon, style } = this.props
14+
return (
15+
<Provider.Consumer
16+
render={({ siteVariables }) => {
17+
return (
18+
<div style={style}>
19+
{Icon.create(icon, {
20+
defaultProps: {
21+
variables: { color: siteVariables.brand },
22+
size: 'large',
23+
xSpacing: 'after',
24+
styles: { verticalAlign: 'middle' },
25+
},
26+
})}
27+
<Text
28+
styles={{ color: siteVariables.white, verticalAlign: 'middle', lineHeight: '40px' }}
29+
>
30+
{companyName}
31+
</Text>
32+
</div>
33+
)
34+
}}
35+
/>
36+
)
37+
}
38+
}
39+
40+
export default MSTeamsLogo

‎docs/src/prototypes/meetingOptions/components/MSTeamsMeetingOptions.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react'
2+
import { Layout, Grid, Button, Text, Icon, Input, Header } from '@stardust-ui/react'
3+
import { middleColumnStyles } from '../styles'
4+
import TransparentDivider from './TransparentDivider'
5+
6+
export default () => {
7+
return (
8+
<div>
9+
<TransparentDivider size={40} />
10+
<div style={middleColumnStyles}>
11+
<Header as="h3" content="Fluent Design - Introduction" />
12+
<Layout
13+
start={<Icon name="calendar" xSpacing="after" />}
14+
main={<Text content="10 January 2018, 12:00 PM - 1:00 PM" />}
15+
/>
16+
<Layout start={<Icon name="user" xSpacing="after" />} main={<Text content="John Doe" />} />
17+
<TransparentDivider size={40} />
18+
<Header as="h3" content="Meeting Options" />
19+
<TransparentDivider />
20+
<Grid columns="1fr 1fr">
21+
<Text
22+
content="Who can byppass the lobby?"
23+
weight="semibold"
24+
style={{ lineHeight: '40px' }}
25+
/>
26+
<Input placeholder="People in my organization" fluid />
27+
</Grid>
28+
<TransparentDivider size={10} />
29+
<Button type="primary" content="Save" styles={{ float: 'right', margin: '0px' }} />
30+
</div>
31+
</div>
32+
)
33+
}

‎docs/src/prototypes/meetingOptions/components/TransparentDivider.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Divider as StardustUIDivider } from '@stardust-ui/react'
2+
3+
export default props => {
4+
return StardustUIDivider.create(props, {
5+
defaultProps: {
6+
variables: { dividerColor: 'transparent' },
7+
},
8+
})
9+
}

‎docs/src/prototypes/meetingOptions/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react'
2+
import MSTeamsHeader from './components/MSTeamsHeader'
3+
import MSTeamsFooter from './components/MSTeamsFooter'
4+
import { mainStyle } from './styles'
5+
import MSTeamsLogo from './components/MSTeamsLogo'
6+
import MSTeamsMeetingOptions from './components/MSTeamsMeetingOptions'
7+
import MSTeamsLink from './components/MSTeamsLink'
8+
9+
class MeetingOptionsPrototype extends React.Component<any, any> {
10+
render() {
11+
return (
12+
<div style={mainStyle}>
13+
<MSTeamsHeader content={<MSTeamsLogo icon="teams" companyName="Microsoft Teams" />} />
14+
<MSTeamsMeetingOptions />
15+
<MSTeamsFooter
16+
content={
17+
<span>
18+
&copy;Microsoft Corporation. All Rights reserved |{' '}
19+
<MSTeamsLink content="Legal Notice" /> | <MSTeamsLink content="Privacy Policy" />
20+
</span>
21+
}
22+
/>
23+
</div>
24+
)
25+
}
26+
}
27+
28+
export default MeetingOptionsPrototype

‎docs/src/prototypes/meetingOptions/styles.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { CSSProperties } from 'react'
2+
3+
export const middleColumnStyles = {
4+
width: '40%',
5+
margin: '0 auto',
6+
}
7+
8+
export const mainStyle: CSSProperties = {
9+
backgroundColor: '#f3f2f1',
10+
width: 'calc(100% - 250px)',
11+
height: '100%',
12+
position: 'fixed',
13+
}

‎docs/src/routes.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ const Router = () => (
3535
path="/prototype-async-shorthand"
3636
component={require('./prototypes/AsyncShorthand/index').default}
3737
/>,
38+
<DocsLayout
39+
exact
40+
key="/prototype-meeting-options"
41+
path="/prototype-meeting-options"
42+
component={require('./prototypes/meetingOptions/index').default}
43+
/>,
3844
]}
3945
<DocsLayout exact path="/glossary" component={Glossary} />
4046
<DocsLayout exact path="/accessibility" component={Accessibility} />

0 commit comments

Comments
 (0)