docs(docs): Simply adjust the document style

fluent-org · Jun 29, 2019 · 73c7e54 · 73c7e54
1 parent 7007bee
commit 73c7e54
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 71 deletions.
diff --git a/packages/fluent-ui.com/src/components/header.tsx b/packages/fluent-ui.com/src/components/header.tsx
@@ -1,31 +1,13 @@
 import React, { ReactElement } from 'react'
-import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
-import { Navigation } from '@fluent-ui/core'
+import { Command, CommandButton } from '@fluent-ui/core'
 
 const Header = ({ siteTitle }): ReactElement => (
-  <Navigation
-    width="100%"
-    maxHeight={64}
-    height={64}
-    position="fixed"
-    top={0}
-    horizontal
-    acrylic
-    zIndex={10}
-  >
-    <Navigation.Item>
-      <Link
-        to="/"
-        style={{
-          color: `white`,
-          textDecoration: `none`
-        }}
-      >
-        {siteTitle}
-      </Link>
-    </Navigation.Item>
-  </Navigation>
+  <Command width="100%" backgroundColor="white" height={56}>
+    <CommandButton icon="Code" as="a" href="https://github.com/chenyueban/fluent-ui" />
+
+    <Command.Content>Fluent</Command.Content>
+  </Command>
 )
 
 Header.propTypes = {

diff --git a/packages/fluent-ui.com/src/components/template.tsx b/packages/fluent-ui.com/src/components/template.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement, SFC } from 'react'
-import { graphql } from 'gatsby'
+import React, { ReactElement, SFC, useState } from 'react'
+import { graphql, navigate } from 'gatsby'
 import Markdown from 'markdown-to-jsx'
 import { Box, Navigation } from '@fluent-ui/core'
 import { Icon } from '@fluent-ui/icons'
@@ -42,45 +42,64 @@ const Template: SFC<TemplateProps> = ({ data }: TemplateProps): ReactElement =>
   const activeId = data.docs.edges.findIndex(
     (v): boolean => v.node.frontmatter.title === data.doc.frontmatter.title
   )
+  const [expanded, setExpanded] = useState(true)
+  function handleExpanded(): void {
+    setExpanded((e): boolean => !e)
+  }
+  function handleNavigation(title: string): void {
+    navigate(`/components/${title.toLowerCase()}`)
+  }
+
   return (
     <Layout>
-      <Navigation
-        value={activeId}
-        acrylic
-        width={260}
-        height="100vh"
-        position="fixed"
-        left={0}
-        top={0}
-        backgroundColor="#000"
-        color="#fff"
-      >
-        <Navigation.Header>
-          <Navigation.Item>
-            <Icon type="GlobalNavigationButton" />
-          </Navigation.Item>
-        </Navigation.Header>
-        {data.docs.edges.map(
-          (child, index): ReactElement => (
-            <Navigation.Item id={index} key={child.node.frontmatter.title}>
-              <Icon type="Connected" />
-              <span>{child.node.frontmatter.title}</span>
+      <Box display="flex" justifyContent="space-between">
+        <Navigation
+          value={`component${activeId}`}
+          expanded={expanded}
+          acrylic
+          width={260}
+          height="100vh"
+        >
+          <Navigation.Header>
+            <Navigation.Item onClick={handleExpanded}>
+              <Icon type="GlobalNavigationButton" />
             </Navigation.Item>
-          )
-        )}
-      </Navigation>
-      <Box flex={1} paddingLeft={260} paddingTop={64}>
-        <Header siteTitle={data.site.siteMetadata.title} />
-        <Markdown
-          options={{
-            overrides: {
-              pre: Playground as any,
-              IconTemplate
-            }
-          }}
+          </Navigation.Header>
+          {data.docs.edges.map(
+            (child, index): ReactElement => (
+              <Navigation.Item
+                id={`component${index}`}
+                key={child.node.frontmatter.title}
+                onClick={handleNavigation.bind(undefined, child.node.frontmatter.title)}
+              >
+                <Icon type="Connected" />
+                <span>{child.node.frontmatter.title}</span>
+              </Navigation.Item>
+            )
+          )}
+        </Navigation>
+        <Box
+          flex={1}
+          maxHeight="100vh"
+          display="flex"
+          flexDirection="column"
+          boxShadow="0px 0px 8px 0px rgba(0, 0, 0, 0.36)"
+          transition="all 250ms cubic-bezier(0.4,0,0.2,1) 0ms"
         >
-          {data.doc.rawMarkdownBody}
-        </Markdown>
+          <Header siteTitle={data.site.siteMetadata.title} />
+          <Box overflow="auto" flex={1} padding="10px">
+            <Markdown
+              options={{
+                overrides: {
+                  pre: Playground as any,
+                  IconTemplate
+                }
+              }}
+            >
+              {data.doc.rawMarkdownBody}
+            </Markdown>
+          </Box>
+        </Box>
       </Box>
     </Layout>
   )

