Files
Tim NeutkensandGitHub 7d3bfac39f Add stitches and material-ui tests for new link behavior + fix TypeScript types when imported (#36474)
Adds additional tests for material-ui and stitches based on questions in the Twitter thread.

Fixes TypeScript types when `LinkProps` is imported and used in combination with `<button>`, added a TODO to change this at a later point when the new behavior is the default instead of opt-in.



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
2022-04-26 11:46:09 +00:00

49 lines
891 B
React

import { styled } from '../stitches.config'
import StitchesLogo from '../components/StitchesLogo'
const Box = styled('div', {})
const Text = styled('p', {
fontFamily: '$system',
color: '$hiContrast',
})
const Link = styled('a', {
fontFamily: '$system',
textDecoration: 'none',
color: '$purple600',
})
const Container = styled('div', {
marginX: 'auto',
paddingX: '$3',
variants: {
size: {
1: {
maxWidth: '300px',
},
2: {
maxWidth: '585px',
},
3: {
maxWidth: '865px',
},
},
},
})
export default function Home() {
return (
<Box css={{ paddingY: '$6' }}>
<Container size={{ '@initial': '1', '@bp1': '2' }}>
<StitchesLogo />
<Text as="h1">Hello, from About.</Text>
<Text>
<Link href="/">Visit Home</Link>.
</Text>
</Container>
</Box>
)
}