@eturnity/eturnity_reusable_components 9.28.0 → 9.28.2

package/src/components/inputs/inputNumberQuestion/inputNumberQuestion.stories.js

@@ -1,6 +1,18 @@
 import { ref } from 'vue'
 import InputNumberQuestion from './index.vue'
-import theme from '@/assets/theme'
+
+// import InputNumberQuestion from "@eturnity/eturnity_reusable_components/src/components/inputs/inputNumberQuestion"
+// How to use:
+// <input-number-question
+//   :question="question"        // required — { number_format_precision, number_min_allowed, number_max_allowed, unit_short_name }
+//   :value="inputValue"         // required
+//   placeholder="Enter distance"
+//   inputWidth="150px"          // default 100%
+//   :isError="false"
+//   errorMessage="Enter a number between 1 and 10"
+//   @input-change="onInputChange($event)"
+//   @on-enter-click="onInputSubmit()"
+// />
 
 const questionWithUnit = {
   number_format_precision: 2,
@@ -23,6 +35,22 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  argTypes: {
+    question: {
+      description:
+        'Required. Drives formatting: number_format_precision, ' +
+        'number_min_allowed, number_max_allowed, unit_short_name.',
+    },
+    value: { description: 'Current value (required). String or number.' },
+    placeholder: { description: 'Placeholder shown when empty' },
+    inputWidth: { description: 'Width of the input, defaults to 100%' },
+    isError: { description: 'Error state styling', control: 'boolean' },
+    errorMessage: { description: 'Message shown while isError is true' },
+    clearInput: {
+      description: 'When flipped to true, clears the displayed text',
+      control: 'boolean',
+    },
+  },
 }
 
 const Template = (args) => ({
@@ -32,21 +60,14 @@ const Template = (args) => ({
     return { args, val }
   },
   template: `
-    <div data-test-id="input-number-question-story" style="min-width: 280px; padding: 16px;">
+    <div style="min-width: 280px; padding: 16px;">
       <InputNumberQuestion
-        :question="args.question"
+        v-bind="args"
         :value="val"
-        :placeholder="args.placeholder"
-        :is-error="args.isError"
-        :input-width="args.inputWidth"
-        :error-message="args.errorMessage"
         @input-change="val = $event"
       />
     </div>
   `,
-  provide: {
-    theme,
-  },
 })
 
 export const WithUnit = Template.bind({})

package/src/components/inputs/toggle/Toggle.stories.js

@@ -1,77 +1,116 @@
+import { ref } from 'vue'
 import Toggle from './index.vue'
+import theme from '@/assets/theme'
+
+// import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
+// To use:
+// <toggle
+//   @on-toggle-change="onInputChange($event)"
+//   :isChecked="toggleValue" // Boolean
+//   label="My Label Text"
+//   toggleColor="red"
+//   size="small" // small, medium
+//   backgroundColor="blue"
+//   labelAlign="right"
+//   fontColor="black"
+//   :disabled="true"
+//   infoTextMessage="My info message"
+// />
 
 export default {
   title: 'Components/Inputs/Toggle',
   component: Toggle,
-  // argTypes: {},
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isChecked: { control: 'boolean' },
+    label: { control: 'text' },
+    size: { control: 'select', options: ['small', 'medium'] },
+    labelAlign: { control: 'select', options: ['left', 'right'] },
+    toggleColor: { control: 'color' },
+    backgroundColor: { control: 'color' },
+    fontColor: { control: 'color' },
+    disabled: { control: 'boolean' },
+    isRequiredLabel: { control: 'boolean' },
+    infoTextMessage: { control: 'text' },
+  },
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { Toggle },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<toggle v-bind="$props" />',
-
-  // import Toggle from "@eturnity/eturnity_reusable_components/src/components/inputs/toggle"
-  //To use:
-  // <toggle
-  //   @on-toggle-change="onInputChange($event)"
-  //   :isChecked="toggleValue" // Boolean
-  //   label="My Label Text"
-  //   toggleColor="red"
-  //   size="small" // small, medium
-  //   backgroundColor="blue"
-  //   labelAlign="right"
-  //   fontColor="black"
-  //   :disabled="true"
-  // />
+  setup() {
+    const isChecked = ref(args.isChecked)
+    return { args, isChecked }
+  },
+  template: `
+    <div data-test-id="toggle-story" style="padding: 16px; min-width: 240px;">
+      <Toggle
+        v-bind="args"
+        :isChecked="isChecked"
+        @on-toggle-change="isChecked = $event"
+      />
+      <p style="margin-top: 12px; font-size: 12px; color: #666;">isChecked: {{ isChecked }}</p>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
 })
 
 export const Default = Template.bind({})
 Default.args = {
   isChecked: true,
-  size: 'small', // "small" or "medium"
+  size: 'small',
   disabled: false,
 }
 
 export const Medium = Template.bind({})
 Medium.args = {
-  isChecked: true,
-  size: 'medium', // "small" or "medium"
-  disabled: false,
+  ...Default.args,
+  size: 'medium',
 }
 
 export const CustomColor = Template.bind({})
 CustomColor.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
-  disabled: false,
+  ...Default.args,
   toggleColor: 'red',
   backgroundColor: 'blue',
 }
 
 export const LabelLeft = Template.bind({})
 LabelLeft.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
+  ...Default.args,
   label: 'My Label Text',
-  disabled: false,
   labelAlign: 'left',
 }
 
 export const LabelRight = Template.bind({})
 LabelRight.args = {
-  isChecked: true,
-  size: 'small', // "small" or "medium"
+  ...Default.args,
   label: 'My Label Text',
-  disabled: false,
   labelAlign: 'right',
 }
 
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  ...Default.args,
+  label: 'My Label Text',
+  infoTextMessage: 'Applies to this location only.',
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  ...Default.args,
+  label: 'My Label Text',
+  labelAlign: 'left',
+  isRequiredLabel: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
+  ...Default.args,
   isChecked: false,
-  size: 'small', // "small" or "medium"
   disabled: true,
 }

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

@@ -1,102 +1,141 @@
 /* eslint-disable */
 import { mount } from '@vue/test-utils'
 import RCToggle from '@/components/inputs/toggle'
-import theme from '@/assets/theme'
+
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them. See the canonical example at
+// src/components/buttons/closeButton/closeButton.spec.js.
 
 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"]')
+describe('RCToggle', () => {
+  const mountToggle = (props = {}) =>
+    mount(RCToggle, { props: { isChecked: false, ...props } })
 
-    // check that the element exists
+  it('renders the toggle and reflects the checked state', () => {
+    const wrapper = mountToggle({ isChecked: true })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
     expect(toggleWrapper.exists()).toBe(true)
     expect(toggleWrapper.attributes('checked')).toBe('true')
+  })
+
+  it('reflects the unchecked state', () => {
+    const wrapper = mountToggle({ isChecked: false })
+    const toggleWrapper = wrapper.find('[data-test-id="toggle_wrapper"]')
+    expect(toggleWrapper.attributes('checked')).toBe('false')
+  })
 
-    // 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)
+  it('emits on-toggle-change with the negated value when clicked', async () => {
+    const wrapper = mountToggle({ isChecked: true })
+    await wrapper.find('[data-test-id="page_wrapper"]').trigger('click')
 
-    // Test the label
-    expect(wrapper.text()).toContain('Test label')
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([false])
+  })
 
-    // Test the click
+  it('emits on-toggle-change when the space key is pressed', async () => {
+    const wrapper = mountToggle({ isChecked: false })
+    await wrapper
+      .find('[data-test-id="toggle_wrapper"]')
+      .trigger('keydown.space')
+
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(1)
+    expect(emitted[0]).toEqual([true])
+  })
+
+  it('does not emit when disabled and clicked', async () => {
+    const wrapper = mountToggle({ isChecked: false, disabled: true })
+    await wrapper.find('[data-test-id="page_wrapper"]').trigger('click')
+
+    expect(wrapper.emitted('on-toggle-change')).toBeUndefined()
+  })
+
+  it('toggles back and forth across successive clicks', async () => {
+    const wrapper = mountToggle({ isChecked: false })
     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,
-          },
-        },
+    await wrapper.setProps({ isChecked: true })
+    await pageWrapper.trigger('click')
+    await wrapper.setProps({ isChecked: false })
+    await pageWrapper.trigger('click')
+
+    const emitted = wrapper.emitted('on-toggle-change')
+    expect(emitted).toHaveLength(3)
+    expect(emitted[0]).toEqual([true])
+    expect(emitted[1]).toEqual([false])
+    expect(emitted[2]).toEqual([true])
+  })
+
+  it('renders no label container when no label is provided', () => {
+    const wrapper = mountToggle()
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the label on the right by default', () => {
+    const wrapper = mountToggle({ label: 'My Label' })
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      false
+    )
+    expect(wrapper.text()).toContain('My Label')
+  })
+
+  it('renders the label on the left when labelAlign is "left"', () => {
+    const wrapper = mountToggle({ label: 'My Label', labelAlign: 'left' })
+    expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      false
+    )
+  })
+
+  it('renders the info text only when infoTextMessage is provided', () => {
+    expect(
+      mountToggle({ label: 'My Label', labelAlign: 'left' })
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(false)
+
+    expect(
+      mountToggle({
+        label: 'My Label',
+        labelAlign: 'left',
+        infoTextMessage: 'Some info',
       })
-      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
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(true)
+  })
+
+  it('renders the required star only when isRequiredLabel is true', () => {
+    const withStar = mountToggle({
+      label: 'My Label',
+      labelAlign: 'left',
+      isRequiredLabel: true,
     })
+    expect(withStar.text()).toContain('*')
+
+    const withoutStar = mountToggle({ label: 'My Label', labelAlign: 'left' })
+    expect(withoutStar.text()).not.toContain('*')
+  })
+
+  it('exposes dataId and dataQaId as data attributes', () => {
+    const wrapper = mountToggle({ dataId: 'my_toggle', dataQaId: 'qa_toggle' })
+    expect(wrapper.find('[data-id="my_toggle"]').exists()).toBe(true)
+    expect(wrapper.find('[data-qa-id="qa_toggle"]').exists()).toBe(true)
+  })
 })

package/src/components/label/label.spec.js

@@ -0,0 +1,55 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Label from '@/components/label'
+
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them. See the canonical example at
+// src/components/buttons/closeButton/closeButton.spec.js.
+
+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('Label', () => {
+  const mountLabel = (props = {}, slot = 'My label') =>
+    mount(Label, { props, slots: { default: slot } })
+
+  it('renders the default slot content', () => {
+    const wrapper = mountLabel({}, 'Project name')
+    expect(wrapper.text()).toContain('Project name')
+  })
+
+  it('renders the required star only when isRequiredLabel is true', () => {
+    expect(mountLabel({ isRequiredLabel: true }).text()).toContain('*')
+    expect(mountLabel({ isRequiredLabel: false }).text()).not.toContain('*')
+  })
+
+  it('renders the optional label only when labelOptional is true', () => {
+    expect(mountLabel({ labelOptional: true }).text()).toContain('(optional)')
+    expect(mountLabel({ labelOptional: false }).text()).not.toContain(
+      '(optional)'
+    )
+  })
+
+  it('renders the info text only when infoTextMessage is provided', () => {
+    expect(
+      mountLabel().find('[data-test-id="infoText_container"]').exists()
+    ).toBe(false)
+
+    expect(
+      mountLabel({ infoTextMessage: 'Some info' })
+        .find('[data-test-id="infoText_container"]')
+        .exists()
+    ).toBe(true)
+  })
+
+  it('renders both the required star and the optional label together', () => {
+    const text = mountLabel({
+      isRequiredLabel: true,
+      labelOptional: true,
+    }).text()
+    expect(text).toContain('*')
+    expect(text).toContain('(optional)')
+  })
+})

package/src/components/label/label.stories.js

@@ -16,6 +16,7 @@ export default {
     labelOptional: { control: 'boolean' },
     infoTextMessage: { control: 'text' },
     infoTextAlign: { control: 'select', options: ['left', 'right'] },
+    appTheme: { control: 'select', options: ['light', 'dark'] },
   },
 }
 
@@ -67,3 +68,38 @@ HorizontalLayout.args = {
   slotLabel: 'Budget (CHF)',
   labelAlign: 'horizontal',
 }
+
+export const CustomFontStyle = Template.bind({})
+CustomFontStyle.args = {
+  ...Default.args,
+  slotLabel: 'Section heading',
+  fontSize: '20px',
+  labelFontColor: 'green',
+}
+
+const DarkTemplate = (args) => ({
+  components: { LabelText },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div
+      data-test-id="label-story"
+      style="padding: 16px; max-width: 420px; background: #1f1f1f;"
+    >
+      <LabelText v-bind="args">
+        {{ args.slotLabel }}
+      </LabelText>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const DarkTheme = DarkTemplate.bind({})
+DarkTheme.args = {
+  ...Default.args,
+  slotLabel: 'Project name',
+  appTheme: 'dark',
+}

package/src/components/markerItem/markerItem.spec.js

@@ -0,0 +1,46 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import MarkerItem from '@/components/markerItem'
+
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them. See the canonical example at
+// src/components/buttons/closeButton/closeButton.spec.js.
+
+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('MarkerItem', () => {
+  const mountMarker = (props = {}) =>
+    mount(MarkerItem, { props: { label: 'Marker', ...props } })
+
+  it('renders the label text', () => {
+    const wrapper = mountMarker({ label: 'Highlights' })
+    expect(wrapper.text()).toContain('Highlights')
+  })
+
+  it('exposes the label as the span title attribute', () => {
+    const wrapper = mountMarker({ label: 'Highlights' })
+    expect(wrapper.find('span').attributes('title')).toBe('Highlights')
+  })
+
+  it('renders an icon only when iconName is provided', () => {
+    expect(
+      mountMarker({ iconName: 'House' })
+        .find('[data-test-id="icon_wrapper"]')
+        .exists()
+    ).toBe(true)
+
+    expect(
+      mountMarker().find('[data-test-id="icon_wrapper"]').exists()
+    ).toBe(false)
+  })
+
+  it('passes the iconName through to the Icon component', () => {
+    const wrapper = mountMarker({ iconName: 'House' })
+    expect(wrapper.findComponent({ name: 'EturnityIcon' }).exists()).toBe(true)
+    // EturnityIcon forwards `name` to the inner Icon, which declares it as a prop
+    expect(wrapper.findComponent({ name: 'Icon' }).props('name')).toBe('House')
+  })
+})

package/src/components/markerItem/markerItem.stories.js

@@ -44,3 +44,10 @@ TextOnly.args = {
   label: 'No icon variant',
   cursor: 'default',
 }
+
+export const CustomColor = Template.bind({})
+CustomColor.args = {
+  label: 'On hold',
+  backgroundColor: '#ab5348',
+  cursor: 'default',
+}