@eturnity/eturnity_reusable_components 8.7.4--EPDM-12729.4 → 8.7.4

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

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

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

@@ -1,204 +1,204 @@
-<template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="label && label.length > 0"
-    >
-      <LabelWrapper v-if="label">
-        <InputLabel :data-id="labelDataId" :font-size="fontSize">
-          {{ label }}
-        </InputLabel>
-        <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
-      </LabelWrapper>
-      <InputContainer
-        :disabled="isDisabled"
-        :font-size="fontSize"
-        :input-width="inputWidth"
-        :is-error="isError"
-      >
-        <textarea
-          :data-id="inputDataId"
-          :data-qa-id="dataQaId"
-          :disabled="isDisabled"
-          :placeholder="placeholder"
-          :resize="resize"
-          :rows="rowHeight"
-          :value="value"
-          @input="onChangeHandler"
-        ></textarea>
-      </InputContainer>
-    </InputWrapper>
-    <ErrorMessage v-if="isError && errorText">
-      {{ errorText }}
-    </ErrorMessage>
-  </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')"
-  //     infoTextMessage="My info message"
-  //     label="Question 5"
-  //     alignItems="horizontal" // horizontal, vertical
-  //     :isDisabled="true"
-  //     fontSize="13px"
-  // />
-  import styled from 'vue3-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: 'TextAreaInput',
-    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,
-      },
-      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: '',
-      },
-      dataQaId: {
-        required: false,
-        default: '',
-        type: String,
-      },
-    },
-    methods: {
-      onChangeHandler($event) {
-        if (this.isDisabled) {
-          return
-        }
-        this.$emit('input-change', $event.target.value)
-      },
-    },
-  }
-</script>
+<template>
+  <Container :input-width="inputWidth">
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="label && label.length > 0"
+    >
+      <LabelWrapper v-if="label">
+        <InputLabel :data-id="labelDataId" :font-size="fontSize">
+          {{ label }}
+        </InputLabel>
+        <InfoText v-if="infoTextMessage" size="16px" :text="infoTextMessage" />
+      </LabelWrapper>
+      <InputContainer
+        :disabled="isDisabled"
+        :font-size="fontSize"
+        :input-width="inputWidth"
+        :is-error="isError"
+      >
+        <textarea
+          :data-id="inputDataId"
+          :data-qa-id="dataQaId"
+          :disabled="isDisabled"
+          :placeholder="placeholder"
+          :resize="resize"
+          :rows="rowHeight"
+          :value="value"
+          @input="onChangeHandler"
+        ></textarea>
+      </InputContainer>
+    </InputWrapper>
+    <ErrorMessage v-if="isError && errorText">
+      {{ errorText }}
+    </ErrorMessage>
+  </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')"
+  //     infoTextMessage="My info message"
+  //     label="Question 5"
+  //     alignItems="horizontal" // horizontal, vertical
+  //     :isDisabled="true"
+  //     fontSize="13px"
+  // />
+  import styled from 'vue3-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: 'TextAreaInput',
+    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,
+      },
+      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: '',
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
+    },
+    methods: {
+      onChangeHandler($event) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('input-change', $event.target.value)
+      },
+    },
+  }
+</script>