orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
92 lines • 2.36 kB
JavaScript
import React from "react";
import RadioButton from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/RadioButton",
component: RadioButton
};
export const defaultRadioButton = () => /*#__PURE__*/_jsxs(Spacer, {
m: "r",
children: [/*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons01",
label: "Default radio"
}), /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons01",
label: "Default radio 02"
})]
});
defaultRadioButton.storyName = "Default";
export const checked = () => /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons02",
label: "Default checked radio",
checked: true
});
export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
m: "r",
children: [/*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons03",
label: "Disabled unchecked radio",
disabled: true
}), /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons03",
label: "Disabled checked radio",
disabled: true,
checked: true
})]
});
export const colour = () => /*#__PURE__*/_jsxs(Spacer, {
m: "r",
children: [/*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons",
label: "Primary colour radio",
variant: "primary"
}), /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons",
label: "Success colour radio",
variant: "success"
}), /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons",
label: "Warning colour radio",
variant: "warning"
}), /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons",
label: "Danger colour radio",
variant: "danger"
})]
});
export const inverted = () => /*#__PURE__*/_jsx(Box, {
p: "r",
bg: "greyDarker",
children: /*#__PURE__*/_jsx(RadioButton, {
name: "RadioButtons04",
label: "Inverted radio",
variant: "white"
})
});
defaultRadioButton.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultRadioButton"
};
checked.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "checked"
};
disabled.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "disabled"
};
colour.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "colour"
};
inverted.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "inverted"
};