orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
158 lines • 4.16 kB
JavaScript
import React from "react";
import TextArea from ".";
import Box from "../Box";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/TextArea",
component: TextArea,
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
p: "r",
children: storyFn()
})]
};
export const defaultTextArea = () => /*#__PURE__*/_jsx(TextArea, {
"data-testid": "Test-id",
id: "TextArea01",
label: "Message",
autoFocus: true
});
defaultTextArea.storyName = "Default";
export const sizeTextArea = () => /*#__PURE__*/_jsx(TextArea, {
id: "TextArea02",
label: "Message",
cols: "50",
rows: "5"
});
sizeTextArea.storyName = "Size";
export const fullWidthTextArea = () => /*#__PURE__*/_jsx(TextArea, {
id: "TextArea05",
label: "Message",
fullWidth: true
});
fullWidthTextArea.storyName = "Full-width";
export const boldLabelTextArea = () => /*#__PURE__*/_jsx(TextArea, {
id: "TextAreaBold",
label: "Message",
bold: true,
"data-testid": "test-input"
});
boldLabelTextArea.storyName = "Bold Label";
export const mandatoryTextArea = () => /*#__PURE__*/_jsx(TextArea, {
id: "TextAreaMandatory",
label: "Message",
mandatory: true
});
mandatoryTextArea.storyName = "Mandatory";
export const statesTextArea = () => /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(TextArea, {
id: "TextArea03",
label: "Message - invalid message",
invalid: true
}), /*#__PURE__*/_jsx(TextArea, {
id: "TextArea04",
label: "Message",
valid: true
})]
});
statesTextArea.storyName = "States";
export const invertedTextArea = () => /*#__PURE__*/_jsx(Box, {
bg: "greyDarker",
p: "r",
children: /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(TextArea, {
id: "TextArea06",
label: "Message",
inverted: true
}), /*#__PURE__*/_jsx(TextArea, {
id: "TextArea07",
label: "Message - invalid message",
inverted: true,
invalid: true
}), /*#__PURE__*/_jsx(TextArea, {
id: "TextArea08",
label: "Message",
inverted: true,
valid: true
})]
})
});
invertedTextArea.storyName = "Inverted";
export const disabledTextArea = () => /*#__PURE__*/_jsx(TextArea, {
"data-testid": "Test-id",
id: "TextArea01",
label: "Message",
value: "This is uneditable",
disabled: true
});
disabledTextArea.storyName = "Disabled";
export const resizeTextArea = () => /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(TextArea, {
id: "TextAreaResizeNone",
label: "Not resizable",
resize: "none",
rows: "3",
defaultValue: "This textarea cannot be resized"
}), /*#__PURE__*/_jsx(TextArea, {
id: "TextAreaResizeHorizontal",
label: "Horizontal resize only",
resize: "horizontal",
rows: "3",
defaultValue: "This textarea can only be resized horizontally"
}), /*#__PURE__*/_jsx(TextArea, {
id: "TextAreaResizeVertical",
label: "Vertical resize only",
resize: "vertical",
rows: "3",
defaultValue: "This textarea can only be resized vertically"
})]
});
resizeTextArea.storyName = "Resize Options";
defaultTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultTextArea"
};
sizeTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "sizeTextArea"
};
fullWidthTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "fullWidthTextArea"
};
boldLabelTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "boldLabelTextArea"
};
mandatoryTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "mandatoryTextArea"
};
statesTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "statesTextArea"
};
invertedTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "invertedTextArea"
};
disabledTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "disabledTextArea"
};
resizeTextArea.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "resizeTextArea"
};