kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-11 22:32:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #162 from zeit-ui/icons

Browse Source 
docs: add icons documents
This commit is contained in:
witt
2020-05-03 00:19:56 +08:00
committed by GitHub
parent 4de9893e68 9b8b046015
commit 0d955a4077
11 changed files with 1220 additions and 506 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/card/__tests__/__snapshots__/footer.test.tsx.snap
View File

@@ -6,6 +6,14 @@ exports[`Card Footer should render correctly 1`] = `
width: 100%;
padding: 16pt 16pt;
}
.content > :global(*:first-child) {
margin-top: 0;
}
.content > :global(*:last-child) {
margin-bottom: 0;
}
</style></div><footer class=\\"auto-margin \\">footer<style>
footer {
padding: 8pt 16pt;
@@ -45,14 +53,6 @@ exports[`Card Footer should render correctly 1`] = `
box-shadow: none;
}
.card :global(*:first-child) {
margin-top: 0;
}
.card :global(*:last-child) {
margin-bottom: 0;
}
.card :global(img) {
width: 100%;
}

1440
components/card/__tests__/__snapshots__/index.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

8
components/card/card-content.tsx
View File

@@ -26,6 +26,14 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({
width: 100%;
padding: ${theme.layout.gap} ${theme.layout.gap};
}
.content > :global(*:first-child) {
margin-top: 0;
}
.content > :global(*:last-child) {
margin-bottom: 0;
}
`}</style>
</div>
)

8
components/card/card.tsx
View File

@@ -69,14 +69,6 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
box-shadow: ${hoverShadow};
}
.card :global(*:first-child) {
margin-top: 0;
}
.card :global(*:last-child) {
margin-bottom: 0;
}
.card :global(img) {
width: 100%;
}

8
components/modal/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -35,8 +35,12 @@ exports[`Modal should render correctly 1`] = `
padding: 16pt 0 8pt 0;
}
.content :global(p) {
margin: 0;
.content > :global(*:first-child) {
margin-top: 0;
}
.content > :global(*:last-child) {
margin-bottom: 0;
}
</style><div></div><footer><button class=\\"\\">Cancel</button><style>
button {

8
components/modal/modal-content.tsx
View File

@@ -27,8 +27,12 @@ const ModalContent: React.FC<ModalContentProps> = ({
padding: ${theme.layout.gap} 0 ${theme.layout.gapHalf} 0;
}
.content :global(p) {
margin: 0;
.content > :global(*:first-child) {
margin-top: 0;
}
.content > :global(*:last-child) {
margin-bottom: 0;
}
`}</style>
</>

71
lib/components/displays/icons-cell.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from 'react'
import { Text, useTheme } from 'components'
export const getFileName = (name: string): string => {
return name.replace(/^(.)/, g => g.toLowerCase())
}
export const getImportString = (name: string) => {
const fileName = getFileName(name)
const single = `import ${name} from '@zeit-ui/react-icons/${fileName}'`
const normal = `import { ${name} } from '@zeit-ui/react-icons'`
return {
single, normal,
}
}
interface Props {
component: React.ComponentType<any>
name: string
onClick: (name: string) => void
}
const IconsCell: React.FC<Props> = ({
component: Component, name, onClick
}) => {
const theme = useTheme()
return (
<div className="icon-item" key={name} onClick={() => onClick(name)}>
<Component />
<Text type="secondary" small>{name}</Text>
<style jsx>{`
.icon-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
flex-grow: 0;
flex-basis: 125px;
min-width: 0px;
height: 95px;
margin: 12px 5px;
border-radius: ${theme.layout.radius};
box-sizing: border-box;
cursor: pointer;
user-select: none;
transition: all 150ms ease-in-out;
}
.icon-item > :global(small) {
display: inline-block;
width: 90%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.icon-item:hover {
box-shadow: ${theme.expressiveness.shadowMedium};
}
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
.icon-item {
flex-basis: 30%;
}
}
`}</style>
</div>
)
}
export default React.memo(IconsCell)

75
lib/components/displays/icons.tsx Normal file
View File

@@ -0,0 +1,75 @@
import React, { useState } from 'react'
import { Card, Input, useInput, Modal, useModal, Snippet } from 'components'
import * as Icon from '@zeit-ui/react-icons'
import IconsCell, { getImportString } from './icons-cell'
const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
return (
<Snippet>
{children}
<style jsx>{`
:global(pre:before) {
display: none;
}
`}</style>
</Snippet>
)
}
const Icons: React.FC = () => {
const { setVisible, bindings: modalBindings } = useModal()
const { state: query, bindings } = useInput('')
const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
const icons = Object.entries(Icon).filter(
([name]) => !query || name.toLowerCase().includes(query.toLowerCase())
)
const onCellClick = (name: string) => {
const { single, normal } = getImportString(name)
setImportStr({ title: name, single, normal })
setVisible(true)
}
return (
<>
<h3 className="title">Icons Gallery</h3>
<Card>
<Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
<div className="icons-grid">
{icons.map(([name, component], index) => (
<IconsCell name={name} component={component} key={`${name}-${index}`}
onClick={onCellClick} />
))}
</div>
<Modal {...modalBindings}>
<Modal.Title>{importStr.title}</Modal.Title>
<Modal.Content>
<p>Import:</p>
<ImportSnippet>{importStr.normal}</ImportSnippet>
<p>Import single component:</p>
<ImportSnippet>{importStr.single}</ImportSnippet>
</Modal.Content>
</Modal>
</Card>
<style jsx>{`
.title {
line-height: 1;
margin-top: 75px;
margin-bottom: 30px;
}
:global(input) {
margin-bottom: 4px !important;
}
.icons-grid {
display: flex;
flex-wrap: wrap;
margin-top: 8pt;
justify-content: space-around;
}
`}</style>
</>
)
}
export default Icons

8
lib/components/icons/logo.tsx
View File

@@ -1,9 +1,7 @@
import React from 'react'
import { useTheme } from 'components/index'
export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...props }) => {
export const LogoIcon: React.FC<React.SVGAttributes<any>> = ({ ...props }) => {
const theme = useTheme()
return (
<svg width="25" viewBox="0 0 114 100" fill="none" {...props}>
@@ -25,6 +23,6 @@ export const LogoIcon: React.FC<React.SVGAttributes<any>> = React.memo(({ ...pro
`}</style>
</svg>
)
})
}
export default LogoIcon
export default React.memo(LogoIcon)

