@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

package/src/components/inputs/checkbox/checkbox.spec.js

@@ -1,109 +1,109 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import Checkbox from '@/components/inputs/checkbox'
-import theme from '@/assets/theme'
-
-describe('Checkbox Component', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(Checkbox, {
-      props: {
-        isChecked: false,
-        label: 'Click me',
-        isDisabled: false,
-        dataId: 'checkbox_wrapper',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-  })
-  it('checkbox is rendered and emits correct payload on change', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isChecked).toBe(false)
-    expect(wrapper.vm.label).toBe('Click me')
-    expect(wrapper.vm.size).toBe('medium')
-    expect(wrapper.vm.isDisabled).toBe(false)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-event-handler')
-    // To inspect emitted events:
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([true])
-  })
-  it('disabled should not emit anything', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ isDisabled: true })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isDisabled).toBe(true)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvents = wrapper.emitted('on-event-handler')
-    // To inspect emitted events:
-    expect(emittedEvents).toBeUndefined() // No event should be emitted
-  })
-  it('checkbox can handle multiple clicks', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.isChecked).toBe(false)
-
-    // Test the change
-    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-event-handler')
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([true])
-    await wrapper.setProps({ isChecked: true }) // manually update the props
-
-    // test the 2nd click
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[1]).toEqual([false])
-    await wrapper.setProps({ isChecked: false }) // manually update the props
-
-    // test the 3rd click
-    await inputCheckbox.trigger('change')
-    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
-    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[2]).toEqual([true])
-    await wrapper.setProps({ isChecked: true }) // manually update the props
-  })
-  it('should have a custom background color', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ backgroundColor: theme.colors.red })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
-  })
-  it('should have a custom checkbox color', async () => {
-    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
-    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
-
-    // check that the element exists with correct props
-    expect(checkboxWrapper.exists()).toBe(true)
-    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
-  })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Checkbox from '@/components/inputs/checkbox'
+import theme from '@/assets/theme'
+
+describe('Checkbox Component', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Checkbox, {
+      props: {
+        isChecked: false,
+        label: 'Click me',
+        isDisabled: false,
+        dataId: 'checkbox_wrapper',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+  it('checkbox is rendered and emits correct payload on change', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+    expect(wrapper.vm.label).toBe('Click me')
+    expect(wrapper.vm.size).toBe('medium')
+    expect(wrapper.vm.isDisabled).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+  })
+  it('disabled should not emit anything', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ isDisabled: true })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isDisabled).toBe(true)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    // expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvents = wrapper.emitted('on-event-handler')
+    // To inspect emitted events:
+    expect(emittedEvents).toBeUndefined() // No event should be emitted
+  })
+  it('checkbox can handle multiple clicks', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.isChecked).toBe(false)
+
+    // Test the change
+    const inputCheckbox = checkboxWrapper.find('input[type="checkbox"]')
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-event-handler')
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+
+    // test the 2nd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(2) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[1]).toEqual([false])
+    await wrapper.setProps({ isChecked: false }) // manually update the props
+
+    // test the 3rd click
+    await inputCheckbox.trigger('change')
+    expect(wrapper.emitted('on-event-handler')).toBeTruthy()
+    expect(emittedEvent).toHaveLength(3) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[2]).toEqual([true])
+    await wrapper.setProps({ isChecked: true }) // manually update the props
+  })
+  it('should have a custom background color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ backgroundColor: theme.colors.red })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.backgroundColor).toBe(theme.colors.red)
+  })
+  it('should have a custom checkbox color', async () => {
+    const checkboxWrapper = wrapper.find('[data-test-id="checkbox_wrapper"]')
+    await wrapper.setProps({ checkColor: theme.colors.brightBlue })
+
+    // check that the element exists with correct props
+    expect(checkboxWrapper.exists()).toBe(true)
+    expect(wrapper.vm.checkColor).toBe(theme.colors.brightBlue)
+  })
+})

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

@@ -1,225 +1,225 @@
-<template>
-  <ComponentWrapper @click.stop>
-    <Container
-      :background-color="backgroundColor"
-      :check-color="checkColor"
-      :cursor-type="cursorType"
-      :data-test-id="dataId"
-      :has-label="hasLabel"
-      :is-checked="isChecked"
-      :is-disabled="isDisabled"
-      :size="size"
-    >
-      <InputCheckbox
-        :checked="isChecked"
-        :data-id="dataId"
-        type="checkbox"
-        @change="onChangeHandler(!isChecked)"
-      />
-      <CheckWrapper :has-label="hasLabel">
-        <span class="checkmark"></span>
-      </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'
-
-  const ComponentWrapper = styled.div`
-    min-height: 18px;
-  `
-
-  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;
-
-    .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) =>
-          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,
-      CheckWrapper,
-    },
-    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',
-      },
-    },
-    computed: {
-      hasLabel() {
-        return !!this.label && !!this.label.length
-      },
-    },
-    methods: {
-      onChangeHandler(value) {
-        if (this.isDisabled) {
-          return
-        }
-        this.$emit('on-event-handler', value)
-      },
-    },
-  }
-</script>
+<template>
+  <ComponentWrapper @click.stop>
+    <Container
+      :background-color="backgroundColor"
+      :check-color="checkColor"
+      :cursor-type="cursorType"
+      :data-test-id="dataId"
+      :has-label="hasLabel"
+      :is-checked="isChecked"
+      :is-disabled="isDisabled"
+      :size="size"
+    >
+      <InputCheckbox
+        :checked="isChecked"
+        :data-id="dataId"
+        type="checkbox"
+        @change="onChangeHandler(!isChecked)"
+      />
+      <CheckWrapper :has-label="hasLabel">
+        <span class="checkmark"></span>
+      </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'
+
+  const ComponentWrapper = styled.div`
+    min-height: 18px;
+  `
+
+  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;
+
+    .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) =>
+          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,
+      CheckWrapper,
+    },
+    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',
+      },
+    },
+    computed: {
+      hasLabel() {
+        return !!this.label && !!this.label.length
+      },
+    },
+    methods: {
+      onChangeHandler(value) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('on-event-handler', value)
+      },
+    },
+  }
+</script>