@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26-3d-master.0

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

@@ -1,253 +1,258 @@
-<template>
-  <container>
-    <input-wrapper
-      :hasLabel="!!label && label.length > 0"
-      :alignItems="alignItems"
-    >
-      <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
-        <info-text
-          v-if="infoTextMessage"
-          :text="infoTextMessage"
-          borderColor="#ccc"
-          :size="fontSize ? fontSize : '16'"
-          :alignText="infoTextAlign"
-        />
-      </label-wrapper>
-      <icon-container>
-        <input-container
-          :placeholder="placeholder"
-          :isError="isError"
-          :inputWidth="inputWidth"
-          :minWidth="minWidth"
-          :value="value"
-          @input="onChangeHandler"
-          :noBorder="noBorder"
-          :disabled="disabled"
-          :isDisabled="disabled"
-          :fontSize="fontSize"
-          :inputType="inputType"
-          :type="inputTypeData"
-        />
-        <icon-wrapper
-          v-if="inputType === 'password' && !isError"
-          @click="toggleShowPassword()"
-          size="20px"
-        >
-          <icon name="current_variant" size="20px" />
-        </icon-wrapper>
-        <icon-wrapper v-if="isError" size="16px">
-          <icon name="warning" size="16px" cursor="default" />
-        </icon-wrapper>
-      </icon-container>
-    </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
-  </container>
-</template>
-
-<script>
-import styled from 'vue-styled-components'
-import InfoText from '../../infoText'
-import Icon from '../../icon'
-
-const Container = styled.div`
-  width: 100%;
-  position: relative;
-`
-
-const labelAttrs = { fontSize: String }
-const InputLabel = styled('div', labelAttrs)`
-  font-weight: bold;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-`
-
-const LabelWrapper = styled.div`
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  grid-gap: 12px;
-  align-items: center;
-  justify-content: start;
-`
-
-const inputProps = {
-  isError: Boolean,
-  inputWidth: String,
-  minWidth: String,
-  noBorder: Boolean,
-  isDisabled: Boolean,
-  fontSize: String,
-  inputType: String
-}
-const InputContainer = styled('input', inputProps)`
-  border: ${(props) =>
-    props.isError
-      ? '1px solid ' + props.theme.colors.red
-      : props.noBorder
-      ? 'none'
-      : props.hasLength
-      ? '1px solid ' + props.theme.colors.black
-      : '1px solid ' + props.theme.colors.mediumGray};
-  padding: ${(props) =>
-    props.isError
-      ? '11px 25px 11px 10px'
-      : props.inputType === 'password'
-      ? '11px 25px 11px 10px'
-      : '11px 5px 11px 10px'};
-  border-radius: 4px;
-  position: relative;
-  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
-  color: ${(props) =>
-    props.isError ? props.theme.colors.red : props.theme.colors.black};
-  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
-  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
-  box-sizing: border-box; // to allow width of 100% with padding
-  font-weight: 500;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
-  background-color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
-
-  &::placeholder {
-    color: ${(props) =>
-      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
-  }
-
-  &: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.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
-`
-
-const ErrorMessage = styled.div`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.red};
-  position: absolute;
-  top: calc(100% + 1px);
-`
-
-const IconAttrs = { size: String }
-const IconWrapper = styled('div', IconAttrs)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  right: 5px;
-  height: ${(props) => (props.size ? props.size : 'auto')};
-`
-
-const IconContainer = styled.div`
-  position: relative;
-`
-
-export default {
-  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
-  // To use:
-  // <input-text
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
-  //   :isError="checkErrors()"
-  //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
-  //   infoTextMessage="My info message"
-  //   label="Question 5"
-  //   alignItems="horizontal" // horizontal, vertical
-  //   inputWidth="250px"
-  //   minWidth="100px"
-  //   fontSize="13px"
-  // />
-  name: 'input-text',
-  components: {
-    Container,
-    InputContainer,
-    InputWrapper,
-    ErrorMessage,
-    InfoText,
-    InputLabel,
-    LabelWrapper,
-    Icon,
-    IconWrapper,
-    IconContainer
-  },
-  data() {
-    return {
-      inputTypeData: 'text'
-    }
-  },
-  props: {
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    alignItems: {
-      required: false,
-      default: 'horizontal'
-    },
-    isError: {
-      required: false,
-      default: false
-    },
-    inputWidth: {
-      required: false,
-      default: null
-    },
-    minWidth: {
-      required: false,
-      default: null
-    },
-    value: {
-      required: true,
-      default: null
-    },
-    errorMessage: {
-      required: false,
-      default: ''
-    },
-    infoTextMessage: {
-      required: false
-    },
-    infoTextAlign: {
-      required: false
-    },
-    label: {
-      required: false
-    },
-    noBorder: {
-      required: false,
-      default: false
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    fontSize: {
-      required: false,
-      default: null
-    },
-    inputType: {
-      required: false,
-      default: 'text'
-    }
-  },
-  methods: {
-    onChangeHandler($event) {
-      this.$emit('input-change', $event)
-    },
-    toggleShowPassword() {
-      this.inputTypeData =
-        this.inputTypeData === 'password' ? 'text' : 'password'
-    }
-  },
-  created() {
-    this.inputTypeData = this.inputType
-  }
-}
-</script>
+<template>
+  <container>
+    <input-wrapper
+      :hasLabel="!!label && label.length > 0"
+      :alignItems="alignItems"
+    >
+      <label-wrapper v-if="label">
+        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <info-text
+          v-if="infoTextMessage"
+          :text="infoTextMessage"
+          borderColor="#ccc"
+          :size="fontSize ? fontSize : '16px'"
+          :alignText="infoTextAlign"
+        />
+      </label-wrapper>
+      <icon-container>
+        <input-container
+          :placeholder="placeholder"
+          :isError="isError"
+          :inputWidth="inputWidth"
+          :minWidth="minWidth"
+          :value="value"
+          @input="onChangeHandler"
+          :noBorder="noBorder"
+          :disabled="disabled"
+          :isDisabled="disabled"
+          :fontSize="fontSize"
+          :inputType="inputType"
+          :type="inputTypeData"
+        />
+        <icon-wrapper
+          v-if="inputType === 'password' && !isError"
+          @click="toggleShowPassword()"
+          size="20px"
+        >
+          <icon name="current_variant" size="20px" />
+        </icon-wrapper>
+        <icon-wrapper v-if="isError" size="16px">
+          <icon name="warning" size="16px" cursor="default" />
+        </icon-wrapper>
+      </icon-container>
+    </input-wrapper>
+  </container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
+import Icon from '../../icon'
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+`
+const InputErrorWrapper = styled.div`
+  display: inline-grid;
+  grid-template-row: auto auto;
+  grid-gap: 0px;
+  align-items: center;
+`
+const labelAttrs = { fontSize: String }
+const InputLabel = styled('div', labelAttrs)`
+  font-weight: bold;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+`
+
+const LabelWrapper = styled.div`
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-gap: 12px;
+  align-items: center;
+  justify-content: start;
+`
+
+const inputProps = {
+  isError: Boolean,
+  inputWidth: String,
+  minWidth: String,
+  noBorder: Boolean,
+  isDisabled: Boolean,
+  fontSize: String,
+  inputType: String
+}
+const InputContainer = styled('input', inputProps)`
+  border: ${(props) =>
+    props.isError
+      ? '1px solid ' + props.theme.colors.red
+      : props.noBorder
+      ? 'none'
+      : props.hasLength
+      ? '1px solid ' + props.theme.colors.black
+      : '1px solid ' + props.theme.colors.mediumGray};
+  padding: ${(props) =>
+    props.isError
+      ? '11px 25px 11px 10px'
+      : props.inputType === 'password'
+      ? '11px 25px 11px 10px'
+      : '11px 5px 11px 10px'};
+  border-radius: 4px;
+  position: relative;
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
+  color: ${(props) =>
+    props.isError ? props.theme.colors.red : props.theme.colors.black};
+  width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+  min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
+  box-sizing: border-box; // to allow width of 100% with padding
+  font-weight: 500;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+  background-color: ${(props) =>
+    props.isDisabled ? props.theme.colors.grey5 : '#fff'};
+
+  &::placeholder {
+    color: ${(props) =>
+      props.isError ? props.theme.colors.red : props.theme.colors.darkGray};
+  }
+
+  &: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.alignItems === 'vertical' || !props.hasLabel ? '1fr' : 'auto 1fr'};
+`
+
+const ErrorMessage = styled.div`
+  font-size: 14px;
+  color: ${(props) => props.theme.colors.red};
+  position: absolute;
+  top: calc(100% + 1px);
+`
+
+const IconAttrs = { size: String }
+const IconWrapper = styled('div', IconAttrs)`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  right: 5px;
+  height: ${(props) => (props.size ? props.size : 'auto')};
+`
+
+const IconContainer = styled.div`
+  position: relative;
+`
+
+export default {
+  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+  // To use:
+  // <input-text
+  //   placeholder="Company name"
+  //   :value="companyName"
+  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+  //   :isError="checkErrors()"
+  //   :errorMessage="This is my error message"
+  //   infoTextAlign="right" // left by default
+  //   infoTextMessage="My info message"
+  //   label="Question 5"
+  //   alignItems="horizontal" // horizontal, vertical
+  //   inputWidth="250px"
+  //   minWidth="100px"
+  //   fontSize="13px"
+  // />
+  name: 'input-text',
+  components: {
+    Container,
+    InputContainer,
+    InputWrapper,
+    ErrorMessage,
+    InfoText,
+    InputLabel,
+    InputErrorWrapper,
+    LabelWrapper,
+    Icon,
+    IconWrapper,
+    IconContainer
+  },
+  data() {
+    return {
+      inputTypeData: 'text'
+    }
+  },
+  props: {
+    placeholder: {
+      required: false,
+      default: ''
+    },
+    alignItems: {
+      required: false,
+      default: 'horizontal'
+    },
+    isError: {
+      required: false,
+      default: false
+    },
+    inputWidth: {
+      required: false,
+      default: null
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    value: {
+      required: true,
+      default: null
+    },
+    errorMessage: {
+      required: false,
+      default: ''
+    },
+    infoTextMessage: {
+      required: false
+    },
+    infoTextAlign: {
+      required: false
+    },
+    label: {
+      required: false
+    },
+    noBorder: {
+      required: false,
+      default: false
+    },
+    disabled: {
+      required: false,
+      default: false
+    },
+    fontSize: {
+      required: false,
+      default: null
+    },
+    inputType: {
+      required: false,
+      default: 'text'
+    }
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.$emit('input-change', $event)
+    },
+    toggleShowPassword() {
+      this.inputTypeData =
+        this.inputTypeData === 'password' ? 'text' : 'password'
+    }
+  },
+  created() {
+    this.inputTypeData = this.inputType
+  }
+}
+</script>

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -1,58 +1,58 @@
-import RadioButton from "./index.vue"
-
-export default {
-  title: "RadioButton",
-  component: RadioButton,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { RadioButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<radio-button v-bind="$props" />',
-
-  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
-  // To use:
-  // <radio-button
-  //     :options="radioOptions"
-  //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
-  //     size="large"
-  //   />
-  // Data being passed should look like:
-  // radioOptions: [
-  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
-  // { label: 'Button 4', value: 'button_4', disabled: true }
-  // ]
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  options: [
-    { label: "Button 1", value: "button_1", infoText: "my info text" },
-    { label: "Button 2", value: "button_2", infoText: "my info text 2" },
-    { label: "Button 3", value: "button_3", disabled: true },
-    { label: "Button 4", value: "button_4", disabled: true },
-  ],
-  selectedOption: "button_2",
-  layout: "horizontal",
-  size: "medium",
-}
-
-export const VerticalLayout = Template.bind({})
-VerticalLayout.args = {
-  options: [
-    { label: "Button 1", value: "button_1" },
-    { label: "Button 2", value: "button_2" },
-    { label: "Button 3", value: "button_3" },
-    { label: "Button 4", value: "button_4", disabled: true },
-  ],
-  selectedOption: "button_2",
-  layout: "vertical",
-  size: "medium",
-}
+import RadioButton from "./index.vue"
+
+export default {
+  title: "RadioButton",
+  component: RadioButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { RadioButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<radio-button v-bind="$props" />',
+
+  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+  // To use:
+  // <radio-button
+  //     :options="radioOptions"
+  //     :selectedOption="checkedOption"
+  //     @on-radio-change="onInputChange($event)"
+  //     layout="vertical"
+  //     size="large"
+  //   />
+  // Data being passed should look like:
+  // radioOptions: [
+  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
+  // { label: 'Button 4', value: 'button_4', disabled: true }
+  // ]
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  options: [
+    { label: "Button 1", value: "button_1", infoText: "my info text" },
+    { label: "Button 2", value: "button_2", infoText: "my info text 2" },
+    { label: "Button 3", value: "button_3", disabled: true },
+    { label: "Button 4", value: "button_4", disabled: true },
+  ],
+  selectedOption: "button_2",
+  layout: "horizontal",
+  size: "medium",
+}
+
+export const VerticalLayout = Template.bind({})
+VerticalLayout.args = {
+  options: [
+    { label: "Button 1", value: "button_1" },
+    { label: "Button 2", value: "button_2" },
+    { label: "Button 3", value: "button_3" },
+    { label: "Button 4", value: "button_4", disabled: true },
+  ],
+  selectedOption: "button_2",
+  layout: "vertical",
+  size: "medium",
+}