@eturnity/eturnity_reusable_components 1.2.25-EPDM-5202.2 → 1.2.26

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

@@ -1,182 +1,182 @@
-<template>
-  <component-wrapper>
-    <container
-      :checkColor="checkColor"
-      :size="size"
-      :hasLabel="!!label.length"
-      :backgroundColor="backgroundColor"
-      :isChecked="isChecked"
-      :isDisabled="isDisabled"
-    >
-      <input-checkbox
-        type="checkbox"
-        :checked="isChecked"
-        @change="onChangeHandler(!isChecked)"
-      />
-      <div>
-        <span class="checkmark"></span>
-      </div>
-      <label-text v-if="!!label.length">{{ label }}</label-text>
-    </container>
-  </component-wrapper>
-</template>
-
-<script>
-// import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
-//To use:
-// <checkbox
-//     label="Do you accept the Terms?"
-//     :isChecked="isChecked" //required
-//     @on-event-handler="onInputChange($event)" //required
-//     checkColor="blue"
-//     size="small"
-//     backgroundColor="red"
-//     :isDisabled="true"
-// />
-import styled from 'vue-styled-components'
-
-const ComponentWrapper = styled.div`
-  min-height: 18px;
-`
-
-const containerAttrs = {
-  checkColor: String,
-  size: String,
-  hasLabel: Boolean,
-  backgroundColor: String,
-  isChecked: Boolean,
-  isDisabled: Boolean
-}
-const Container = styled('label', containerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
-  grid-gap: 16px;
-  align-content: center;
-  color: ${(props) => props.theme.colors.black};
-  position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
-  font-size: 16px;
-  user-select: none;
-
-  .checkmark {
-    position: absolute;
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '25px'
-        : props.size === 'small'
-        ? '16px'
-        : '25px'};
-    width: ${(props) =>
-      props.size === 'medium'
-        ? '25px'
-        : props.size === 'small'
-        ? '16px'
-        : '25px'};
-    background-color: ${(props) =>
-      props.isChecked
-        ? props.backgroundColor
-          ? props.backgroundColor
-          : props.theme.colors.green
-        : props.isDisabled
-        ? props.theme.colors.lightGray
-        : '#fff'};
-    border-radius: 4px;
-    border: 1px solid
-      ${(props) =>
-        props.isChecked
-          ? props.backgroundColor
-            ? props.backgroundColor
-            : props.theme.colors.green
-          : props.theme.colors.mediumGray};
-
-    &:after {
-      content: '';
-      position: absolute;
-      display: ${(props) => (props.isChecked ? 'block' : 'none')};
-    }
-  }
-
-  .checkmark:after {
-    left: ${(props) =>
-      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
-    top: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
-    width: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
-    height: ${(props) =>
-      props.size === 'medium'
-        ? '10px'
-        : props.size === 'small'
-        ? '6px'
-        : '10px'};
-    border: solid
-      ${(props) =>
-        props.checkColor ? props.checkColor : props.theme.colors.white};
-    border-width: ${(props) =>
-      props.size === 'medium'
-        ? '0 3px 3px 0'
-        : props.size === 'small'
-        ? '0 2px 2px 0'
-        : '0 3px 3px 0'};
-    transform: rotate(45deg);
-  }
-`
-
-const InputCheckbox = styled.input`
-  cursor: pointer;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-`
-
-const LabelText = styled.div`
-  font-size: 13px;
-  display: grid;
-  align-items: flex-start;
-  min-height: 18px;
-`
-
-export default {
-  name: 'checkbox',
-  components: {
-    ComponentWrapper,
-    Container,
-    InputCheckbox,
-    LabelText
-  },
-  props: {
-    label: {
-      required: false,
-      default: ''
-    },
-    isChecked: {
-      required: true,
-      default: false
-    },
-    checkColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: 'medium' // small, medium
-    },
-    backgroundColor: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
-    }
-  },
-  methods: {
-    onChangeHandler(value) {
-      if (this.isDisabled) {
-        return
-      }
-      this.$emit('on-event-handler', value)
-    }
-  }
-}
-</script>
+<template>
+  <component-wrapper>
+    <container
+      :checkColor="checkColor"
+      :size="size"
+      :hasLabel="!!label.length"
+      :backgroundColor="backgroundColor"
+      :isChecked="isChecked"
+      :isDisabled="isDisabled"
+    >
+      <input-checkbox
+        type="checkbox"
+        :checked="isChecked"
+        @change="onChangeHandler(!isChecked)"
+      />
+      <div>
+        <span class="checkmark"></span>
+      </div>
+      <label-text v-if="!!label.length">{{ label }}</label-text>
+    </container>
+  </component-wrapper>
+</template>
+
+<script>
+// import Checkbox from "@eturnity/eturnity_reusable_components/src/components/inputs/checkbox"
+//To use:
+// <checkbox
+//     label="Do you accept the Terms?"
+//     :isChecked="isChecked" //required
+//     @on-event-handler="onInputChange($event)" //required
+//     checkColor="blue"
+//     size="small"
+//     backgroundColor="red"
+//     :isDisabled="true"
+// />
+import styled from 'vue-styled-components'
+
+const ComponentWrapper = styled.div`
+  min-height: 18px;
+`
+
+const containerAttrs = {
+  checkColor: String,
+  size: String,
+  hasLabel: Boolean,
+  backgroundColor: String,
+  isChecked: Boolean,
+  isDisabled: Boolean
+}
+const Container = styled('label', containerAttrs)`
+  display: grid;
+  grid-template-columns: ${(props) => (props.hasLabel ? '18px auto' : '18px')};
+  grid-gap: 16px;
+  align-content: center;
+  color: ${(props) => props.theme.colors.black};
+  position: relative;
+  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
+  font-size: 16px;
+  user-select: none;
+
+  .checkmark {
+    position: absolute;
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
+    width: ${(props) =>
+      props.size === 'medium'
+        ? '25px'
+        : props.size === 'small'
+        ? '16px'
+        : '25px'};
+    background-color: ${(props) =>
+      props.isChecked
+        ? props.backgroundColor
+          ? props.backgroundColor
+          : props.theme.colors.green
+        : props.isDisabled
+        ? props.theme.colors.lightGray
+        : '#fff'};
+    border-radius: 4px;
+    border: 1px solid
+      ${(props) =>
+        props.isChecked
+          ? props.backgroundColor
+            ? props.backgroundColor
+            : props.theme.colors.green
+          : props.theme.colors.mediumGray};
+
+    &:after {
+      content: '';
+      position: absolute;
+      display: ${(props) => (props.isChecked ? 'block' : 'none')};
+    }
+  }
+
+  .checkmark:after {
+    left: ${(props) =>
+      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
+    top: ${(props) =>
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+    width: ${(props) =>
+      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
+    height: ${(props) =>
+      props.size === 'medium'
+        ? '10px'
+        : props.size === 'small'
+        ? '6px'
+        : '10px'};
+    border: solid
+      ${(props) =>
+        props.checkColor ? props.checkColor : props.theme.colors.white};
+    border-width: ${(props) =>
+      props.size === 'medium'
+        ? '0 3px 3px 0'
+        : props.size === 'small'
+        ? '0 2px 2px 0'
+        : '0 3px 3px 0'};
+    transform: rotate(45deg);
+  }
+`
+
+const InputCheckbox = styled.input`
+  cursor: pointer;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+`
+
+const LabelText = styled.div`
+  font-size: 13px;
+  display: grid;
+  align-items: flex-start;
+  min-height: 18px;
+`
+
+export default {
+  name: 'checkbox',
+  components: {
+    ComponentWrapper,
+    Container,
+    InputCheckbox,
+    LabelText
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
+    },
+    isChecked: {
+      required: true,
+      default: false
+    },
+    checkColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: 'medium' // small, medium
+    },
+    backgroundColor: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    onChangeHandler(value) {
+      if (this.isDisabled) {
+        return
+      }
+      this.$emit('on-event-handler', value)
+    }
+  }
+}
+</script>

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -1,150 +1,150 @@
-import InputNumber from "./index.vue"
-
-export default {
-  title: "InputNumber",
-  component: InputNumber,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { InputNumber },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-number v-bind="$props" />',
-
-  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
-  // How to use:
-  // <input-number
-  //     placeholder="Enter distance"
-  //     :isError="false" //default is false
-  //     inputWidth="150px" //by default, this is 100%
-  //     :numberPrecision="3"
-  //     unitName="pc"
-  //     :value="inputValue" //required -- String
-  //     @input-change="onInputChange($event)" //required
-  //     @on-enter-click="onInputSubmit()"
-  //     :errorMessage="Enter a number between 1 and 10"
-  //     :disabled="false"
-  //     :noBorder="true"
-  //     textAlign="left" // "left, right, center"
-  //     :showLinearUnitName="true"
-  //     fontSize="13px"
-  //     labelText="Number of Modules"
-  //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: "",
-  inputWidth: "200px",
-  minWidth: "150px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 0,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-}
-
-export const hasError = Template.bind({})
-hasError.args = {
-  placeholder: "Enter Value",
-  errorMessage: "This field is required",
-  isError: true,
-  disabled: false,
-  inputWidth: "200px",
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: "Enter Value",
-  disabled: true,
-  value: "",
-  inputWidth: "200px",
-  isError: false,
-  numberPrecision: 0,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-}
-
-export const LinearUnit = Template.bind({})
-LinearUnit.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: true,
-}
-
-export const NormalUnit = Template.bind({})
-NormalUnit.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-}
-
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-  labelText: "Number Input",
-}
-
-export const WithLabelInfo = Template.bind({})
-WithLabelInfo.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-  labelText: "Number Input",
-  labelInfoText: "Here is some information for you...",
-  labelInfoAlign: "right",
-}
-
-export const LargerFont = Template.bind({})
-LargerFont.args = {
-  placeholder: "Enter Value",
-  disabled: false,
-  value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
-  isError: false,
-  numberPrecision: 2,
-  noBorder: false,
-  textAlign: "left",
-  showLinearUnitName: false,
-  labelText: "Number Input",
-  fontSize: "16px",
-}
+import InputNumber from "./index.vue"
+
+export default {
+  title: "InputNumber",
+  component: InputNumber,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { InputNumber },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<input-number v-bind="$props" />',
+
+  // import InputNumber from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumber"
+  // How to use:
+  // <input-number
+  //     placeholder="Enter distance"
+  //     :isError="false" //default is false
+  //     inputWidth="150px" //by default, this is 100%
+  //     :numberPrecision="3"
+  //     unitName="pc"
+  //     :value="inputValue" //required -- String
+  //     @input-change="onInputChange($event)" //required
+  //     @on-enter-click="onInputSubmit()"
+  //     :errorMessage="Enter a number between 1 and 10"
+  //     :disabled="false"
+  //     :noBorder="true"
+  //     textAlign="left" // "left, right, center"
+  //     :showLinearUnitName="true"
+  //     fontSize="13px"
+  //     labelText="Number of Modules"
+  //     labelInfoText="Here is some information for you..."
+  //     labelInfoAlign="left"
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: "",
+  inputWidth: "200px",
+  minWidth: "150px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: "Enter Value",
+  errorMessage: "This field is required",
+  isError: true,
+  disabled: false,
+  inputWidth: "200px",
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: "Enter Value",
+  disabled: true,
+  value: "",
+  inputWidth: "200px",
+  isError: false,
+  numberPrecision: 0,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const LinearUnit = Template.bind({})
+LinearUnit.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: true,
+}
+
+export const NormalUnit = Template.bind({})
+NormalUnit.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+}
+
+export const WithLabelInfo = Template.bind({})
+WithLabelInfo.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+  labelInfoText: "Here is some information for you...",
+  labelInfoAlign: "right",
+}
+
+export const LargerFont = Template.bind({})
+LargerFont.args = {
+  placeholder: "Enter Value",
+  disabled: false,
+  value: 10,
+  inputWidth: "200px",
+  unitName: "pc",
+  isError: false,
+  numberPrecision: 2,
+  noBorder: false,
+  textAlign: "left",
+  showLinearUnitName: false,
+  labelText: "Number Input",
+  fontSize: "16px",
+}