@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
116 lines (115 loc) • 4.04 kB
JavaScript
var _templateObject;
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import Input from './index';
import React from 'react';
import styled from 'styled-components';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
export default {
title: 'Components/Input ',
component: Input,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered'
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
variant: {
control: {
type: 'select',
options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
}
},
startIcon: {
control: {
type: 'object',
options: {
name: 'string',
size: 'string',
fill: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
}
}
},
endIcon: {
control: {
type: 'object',
options: {
name: 'string',
size: 'string',
fill: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
}
}
}
},
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: {
onClick: function onClick() {}
}
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 400px;\n"])));
export var Simple = function Simple(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, _extends({
placeholder: "Enter text"
}, args)));
};
export var WithStartIcon = function WithStartIcon(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
placeholder: "Enter text",
variant: args.variant || 'dark',
startIcon: args.startIcon || {
name: 'user'
}
}));
};
export var WithEndIcon = function WithEndIcon(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
placeholder: "Enter text",
variant: args.variant || 'dark',
endIcon: args.endIcon || {
name: 'lock'
}
}));
};
export var WithBothIcons = function WithBothIcons(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
placeholder: "Enter text",
variant: args.variant || 'dark',
startIcon: args.startIcon || {
name: 'user'
},
endIcon: args.endIcon || {
name: 'lock'
}
}));
};
export var WithVariant = function WithVariant(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
placeholder: "Enter text",
variant: "danger",
startIcon: args.startIcon || {
name: 'user'
}
}));
};
export var Custom = function Custom(args) {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Input, {
placeholder: "Enter text",
color: {
background: 'darkGrey',
text: 'light',
border: 'primary',
icon: 'light'
},
startIcon: args.startIcon || {
name: 'user',
fill: 'light'
},
endIcon: args.endIcon || {
name: 'check',
fill: 'primary',
size: '2.5em'
}
}));
};