@eturnity/eturnity_reusable_components 1.2.19-EPDM-5295.1 → 1.2.19-EPDM-3412.9

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

@@ -1,198 +1,200 @@
-<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>
-      <input-container
-        :placeholder="placeholder"
-        :isError="isError"
-        :inputWidth="inputWidth"
-        :minWidth="minWidth"
-        :value="value"
-        @input="onChangeHandler"
-        :noBorder="noBorder"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :fontSize="fontSize"
-      />
-    </input-wrapper>
-    <error-message v-if="isError">{{ errorMessage }}</error-message>
-  </container>
-</template>
-
-<script>
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
-
-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 1fr;
-  grid-gap: 12px;
-  align-items: center;
-`
-
-const inputProps = {
-  isError: Boolean,
-  inputWidth: String,
-  minWidth: String,
-  noBorder: Boolean,
-  isDisabled: Boolean,
-  fontSize: 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.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
-  border-radius: 4px;
-  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);
-`
-
-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,
-  },
-  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,
-    },
-  },
-  methods: {
-    onChangeHandler($event) {
-      this.$emit("input-change", $event)
-    },
-  },
-}
-</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>
+      <input-error-wrapper>
+      <input-container
+        :placeholder="placeholder"
+        :isError="isError"
+        :inputWidth="inputWidth"
+        :minWidth="minWidth"
+        :value="value"
+        @input="onChangeHandler"
+        :noBorder="noBorder"
+        :disabled="disabled"
+        :isDisabled="disabled"
+        :fontSize="fontSize"
+      />
+      <error-message v-if="isError">{{ errorMessage }}</error-message>
+      </input-error-wrapper>
+    </input-wrapper>
+  </container>
+</template>
+
+<script>
+import styled from "vue-styled-components"
+import InfoText from "../../infoText"
+import ErrorMessage from '../../errorMessage'
+
+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 1fr;
+  grid-gap: 12px;
+  align-items: center;
+`
+
+const inputProps = {
+  isError: Boolean,
+  inputWidth: String,
+  minWidth: String,
+  noBorder: Boolean,
+  isDisabled: Boolean,
+  fontSize: 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.hasUnit ? "11px 40px 11px 10px" : "11px 5px 11px 10px"};
+  border-radius: 4px;
+  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"};
+`
+
+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,
+  },
+  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,
+    },
+  },
+  methods: {
+    onChangeHandler($event) {
+      this.$emit("input-change", $event)
+    },
+  },
+}
+</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",
+}