diff --git a/packages/fluent-ui.com/src/docs/components/Box/README.md b/packages/fluent-ui.com/src/docs/components/Box/README.md
@@ -10,12 +10,10 @@ components: Box
 ## Default
 
 ```jsx
-<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
-  <Box padding={{ sm: 15, lg: 25 }}>
-    <Button style={{margin: 5}}>Button 1</Button>
-    <Button style={{margin: 5}}>Button 2</Button>
-    <Button style={{margin: 5}}>Button 3</Button>
-  </Box>
+<Box padding={{ sm: 15, lg: 25 }}>
+  <Button style={{margin: 5}}>Button 1</Button>
+  <Button style={{margin: 5}}>Button 2</Button>
+  <Button style={{margin: 5}}>Button 3</Button>
 </Box>
 ```
 

diff --git a/packages/fluent-ui/src/components/Button/Button.tsx b/packages/fluent-ui/src/components/Button/Button.tsx
@@ -10,7 +10,8 @@ import StyledButton from './Button.styled'
 
 export interface ButtonProps
   extends ComponentPropsWithoutRef<'button'>,
-    ButtonHTMLAttributes<HTMLButtonElement> {
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    StyledProps {
   variant?: 'primary' | 'accent'
   disabled?: boolean
   size?: 'small' | 'medium' | 'large'

diff --git a/packages/fluent-ui/src/components/Command/Command.tsx b/packages/fluent-ui/src/components/Command/Command.tsx
@@ -28,7 +28,7 @@ type Child =
   | any
 
 interface CommandProps extends BoxProps, ThemeProps {
-  reveal: boolean
+  reveal?: boolean
   children: Child[]
 }
 

diff --git a/packages/fluent-ui/src/components/CommandButton/CommandButton.tsx b/packages/fluent-ui/src/components/CommandButton/CommandButton.tsx
@@ -12,7 +12,8 @@ import * as CSS from 'csstype'
 import { CommandContext } from '../Command/Command'
 
 export interface CommandButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    StyledProps {
   icon?: string
   onClick?: MouseEventHandler<HTMLButtonElement>
   children?: ReactElement
@@ -26,10 +27,12 @@ const CommandButtonStyled = styled.button<{
   padding: 10px 22px;
   line-height: 1;
   transition: ${th.transition('button')};
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
   color: inherit;
   background-color: ${({ reveal }): CSS.ColorProperty =>
     reveal ? th.color('gray100') : 'transparent'};
-  display: inline-block;
   &:hover {
     background-color: ${({ reveal }): CSS.ColorProperty =>
       reveal ? th.color('gray200') : th.color('secondary')};

diff --git a/packages/fluent-ui/src/types/index.d.ts b/packages/fluent-ui/src/types/index.d.ts
@@ -9,3 +9,8 @@ declare module '@xstyled/styled-components' {
 
 declare module '@xstyled/system'
 declare module 'react-acrylic'
+
+interface StyledProps {
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
+  href?: string
+}