@eturnity/eturnity_reusable_components 8.7.5 → 8.10.0

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

@@ -1,102 +1,102 @@
-/* eslint-disable */
-import { mount } from '@vue/test-utils'
-import RCToggle from '@/components/inputs/toggle'
-import theme from '@/assets/theme'
-
-jest.mock('@/components/icon/iconCache.mjs', () => ({
-  // need to mock this due to how jest handles import.meta
-  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
-}))
-
-describe('RCToggle.vue', () => {
-  it('toggle is rendered and emits correct payload on change', async () => {
-    const wrapper = mount(RCToggle, {
-      props: { isChecked: true, label: 'Test label', disabled: false },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
-
-    // check that the element exists
-    expect(toggleWrapper.exists()).toBe(true)
-    expect(toggleWrapper.attributes('checked')).toBe('true')
-
-    // Log attributes to see what is rendered (commented out just for reference)
-    // console.log('attributes', toggleWrapper.attributes())
-    // console.log('All of the Toggles' attributes', wrapper.vm)
-
-    // Test the label
-    expect(wrapper.text()).toContain('Test label')
-
-    // Test the click
-    const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
-    await pageWrapper.trigger('click')
-    expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
-    const emittedEvent = wrapper.emitted('on-toggle-change')
-    // To inspect emitted events:
-    // console.log('Emitted events', wrapper.emitted())
-    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
-    // Check the payload of the event
-    expect(emittedEvent[0]).toEqual([false])
-  }),
-    it('toggle disabled does not emit anything', async () => {
-      const wrapper = mount(RCToggle, {
-        props: { isChecked: false, disabled: true },
-        global: {
-          provide: {
-            theme,
-          },
-        },
-      })
-      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
-      expect(toggleWrapper.attributes('checked')).toBe('false')
-
-      // Test the click
-      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
-      await pageWrapper.trigger('click')
-
-      // Inspect emitted events
-      const emittedEvents = wrapper.emitted('on-toggle-change')
-
-      // Verify that no events were emitted
-      expect(emittedEvents).toBeUndefined() // No event should be emitted
-    }),
-    it('should toggle back and forth on multiple clicks', async () => {
-      const wrapper = mount(RCToggle, {
-        props: { isChecked: false, disabled: false },
-        global: {
-          provide: {
-            theme,
-          },
-        },
-      })
-      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
-      // Initial state
-      expect(toggleWrapper.attributes('checked')).toBe('false')
-
-      // Trigger click and check events
-      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
-      await pageWrapper.trigger('click')
-      let emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
-      expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
-      expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
-      await wrapper.setProps({ isChecked: true }) // manually update the props
-
-      // Trigger click again and check events
-      await pageWrapper.trigger('click')
-      emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
-      expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
-      await wrapper.setProps({ isChecked: false }) // manually update the props
-
-      // Trigger click again and check events
-      await pageWrapper.trigger('click')
-      emittedEvent = wrapper.emitted('on-toggle-change')
-      expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
-      expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
-    })
-})
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import RCToggle from '@/components/inputs/toggle'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('RCToggle.vue', () => {
+  it('toggle is rendered and emits correct payload on change', async () => {
+    const wrapper = mount(RCToggle, {
+      props: { isChecked: true, label: 'Test label', disabled: false },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+
+    // check that the element exists
+    expect(toggleWrapper.exists()).toBe(true)
+    expect(toggleWrapper.attributes('checked')).toBe('true')
+
+    // Log attributes to see what is rendered (commented out just for reference)
+    // console.log('attributes', toggleWrapper.attributes())
+    // console.log('All of the Toggles' attributes', wrapper.vm)
+
+    // Test the label
+    expect(wrapper.text()).toContain('Test label')
+
+    // Test the click
+    const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+    await pageWrapper.trigger('click')
+    expect(wrapper.emitted('on-toggle-change')).toBeTruthy()
+    const emittedEvent = wrapper.emitted('on-toggle-change')
+    // To inspect emitted events:
+    // console.log('Emitted events', wrapper.emitted())
+    expect(emittedEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvent[0]).toEqual([false])
+  }),
+    it('toggle disabled does not emit anything', async () => {
+      const wrapper = mount(RCToggle, {
+        props: { isChecked: false, disabled: true },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+      expect(toggleWrapper.attributes('checked')).toBe('false')
+
+      // Test the click
+      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+      await pageWrapper.trigger('click')
+
+      // Inspect emitted events
+      const emittedEvents = wrapper.emitted('on-toggle-change')
+
+      // Verify that no events were emitted
+      expect(emittedEvents).toBeUndefined() // No event should be emitted
+    }),
+    it('should toggle back and forth on multiple clicks', async () => {
+      const wrapper = mount(RCToggle, {
+        props: { isChecked: false, disabled: false },
+        global: {
+          provide: {
+            theme,
+          },
+        },
+      })
+      const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+      // Initial state
+      expect(toggleWrapper.attributes('checked')).toBe('false')
+
+      // Trigger click and check events
+      const pageWrapper = wrapper.find('[data-test-id="page_wrapper"]')
+      await pageWrapper.trigger('click')
+      let emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toBeTruthy() // Ensure that the event was emitted
+      expect(emittedEvent).toHaveLength(1) // Ensure that only one event was emitted
+      expect(emittedEvent[0]).toEqual([true]) // Check the payload of the first click
+      await wrapper.setProps({ isChecked: true }) // manually update the props
+
+      // Trigger click again and check events
+      await pageWrapper.trigger('click')
+      emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toHaveLength(2) // Ensure that the event count has increased
+      expect(emittedEvent[1]).toEqual([false]) // Check the payload of the second click
+      await wrapper.setProps({ isChecked: false }) // manually update the props
+
+      // Trigger click again and check events
+      await pageWrapper.trigger('click')
+      emittedEvent = wrapper.emitted('on-toggle-change')
+      expect(emittedEvent).toHaveLength(3) // Ensure that the event count has increased
+      expect(emittedEvent[2]).toEqual([true]) // Check the payload of the third click
+    })
+})

package/src/components/label/index.vue

@@ -1,98 +1,98 @@
-<template>
-  <LabelWrapper :label-align="labelAlign">
-    <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
-      <slot></slot>
-      <OptionalLabel v-if="labelOptional">
-        ({{ $gettext('Optional') }})
-      </OptionalLabel>
-    </InputLabel>
-    <InfoText
-      v-if="infoTextMessage"
-      :align-arrow="infoTextAlign"
-      :size="fontSize ? fontSize : '14px'"
-      :text="infoTextMessage"
-    />
-  </LabelWrapper>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import InfoText from '../infoText'
-
-  const labelAttrs = { fontSize: String, labelFontColor: String }
-  const InputLabel = styled('div', labelAttrs)`
-    color: ${(props) =>
-      props.theme.colors[props.labelFontColor]
-        ? props.theme.colors[props.labelFontColor]
-        : props.labelFontColor
-        ? props.labelFontColor
-        : props.theme.colors.eturnityGrey};
-
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
-    font-weight: 700;
-  `
-  const OptionalLabel = styled.span`
-    font-weight: 300;
-  `
-
-  const LabelWrapper = styled('div', { labelAlign: String })`
-    ${(props) =>
-      props.labelAlign == 'horizontal'
-        ? 'display: inline-grid;'
-        : 'display: grid;'}
-    ${(props) =>
-      props.labelAlign == 'horizontal'
-        ? 'margin-right: 10px;'
-        : 'margin-bottom: 8px;'}
-  vertical-align: center;
-    grid-template-columns: auto auto;
-    grid-gap: 12px;
-    align-items: center;
-    justify-content: start;
-  `
-  export default {
-    // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
-    // To use:
-    // <label-text
-    //   infoTextAlign="right" // left by default
-    //   infoTextMessage="My info message"
-    //   label="Question 5"
-    // />
-    name: 'InputText',
-    components: {
-      InfoText,
-      InputLabel,
-      LabelWrapper,
-      OptionalLabel,
-    },
-    props: {
-      infoTextMessage: {
-        required: false,
-      },
-      infoTextAlign: {
-        required: false,
-      },
-      labelOptional: {
-        required: false,
-        default: false,
-      },
-      fontSize: {
-        required: false,
-        default: null,
-      },
-      labelFontColor: {
-        required: false,
-        default: 'black',
-      },
-      labelAlign: {
-        required: false,
-        default: 'vertical',
-      },
-    },
-    data() {
-      return {
-        inputTypeData: 'text',
-      }
-    },
-  }
-</script>
+<template>
+  <LabelWrapper :label-align="labelAlign">
+    <InputLabel :font-size="fontSize" :label-font-color="labelFontColor">
+      <slot></slot>
+      <OptionalLabel v-if="labelOptional">
+        ({{ $gettext('Optional') }})
+      </OptionalLabel>
+    </InputLabel>
+    <InfoText
+      v-if="infoTextMessage"
+      :align-arrow="infoTextAlign"
+      :size="fontSize ? fontSize : '14px'"
+      :text="infoTextMessage"
+    />
+  </LabelWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import InfoText from '../infoText'
+
+  const labelAttrs = { fontSize: String, labelFontColor: String }
+  const InputLabel = styled('div', labelAttrs)`
+    color: ${(props) =>
+      props.theme.colors[props.labelFontColor]
+        ? props.theme.colors[props.labelFontColor]
+        : props.labelFontColor
+        ? props.labelFontColor
+        : props.theme.colors.eturnityGrey};
+
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
+    font-weight: 700;
+  `
+  const OptionalLabel = styled.span`
+    font-weight: 300;
+  `
+
+  const LabelWrapper = styled('div', { labelAlign: String })`
+    ${(props) =>
+      props.labelAlign == 'horizontal'
+        ? 'display: inline-grid;'
+        : 'display: grid;'}
+    ${(props) =>
+      props.labelAlign == 'horizontal'
+        ? 'margin-right: 10px;'
+        : 'margin-bottom: 8px;'}
+  vertical-align: center;
+    grid-template-columns: auto auto;
+    grid-gap: 12px;
+    align-items: center;
+    justify-content: start;
+  `
+  export default {
+    // import labelText from "@eturnity/eturnity_reusable_components/src/components/label"
+    // To use:
+    // <label-text
+    //   infoTextAlign="right" // left by default
+    //   infoTextMessage="My info message"
+    //   label="Question 5"
+    // />
+    name: 'InputText',
+    components: {
+      InfoText,
+      InputLabel,
+      LabelWrapper,
+      OptionalLabel,
+    },
+    props: {
+      infoTextMessage: {
+        required: false,
+      },
+      infoTextAlign: {
+        required: false,
+      },
+      labelOptional: {
+        required: false,
+        default: false,
+      },
+      fontSize: {
+        required: false,
+        default: null,
+      },
+      labelFontColor: {
+        required: false,
+        default: 'black',
+      },
+      labelAlign: {
+        required: false,
+        default: 'vertical',
+      },
+    },
+    data() {
+      return {
+        inputTypeData: 'text',
+      }
+    },
+  }
+</script>

package/src/components/markerItem/index.vue

@@ -1,95 +1,95 @@
-<template>
-  <PageContainer>
-    <MarkerContainer
-      :background-color="backgroundColor"
-      :cursor="cursor"
-      :has-icon="!!iconName"
-    >
-      <Icon
-        v-if="!!iconName"
-        color="white"
-        :cursor="cursor"
-        :name="iconName"
-        size="10px"
-      />
-      <span :title="label">{{ label }}</span>
-    </MarkerContainer>
-  </PageContainer>
-</template>
-
-<script>
-  // import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
-  // To use:
-  // <marker-item
-  //   label="Label"
-  //   backgroundColor="#ab5348"
-  //   iconName="icon_name"
-  //   cursor="pointer"
-  // />
-
-  import styled from 'vue3-styled-components'
-  import Icon from '../icon'
-
-  const PageContainer = styled.div`
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    line-height: 14px;
-  `
-
-  const MarkerAttrs = {
-    backgroundColor: String,
-    hasIcon: Boolean,
-    cursor: String,
-  }
-  const MarkerContainer = styled('div', MarkerAttrs)`
-    display: grid;
-    grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
-    grid-gap: 5px;
-    position: relative;
-    align-items: center;
-    padding: 2px 7px;
-    color: ${(props) => props.theme.colors.white};
-    background-color: ${(props) =>
-      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-    border: 1px solid
-      ${(props) =>
-        props.backgroundColor
-          ? props.backgroundColor
-          : props.theme.colors.grey3};
-    border-radius: 4px;
-    white-space: nowrap;
-    cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  `
-
-  export default {
-    name: 'ProjectMarker',
-    components: {
-      PageContainer,
-      MarkerContainer,
-      Icon,
-    },
-    props: {
-      backgroundColor: {
-        required: false,
-      },
-      iconName: {
-        required: false,
-      },
-      label: {
-        required: true,
-      },
-      cursor: {
-        required: false,
-        default: 'default',
-      },
-    },
-  }
-</script>
+<template>
+  <PageContainer>
+    <MarkerContainer
+      :background-color="backgroundColor"
+      :cursor="cursor"
+      :has-icon="!!iconName"
+    >
+      <Icon
+        v-if="!!iconName"
+        color="white"
+        :cursor="cursor"
+        :name="iconName"
+        size="10px"
+      />
+      <span :title="label">{{ label }}</span>
+    </MarkerContainer>
+  </PageContainer>
+</template>
+
+<script>
+  // import MarkerItem from "@eturnity/eturnity_reusable_components/src/components/markerItem"
+  // To use:
+  // <marker-item
+  //   label="Label"
+  //   backgroundColor="#ab5348"
+  //   iconName="icon_name"
+  //   cursor="pointer"
+  // />
+
+  import styled from 'vue3-styled-components'
+  import Icon from '../icon'
+
+  const PageContainer = styled.div`
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 14px;
+  `
+
+  const MarkerAttrs = {
+    backgroundColor: String,
+    hasIcon: Boolean,
+    cursor: String,
+  }
+  const MarkerContainer = styled('div', MarkerAttrs)`
+    display: grid;
+    grid-template-columns: ${(props) => (props.hasIcon ? 'auto 1fr' : '1fr')};
+    grid-gap: 5px;
+    position: relative;
+    align-items: center;
+    padding: 2px 7px;
+    color: ${(props) => props.theme.colors.white};
+    background-color: ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+    border: 1px solid
+      ${(props) =>
+        props.backgroundColor
+          ? props.backgroundColor
+          : props.theme.colors.grey3};
+    border-radius: 4px;
+    white-space: nowrap;
+    cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `
+
+  export default {
+    name: 'ProjectMarker',
+    components: {
+      PageContainer,
+      MarkerContainer,
+      Icon,
+    },
+    props: {
+      backgroundColor: {
+        required: false,
+      },
+      iconName: {
+        required: false,
+      },
+      label: {
+        required: true,
+      },
+      cursor: {
+        required: false,
+        default: 'default',
+      },
+    },
+  }
+</script>