@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

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

@@ -1,200 +1,198 @@
 <template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper
-      :alignItems="alignItems"
-      :hasLabel="label && label.length > 0"
+  <Container :input-width="inputWidth">
+    <InputWrapper
+      :align-items="alignItems"
+      :has-label="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"
-          size="16px"
-        />
-      </label-wrapper>
-      <input-container
-        :inputWidth="inputWidth"
-        :isError="isError"
-        :fontSize="fontSize"
+      <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"
+          :disabled="isDisabled"
           :placeholder="placeholder"
+          :resize="resize"
           :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>
+        ></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'
+  // 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: 'text-area-input',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    ErrorMessage,
-    InfoText,
-    LabelWrapper,
-    InputLabel
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
+  export default {
+    name: 'TextAreaInput',
+    components: {
+      Container,
+      InputContainer,
+      InputWrapper,
+      ErrorMessage,
+      InfoText,
+      LabelWrapper,
+      InputLabel,
     },
-    isError: {
-      required: false,
-      default: false
+    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: '',
+      },
     },
-    rowHeight: {
-      required: false,
-      default: '2'
+    methods: {
+      onChangeHandler($event) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('input-change', $event.target.value)
+      },
     },
-    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,
 }