feat(Item): The icon of the Item is carried by a single prop. (#3)

#3

Author: chenyueban

packages/fluent-ui.com/gatsby-config.js

@@ -24,7 +24,6 @@ module.exports = {
         start_url: `/`,
         background_color: `#0078d4`,
         theme_color: `#0078d4`,
-        display: `fluent-ui`,
         icon: `src/images/gatsby-icon.png` // This path is relative to the root of the site.
       }
     },

packages/fluent-ui.com/src/components/docs/nav.tsx

@@ -136,7 +136,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
                       onClick={handleNavigation.bind(undefined, title, type)}
                       style={{ paddingLeft: expanded ? 24 : 12 }}
                     >
-                      <span>{title}</span>
+                      {title}
                     </Item>
                   )
                 )}
@@ -185,7 +185,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
                     onClick={handleNavigation.bind(undefined, title, type)}
                     style={{ paddingLeft: expanded ? 24 : 12 }}
                   >
-                    <span>{title}</span>
+                    {title}
                   </Item>
                 )
               )}

packages/fluent-ui.com/src/docs/components/Item/README.md

@@ -0,0 +1,21 @@
+---
+title: Item
+components: Item
+type: DataDisplay
+---
+
+# Item
+
+<p class="description">Common component that can be used with multiple components.</p>
+
+## Use alone
+
+```jsx
+<Item icon={<Icon.Connected />}>
+  hello
+</Item>
+```
+
+## Use with other components
+
+- Use with [`Navigation`](/components/navigation)

packages/fluent-ui.com/src/docs/components/Item/api.md

@@ -0,0 +1,22 @@
+---
+title: Item
+components: Item
+api: true
+---
+
+## API
+
+```
+import Item from '@fluent-ui/core/Item'
+// or
+import { Item } from '@fluent-ui/core'
+```
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | string ∨ number |  | The uniquely identifies |
+| icon | React.ReactElement |  | The icon displayed. |
+| children | React.ReactChild |  | Display portion of text and other content. |
+| onClick | React.MouseEventHandler<HTMLDivElement> |  | Set the handler to handle click event. |

packages/fluent-ui.com/src/docs/components/ItemGroup/README.md

@@ -0,0 +1,56 @@
+---
+title: ItemGroup
+components: ItemGroup
+type: DataDisplay
+---
+
+# ItemGroup
+
+<p class="description">Used for grouping and nesting of Item components.</p>
+
+## Default
+
+```jsx
+<Box>
+  <Item icon={<Icon.Connected />}>
+    Option 1
+  </Item>
+  <Item icon={<Icon.Connected />}>
+    Option 2
+  </Item>
+  <Item icon={<Icon.Connected />}>
+    Option 3
+  </Item>
+  <ItemGroup title="group" icon={<Icon.Connected />}>
+    <Item>
+      Option 4
+    </Item>
+    <Item>
+      Option 5
+    </Item>
+    <ItemGroup title="group inside">
+      <Item>
+        Option 7
+      </Item>
+      <Item>
+        Option 8
+      </Item>
+      <ItemGroup title="group inside">
+        <Item>
+          Option 9
+        </Item>
+        <Item>
+          Option 10
+        </Item>
+      </ItemGroup>
+    </ItemGroup>
+  </ItemGroup>
+  <Item>
+    Option 6
+  </Item>
+</Box>
+```
+
+## Use with other components
+
+- Use with [`Navigation`](/components/navigation#itemgroup)

packages/fluent-ui.com/src/docs/components/ItemGroup/api.md

@@ -0,0 +1,21 @@
+---
+title: ItemGroup
+components: ItemGroup
+api: true
+---
+
+## API
+
+```
+import ItemGroup from '@fluent-ui/core/ItemGroup'
+// or
+import { ItemGroup } from '@fluent-ui/core'
+```
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| children | React.ReactElement ∨ React.ReactElement[] |  | The content of the `ItemGroupGroup`. |
+| title | string |  | The text displayed by the title. |
+| icon | React.ReactElement |  | The icon displayed by the title. |