@eturnity/eturnity_reusable_components 7.4.3 → 7.4.4

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

@@ -1,135 +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')"
-  //     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",
-}
+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",
+}

package/src/components/inputs/textAreaInput/index.vue

@@ -1,206 +1,206 @@
-<template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper
-      :alignItems="alignItems"
-      :hasLabel="label && label.length > 0"
-    >
-      <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
-          label
-        }}</input-label>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          size="16px"
-          :alignText="infoTextAlign"
-        />
-      </label-wrapper>
-      <input-container
-        :inputWidth="inputWidth"
-        :isError="isError"
-        :fontSize="fontSize"
-        :disabled="isDisabled"
-      >
-        <textarea
-          :placeholder="placeholder"
-          :rows="rowHeight"
-          :value="value"
-          :disabled="isDisabled"
-          @input="onChangeHandler"
-          :resize="resize"
-          :data-id="inputDataId"
-        />
-      </input-container>
-    </input-wrapper>
-    <error-message v-if="isError && errorText">{{ errorText }}</error-message>
-  </container>
-</template>
-
-<script>
-// 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"
-// .   fontSize="13px"
-// />
-import styled from 'vue-styled-components'
-import InfoText from '../../infoText'
-import ErrorMessage from '../../errorMessage'
-
-const containerProps = { inputWidth: String }
-const Container = styled('div', containerProps)`
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  position: relative;
-  margin-bottom: 20px;
-`
-
-const LabelWrapper = styled.div`
-  display: inline-grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 12px;
-  align-items: center;
-`
-
-const inputProps = {
-  isError: Boolean,
-  disabled: Boolean,
-  fontSize: String,
-  inputWidth: String
-}
-
-const InputContainer = styled('div', inputProps)`
-  textarea {
-    border: ${(props) =>
-      props.isError
-        ? `1px solid ${props.theme.colors.red} !important`
-        : `1px solid ${props.theme.colors.grey4} !important`};
-    padding: ${(props) =>
-      props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
-    border-radius: 4px !important;
-    font-size: ${(props) => `${props.fontSize} !important`};
-    color: ${(props) => `${props.theme.colors.grey1} !important`};
-    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-    max-width: 100%;
-    box-sizing: border-box; // to allow width of 100% with padding
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
-
-    &::placeholder {
-      color: ${(props) => `${props.theme.colors.grey2} !important`};
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-`
-
-const inputAttrs = { alignItems: String, hasLabel: Boolean }
-const InputWrapper = styled('div', inputAttrs)`
-  position: relative;
-  display: grid;
-  align-items: center;
-  gap: 8px;
-  grid-template-columns: ${(props) =>
-    !props.hasLabel
-      ? '1fr'
-      : props.alignItems === 'vertical'
-      ? '1fr'
-      : 'auto 1fr'};
-`
-
-const labelAttrs = { fontSize: String }
-const InputLabel = styled('div', labelAttrs)`
-  font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-`
-
-export default {
-  name: 'text-area-input',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    ErrorMessage,
-    InfoText,
-    LabelWrapper,
-    InputLabel
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    isError: {
-      required: false,
-      default: false
-    },
-    rowHeight: {
-      required: false,
-      default: '2'
-    },
-    value: {
-      required: true,
-      default: null
-    },
-    errorText: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
-    },
-    infoTextMessage: {
-      required: false
-    },
-    infoTextAlign: {
-      required: false
-    },
-    label: {
-      required: false
-    },
-    fontSize: {
-      required: false,
-      default: '13px'
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    resize: {
-      required: false,
-      default: 'none'
-    },
-    labelDataId: {
-      required: false,
-      default: ''
-    },
-    inputDataId: {
-      required: false,
-      default: ''
-    }
-  },
-  methods: {
-    onChangeHandler($event) {
-      if (this.isDisabled) {
-        return
-      }
-      this.$emit('input-change', $event.target.value)
-    }
-  }
-}
-</script>
+<template>
+  <container :inputWidth="inputWidth">
+    <input-wrapper
+      :alignItems="alignItems"
+      :hasLabel="label && label.length > 0"
+    >
+      <label-wrapper v-if="label">
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          size="16px"
+          :alignText="infoTextAlign"
+        />
+      </label-wrapper>
+      <input-container
+        :inputWidth="inputWidth"
+        :isError="isError"
+        :fontSize="fontSize"
+        :disabled="isDisabled"
+      >
+        <textarea
+          :placeholder="placeholder"
+          :rows="rowHeight"
+          :value="value"
+          :disabled="isDisabled"
+          @input="onChangeHandler"
+          :resize="resize"
+          :data-id="inputDataId"
+        />
+      </input-container>
+    </input-wrapper>
+    <error-message v-if="isError && errorText">{{ errorText }}</error-message>
+  </container>
+</template>
+
+<script>
+// 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"
+// .   fontSize="13px"
+// />
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
+import ErrorMessage from '../../errorMessage'
+
+const containerProps = { inputWidth: String }
+const Container = styled('div', containerProps)`
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  position: relative;
+  margin-bottom: 20px;
+`
+
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 12px;
+  align-items: center;
+`
+
+const inputProps = {
+  isError: Boolean,
+  disabled: Boolean,
+  fontSize: String,
+  inputWidth: String
+}
+
+const InputContainer = styled('div', inputProps)`
+  textarea {
+    border: ${(props) =>
+      props.isError
+        ? `1px solid ${props.theme.colors.red} !important`
+        : `1px solid ${props.theme.colors.grey4} !important`};
+    padding: ${(props) =>
+      props.hasUnit ? '11px 40px 11px 10px !important' : '15px !important'};
+    border-radius: 4px !important;
+    font-size: ${(props) => `${props.fontSize} !important`};
+    color: ${(props) => `${props.theme.colors.grey1} !important`};
+    width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    max-width: 100%;
+    box-sizing: border-box; // to allow width of 100% with padding
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'inherit')};
+
+    &::placeholder {
+      color: ${(props) => `${props.theme.colors.grey2} !important`};
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+`
+
+const inputAttrs = { alignItems: String, hasLabel: Boolean }
+const InputWrapper = styled('div', inputAttrs)`
+  position: relative;
+  display: grid;
+  align-items: center;
+  gap: 8px;
+  grid-template-columns: ${(props) =>
+    !props.hasLabel
+      ? '1fr'
+      : props.alignItems === 'vertical'
+      ? '1fr'
+      : 'auto 1fr'};
+`
+
+const labelAttrs = { fontSize: String }
+const InputLabel = styled('div', labelAttrs)`
+  font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+`
+
+export default {
+  name: 'text-area-input',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    LabelWrapper,
+    InputLabel
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    isError: {
+      required: false,
+      default: false
+    },
+    rowHeight: {
+      required: false,
+      default: '2'
+    },
+    value: {
+      required: true,
+      default: null
+    },
+    errorText: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    alignItems: {
+      required: false,
+      default: 'horizontal'
+    },
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    label: {
+      required: false
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    resize: {
+      required: false,
+      default: 'none'
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    onChangeHandler($event) {
+      if (this.isDisabled) {
+        return
+      }
+      this.$emit('input-change', $event.target.value)
+    }
+  }
+}
+</script>