lucid-ui
Version:
A UI component library from Xandr.
118 lines • 6.06 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a, _b;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotchedTag = exports.Size = exports.Type = exports.TagStyle = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var style_helpers_1 = require("../../util/style-helpers");
var node = prop_types_1.default.node, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf, object = prop_types_1.default.object;
var cx = style_helpers_1.lucidClassNames.bind('&-NotchedTag');
var TagStyle;
(function (TagStyle) {
TagStyle["style-one"] = "style-one";
TagStyle["style-two"] = "style-two";
TagStyle["style-three"] = "style-three";
})(TagStyle = exports.TagStyle || (exports.TagStyle = {}));
var Type;
(function (Type) {
Type["filled"] = "filled";
Type["stroke"] = "stroke";
})(Type = exports.Type || (exports.Type = {}));
var Size;
(function (Size) {
Size["large"] = "large";
Size["small"] = "small";
})(Size = exports.Size || (exports.Size = {}));
var NOTCH_HEIGHT_LARGE = 5;
var NOTCH_HEIGHT_SMALL = 4;
var SIZE_DIMENSION_MAP = (_a = {},
_a[Size.large] = {
height: '24px',
width: '40px',
},
_a[Size.small] = {
height: '18px',
width: '30px',
},
_a);
var SIZE_NOTCH_MAP = (_b = {},
_b[Size.large] = NOTCH_HEIGHT_LARGE,
_b[Size.small] = NOTCH_HEIGHT_SMALL,
_b);
var STROKE_SIZE = '2px';
var defaultProps = {
size: Size.large,
tagStyle: TagStyle['style-one'],
};
var NotchedTag = function (props) {
var children = props.children, className = props.className, type = props.type, style = props.style, size = props.size, tagStyle = props.tagStyle, passThroughs = __rest(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 (react_1.default.createElement("div", __assign({ className: cx('&', "&-".concat(tagStyle), "&-".concat(size), type === Type.filled ? '&-no-border' : '', className) }, passThroughs, { style: __assign(__assign(__assign({}, style), SIZE_DIMENSION_MAP[size]), { clipPath: slicePolygon }) }),
react_1.default.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,
} },
react_1.default.createElement("div", { className: cx('&-container-centered') }, children))));
};
exports.NotchedTag = NotchedTag;
exports.NotchedTag.defaultProps = defaultProps;
exports.NotchedTag.displayName = 'NotchedTag';
exports.NotchedTag.propTypes = {
/**
Any valid React children.
*/
children: node,
className: string,
/**
Style variations.
*/
type: oneOf(lodash_1.default.values(Type)),
size: oneOf(lodash_1.default.values(Size)),
tagStyle: oneOf(lodash_1.default.values(TagStyle)),
style: object,
};
exports.NotchedTag.peek = {
description: "A banner that displays a prominent message.",
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'],
};
exports.default = exports.NotchedTag;
//# sourceMappingURL=NotchedTag.js.map