@b2bfinance/products-embed/es/ProductLabel.js

products-embed React component

import { Typography } from "@material-ui/core";
import { blue, blueGrey, orange, red, teal, yellow } from "@material-ui/core/colors";
import { getContrastRatio } from "@material-ui/core/styles/colorManipulator";
import { makeStyles } from "@material-ui/styles";
import React from "react";

var colors = {
  blue: blue,
  blueGrey: blueGrey,
  red: red,
  orange: orange,
  yellow: yellow,
  teal: teal
};

var useStyles = makeStyles(function (theme) {
  return {
    productLabelWrapper: {
      borderRadius: theme.spacing(4),
      padding: theme.spacing(0.5, 1.5),
      border: "1px solid",
      borderColor: function borderColor(props) {
        return props.colorGroup[500];
      },
      marginRight: theme.spacing(1),
      "&:last-child": {
        marginRight: 0
      }
    },
    productLabelText: {
      fontWeight: theme.typography.fontWeightBold,
      color: function color(props) {
        return props.colorGroup[500];
      }
    }
  };
});

var getLabel = function getLabel(label) {
  if (label.startsWith("#")) {
    var firstSpaceIndex = label.indexOf(" ");
    return [label.slice(1, firstSpaceIndex), label.slice(firstSpaceIndex + 1)];
  }

  return ["blueGrey", label];
};

var ProductLabel = function ProductLabel(_ref) {
  var label = _ref.label;

  var _getLabel = getLabel(label),
      color = _getLabel[0],
      text = _getLabel[1];

  var classes = useStyles({ colorGroup: colors[color] || colors.blueGrey });

  return React.createElement(
    "div",
    { className: classes.productLabelWrapper },
    React.createElement(
      Typography,
      {
        className: classes.productLabelText,
        color: "inherit",
        variant: "caption"
      },
      text
    )
  );
};

export default ProductLabel;