irisrad-ui
Version:
UI elements developered for IRIS R&D Group Inc
84 lines (78 loc) • 3.18 kB
JavaScript
import React from "react";
import { IrisMultiSelect } from "./IrisMultiSelect"; // ui element
// export for StoryBook as a tab
export default {
title: "Example/IrisMultiSelect", // could be represent on the url, example could be a root of the node
component: IrisMultiSelect,
// parameters: {
// layout: "none", // centered | fullscreen | padded | none,
// },
// custom arg types with storybook's add on here
// https://storybook.js.org/docs/react/essentials/controls
// argTypes: {
// backgroundColor: {control: "color"}
// },
};
const Template = (args) => (
<IrisMultiSelect {...args} label="Please select a noun" />
);
// define a variant of the ui component
export const Primary = Template.bind({});
// assign arguement (props) to render the ui component
Primary.args = {
options: [
// { value: "brilliance", label: "brilliance" },
{ value: "calendar", label: "calendar" },
{ value: "sink", label: "sink" },
{ value: "compose", label: "compose" },
{ value: "wedding", label: "wedding" },
{ value: "mosquito", label: "mosquito" },
{ value: "comfortable", label: "comfortable" },
{ value: "discipline", label: "discipline" },
{ value: "tie", label: "tie" },
{ value: "benefit", label: "benefit" },
{ value: "ideology", label: "ideology" },
{ value: "logy", label: "logy" },
{ value: "protest", label: "protest" },
{ value: "replace", label: "replace" },
{ value: "vertical", label: "vertical" },
{ value: "mill", label: "mill" },
{ value: "work", label: "work" },
{ value: "mold", label: "mold" },
{ value: "conference", label: "conference" },
{ value: "fool", label: "fool" },
{ value: "loop", label: "loop" },
{ value: "economy", label: "economy" },
{ value: "round", label: "round" },
{ value: "pleasure", label: "pleasure" },
{ value: "announcement", label: "announcement" },
{ value: "infection", label: "infection" },
{ value: "white", label: "white" },
{ value: "lean", label: "lean" },
{ value: "flat", label: "flat" },
{ value: "conception", label: "conception" },
{ value: "west", label: "west" },
{ value: "depart", label: "depart" },
{ value: "reward", label: "reward" },
{ value: "snake", label: "snake" },
{ value: "deficit", label: "deficit" },
{ value: "value", label: "value" },
{ value: "strict", label: "strict" },
{ value: "ghostwriter", label: "ghostwriter" },
{ value: "exempt", label: "exempt" },
{ value: "player", label: "player" },
{ value: "comedy", label: "comedy" },
{ value: "wrist", label: "wrist" },
{ value: "enfix", label: "enfix" },
{ value: "obligation", label: "obligation" },
{ value: "housewife", label: "housewife" },
{ value: "difference", label: "difference" },
{ value: "separation", label: "separation" },
{ value: "athlete", label: "athlete" },
{ value: "even", label: "even" },
{ value: "breed", label: "breed" },
{ value: "course", label: "course" },
],
valueField: "value",
labelField: "label",
};