@eturnity/eturnity_reusable_components 6.50.1-EPDM-9012.0 → 6.50.1-EPDM-9466.0

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -1,127 +1,135 @@
-import TextAreaInput from "./index.vue"
-
-export default {
-  title: "TextAreaInput",
-  component: TextAreaInput,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { TextAreaInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<text-area-input v-bind="$props" />',
-
-  // import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
-  // To use:
-  // <text-area-input
-  //     placeholder="Comments"
-  //     @input-change="onInputChange({ value: $event, type: 'note' })"
-  //     :value="form.note"
-  //     rowHeight="4" //optional
-  //     :isError="false"
-  //     :errorText="$gettext('field_required')"
-  //     infoTextMessage="My info message"
-  //     label="Question 5"
-  //     alignItems="horizontal" // horizontal, vertical
-  //     :isDisabled="true"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "2",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: "Enter a comment",
-  isDisabled: true,
-  rowHeight: "2",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
-}
-
-export const Error = Template.bind({})
-Error.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "2",
-  isError: true,
-  errorText: "This field is required",
-  infoTextMessage: "",
-  label: "",
-  value: "",
-  alignItems: "vertical",
-  inputWidth: "350px",
-}
-
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "2",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
-  inputWidth: "350px",
-}
-
-export const HorizontalLabel = Template.bind({})
-HorizontalLabel.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "2",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "horizontal",
-  inputWidth: "350px",
-}
-
-export const LargerTextArea = Template.bind({})
-LargerTextArea.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "5",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
-}
-
-export const LargerFontSize = Template.bind({})
-LargerFontSize.args = {
-  placeholder: "Enter a comment",
-  isDisabled: false,
-  rowHeight: "5",
-  fontSize: "24px",
-  isError: false,
-  errorText: "This field is required",
-  infoTextMessage: "Here is some information",
-  label: "Description",
-  value: "Here is my description!",
-  alignItems: "vertical",
-}
+import TextAreaInput from "./index.vue"
+
+export default {
+  title: "TextAreaInput",
+  component: TextAreaInput,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { TextAreaInput },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<text-area-input v-bind="$props" />',
+
+  // import TextAreaInput from "@eturnity/eturnity_reusable_components/src/components/inputs/textAreaInput"
+  // To use:
+  // <text-area-input
+  //     placeholder="Comments"
+  //     @input-change="onInputChange({ value: $event, type: 'note' })"
+  //     :value="form.note"
+  //     rowHeight="4" //optional
+  //     :isError="false"
+  //     :errorText="$gettext('field_required')"
+  //     infoTextAlign="right" // left by default
+  //     infoTextMessage="My info message"
+  //     label="Question 5"
+  //     alignItems="horizontal" // horizontal, vertical
+  //     :isDisabled="true"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Enter a comment",
+  isDisabled: true,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: true,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "",
+  label: "",
+  value: "",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
+  inputWidth: "350px",
+}
+
+export const HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "2",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "horizontal",
+  inputWidth: "350px",
+}
+
+export const LargerTextArea = Template.bind({})
+LargerTextArea.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "5",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
+}
+
+export const LargerFontSize = Template.bind({})
+LargerFontSize.args = {
+  placeholder: "Enter a comment",
+  isDisabled: false,
+  rowHeight: "5",
+  fontSize: "24px",
+  isError: false,
+  errorText: "This field is required",
+  infoTextAlign: "right",
+  infoTextMessage: "Here is some information",
+  label: "Description",
+  value: "Here is my description!",
+  alignItems: "vertical",
+}