@create-figma-plugin/ui
Version:
Production-grade Preact components that replicate the Figma UI design
46 lines • 1.93 kB
JavaScript
import { h } from 'preact';
import { Inline } from '../inline.js';
export default { title: 'Layout/Inline' };
export const Default = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, null,
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
export const ExtraSmallSpace = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, { space: "extraSmall" },
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
export const SmallSpace = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, { space: "small" },
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
export const MediumSpace = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, { space: "medium" },
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
export const LargeSpace = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, { space: "large" },
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
export const ExtraLargeSpace = function () {
const style = { backgroundColor: 'var(--figma-color-bg-brand-tertiary)' };
return (h(Inline, { space: "extraLarge" },
h("div", { style: style }, "foo"),
h("div", { style: style }, "bar"),
h("div", { style: style }, "baz")));
};
//# sourceMappingURL=inline.stories.js.map