orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
86 lines • 2.14 kB
JavaScript
import React from "react";
import Checkbox from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Checkbox",
component: Checkbox
};
export const basicCheckbox = () => /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
label: "Default checkbox"
});
basicCheckbox.storyName = "Default";
export const colourVariants = () => /*#__PURE__*/_jsxs(Spacer, {
m: "3",
children: [/*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
label: "Primary colour checkbox",
colour: "primary"
}), /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
label: "Success colour checkbox",
colour: "success"
}), /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
label: "Warning colour checkbox",
colour: "warning"
}), /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
label: "Danger colour checkbox",
colour: "danger"
})]
});
export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
m: "3",
children: [/*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
disabled: true,
label: "Disabled checkbox"
}), /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
checked: true,
disabled: true,
label: "Disabled ticked checkbox"
})]
});
export const checked = () => /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
checked: true,
label: "Ticked checkbox"
});
export const inverted = () => /*#__PURE__*/_jsx(Box, {
bg: "greyDarker",
p: "r",
children: /*#__PURE__*/_jsx(Checkbox, {
onChange: () => {},
colour: "white",
label: "Inverted checkbox"
})
});
basicCheckbox.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "basicCheckbox"
};
colourVariants.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "colourVariants"
};
disabled.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "disabled"
};
checked.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "checked"
};
inverted.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "inverted"
};