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

Merge pull request #180 from unix/link

Browse Source 
feat(link): hide icon of link component by default
This commit is contained in:
witt
2020-05-08 17:21:48 +08:00
committed by GitHub
parent cdf2cdf204 d05cf10242
commit 084e2fbeb8
40 changed files with 260 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/image/__tests__/__snapshots__/browser.test.tsx.snap
View File

@@ -321,6 +321,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -331,6 +332,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -366,6 +368,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -376,6 +379,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -510,6 +514,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -520,6 +525,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -555,6 +561,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -565,6 +572,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -870,6 +878,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -880,6 +889,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -915,6 +925,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -925,6 +936,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1271,6 +1283,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1281,6 +1294,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1316,6 +1330,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1326,6 +1341,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1460,6 +1476,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1470,6 +1487,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1505,6 +1523,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1515,6 +1534,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1820,6 +1840,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1830,6 +1851,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -1865,6 +1887,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -1875,6 +1898,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -2964,6 +2988,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -2974,6 +2999,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3009,6 +3035,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3019,6 +3046,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3153,6 +3181,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3163,6 +3192,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3198,6 +3228,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3208,6 +3239,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3513,6 +3545,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3523,6 +3556,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3558,6 +3592,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3568,6 +3603,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3914,6 +3950,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3924,6 +3961,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -3959,6 +3997,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -3969,6 +4008,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -4103,6 +4143,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -4113,6 +4154,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -4148,6 +4190,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -4158,6 +4201,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -4463,6 +4507,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -4473,6 +4518,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -4508,6 +4554,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -4518,6 +4565,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -5406,6 +5454,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -5416,6 +5465,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -5451,6 +5501,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -5461,6 +5512,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -5595,6 +5647,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -5605,6 +5658,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -5640,6 +5694,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -5650,6 +5705,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -5955,6 +6011,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -5965,6 +6022,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6000,6 +6058,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6010,6 +6069,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6356,6 +6416,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6366,6 +6427,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6401,6 +6463,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6411,6 +6474,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6545,6 +6609,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6555,6 +6620,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6590,6 +6656,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6600,6 +6667,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6905,6 +6973,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6915,6 +6984,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,
@@ -6950,6 +7020,7 @@ initialize {
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -6960,6 +7031,7 @@ initialize {
.link:hover {
background-color: unset;
color: inherit;
}
",
"next": null,

2
components/image/image-browser.tsx
View File

@@ -47,7 +47,7 @@ const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColo
<span className="https">
<ImageBrowserHttpsIcon />
</span>
<Link pure href={url} title={url} target="_blank">
<Link href={url} title={url} target="_blank">
{showFullLink ? url : getHostFromUrl(url)}
</Link>
<style jsx>{`

117
components/link/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -1,11 +1,58 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Link should render correctly 1`] = `
"<div><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
"<div><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: inherit;
text-decoration: none;
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
.link:active,
.link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
color: inherit;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: #0070f3;
text-decoration: none;
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
.link:active,
.link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
color: #3291ff;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
color: currentColor;
}
</style></svg><style>
.link {
@@ -17,6 +64,7 @@ exports[`Link should render correctly 1`] = `
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -27,33 +75,7 @@ exports[`Link should render correctly 1`] = `
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: rgb(0, 112, 243);\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: #0070f3;
text-decoration: none;
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover,
.link:active,
.link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
color: inherit;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
.link {
@@ -65,33 +87,7 @@ exports[`Link should render correctly 1`] = `
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover,
.link:active,
.link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: inherit;
text-decoration: none;
padding: calc(0 * 0.8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -102,14 +98,9 @@ exports[`Link should render correctly 1`] = `
.link:hover {
background-color: unset;
color: inherit;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: rgb(0, 112, 243);\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
.link {
display: inline-flex;
align-items: baseline;
@@ -119,6 +110,7 @@ exports[`Link should render correctly 1`] = `
padding: calc(4pt * 0.8) calc(4pt * 1.7);
border-radius: 5px;
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -129,6 +121,7 @@ exports[`Link should render correctly 1`] = `
.link:hover {
background-color: #0076ff1a;
color: #3291ff;
}
</style></a></div>"
`;

10
components/link/__tests__/index.test.tsx
View File

@@ -10,7 +10,7 @@ describe('Link', () => {
<Link href="https://react.zeit-ui.co" color>
link
</Link>
<Link href="https://react.zeit-ui.co" pure>
<Link href="https://react.zeit-ui.co" icon>
link
</Link>
<Link href="https://react.zeit-ui.co" underline>
@@ -41,5 +41,13 @@ describe('Link', () => {
expect(errorSpy).not.toHaveBeenCalled()
expect(ref.current).not.toBeNull()
expect(() => wrapper.unmount()).not.toThrow()
errorSpy.mockRestore()
})
it('an warning should be thrown when using the pure prop', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
mount(<Link pure />)
expect(errorSpy).toHaveBeenCalled()
errorSpy.mockRestore()
})
})

8
components/link/icon.tsx
View File

@@ -1,10 +1,6 @@
import React from 'react'
interface Props {
color?: string
}
export const LinkIcon: React.FC<Props> = ({ color }) => {
export const LinkIcon: React.FC<{}> = () => {
return (
<svg
viewBox="0 0 24 24"
@@ -16,7 +12,6 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
style={{ color }}
className="icon">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
<path d="M15 3h6v6" />
@@ -27,6 +22,7 @@ export const LinkIcon: React.FC<Props> = ({ color }) => {
margin: 0 5px;
display: inline-flex;
align-self: center;
color: currentColor;
}
`}</style>
</svg>

13
components/link/link.tsx
View File

@@ -1,12 +1,14 @@
import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import useWarning from '../utils/use-warning'
import LinkIcon from './icon'
interface Props {
href?: string
color?: boolean
pure?: boolean
icon?: boolean
underline?: boolean
block?: boolean
className?: string
@@ -16,6 +18,7 @@ const defaultProps = {
href: '',
color: false,
pure: false,
icon: false,
underline: false,
block: false,
className: '',
@@ -26,18 +29,22 @@ export type LinkProps = Props & typeof defaultProps & NativeAttrs
const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
(
{ href, color, underline, pure, children, className, block, ...props },
{ href, color, underline, pure, children, className, block, icon, ...props },
ref: React.Ref<HTMLAnchorElement>,
) => {
const theme = useTheme()
const linkColor = color || block ? theme.palette.link : 'inherit'
const hoverColor = color || block ? theme.palette.successLight : 'inherit'
const padding = block ? theme.layout.gapQuarter : '0'
const decoration = underline ? 'underline' : 'none'
if (pure) {
useWarning('Props "pure" is deprecated, now the default Link is pure.')
}
return (
<a className={`link ${className}`} href={href} {...props} ref={ref}>
{children}
{!pure && <LinkIcon color={linkColor} />}
{icon && <LinkIcon />}
<style jsx>{`
.link {
display: inline-flex;
@@ -48,6 +55,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
padding: calc(${padding} * 0.8) calc(${padding} * 1.7);
border-radius: ${block ? theme.layout.radius : 0};
width: fit-content;
transition: color 200ms ease 0ms;
}
.link:hover,
@@ -58,6 +66,7 @@ const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkPro
.link:hover {
background-color: ${block ? '#0076ff1a' : 'unset'};
color: ${hoverColor};
}
`}</style>
</a>

2
components/user/user-link.tsx
View File

@@ -18,7 +18,7 @@ const UserLink = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<Use
({ href, className, children, ...props }, ref: React.Ref<HTMLAnchorElement>) => {
return (
<div className={className} {...props}>
<Link ref={ref} href={href} pure color target="_blank" rel="noopener">
<Link ref={ref} href={href} color target="_blank" rel="noopener">
{children}
</Link>
<style jsx>{`

4
lib/components/anchor/index.tsx
View File

@@ -23,9 +23,7 @@ const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({ children, pur
return (
<span className="parent" ref={ref}>
<Link pure href={`#${id}`}>
{children}
</Link>
<Link href={`#${id}`}>{children}</Link>
<span className="virtual" id={id} />
{!pure && (
<span className="icon">

4
lib/components/attributes/contributors.tsx
View File

@@ -46,13 +46,13 @@ const Contributors: React.FC<Props> = ({ path }) => {
<div className="contributors">
{users.map((user, index) => (
<Tooltip text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
<Link color pure target="_blank" rel="nofollow" href={user.url}>
<Link color target="_blank" rel="nofollow" href={user.url}>
<Avatar src={user.avatar} />
</Link>
</Tooltip>
))}
<Tooltip text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'} type="dark">
<Link color pure target="_blank" rel="nofollow" href={link}>
<Link color target="_blank" rel="nofollow" href={link}>
<Avatar text="Add" />
</Link>
</Tooltip>

4
pages/en-us/components/badge.mdx
View File

@@ -71,12 +71,12 @@ Display an indicator that requires attention.
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">ZEIT UI</Link>
</Badge.Anchor>
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot style={{ padding: '7px' }} />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">Share Link</Link>
</Badge.Anchor>
</>
`} />

6
pages/en-us/components/card.mdx
View File

@@ -78,14 +78,14 @@ A common container component.
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
</Row>
@@ -101,7 +101,7 @@ A common container component.
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>Modern and minimalist React UI library.</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
<Link block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
`} />

2
pages/en-us/components/code.mdx
View File

@@ -13,7 +13,7 @@ Show source code in a standardized way.
<Note>
Want to display <Code>shell</Code> code snippets?
Try <NextLink href="/en-us/components/snippet"><Link pure color>Snippet</Link></NextLink>.
Try <NextLink href="/en-us/components/snippet"><Link color>Snippet</Link></NextLink>.
</Note>
<Playground

28
pages/en-us/components/link.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Link, Text, Code } from 'components'
import { Link, Text, Code, Spacer } from 'components'
import NextLink from 'next/link'
export const meta = {
@@ -12,7 +12,6 @@ export const meta = {
Hyperlinks between pages.
<Playground
desc="The default component Link adds an icon to the link."
scope={{ Link }}
code={`
<Link href="#">The Evil Rabbit Jumped over the Fence.</Link>
@@ -26,15 +25,28 @@ Hyperlinks between pages.
<Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link>
`} />
<Playground
title="With Icon"
desc="Show an icon in the link."
scope={{ Link, Spacer }}
code={`
<>
<Link href="#" icon>The Evil Rabbit Jumped over the Fence.</Link>
<Spacer y={.5} />
<Link href="#" icon color>The Evil Rabbit Jumped over the Fence.</Link>
</>
`} />
<Playground
title="variant"
desc="Different styles of links."
scope={{ Link, Text }}
code={`
<>
<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#">The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
</>
`} />
@@ -44,7 +56,7 @@ Hyperlinks between pages.
desc="Display as a separate block."
scope={{ Link }}
code={`
<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
<Link href="#" block>The Evil Rabbit Jumped over the Fence.</Link>
`} />
<Playground
@@ -53,7 +65,7 @@ Hyperlinks between pages.
scope={{ Link, NextLink }}
code={`
<NextLink href="/en-us/components/button">
<Link pure block>Docs of Button</Link>
<Link block>Docs of Button</Link>
</NextLink>
`} />
@@ -64,7 +76,7 @@ Hyperlinks between pages.
| ---------- | ---------- | ---- | -------------- | ------ |
| **href** | link url | `string` | - | - |
| **color** | display color for link | `boolean` | - | `false` |
| **pure** | hide icon | `boolean` | - | `false` |
| **icon** | show icon | `boolean` | - | `false` |
| **underline** | display underline | `boolean` | - | `false` |
| **block** | display as a separate block | `boolean` | - | `false` |
| ... | native props | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |

2
pages/en-us/components/modal.mdx
View File

@@ -14,7 +14,7 @@ Display popup content that requires attention or provides additional information
<Note>
Just want a text notification?
Try <NextLink href="/en-us/components/toast"><Link pure color>Toast component</Link></NextLink>.
Try <NextLink href="/en-us/components/toast"><Link color>Toast component</Link></NextLink>.
</Note>
<Playground

8
pages/en-us/components/popover.mdx
View File

@@ -17,9 +17,9 @@ The floating box popped by clicking or hovering.
() => {
const content = () => (
<div style={{ padding: '0 10px' }}>
<Link pure href="#">A hyperlink</Link>
<Link href="#">A hyperlink</Link>
<Spacer y={.5} />
<Link pure color href="#">External link</Link>
<Link color href="#">External link</Link>
</div>
)
return (
@@ -42,10 +42,10 @@ The floating box popped by clicking or hovering.
<span>User Settings</span>
</Popover.Item>
<Popover.Item>
<Link pure href="#">A hyperlink</Link>
<Link href="#">A hyperlink</Link>
</Popover.Item>
<Popover.Item>
<Link pure color href="#">A hyperlink for edit profile</Link>
<Link color href="#">A hyperlink for edit profile</Link>
</Popover.Item>
<Popover.Item line />
<Popover.Item>

2
pages/en-us/components/tooltip.mdx
View File

@@ -42,7 +42,7 @@ Displays additional information on hover.
</Tooltip>
<Spacer inline x={1} />
<Tooltip text={'Push to Git and your website is live.'} type="dark">
<Link href="#" color pure>Hyperlink</Link>
<Link href="#" color>Hyperlink</Link>
</Tooltip>
</Row>
`} />

2
pages/en-us/components/use-body-scroll.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
Disable scrolling behavior for body or any element, it is useful for displaying popup element or menus.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

4
pages/en-us/components/use-click-away.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Card } from 'components'
import { Utils, Link, Card, Spacer } from 'components'
export const meta = {
title: 'use-click-away',
@@ -10,7 +10,7 @@ export const meta = {
Detect if a click event happened outside of an element.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

4
pages/en-us/components/use-clipboard.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, useToasts } from 'components'
import { Utils, Link, Button, useToasts, Spacer } from 'components'
export const meta = {
title: 'use-clipboard',
@@ -10,7 +10,7 @@ export const meta = {
Copy string to clipboard.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

6
pages/en-us/components/use-current-state.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button } from 'components'
import { Utils, Link, Button, Spacer } from 'components'
export const meta = {
title: 'use-current-state',
@@ -13,9 +13,9 @@ can only get the value at render time, not the latest.
This is a small tool to get the latest value, It is very useful in async actions such as `setTimeout`.
if you like a bigger solution,
try <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
try <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>.
This is custom React Hooks, you need to follow the <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
This is custom React Hooks, you need to follow the <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">Basic Rules</Link> when you use it.
<Spacer y={1.5} />

8
pages/en-us/guide/installation.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### Install package
<Note>
Ensure your have the latest version of <Link pure href="https://nodejs.org/en/download/">NodeJS</Link>,
and a package manager: <Link pure href="https://www.npmjs.com/">NPM</Link> or <Link pure href="https://yarnpkg.com/">Yarn</Link>.
Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
and a package manager: <Link href="https://www.npmjs.com/">NPM</Link> or <Link href="https://yarnpkg.com/">Yarn</Link>.
</Note>
<Spacer y={1} />
<Dot type="success" /> 1. Run script to download:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
### Create React App
A React project created by <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
A React project created by <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use.
We have <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
We have <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">a
sample project related to create react app here</Link>.

8
pages/en-us/guide/introduction.mdx
View File

@@ -11,8 +11,8 @@ export const meta = {
### Why @zeit-ui/react
`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">styles</Link>
originating from <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel's design</Link>.
`@zeit-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">styles</Link>
originating from <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel's design</Link>.
The design of the **Vercel** is concise and aesthetic feeling, this is an important reason for popular of Vercel.
Now you can use them at will in React.
@@ -23,8 +23,8 @@ ZEIT UI is an unofficial organization, all our projects are open source.
### Contact
- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">Chat on Spectrum</Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">Report an issue</Link>
- Welcome share your feedback and ideas. We also love PRs.
<Spacer y={3} />

6
pages/en-us/guide/server-render.mdx
View File

@@ -15,19 +15,19 @@ export const meta = {
All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
<Note label="readme">
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>a SPA application</Link>?
You just need <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>a SPA application</Link>?
It is recommended to skip this section.
</Note>
<Spacer y={.5} />
Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
Read <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
Read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
the post from the Next.js team</Link> to learn more.
<Text>In addition, for <Text b>server-side render</Text> and web applications,
we strongly recommend that you read this famous post
<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
7-principles-of-rich-web-applications
</Link> from <Text em>Guillermo Rauch</Text>.
</Text>

4
pages/en-us/guide/themes.mdx
View File

@@ -50,7 +50,7 @@ const App = () => {
Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
and all the components will change automatically.
Here is <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
Here is <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.
Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
@@ -94,7 +94,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
```
If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
<Spacer y={3} />

4
pages/zh-cn/components/badge.mdx
View File

@@ -71,12 +71,12 @@ export const meta = {
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">组件库</Link>
</Badge.Anchor>
<Spacer inline x={1.5} />
<Badge.Anchor>
<Badge size="mini" type="error" dot style={{ padding: '7px' }} />
<Link pure target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react/">分享链接</Link>
</Badge.Anchor>
</>
`} />

6
pages/zh-cn/components/card.mdx
View File

@@ -82,14 +82,14 @@ export const meta = {
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
</Row>
@@ -105,7 +105,7 @@ export const meta = {
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>现代化、极简风格的 UI 库。</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
<Link block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
`} />

2
pages/zh-cn/components/code.mdx
View File

@@ -13,7 +13,7 @@ export const meta = {
<Note label="提示">
想要展示 <Code>Shell</Code> 代码片段或一个命令？
可以试试 <NextLink href="/zh-cn/components/snippet"><Link pure color>Snippet / 片段</Link></NextLink> 组件。
可以试试 <NextLink href="/zh-cn/components/snippet"><Link color>Snippet / 片段</Link></NextLink> 组件。
</Note>
<Playground

26
pages/zh-cn/components/link.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Link, Text, Code } from 'components'
import { Link, Text, Code, Spacer } from 'components'
import NextLink from 'next/link'
export const meta = {
@@ -32,10 +32,22 @@ export const meta = {
scope={{ Link, Text }}
code={`
<>
<Text><Link href="#" pure>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" color pure>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" pure underline>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#">严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
<Text><Link href="#" color>严格模式通过抛出错误来消除了一些原有静默错误</Link></Text>
<Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
<Text><Link href="#" underline>通过使用指南和教程来学习如何用 React</Link></Text>
</>
`} />
<Playground
title="图标"
desc="在链接中显示修饰图标。"
scope={{ Link, Spacer }}
code={`
<>
<Link href="#" icon>通过使用指南和教程来学习如何用 React</Link>
<Spacer y={.5} />
<Link href="#" icon color>通过使用指南和教程来学习如何用 React</Link>
</>
`} />
@@ -44,7 +56,7 @@ export const meta = {
desc="将链接单独作为一个块显示。"
scope={{ Link }}
code={`
<Link href="#" pure block>通过使用指南和教程来学习如何用 React</Link>
<Link href="#" block>请参阅转换成严格模式</Link>
`} />
<Playground
@@ -53,7 +65,7 @@ export const meta = {
scope={{ Link, NextLink }}
code={`
<NextLink href="/zh-cn/components/button">
<Link pure block>Docs of Button</Link>
<Link block>浏览更多文档</Link>
</NextLink>
`} />
@@ -64,7 +76,7 @@ export const meta = {
| ---------- | ---------- | ---- | -------------- | ------ |
| **href** | 链接地址 | `string` | - | - |
| **color** | 是否高亮显示 | `boolean` | - | `false` |
| **pure** | 隐藏图标，仅显示文本 | `boolean` | - | `false` |
| **icon** | 在文本后显示图标 | `boolean` | - | `false` |
| **underline** | 显示下划线 | `boolean` | - | `false` |
| **block** | 是否以块的方式显示链接 | `boolean` | - | `false` |
| ... | 原生属性 | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - |

2
pages/zh-cn/components/modal.mdx
View File

@@ -14,7 +14,7 @@ export const meta = {
<Note>
仅仅需要弹出文本信息？
试试 <NextLink href="/zh-cn/components/toast"><Link pure color>Toast / 通知</Link></NextLink> 组件。
试试 <NextLink href="/zh-cn/components/toast"><Link color>Toast / 通知</Link></NextLink> 组件。
</Note>
<Playground

8
pages/zh-cn/components/popover.mdx
View File

@@ -18,9 +18,9 @@ export const meta = {
() => {
const content = () => (
<div style={{ padding: '0 10px' }}>
<Link pure href="#">一个超链接</Link>
<Link href="#">一个超链接</Link>
<Spacer y={.5} />
<Link pure color href="#">外部链接</Link>
<Link color href="#">外部链接</Link>
</div>
)
return (
@@ -43,10 +43,10 @@ export const meta = {
<span>用户设置</span>
</Popover.Item>
<Popover.Item>
<Link pure href="#">一个超链接</Link>
<Link href="#">一个超链接</Link>
</Popover.Item>
<Popover.Item>
<Link pure color href="#">前往修改用户配置</Link>
<Link color href="#">前往修改用户配置</Link>
</Popover.Item>
<Popover.Item line />
<Popover.Item>

2
pages/zh-cn/components/tabs.mdx
View File

@@ -41,7 +41,7 @@ export const meta = {
<Tabs initialValue="1">
<Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
<Text>你好，这是我们在 Twitch 的最新直播。</Text>
<Link href="https://github.com/zeit-ui/react" pure color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
<Link href="https://github.com/zeit-ui/react" color rel="nofollow" target="_blank">点击这里浏览 GitHub 项目</Link>
</Tabs.Item>
<Tabs.Item label={<><TwitterIcon /> Twitter </>} value="2">
<Text>这个组件看起来还不错。</Text>

2
pages/zh-cn/components/tooltip.mdx
View File

@@ -42,7 +42,7 @@ export const meta = {
</Tooltip>
<Spacer inline x={1} />
<Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
<Link href="#" color pure>超链接</Link>
<Link href="#" color>超链接</Link>
</Tooltip>
</Row>
`} />

2
pages/zh-cn/components/use-body-scroll.mdx
View File

@@ -10,7 +10,7 @@ export const meta = {
禁用 `Body` 或其他任何元素的滚动，这在显示弹窗或菜单时非常有帮助。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

4
pages/zh-cn/components/use-click-away.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Card } from 'components'
import { Utils, Link, Card, Spacer } from 'components'
export const meta = {
title: '点击他处 useClickAway',
@@ -10,7 +10,7 @@ export const meta = {
检测点击事件是否在元素之外。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

4
pages/zh-cn/components/use-clipboard.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button, useToasts } from 'components'
import { Utils, Link, Button, useToasts, Spacer } from 'components'
export const meta = {
title: '剪切板 useClipboard',
@@ -10,7 +10,7 @@ export const meta = {
拷贝字符串到剪切板。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

6
pages/zh-cn/components/use-current-state.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Utils, Link, Button } from 'components'
import { Utils, Link, Button, Spacer } from 'components'
export const meta = {
title: ' 当前值 useCurrentState',
@@ -11,9 +11,9 @@ export const meta = {
在函数式组件内获取 **最新的值**。默认场景下，React 函数式组件只能获取渲染当时 `state` 的值，这并非是最新的。
这是一个获取最新值的小工具，它在你进行像 `setTimeout` 等异步工作时会非常有用。但如果你喜欢更大的解决方案，
请试试 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
请试试 <Link target="_blank" color href="https://reactjs.org/docs/hooks-reference.html#usereducer">useReducer</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" pure color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
这是一个自定义的 React Hooks，你需要在使用时遵循 <Link target="_blank" color href="https://reactjs.org/docs/hooks-rules.html">钩子的基础规则</Link>。
<Spacer y={1.5} />

8
pages/zh-cn/guide/installation.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### 从包管理器安装
<Note>
请确认你的 <Link pure href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
同时还需要准备包管理器: <Link pure href="https://www.npmjs.com/">NPM</Link> 或是 <Link pure href="https://yarnpkg.com/">Yarn</Link>.
请确认你的 <Link href="https://nodejs.org/en/download/">NodeJS</Link> 处于最新版本，
同时还需要准备包管理器: <Link href="https://www.npmjs.com/">NPM</Link> 或是 <Link href="https://yarnpkg.com/">Yarn</Link>.
</Note>
<Spacer y={1} />
<Dot type="success" /> 1. 运行命令下载包:
@@ -79,10 +79,10 @@ const MyComponent = () => <Button>Click Me</Button>
### 使用 Create React App
使用 <Link pure color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
使用 <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> 创建的 React 项目也能轻易的使用 `@zeit-ui/react`。
你不需要做任何改变，只需要引入组件库即可。
我们准备了 <Link target="_blank" pure color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。
我们准备了 <Link target="_blank" color rel="nofollow" href="https://github.com/zeit-ui/react-getting-started">一个用 create react app 创建的示例项目</Link> 供作参考。

8
pages/zh-cn/guide/introduction.mdx
View File

@@ -12,8 +12,8 @@ export const meta = {
### 什么是 ZEIT UI - React
`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" pure href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
灵感来自于 <Link rel="nofollow" target="_blank" pure href="https://vercel.co/design">Vercel 的设计稿</Link>。
`@zeit-ui/react` 是对 <Link rel="nofollow" target="_blank" href="https://github.com/zeit-ui/zeit-style">ZEIT 样式库</Link> 的一个 React 版本实现，
灵感来自于 <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel 的设计稿</Link>。
Vercel 的设计非常简洁美观，且有浓厚的 Geek 风格，这是 Vercel 如此受欢迎的重要原因，现在你可以在 React 中随意使用所有设计元素。
@@ -23,8 +23,8 @@ ZEIT UI 是非官方的组织，且所有项目都是开源的。
### 联系我们
- <Link pure color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
- <Link pure color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/zeit-ui/general?tab=posts">在 Spectrum 上聊天</Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/zeit-ui/react/issues/new">报告问题</Link>
- 我们非常欢迎来自任何人有趣的想法或反馈，也欢迎你贡献代码。
<Spacer y={3} />

6
pages/zh-cn/guide/server-render.mdx
View File

@@ -15,19 +15,19 @@ export const meta = {
`@zeit-ui/react` 的所有组件都能完美的适应 **服务端渲染**，实际上，你现在所见的文档站点就是来自服务端渲染。
<Note label="阅读提示">
如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" pure underline>一个 SPA 应用</Link>，
如果你只想创建 <Link href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow" underline>一个 SPA 应用</Link>，
建议跳过此章节。
</Note>
<Spacer y={.5} />
使用服务端渲染会让我们的应用失去 SPA 的所有优势吗？或许你可以考虑 `hybrid render` (混合渲染) 的应用，
阅读 <Link pure color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
阅读 <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
这篇来自 Next.js 团队的文章</Link> 了解更多细节。
<Text>除此之外，关于 <Text b>服务端渲染</Text> 和 Web 应用的细节考量，
我们强烈推荐你阅读这篇来自 <Text em>Guillermo Rauch</Text> 的著名博文：
<Link pure color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
<Link color href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">
构建 Web 应用的 7 原则
</Link>。
</Text>

4
pages/zh-cn/guide/themes.mdx
View File

@@ -50,7 +50,7 @@ const App = () => {
### 自定义主题
自定义主题样式在 `@zeit-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `ZEITUIProvider`，所有的组件都会自然变化以适应你自定义的属性。
这里有 <Link target="_blank" pure color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
这里有 <Link target="_blank" color href="https://github.com/zeit-ui/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。
当然，如果一个组件未使用到你自定义的变量，它不会发生任何变化也不会重新渲染。
@@ -95,7 +95,7 @@ const myStyles: ZeitUIThemes = { /* ... */ }
const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
```
如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
<Spacer y={3} />