How to use cf-style-container - 10 common examples

// 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>
);