Framer Example

Heading.tsx

import * as React from 'react';
import { PropertyControls, ControlType } from 'framer';
import system from 'system-components';
import { theme } from './theme';
import { ThemeWrapper } from './ThemeWrapper';

const HeadingPrimitive = system(
  {
    is: 'h1',
    fontFamily: 'light',
    fontWeight: 'normal',
    lineHeight: 'normal',
    fontSize: 4,
  },
  // core
  'space',
  'width',
  'color',
  // typography
  'fontSize',
  'fontFamily',
  'textAlign',
  'lineHeight',
  'fontWeight',
  'letterSpacing',
  //variants
  'colorStyle',
);

// Define type of property
interface Props {
  text: string;
  color: 'text.0' | 'text.1' | 'text.2' | 'text.3';
  fontSize: number;
  fontPerBP: Boolean;
  font1: number;
  font2: number;
  font3: number;
  font4: number;
  padding: number;
  paddingPerSide: Boolean;
  pt: number;
  pr: number;
  pb: number;
  pl: number;
  margin: number;
  marginPerSide: Boolean;
  mt: number;
  mr: number;
  mb: number;
  ml: number;
}

export class Heading extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    text: 'This Is a Heading',
    color: 'text.1',
    fontSize: 4,
    margin: 0,
    padding: 0,
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: 'Text' },
    fontSize: {
      type: ControlType.FusedNumber,
      toggleKey: 'fontPerBP',
      toggleTitles: ['Font', 'Font per BP'],
      valueKeys: ['font1', 'font2', 'font3', 'font4'],
      valueLabels: theme.breakpoints.map(s => s.replace('px', '')),
      min: 0,
      title: 'Font Size',
    },
    color: {
      type: ControlType.Enum,
      options: ['text.0', 'text.1', 'text.2', 'text.3'],
      optionTitles: ['Black', 'Grey', 'Light Grey', 'Dark Grey'],
    },
    margin: {
      type: ControlType.FusedNumber,
      toggleKey: 'marginPerSide',
      toggleTitles: ['Margin', 'Margin per Side'],
      valueKeys: ['mt', 'mr', 'mb', 'ml'],
      valueLabels: ['T', 'R', 'B', 'L'],
      min: 0,
      title: 'Margin',
    },
    padding: {
      type: ControlType.FusedNumber,
      toggleKey: 'paddingPerSide',
      toggleTitles: ['Padding', 'Padding per Side'],
      valueKeys: ['mt', 'mr', 'mb', 'ml'],
      valueLabels: ['T', 'R', 'B', 'L'],
      min: 0,
      title: 'Padding',
    },
  };

  render() {
    const { text, color } = this.props;
    const fontSize = this.props.fontPerBP
      ? [
          this.props.font1,
          this.props.font1,
          this.props.font2,
          this.props.font3,
          this.props.font4,
        ]
      : this.props.fontSize;

    const margin = this.props.marginPerSide
      ? {
          mt: this.props.mt,
          mr: this.props.mr,
          mb: this.props.mb,
          ml: this.props.ml,
        }
      : { m: this.props.margin };

    const padding = this.props.paddingPerSide
      ? {
          pt: this.props.pt,
          pr: this.props.pr,
          pb: this.props.pb,
          pl: this.props.pl,
        }
      : { p: this.props.padding };

    return (
      <ThemeWrapper>
        <HeadingPrimitive {...{ fontSize, color, ...padding, ...margin }}>
          {text}
        </HeadingPrimitive>
      </ThemeWrapper>
    );
  }
}

ThemeWrapper.tsx

import * as React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme';

const style: React.CSSProperties = {
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  color: '#8855FF',
  background: 'rgba(136, 85, 255, 0.1)',
  overflow: 'hidden',
};

interface Props {
  children: React.ReactNode;
}

export class ThemeWrapper extends React.Component<Props> {
  static defaultProps = {
    children: <div style={style}>ThemeWrapper. Not a real component</div>,
  };

  render() {
    return <ThemeProvider theme={theme} children={this.props.children} />;
  }
}