Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Testing with Jest and Enzyme
import React from 'react';
import { createComponent } from 'cf-style-container';
export const Button = createComponent(
({ active }) => ({
padding: '2rem',
backgroundColor: active ? '#ccc' : 'black'
}),
'button',
['onClick']
);
export default class Testing extends React.Component {
constructor(props) {
super(props);
this.state = { active: false };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Use "lodash for CSS in JS" aka
// https://polished.js.org/
import React from 'react';
import { createComponent } from 'cf-style-container';
import { shorten } from './styles.css';
import { ellipsis } from 'polished';
const Shorten = createComponent(({ theme }) => ({
...ellipsis('750px')
}));
export default () =>
<article>
<h1>8. Polished</h1>
<div>
<i>WWW is a disaster</i>
</div>
<p>
<i>WWW is a disaster</i>
</p></article>;
// Fallback support
// https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-fallback-value
import React from 'react';
import { createComponent } from 'cf-style-container';
import { colorz } from './styles.css';
const Colorz = createComponent(() => ({
color: ['#ccc', 'rgba(0, 0, 0, 0.5)']
}));
export default () =>
<article>
<h1>7. Fallbacks</h1>
<p>Colorzzzzzzz</p>
Colorzzzzzzz
</article>;
// Selectors get tricky. You should probably avoid them altogether since
// they break component style isolation.
import React from 'react';
import { createComponent } from 'cf-style-container';
import { header, btn } from './styles.css';
const Schwifty = createComponent(() => ({
color: 'blue',
':hover': {
textDecoration: 'line-through'
}
}));
const Button = createComponent(
({ index }) => ({
backgroundColor: 'orange',
marginLeft: index > 0 ? 0 : 25,
'> span': {
fontSize: 20
}
}),
'button'
);
// This demonstrates usage of
// https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-named-media-query
import React from 'react';
import { createComponent } from 'cf-style-container';
import { block1, block2 } from './styles.css';
const Block1 = createComponent(() => ({
display: 'none',
desktop: {
display: 'block'
}
}));
const Block2 = createComponent(() => ({
display: 'block',
desktop: {
display: 'none'
}
}));
export default () =>
<article>
<h1>3. Media Queries</h1></article>
backgroundColor: theme.color.marine,
color: theme.color.marine,
transition: 'width 500ms ease'
},
/* Mozilla uses progress-bar as the value */
'&::-moz-progress-bar': {
backgroundColor: theme.color.marine,
color: theme.color.marine
}
}),
'progress',
['max', 'value']
);
const Items = createComponent(
() => ({
listStyle: 'none',
...clearFix(),
margin: 0,
padding: 0
}),
'ol'
);
const Item = createComponent(
({ theme, width, disabled, active }) => {
let color = theme.colorGray;
if (disabled) {
color = theme.colorGrayLight;
} else if (active) {
color = theme.color.marine;
);
CardMessages.propTypes = {
className: PropTypes.string,
/* The messages to render */
messages: PropTypes.arrayOf(
PropTypes.shape({
/* The type of message, currently does nothing */
type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
/* The content to be rendered */
content: PropTypes.any.isRequired
})
).isRequired
};
export default createComponent(styles, CardMessages);
// 1) Don't mix longhand and shorthand properties
// 2) content: '"..."' - double quotes needed
import React from 'react';
import { createComponent } from 'cf-style-container';
import { box, loading } from './styles.css';
const Box = createComponent(() => ({
border: '5px solid black',
borderColor: 'blue'
}));
const Button = createComponent(
() => ({
color: 'white',
backgroundColor: 'white',
'::before': {
content: '"…"',
color: 'black',
display: 'block',
position: 'absolute'
}
}),
'button'
);
export default () =>
<article>
<h1>9. Gotchas</h1></article>
import React from 'react';
import PropTypes from 'react';
import { createComponent } from 'cf-style-container';
const ArrowRendererWrapper = createComponent(({ theme, isOpen }) => ({
borderColor: isOpen
? `transparent transparent ${theme.color.cement}`
: `${theme.color.cement} transparent transparent`,
borderWidth: isOpen ? `0 5px 5px` : '5px 5px 2.5px',
borderStyle: 'solid',
display: 'inline-block',
height: 0,
width: 0,
position: 'relative',
top: isOpen ? '-2px' : 0
}));
export default function arrowRenderer({ onMouseDown }) {
return ;
}
const styles = ({ theme }) => ({
borderTop: `1px solid ${theme.colorGrayLight}`,
minHeight: '2.96666rem',
'&:first-child': {
borderTop: 'initial'
},
'&::after': {
content: "''",
display: 'table',
clear: 'both'
}
});
const Links = createComponent(
() => ({
float: 'right'
}),
'div',
['role']
);
const CardToolbar = ({ className, controls, links }) => (
<div>
<div>{controls}</div>
{links}
</div>
);