Fluent sample updated

pglet · Nov 26, 2020 · 145ffd5 · 145ffd5
1 parent 5371afe
commit 145ffd5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 35 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -2,13 +2,15 @@ import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import PageLanding from './controls/PageLanding'
 import AccountLanding from './controls/AccountLanding';
+import { FluentSample } from './FluentSample';
 
 export const App: React.FunctionComponent = () => {
   return (
     <Router>
       <Switch>
         <Route path="/p/:accountName/:pageName" children={<PageLanding />} />
         <Route path="/p/:accountName" children={<AccountLanding />} />
+        <Route path="/sample" children={<FluentSample />} />
       </Switch>
     </Router>
   );

diff --git a/client/src/FluentSample.tsx b/client/src/FluentSample.tsx
@@ -1,58 +1,57 @@
 import React from 'react';
-import { Stack, Text, Link, FontWeights, PrimaryButton } from 'office-ui-fabric-react';
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import PageLanding from './controls/PageLanding'
-import AccountLanding from './controls/AccountLanding';
+import { Text, Link, FontWeights, PrimaryButton, TextField } from 'office-ui-fabric-react';
+import { Stack, IStackProps, IStackStyles } from 'office-ui-fabric-react/lib/Stack';
 
 const boldStyle = { root: { fontWeight: FontWeights.semibold } };
 
-export const App: React.FunctionComponent = () => {
+const stackTokens = { childrenGap: 50 };
+const stackStyles: Partial<IStackStyles> = { root: { width: 800 } };
+const columnProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 15 },
+  styles: { root: { width: "50%" } },
+};
+
+export const FluentSample: React.FunctionComponent = () => {
   return (
     <Stack
+      horizontal
       horizontalAlign="center"
       verticalAlign="center"
       verticalFill
       styles={{
         root: {
-          width: '960px',
-          margin: '0 auto',
-          textAlign: 'center',
-          color: '#605e5c'
+          width: '100%',
+          padding: '10px'
         }
       }}
       gap={15}
     >
-      <Router>
-        <Switch>
-          <Route path="/p/:accountName/:pageName" children={<PageLanding />} />
-          <Route path="/p/:accountName" children={<AccountLanding />} />
-        </Switch>
-      </Router>      
-      {/* <img
+      <Stack horizontal styles={{ root: { width: '100%'}}}>
+        <Stack {...columnProps}>
+          <Link href="https://developer.microsoft.com/en-us/fabric">Docs</Link>
+          <Link href="https://stackoverflow.com/questions/tagged/office-ui-fabric">Stack Overflow</Link>
+          <Link href="https://github.com/officeDev/office-ui-fabric-react/">Github</Link>
+          <Link href="https://twitter.com/officeuifabric">Twitter</Link>
+          {/* <img
         src="https://raw.githubusercontent.com/Microsoft/just/master/packages/just-stack-uifabric/template/src/components/fabric.png"
         alt="logo"
       /> */}
-      <Text variant="xxLarge" styles={boldStyle}>
-        Welcome to Your UI Fabric App
+          <Text variant="xxLarge" styles={boldStyle}>
+            Welcome to Your UI Fabric App
       </Text>
-      <Text variant="large">For a guide on how to customize this project, check out the UI Fabric documentation.</Text>
-      <Text variant="large" styles={boldStyle}>
-        Essential Links
-      </Text>
-      <Stack horizontal gap={15} horizontalAlign="center">
-        <Link href="https://developer.microsoft.com/en-us/fabric">Docs</Link>
-        <Link href="https://stackoverflow.com/questions/tagged/office-ui-fabric">Stack Overflow</Link>
-        <Link href="https://github.com/officeDev/office-ui-fabric-react/">Github</Link>
-        <Link href="https://twitter.com/officeuifabric">Twitter</Link>
-        <PrimaryButton text="My button" />
-      </Stack>
-      <Text variant="large" styles={boldStyle}>
-        Design System
+          <Text variant="large">For a guide on how to customize this project, check out the UI Fabric documentation.</Text>
+          <Text variant="large" styles={boldStyle}>
+            Essential Links
       </Text>
-      <Stack horizontal gap={15} horizontalAlign="center">
-        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/icons">Icons</Link>
-        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/typography">Typography</Link>
-        <Link href="https://developer.microsoft.com/en-us/fabric#/styles/themegenerator">Theme</Link>
+        </Stack>
+        <Stack {...columnProps}>
+          <TextField label="First name" />
+          <TextField label="Last name" />
+          <Stack horizontal gap="10">
+            <PrimaryButton text="Button 2" />
+            <PrimaryButton text="Button 3" />
+          </Stack>
+        </Stack>
       </Stack>
     </Stack>
   );