Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/ui / src / components / atoms / Icons / CheckBoxIcon / CheckBoxIcon.js
Size: Mime:
"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const react_1 = __importDefault(require("react"));

const utils_1 = require("@skava/utils");

const Vector_1 = __importDefault(require("../../Vector"));

const wording = {
  title: 'Checkbox Icon',
  description: 'A square box (represents unchecked box), A tick mark within a square box (represents checked box)'
};

class CheckBoxIcon extends react_1.default.PureComponent {
  render() {
    const {
      isSelected,
      fill,
      bgColor,
      tickColor,
      borderColor,
      radius
    } = this.props;
    const attributes = utils_1.omit(this.props, ['tickColor', 'bgColor', 'borderColor', 'fill', 'radius']);
    const ariaChecked = isSelected;
    const dataQa = isSelected ? 'qa-facet-selected' : 'qa-facet';
    const passThroughProps = Object.assign({
      dataQa
    }, attributes, wording);
    return react_1.default.createElement(Vector_1.default, Object.assign({
      "aria-checked": ariaChecked
    }, passThroughProps), react_1.default.createElement("g", null, react_1.default.createElement("rect", {
      className: 'checkbox-bgfill',
      fill: bgColor,
      width: '240',
      height: '240',
      rx: radius,
      ry: radius
    }), react_1.default.createElement("path", {
      className: 'checkbox-borderfill',
      fill: borderColor,
      d: 'M0,240V0H240V240H0ZM220,20H20V220H220V20Z'
    }), react_1.default.createElement("path", {
      className: 'checkbox-tickfill',
      transform: 'translate(55, 70)',
      fill: tickColor,
      d: 'M0,57L13,43,44,71,114,0l14,14L44,100Z'
    })));
  }

}

CheckBoxIcon.defaultProps = {
  width: '50px',
  height: '50px',
  viewBox: '0 0 240 240',
  fill: '#000',
  tickColor: '#000',
  bgColor: '#000',
  borderColor: '#000',
  radius: 0
};
exports.CheckBoxIcon = CheckBoxIcon;
exports.default = CheckBoxIcon; //# sourceMappingURL=CheckBoxIcon.js.map