@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.2 → 7.24.3-qa-elisee-7.32.0

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

@@ -1,198 +1,200 @@
 <template>
-  <Container :input-width="inputWidth">
-    <InputWrapper
-      :align-items="alignItems"
-      :has-label="label && label.length > 0"
+  <container :inputWidth="inputWidth">
+    <input-wrapper
+      :alignItems="alignItems"
+      :hasLabel="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
+      <label-wrapper v-if="label">
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          size="16px"
+        />
+      </label-wrapper>
+      <input-container
+        :inputWidth="inputWidth"
+        :isError="isError"
+        :fontSize="fontSize"
         :disabled="isDisabled"
-        :font-size="fontSize"
-        :input-width="inputWidth"
-        :is-error="isError"
       >
         <textarea
-          :data-id="inputDataId"
-          :disabled="isDisabled"
           :placeholder="placeholder"
-          :resize="resize"
           :rows="rowHeight"
           :value="value"
+          :disabled="isDisabled"
           @input="onChangeHandler"
-        ></textarea>
-      </InputContainer>
-    </InputWrapper>
-    <ErrorMessage v-if="isError && errorText">
-      {{ errorText }}
-    </ErrorMessage>
-  </Container>
+          :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')"
-  //     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'
+// 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 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 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 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')};
+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`};
-      }
+    &::placeholder {
+      color: ${(props) => `${props.theme.colors.grey2} !important`};
+    }
 
-      &:focus {
-        outline: none;
-      }
+    &: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 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')};
-  `
+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,
+export default {
+  name: 'text-area-input',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    LabelWrapper,
+    InputLabel
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
     },
-    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: '',
-      },
+    isError: {
+      required: false,
+      default: false
     },
-    methods: {
-      onChangeHandler($event) {
-        if (this.isDisabled) {
-          return
-        }
-        this.$emit('input-change', $event.target.value)
-      },
+    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: ''
+    }
+  },
+  methods: {
+    onChangeHandler($event) {
+      if (this.isDisabled) {
+        return
+      }
+      this.$emit('input-change', $event.target.value)
+    }
   }
+}
 </script>

package/src/components/inputs/toggle/Toggle.stories.js

@@ -1,7 +1,7 @@
-import Toggle from './index.vue'
+import Toggle from "./index.vue"
 
 export default {
-  title: 'Toggle',
+  title: "Toggle",
   component: Toggle,
   // argTypes: {},
 }
@@ -31,47 +31,47 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({})
 Default.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
+  size: "small", // "small" or "medium"
   disabled: false,
 }
 
 export const Medium = Template.bind({})
 Medium.args = {
   isChecked: true,
-  size: 'medium', // "small" or "medium"
+  size: "medium", // "small" or "medium"
   disabled: false,
 }
 
 export const CustomColor = Template.bind({})
 CustomColor.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
+  size: "small", // "small" or "medium"
   disabled: false,
-  toggleColor: 'red',
-  backgroundColor: 'blue',
+  toggleColor: "red",
+  backgroundColor: "blue",
 }
 
 export const LabelLeft = Template.bind({})
 LabelLeft.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
-  label: 'My Label Text',
+  size: "small", // "small" or "medium"
+  label: "My Label Text",
   disabled: false,
-  labelAlign: 'left',
+  labelAlign: "left",
 }
 
 export const LabelRight = Template.bind({})
 LabelRight.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
-  label: 'My Label Text',
+  size: "small", // "small" or "medium"
+  label: "My Label Text",
   disabled: false,
-  labelAlign: 'right',
+  labelAlign: "right",
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
   isChecked: false,
-  size: 'small', // "small" or "medium"
+  size: "small", // "small" or "medium"
   disabled: true,
 }