@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
160 lines (159 loc) • 6.95 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatusIndicator = exports.statusIndicatorStyles = exports.StatusIndicatorEmphasis = exports.StatusIndicatorType = void 0;
const React = __importStar(require("react"));
const icon_1 = require("@workday/canvas-kit-react/icon");
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const styled_1 = __importDefault(require("@emotion/styled"));
/**
* @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead.
*/
var StatusIndicatorType;
(function (StatusIndicatorType) {
StatusIndicatorType["Gray"] = "gray";
StatusIndicatorType["Orange"] = "orange";
StatusIndicatorType["Blue"] = "blue";
StatusIndicatorType["Green"] = "green";
StatusIndicatorType["Red"] = "red";
StatusIndicatorType["Transparent"] = "transparent";
})(StatusIndicatorType = exports.StatusIndicatorType || (exports.StatusIndicatorType = {}));
/**
* @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead.
*/
var StatusIndicatorEmphasis;
(function (StatusIndicatorEmphasis) {
StatusIndicatorEmphasis["High"] = "high";
StatusIndicatorEmphasis["Low"] = "low";
})(StatusIndicatorEmphasis = exports.StatusIndicatorEmphasis || (exports.StatusIndicatorEmphasis = {}));
/**
* @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead.
*/
exports.statusIndicatorStyles = {
classname: 'status-indicator',
styles: {
...tokens_1.type.levels.subtext.medium,
display: 'inline-flex',
alignItems: 'center',
verticalAlign: 'middle',
height: tokens_1.space.s,
padding: `1px ${tokens_1.space.xxxs}`,
borderRadius: tokens_1.borderRadius.s,
boxSizing: 'border-box',
},
variants: {
gray: {
high: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.licorice300,
},
low: {
color: tokens_1.colors.licorice400,
background: tokens_1.colors.soap200,
},
},
orange: {
high: {
color: tokens_1.colors.licorice500,
background: tokens_1.colors.cantaloupe400,
},
low: {
color: tokens_1.colors.toastedMarshmallow600,
background: tokens_1.colors.cantaloupe100,
},
},
blue: {
high: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.blueberry400,
},
low: {
color: tokens_1.colors.blueberry500,
background: tokens_1.colors.blueberry100,
},
},
green: {
high: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.greenApple600,
},
low: {
color: tokens_1.colors.greenApple600,
background: tokens_1.colors.greenApple100,
},
},
red: {
high: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.cinnamon500,
},
low: {
color: tokens_1.colors.cinnamon600,
background: tokens_1.colors.cinnamon100,
},
},
transparent: {
high: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.blackPepper600,
},
// Low & High emphasis are identical for transparent status indicators
low: {
color: tokens_1.colors.frenchVanilla100,
background: tokens_1.colors.blackPepper600,
},
},
},
};
const Container = (0, styled_1.default)('span')(exports.statusIndicatorStyles.styles, ({ type, emphasis, maxWidth }) => ({
...exports.statusIndicatorStyles.variants[type][emphasis],
maxWidth: maxWidth,
}));
const StatusLabel = (0, styled_1.default)('span')({
fontWeight: 'bold',
WebkitFontSmoothing: 'antialiased',
textTransform: 'uppercase',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
});
/**
* @deprecated ⚠️ Status Indicator has been deprecated and will be removed in a future major version. Please use [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in Preview instead.
*/
class StatusIndicator extends React.Component {
render() {
const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
const variant = exports.statusIndicatorStyles.variants[type][emphasis];
return (React.createElement(Container, { type: type, emphasis: emphasis, maxWidth: maxWidth, ...elemProps },
icon && (React.createElement(icon_1.SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: tokens_1.space.xxxs } })),
React.createElement(StatusLabel, null, label)));
}
}
StatusIndicator.Type = StatusIndicatorType;
StatusIndicator.Emphasis = StatusIndicatorEmphasis;
exports.StatusIndicator = StatusIndicator;