@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
131 lines (130 loc) • 5.17 kB
JavaScript
import * as React from 'react';
import { SystemIcon } from '@workday/canvas-kit-react/icon';
import { borderRadius, colors, type, space } from '@workday/canvas-kit-react/tokens';
import styled from '@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.
*/
export var StatusIndicatorType;
(function (StatusIndicatorType) {
StatusIndicatorType["Gray"] = "gray";
StatusIndicatorType["Orange"] = "orange";
StatusIndicatorType["Blue"] = "blue";
StatusIndicatorType["Green"] = "green";
StatusIndicatorType["Red"] = "red";
StatusIndicatorType["Transparent"] = "transparent";
})(StatusIndicatorType || (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.
*/
export var StatusIndicatorEmphasis;
(function (StatusIndicatorEmphasis) {
StatusIndicatorEmphasis["High"] = "high";
StatusIndicatorEmphasis["Low"] = "low";
})(StatusIndicatorEmphasis || (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.
*/
export const statusIndicatorStyles = {
classname: 'status-indicator',
styles: {
...type.levels.subtext.medium,
display: 'inline-flex',
alignItems: 'center',
verticalAlign: 'middle',
height: space.s,
padding: `1px ${space.xxxs}`,
borderRadius: borderRadius.s,
boxSizing: 'border-box',
},
variants: {
gray: {
high: {
color: colors.frenchVanilla100,
background: colors.licorice300,
},
low: {
color: colors.licorice400,
background: colors.soap200,
},
},
orange: {
high: {
color: colors.licorice500,
background: colors.cantaloupe400,
},
low: {
color: colors.toastedMarshmallow600,
background: colors.cantaloupe100,
},
},
blue: {
high: {
color: colors.frenchVanilla100,
background: colors.blueberry400,
},
low: {
color: colors.blueberry500,
background: colors.blueberry100,
},
},
green: {
high: {
color: colors.frenchVanilla100,
background: colors.greenApple600,
},
low: {
color: colors.greenApple600,
background: colors.greenApple100,
},
},
red: {
high: {
color: colors.frenchVanilla100,
background: colors.cinnamon500,
},
low: {
color: colors.cinnamon600,
background: colors.cinnamon100,
},
},
transparent: {
high: {
color: colors.frenchVanilla100,
background: colors.blackPepper600,
},
// Low & High emphasis are identical for transparent status indicators
low: {
color: colors.frenchVanilla100,
background: colors.blackPepper600,
},
},
},
};
const Container = styled('span')(statusIndicatorStyles.styles, ({ type, emphasis, maxWidth }) => ({
...statusIndicatorStyles.variants[type][emphasis],
maxWidth: maxWidth,
}));
const StatusLabel = styled('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 = statusIndicatorStyles.variants[type][emphasis];
return (React.createElement(Container, { type: type, emphasis: emphasis, maxWidth: maxWidth, ...elemProps },
icon && (React.createElement(SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: space.xxxs } })),
React.createElement(StatusLabel, null, label)));
}
}
StatusIndicator.Type = StatusIndicatorType;
StatusIndicator.Emphasis = StatusIndicatorEmphasis;
export { StatusIndicator };