@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
113 lines (112 loc) • 2.99 kB
JavaScript
var _templateObject;
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import { fn } from '@storybook/test';
import CheckboxSelect from './index';
import styled from 'styled-components';
import React from 'react';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
export default {
title: 'Components/CheckboxSelect',
component: CheckboxSelect,
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: 'color'
}
},
// 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: fn()
}
};
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export var Simple = {
args: {
color: {
border: 'primary',
text: 'darkGrey',
icon: 'darkGrey'
},
label: 'Your Pronouns',
options: [{
id: '1',
label: 'Option 1',
name: 'Option 1'
}, {
id: '2',
label: 'Option 2',
name: 'Option 2'
}, {
id: '3',
label: 'Option 3',
name: 'Option 3'
}]
}
};
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"])));
var args = {
color: {
border: 'light',
text: 'darkGrey',
icon: 'darkGrey',
background: 'light'
},
label: 'Your Pronouns',
onChange: function onChange(option) {
console.log(option);
},
options: [{
id: '1',
label: 'Option 1',
name: 'Option 1'
}, {
id: '2',
label: 'Option 2',
name: 'Option 2'
}, {
id: '3',
label: 'Option 3',
name: 'Option 3'
}]
};
export var Light = function Light() {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(CheckboxSelect, args));
};
var argsDanger = {
color: {
border: 'danger',
text: 'danger',
icon: 'danger',
background: 'light'
},
firstRow: {
background: 'danger',
text: 'light'
},
label: 'Your Pronouns',
onChange: function onChange(option) {
console.log(option);
},
options: [{
id: '1',
label: 'Option 1',
name: 'Option 1'
}, {
id: '2',
label: 'Option 2',
name: 'Option 2'
}, {
id: '3',
label: 'Option 3',
name: 'Option 3'
}]
};
export var Danger = function Danger() {
return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(CheckboxSelect, argsDanger));
};