2
lib/data/metadata-en-us.json
View File

@@ -1 +1 @@
[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]

82
pages/en-us/components/icons.mdx Normal file
View File

@@ -0,0 +1,82 @@
import { Layout, Playground, Attributes } from 'lib/components'
import Title from 'lib/components/playground/title'
import { Spacer, Tabs, Snippet } from 'components'
import * as Icon from '@zeit-ui/react-icons'
import Github from '@zeit-ui/react-icons/github'
import IconsGallery from 'lib/components/displays/icons'
export const meta = {
title: 'Icons',
group: 'General',
}
## Icons
Display semantic vector graphics in SVG format.
<Title title="Installation" desc="Install the package in your project directory." />
<Tabs initialValue="yarn">
<Tabs.Item label="Yarn" value="yarn">
<Spacer y={0.6} />
<Snippet width="400px">yarn add @zeit-ui/react-icons</Snippet>
</Tabs.Item>
<Tabs.Item label="npm" value="npm">
<Spacer y={0.6} />
<Snippet width="400px">npm i @zeit-ui/react-icons</Snippet>
</Tabs.Item>
</Tabs>
<Playground
title="Import"
scope={{ Icon, Github, Spacer }}
code={`
// import * as Icon from '@zeit-ui/react-icons'
// or
// import { Github } from '@zeit-ui/react-icons'
// or, for tree-shaking:
// import Github from '@zeit-ui/react-icons/github'
<>
<Icon.Github />
<Spacer x={1} inline />
<Github />
</>
`} />
<Playground
title="Color"
scope={{ Github }}
code={`
<Github color="red" />
`}
/>
<Playground
title="Sizes"
scope={{ Github, Spacer }}
code={`
<>
<Github size={16} /> <Spacer inline x={.35} />
<Github size={20} /> <Spacer inline x={.35} />
<Github size={24} /> <Spacer inline x={.35} />
<Github size={28} /> <Spacer inline x={.35} />
<Github size={32} /> <Spacer inline x={.35} />
<Github size={36} />
</>
`}
/>
<IconsGallery />
<Attributes edit="/pages/en-us/components/icons.mdx">
<Attributes.Title>Icon.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default |
| --------- | ------------ | --------------- | -------------------------------- | ------- |
| **color** | Icon color | `string` | - | - |
| **size** | Icon size | `number` | - | - |
| ... | Native props | `SVGAttributes` | `'id', 'name', 'className', ...` | - |
</Attributes>
export default ({ children }) => <Layout meta={meta}>{children}</Layout>