box-ui-elements-mlh
Version:
63 lines • 2.68 kB
JavaScript
import * as React from 'react';
import { select, number, text } from '@storybook/addon-knobs';
import ItemIcon from './item-icon';
import ItemIconMonotone from './item-icon-monotone';
import Tooltip, { TooltipPosition } from '../components/tooltip';
var itemTypeOptions = ['default', 'audio', 'bookmark', 'boxnote', 'code', 'document', 'dwg', 'excel-spreadsheet', 'google-docs', 'google-sheets', 'google-slides', 'illustrator', 'image', 'indesign', 'keynote', 'numbers', 'pages', 'pdf', 'photoshop', 'powerpoint-presentation', 'presentation', 'spreadsheet', 'text', 'threed', 'vector', 'video', 'word-document', 'zip', 'folder-collab', 'folder-external', 'folder-plain'];
export var itemIcons = function itemIcons() {
var componentPath = select('Variant', ['icons/item-icon', 'icons/item-icon-monotone'], 'icons/item-icon');
var Icon = {
'icons/item-icon': ItemIcon,
'icons/item-icon-monotone': ItemIconMonotone
}[componentPath];
return /*#__PURE__*/React.createElement(React.Fragment, null, itemTypeOptions.map(function (t) {
return /*#__PURE__*/React.createElement("span", {
style: {
padding: 8
},
key: t
}, /*#__PURE__*/React.createElement(Tooltip, {
text: t
}, /*#__PURE__*/React.createElement("span", {
style: {
display: 'inline-block'
}
}, /*#__PURE__*/React.createElement(Icon, {
iconType: t,
dimension: number('dimension', 32, {
range: true,
min: 10,
max: 64,
step: 2
}),
title: text('title', ''),
className: text('className', '')
}))));
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Hover icons in grid to view the ", /*#__PURE__*/React.createElement("code", null, "iconType"), " prop"), /*#__PURE__*/React.createElement("p", {
style: {
display: 'flex',
alignItems: 'center',
paddingTop: 16,
paddingLeft: 8
}
}, /*#__PURE__*/React.createElement(Tooltip, {
text: "default",
isShown: true,
position: TooltipPosition.MIDDLE_RIGHT
}, /*#__PURE__*/React.createElement(Icon, {
iconType: "default",
dimension: 32
})))));
};
var description = "\n ItemIcon, and the solid-color variant ItemIconMonotone, are catch-all components that render the appropriate\n icon for a given file or folder type\n";
export default {
title: 'Icons|ItemIcon',
subcomponents: {
ItemIcon: ItemIcon,
ItemIconMonotone: ItemIconMonotone
},
parameters: {
componentSubtitle: description
}
};
//# sourceMappingURL=icons.stories.js.map