box-ui-elements-mlh
Version:
67 lines • 3.27 kB
JavaScript
import * as React from 'react';
import { select } from '@storybook/addon-knobs';
import Shield16 from '../../icon/line/Shield16';
import LabelPill, { LabelPillStatus, LabelPillSize } from './LabelPill';
import notes from './LabelPill.stories.md';
var typeLabel = '"type" Prop';
var sizeLabel = '"size" Prop';
var typeOptions = [LabelPillStatus.DEFAULT, LabelPillStatus.ALERT, LabelPillStatus.ERROR, LabelPillStatus.HIGHLIGHT, LabelPillStatus.INFO, LabelPillStatus.SUCCESS, LabelPillStatus.WARNING];
var sizeOptions = [LabelPillSize.REGULAR, LabelPillSize.LARGE];
export var withText = function withText() {
return /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Text, null, "TEST TEXT"));
};
export var withIcon = function withIcon() {
return /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Icon, {
Component: Shield16
}));
};
export var withBoth = function withBoth() {
return /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Icon, {
Component: Shield16
}), /*#__PURE__*/React.createElement(LabelPill.Text, null, "TEST TEXT"));
};
export var severalComponents = function severalComponents() {
return /*#__PURE__*/React.createElement("div", {
style: {
textAlign: 'center'
}
}, /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: LabelPillStatus.WARNING,
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Text, null, "BETA")), ' ', /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: LabelPillStatus.INFO,
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Text, null, "IN PROGRESS")), ' ', /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: LabelPillStatus.WARNING,
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Icon, {
Component: Shield16
}), /*#__PURE__*/React.createElement(LabelPill.Text, null, "CONFIDENTIAL")), ' ', /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: LabelPillStatus.ALERT,
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Text, null, "DUE JUL 9 AT 11:59 PM")), ' ', /*#__PURE__*/React.createElement(LabelPill.Pill, {
type: LabelPillStatus.SUCCESS,
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, /*#__PURE__*/React.createElement(LabelPill.Text, null, "SUCCESS")), ' ');
};
export default {
title: 'Components|LabelPill',
subcomponents: {
'LabelPill.Pill': LabelPill.Pill,
'LabelPill.Text': LabelPill.Text,
'LabePill.Icon': LabelPill.Icon
},
parameters: {
notes: notes
}
};
//# sourceMappingURL=LabelPill.stories.js.map