import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button } from "@bulb/design/";



export class NewButton extends React.Component {


  render() {
    return (
  
        <Button >
          some text
        </Button>
   
    );
  }
}

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button } from "@bulb/design/";

interface Props {
  text: string;
}

export class NewButton extends React.Component {
  static defaultProps = {
    text: "Click me"
  };

  static propertyControls: PropertyControls<Props> = {
    text: { type: ControlType.String, title: "Button label" }
  };

  render() {
    const { text } = this.props;
    return (
  
        <Button >
          {text}
        </Button>
   
    );
  }
}

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Checkbox } from "@bulb/design";

interface Props {
  text: string;
  checked: boolean;
}

export class checkbox extends React.Component {
  static defaultProps = {
    text: "check me",
    checked: false
  };

  static propertyControls: PropertyControls<Props> = {
    text: { type: ControlType.String, title: "Label" },
    checked: { type: ControlType.Boolean, title: "Checked" }
  };

  render() {
    const { text, checked } = this.props;
    return (
      <Checkbox
        checked={checked}
        label={text}
      
      />
    );
  }
}

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { SvgIcon } from "@bulb/design/styles/Iconography";

interface Props {
  name: string;
  color: string;
  width: number;
  height: number;
}

export class icon extends React.Component {
  static defaultProps = {
    name: "warning",
    color: "#000"
  };

  static propertyControls: PropertyControls<Props> = {
    name: { type: ControlType.String, title: "Icon name" },
    color: { type: ControlType.Color, title: "Color" }
  };

  render() {
    const { name, width, height, color } = this.props;

    return (
      <SvgIcon
        width={this.props.width}
        height={this.props.height}
        name={name}
        color={color}
      />
    );
  }
}

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Dropdown } from "@bulb/design/modules/Dropdown";

interface Props {
  name: string;
  color: string;
  width: number;
  height: number;
  errorMessage:string;
  options: [];
  status:string;
}

export class DropDown extends React.Component {
  static defaultProps = {
    status:"unknown"
  };

static propertyControls: PropertyControls<Props> = {
  label: { type: ControlType.String, title: "Label" },
  errorMessage: { type: ControlType.String, title: "Error Message" },
  options: {
    type: ControlType.Array,
    propertyControl: { type: ControlType.String },
    defaultValue: ["example"]
  },
  status: { 
      type: ControlType.SegmentedEnum, 
      title: "Status",
      options: ["unknown", "invalid", "valid"],
      optionTitles: ["default", "error", "success"]
    }
};

  render() {
    const { status, label, errorMessage, options, labelHeading } = this.props;

    return (
      <Dropdown label={label} status={status} onChange={(e) => console.log(e.target.value)} errorMessage={errorMessage}>
     {options.map(o => <option>{o}</option>)}  </Dropdown>
    );
  }
}