lucid-ui/lib/components/Selection/examples/1.kinds.js

A UI component library from AppNexus.

import React from 'react';
import createClass from 'create-react-class';
import { Selection, Resizer } from '../../../index';
export default createClass({
  render: function render() {
    return /*#__PURE__*/React.createElement(Resizer, null, function (width) {
      var responsiveMode = width >= 400 ? 'large' : 'small';
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        isRemovable: false,
        responsiveMode: responsiveMode,
        kind: "container",
        Label: "Container Light Not Removable"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        kind: "container",
        Label: "Container Light"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        isFilled: true,
        isRemovable: false,
        responsiveMode: responsiveMode,
        kind: "container",
        Label: "Container Filled Not Removable"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        isFilled: true,
        responsiveMode: responsiveMode,
        kind: "container",
        Label: "Container Filled"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        Label: "Default"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        kind: "success",
        Label: "Success"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        kind: "danger",
        Label: "Danger"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        kind: "info",
        Label: "Info"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          margin: '10px'
        }
      }, /*#__PURE__*/React.createElement(Selection, {
        responsiveMode: responsiveMode,
        kind: "warning",
        Label: "Warning"
      })));
    });
  }
});