Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const HeadingComponent = props => (
<div>
{props.children}
<style>{`
/* TODO: style with jsx without global tag */
.heading :global(h1),
.heading :global(h2),
.heading :global(h3),
.heading :global(h4) {
color: ${core.colors.gray06};
}
.heading.${Heading.sizes.large} :global(h1),
.heading.${Heading.sizes.large} :global(h2),
.heading.${Heading.sizes.large} :global(h3),
.heading.${Heading.sizes.large} :global(h4) {
margin: 56px 0 0 0;
}
.heading.${Heading.sizes.xLarge} :global(h1),
.heading.${Heading.sizes.xLarge} :global(h2),
.heading.${Heading.sizes.xLarge} :global(h3),
.heading.${Heading.sizes.xLarge} :global(h4) {
margin: 56px 0;
}
`}</style>
</div>
)
const HeadingComponent = props => (
<div>
{props.children}
<style>{`
/* TODO: style with jsx without global tag */
.heading :global(h1),
.heading :global(h2),
.heading :global(h3),
.heading :global(h4) {
color: ${core.colors.gray06};
}
.heading.${Heading.sizes.large} :global(h1),
.heading.${Heading.sizes.large} :global(h2),
.heading.${Heading.sizes.large} :global(h3),
.heading.${Heading.sizes.large} :global(h4) {
margin: 56px 0 0 0;
}
.heading.${Heading.sizes.xLarge} :global(h1),
.heading.${Heading.sizes.xLarge} :global(h2),
.heading.${Heading.sizes.xLarge} :global(h3),
.heading.${Heading.sizes.xLarge} :global(h4) {
margin: 56px 0;
}
`}</style>
</div>
)
const styleSize = ({ size }) =>
({
[Heading.sizes.large]: {
margin: '56px 0 0 0'
},
[Heading.sizes.xLarge]: {
margin: '56px 0'
}
}[size])
.heading.${Heading.sizes.xLarge} :global(h1),
.heading.${Heading.sizes.xLarge} :global(h2),
.heading.${Heading.sizes.xLarge} :global(h3),
.heading.${Heading.sizes.xLarge} :global(h4) {
margin: 56px 0;
}
`}
)
HeadingComponent.propTypes = {
children: PropTypes.node,
size: PropTypes.string
}
HeadingComponent.defaultProps = {
size: Heading.sizes.large
}
HeadingComponent.sizes = Heading.sizes
export default HeadingComponent
const DataWell = React.forwardRef((props, ref) => {
const themeName = useTheme()
return (
<div>
<div>{props.label}</div>
<div>{props.children}</div>
<div>{props.subLabel}</div>
</div>
)
})
const styleSize = ({ size }) =>
({
[Heading.sizes.large]: {
margin: '56px 0 0 0'
},
[Heading.sizes.xLarge]: {
margin: '56px 0'
}
}[size])