16f7084e7f
* Move * Adjust * publish = false * Tree * Move tests * fixup * Split `emotion` * Split `styled_jsx` * Split `styled_jsx` * fmt * `--fix` * clippy * Update crates * fixup * publish * Bump * Rename * authors * Update * More update * Oh * Update test refs * Update test refs * Update again * Fix
216 lines
3.1 KiB
JavaScript
216 lines
3.1 KiB
JavaScript
/*
|
|
* Basic fixtures
|
|
*/
|
|
|
|
const StaticString = p => <p css="flex: 1;">A</p>
|
|
|
|
const StaticTemplate = p => (
|
|
<p
|
|
css={`
|
|
flex: 1;
|
|
`}
|
|
>
|
|
A
|
|
</p>
|
|
)
|
|
|
|
const ObjectProp = p => <p css={{ color: 'blue' }}>A</p>
|
|
|
|
const NoChildren = p => <p css="flex: 1;" />
|
|
|
|
const CssHelperProp = p => (
|
|
<p
|
|
css={css`
|
|
color: blue;
|
|
`}
|
|
>
|
|
A
|
|
</p>
|
|
)
|
|
|
|
/*
|
|
* Dynamic prop
|
|
*/
|
|
|
|
const CustomComp = p => <Paragraph css="flex: 1">H</Paragraph>
|
|
|
|
const DynamicProp = p => <p css={props.cssText}>H</p>
|
|
|
|
const LocalInterpolation = p => (
|
|
<p
|
|
css={`
|
|
background: ${props.bg};
|
|
`}
|
|
>
|
|
H
|
|
</p>
|
|
)
|
|
|
|
const FuncInterpolation = p => (
|
|
<p
|
|
css={`
|
|
color: ${props => props.theme.a};
|
|
`}
|
|
>
|
|
H
|
|
</p>
|
|
)
|
|
|
|
const radius = 10
|
|
const GlobalInterpolation = p => (
|
|
<p
|
|
css={`
|
|
border-radius: ${radius}px;
|
|
`}
|
|
>
|
|
H
|
|
</p>
|
|
)
|
|
|
|
const LocalCssHelperProp = p => (
|
|
<p
|
|
css={css`
|
|
color: ${p.color};
|
|
`}
|
|
>
|
|
A
|
|
</p>
|
|
)
|
|
|
|
const DynamicCssHelperProp = p => (
|
|
<p
|
|
css={css`
|
|
color: ${props => props.theme.color};
|
|
`}
|
|
>
|
|
A
|
|
</p>
|
|
)
|
|
|
|
const CustomCompWithDot = p => <Button.Ghost css="flex: 1">H</Button.Ghost>
|
|
|
|
const NestedCompWithDot = p => (
|
|
<Button.Ghost.New css="flex: 1">H</Button.Ghost.New>
|
|
)
|
|
|
|
const CustomCompWithDotLowerCase = p => (
|
|
<button.ghost css="flex: 1">H</button.ghost>
|
|
)
|
|
|
|
const CustomElement = p => <button-ghost css="flex: 1">H</button-ghost>
|
|
|
|
/* styled component defined after function it's used in */
|
|
|
|
const EarlyUsageComponent = p => <Thing3 css="color: red;" />
|
|
|
|
const Thing3 = styled.div`
|
|
color: blue;
|
|
`
|
|
|
|
const ObjectInterpolation = p => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<p
|
|
css={{
|
|
color: theme.colors.red,
|
|
}}
|
|
>
|
|
H
|
|
</p>
|
|
)
|
|
}
|
|
|
|
const ObjectInterpolationCustomComponent = p => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<Thing3
|
|
css={{
|
|
color: theme.colors.red,
|
|
}}
|
|
>
|
|
H
|
|
</Thing3>
|
|
)
|
|
}
|
|
|
|
const ObjectInterpolationInKey = p => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<Thing3
|
|
css={{
|
|
[theme.breakpoints.md]: {
|
|
color: 'red',
|
|
},
|
|
}}
|
|
>
|
|
H
|
|
</Thing3>
|
|
)
|
|
}
|
|
|
|
const ObjectFnInterpolationInKey = p => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<Thing3
|
|
css={{
|
|
[theme.breakpoints.md()]: {
|
|
color: 'red',
|
|
},
|
|
}}
|
|
>
|
|
H
|
|
</Thing3>
|
|
)
|
|
}
|
|
|
|
const ObjectFnSimpleInterpolationInKey = p => {
|
|
const foo = '@media screen and (max-width: 600px)'
|
|
|
|
return (
|
|
<Thing3
|
|
css={{
|
|
[foo]: {
|
|
color: 'red',
|
|
},
|
|
}}
|
|
>
|
|
H
|
|
</Thing3>
|
|
)
|
|
}
|
|
|
|
const ObjectPropMixedInputs = p => {
|
|
const color = 'red'
|
|
|
|
return (
|
|
<p
|
|
css={{
|
|
background: p.background,
|
|
color,
|
|
textAlign: 'left',
|
|
'::before': { content: globalVar },
|
|
'::after': { content: getAfterValue() },
|
|
}}
|
|
>
|
|
A
|
|
</p>
|
|
)
|
|
}
|
|
|
|
const ObjectPropWithSpread = () => {
|
|
const css = { color: 'red' }
|
|
const playing = true
|
|
|
|
return (
|
|
<div
|
|
css={{
|
|
...css,
|
|
...(playing ? { opacity: 0, bottom: '-100px' } : {}),
|
|
}}
|
|
/>
|
|
)
|
|
}
|