@hrobarikt/box-ui-elements
Version:
Box UI Elements
63 lines • 2.73 kB
JavaScript
import * as React from 'react';
import { select } from '@storybook/addon-knobs';
import ClockBadge16 from '../../icon/fill/ClockBadge16';
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 React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Text, null, "TEST TEXT"));
};
export var withIcon = function withIcon() {
return React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Icon, {
Component: ClockBadge16
}));
};
export var withBoth = function withBoth() {
return React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Icon, {
Component: ClockBadge16
}), React.createElement(LabelPill.Text, null, "TEST TEXT"));
};
export var severalComponents = function severalComponents() {
return React.createElement("div", {
style: {
textAlign: 'center'
}
}, React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Text, null, "TEXT ONLY")), React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Icon, {
Component: ClockBadge16
})), React.createElement(LabelPill.Pill, {
type: select(typeLabel, typeOptions, LabelPillStatus.DEFAULT),
size: select(sizeLabel, sizeOptions, LabelPillSize.REGULAR)
}, React.createElement(LabelPill.Icon, {
Component: ClockBadge16
}), React.createElement(LabelPill.Text, null, "ICON AND TEXT")));
};
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