@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0-EPDM-10528.0

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

@@ -1,214 +1,224 @@
 <template>
-  <component-wrapper @click.stop>
-    <container
-      :checkColor="checkColor"
+  <ComponentWrapper @click.stop>
+    <Container
+      :background-color="backgroundColor"
+      :check-color="checkColor"
+      :cursor-type="cursorType"
+      :has-label="hasLabel"
+      :is-checked="isChecked"
+      :is-disabled="isDisabled"
       :size="size"
-      :hasLabel="label && !!label.length"
-      :backgroundColor="backgroundColor"
-      :isChecked="isChecked"
-      :isDisabled="isDisabled"
-      :cursorType="cursorType"
     >
-      <input-checkbox
-        type="checkbox"
+      <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
+        type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
-      <check-wrapper :hasLabel="hasLabel">
+      <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
-      </check-wrapper>
-      <label-text v-if="label && !!label.length">{{ label }}</label-text>
-    </container>
-  </component-wrapper>
+      </CheckWrapper>
+      <LabelText v-if="hasLabel">
+        {{ label }}
+      </LabelText>
+    </Container>
+  </ComponentWrapper>
 </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"
-//     cursorType="default"
-// />
-import styled from 'vue3-styled-components'
+  // 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"
+  //     cursorType="default"
+  // />
+  import styled from 'vue3-styled-components'
 
-const ComponentWrapper = styled.div`
-  min-height: 18px;
-`
+  const ComponentWrapper = styled.div`
+    min-height: 18px;
+  `
 
-const CheckWrapper = styled('div', { hasLabel: Boolean })`
-  ${(props) =>
-    props.hasLabel &&
-    `
+  const CheckWrapper = styled('div', { hasLabel: Boolean })`
+    ${(props) =>
+      props.hasLabel &&
+      `
     display: flex;
     align-items: center;
   `}
-`
+  `
 
-const containerAttrs = {
-  checkColor: String,
-  size: String,
-  hasLabel: Boolean,
-  backgroundColor: String,
-  isChecked: Boolean,
-  isDisabled: Boolean,
-  cursorType: String
-}
-const Container = styled('label', containerAttrs)`
-  display: grid;
-  grid-template-columns: ${(props) => (props.hasLabel ? '16px auto' : '16px')};
-  grid-gap: 16px;
-  align-content: center;
-  color: ${(props) => props.theme.colors.black};
-  position: relative;
-  cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
-  font-size: 16px;
-  user-select: none;
+  const containerAttrs = {
+    checkColor: String,
+    size: String,
+    hasLabel: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
+    isDisabled: Boolean,
+    cursorType: String,
+  }
+  const Container = styled('label', containerAttrs)`
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.hasLabel ? '16px auto' : '16px'};
+    grid-gap: 16px;
+    align-content: center;
+    color: ${(props) => props.theme.colors.black};
+    position: relative;
+    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursorType)};
+    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
-        : props.theme.colors.white};
-    border-radius: 4px;
-    border: 1px solid
-      ${(props) =>
+    .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.theme.colors.mediumGray};
+          : props.isDisabled
+          ? props.theme.colors.lightGray
+          : props.theme.colors.white};
+      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')};
+      &: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);
-  }
-`
+    .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 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;
-`
+  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,
-    CheckWrapper
-  },
-  props: {
-    label: {
-      required: false,
-      default: ''
-    },
-    isChecked: {
-      required: true,
-      default: false
-    },
-    checkColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: 'medium' // small, medium
+  export default {
+    name: 'Checkbox',
+    components: {
+      ComponentWrapper,
+      Container,
+      InputCheckbox,
+      LabelText,
+      CheckWrapper,
     },
-    backgroundColor: {
-      required: false
+    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,
+      },
+      dataId: {
+        type: String,
+        default: '',
+      },
+      cursorType: {
+        type: String,
+        default: 'pointer',
+      },
     },
-    isDisabled: {
-      required: false,
-      default: false
+    computed: {
+      hasLabel() {
+        return !!this.label && !!this.label.length
+      },
     },
-    dataId: {
-      type: String,
-      default: ''
+    methods: {
+      onChangeHandler(value) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('on-event-handler', value)
+      },
     },
-    cursorType: {
-      type: String,
-      default: 'pointer'
-    }
-  },
-  computed: {
-    hasLabel() {
-      return !!this.label.length
-    }
-  },
-  computed: {
-    hasLabel() {
-      return !!this.label.length
-    }
-  },
-  methods: {
-    onChangeHandler(value) {
-      if (this.isDisabled) {
-        return
-      }
-      this.$emit('on-event-handler', value)
-    }
   }
-}
 </script>

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

@@ -1,7 +1,7 @@
-import InputNumber from "./index.vue"
+import InputNumber from './index.vue'
 
 export default {
-  title: "InputNumber",
+  title: 'InputNumber',
   component: InputNumber,
   // argTypes: {},
 }
@@ -38,113 +38,113 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
-  value: "",
-  inputWidth: "200px",
-  minWidth: "150px",
-  unitName: "pc",
+  value: '',
+  inputWidth: '200px',
+  minWidth: '150px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 0,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
 }
 
 export const hasError = Template.bind({})
 hasError.args = {
-  placeholder: "Enter Value",
-  errorMessage: "This field is required",
+  placeholder: 'Enter Value',
+  errorMessage: 'This field is required',
   isError: true,
   disabled: false,
-  inputWidth: "200px",
+  inputWidth: '200px',
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: true,
-  value: "",
-  inputWidth: "200px",
+  value: '',
+  inputWidth: '200px',
   isError: false,
   numberPrecision: 0,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
 }
 
 export const LinearUnit = Template.bind({})
 LinearUnit.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
   value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
+  inputWidth: '200px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 2,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: true,
 }
 
 export const NormalUnit = Template.bind({})
 NormalUnit.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
   value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
+  inputWidth: '200px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 2,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
 }
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
   value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
+  inputWidth: '200px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 2,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
-  labelText: "Number Input",
+  labelText: 'Number Input',
 }
 
 export const WithLabelInfo = Template.bind({})
 WithLabelInfo.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
   value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
+  inputWidth: '200px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 2,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
-  labelText: "Number Input",
-  labelInfoText: "Here is some information for you...",
-  labelInfoAlign: "right",
+  labelText: 'Number Input',
+  labelInfoText: 'Here is some information for you...',
+  labelInfoAlign: 'right',
 }
 
 export const LargerFont = Template.bind({})
 LargerFont.args = {
-  placeholder: "Enter Value",
+  placeholder: 'Enter Value',
   disabled: false,
   value: 10,
-  inputWidth: "200px",
-  unitName: "pc",
+  inputWidth: '200px',
+  unitName: 'pc',
   isError: false,
   numberPrecision: 2,
   noBorder: false,
-  textAlign: "left",
+  textAlign: 'left',
   showLinearUnitName: false,
-  labelText: "Number Input",
-  fontSize: "16px",
+  labelText: 'Number Input',
+  fontSize: '16px',
 }