lucid-ui/lib/components/NotchedTag/NotchedTag.js

A UI component library from AppNexus.

import _values from "lodash/values";

var _SIZE_DIMENSION_MAP, _SIZE_NOTCH_MAP;

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
var node = PropTypes.node,
    string = PropTypes.string,
    oneOf = PropTypes.oneOf,
    object = PropTypes.object;
var cx = lucidClassNames.bind('&-NotchedTag');
export var TagStyle;

(function (TagStyle) {
  TagStyle["style-one"] = "style-one";
  TagStyle["style-two"] = "style-two";
  TagStyle["style-three"] = "style-three";
})(TagStyle || (TagStyle = {}));

export var Type;

(function (Type) {
  Type["filled"] = "filled";
  Type["stroke"] = "stroke";
})(Type || (Type = {}));

export var Size;

(function (Size) {
  Size["large"] = "large";
  Size["small"] = "small";
})(Size || (Size = {}));

var NOTCH_HEIGHT_LARGE = 5;
var NOTCH_HEIGHT_SMALL = 4;
var SIZE_DIMENSION_MAP = (_SIZE_DIMENSION_MAP = {}, _defineProperty(_SIZE_DIMENSION_MAP, Size.large, {
  height: '24px',
  width: '40px'
}), _defineProperty(_SIZE_DIMENSION_MAP, Size.small, {
  height: '18px',
  width: '30px'
}), _SIZE_DIMENSION_MAP);
var SIZE_NOTCH_MAP = (_SIZE_NOTCH_MAP = {}, _defineProperty(_SIZE_NOTCH_MAP, Size.large, NOTCH_HEIGHT_LARGE), _defineProperty(_SIZE_NOTCH_MAP, Size.small, NOTCH_HEIGHT_SMALL), _SIZE_NOTCH_MAP);
var STROKE_SIZE = '2px';
var defaultProps = {
  size: Size.large,
  tagStyle: TagStyle['style-one']
};
export var NotchedTag = function NotchedTag(props) {
  var children = props.children,
      className = props.className,
      type = props.type,
      style = props.style,
      size = props.size,
      tagStyle = props.tagStyle,
      passThroughs = _objectWithoutProperties(props, ["children", "className", "type", "style", "size", "tagStyle"]);

  var notchHeight = SIZE_NOTCH_MAP[size];
  var notchWidth = notchHeight * Math.sqrt(3); //we want to maintain a 60 degree slice (30,60,90 triangle)
  //clips off a corner of the element to create the notched effect

  var slicePolygon = "\n\t\tpolygon(\n\t\t\t".concat(notchHeight, "px 0,\n\t\t\t100% 0,\n\t\t\t100% 100%,\n\t\t\t0 100%,\n\t\t\t0 ").concat(notchWidth, "px\n\t\t)"); //used for creating an inset element to create a stroke effect (instead of fill)

  var sliceInnerPolygon = "\n\t\tpolygon(\n\t\t\t".concat(notchHeight - 1, "px 0,\n\t\t\t100% 0,\n\t\t\t100% 100%,\n\t\t\t0 100%,\n\t\t\t0 ").concat(notchWidth - 1, "px\n\t\t)");
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cx('&', "&-".concat(tagStyle), "&-".concat(size), type === Type.filled ? '&-no-border' : '', className)
  }, passThroughs, {
    style: _objectSpread(_objectSpread(_objectSpread({}, style), SIZE_DIMENSION_MAP[size]), {}, {
      clipPath: slicePolygon
    })
  }), /*#__PURE__*/React.createElement("div", {
    className: cx('&-container', type === Type.filled ? '&-container-filled' : ''),
    style: {
      top: STROKE_SIZE,
      right: STROKE_SIZE,
      left: STROKE_SIZE,
      bottom: STROKE_SIZE,
      clipPath: sliceInnerPolygon
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: cx('&-container-centered')
  }, children)));
};
NotchedTag.defaultProps = defaultProps;
NotchedTag.displayName = 'NotchedTag';
NotchedTag.propTypes = {
  children: node,
  className: string,
  type: oneOf(_values(Type)),
  size: oneOf(_values(Size)),
  tagStyle: oneOf(_values(TagStyle)),
  style: object
};
NotchedTag.peek = {
  description: "\n\t\tA banner that displays a prominent message.\n\t",
  notes: {
    overview: "\n\t\t\tNotched tag helps users visually identify a high-priority object and its location in the object hierarchy.\n\t\t",
    intendedUse: "\n\t\t\tUse `NotchedTag` in tables, page headers, and in the global search to help users way-find while monitoring their objects. View `DetailsPageHeader` in ANX-React to see an example of Notched tag in context.\n\t\t\t\t\t\t\t\t\n\t\t\t**Styling notes**\n\t\t\t\n\t\t\t- Use filled in Notched tags, `type:\"filled\"`, for the currently-viewed or highest-priority object. \n\t\t\t- Use empty Notched tags, `type:\"stroke\"`, for the other objects associated with the viewed/priority object.\n\t\t\t- Use `size:\"small\"` in tables.\n\t\t\t- In page headers, use `size:\"large\"` `type:\"filled\"` for the highest-priority object, and `size:\"small\"` `type:\"stroke\"` for secondary objects.\n\t\t",
    technicalRecommendations: "\n\t\t\t- `tagStyle:style-one\"` is for Advertiser objects.\n\t\t\t- `tagStyle:style-two\"` is for Insertion Order objects.\n\t\t\t- `tagStyle:style-three\"` is for Line Item objects.\n\t\t"
  },
  categories: ['visual design']
};
export default NotchedTag;