@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
142 lines (141 loc) • 3.56 kB
JavaScript
var _templateObject;
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import RichText 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/RichText ',
component: RichText,
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
// 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: {
label: "My richtext editor",
placeholder: "Enter your fav text",
maxChars: 100,
onChange: function onChange(e) {
return console.log(e);
},
icon: {
name: 'flag',
size: '24px',
fill: 'light'
},
color: {
background: 'darkGrey',
text: 'light',
border: 'darkGrey',
icon: 'light'
},
firstRow: {
background: 'warning',
text: 'light'
},
argTypes: {
color: {
control: {
type: 'object',
options: {
border: 'string',
text: 'string',
icon: 'string',
background: 'string'
}
}
},
icon: {
control: {
type: 'object',
options: {
name: 'string',
size: 'string',
fill: 'string'
}
}
},
firstRow: {
control: {
type: 'object',
options: {
background: 'string',
text: 'string'
}
}
}
}
}
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n width: 600px;\n"])));
export var Dark = function Dark(args) {
return /*#__PURE__*/React.createElement(RichText, {
label: "My richtext editor",
placeholder: "Enter your fav text",
maxChars: 4,
onChange: function onChange(e) {
return console.log(e);
},
icon: {
name: 'flag',
size: '24px',
fill: 'light'
},
color: {
background: 'darkGrey',
text: 'light',
border: 'darkGrey',
icon: 'light'
}
});
};
export var Light = function Light(args) {
return /*#__PURE__*/React.createElement(RichText, {
label: "My richtext editor",
placeholder: "Enter your fav text",
maxChars: 4,
onChange: function onChange(e) {
return console.log(e);
},
icon: {
name: 'flag',
size: '24px',
fill: 'dark'
},
color: {
background: 'light',
text: 'dark',
border: 'light',
icon: 'dark'
}
});
};
export var Custom = function Custom(args) {
return /*#__PURE__*/React.createElement(RichText, {
label: "My richtext editor",
placeholder: "Enter your fav text",
maxChars: 4,
onChange: function onChange(e) {
return console.log(e);
},
firstRow: {
background: 'warning',
text: 'light'
},
icon: {
name: 'flag',
size: '24px',
fill: 'light'
},
color: {
background: 'light',
text: 'dark',
border: 'warning',
icon: 'dark'
}
});
};