@eturnity/eturnity_reusable_components 9.28.3-panel-placement.0 → 9.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.28.3-panel-placement.0",
+  "version": "9.31.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/outline_tool.svg

@@ -1,11 +1,11 @@
 <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path transform="rotate(90 2.80078 4.06415)" fill="white" d="M2.8008 4.0642h8v1.6H2.8008Z" />
-  <path transform="rotate(-180 7.00195 3.8642)" fill="white" d="M7.002 3.8642h4v1.6H7.002Z" />
-  <path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white" />
-  <path transform="rotate(-180 11.002 13.8643)" fill="white" d="M11.002 13.8643h8v1.6H11.002Z" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white" />
-  <path transform="rotate(90 12.7988 4.06433)" fill="white" d="M12.7988 4.0643h8v1.6H12.7988Z" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white" />
-</svg>
+<rect x="2.80078" y="4.06415" width="8" height="1.6" transform="rotate(90 2.80078 4.06415)" fill="white"/>
+<rect x="7.00195" y="3.8642" width="4" height="1.6" transform="rotate(-180 7.00195 3.8642)" fill="white"/>
+<path d="M8.5 3.07846L6.00098 0.935599L6.00098 5.22131L8.5 3.07846Z" fill="white"/>
+<rect x="11.002" y="13.8643" width="8" height="1.6" transform="rotate(-180 11.002 13.8643)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4.06409C2.55228 4.06409 3 3.61637 3 3.06409C3 2.5118 2.55228 2.06409 2 2.06409C1.44772 2.06409 1 2.5118 1 3.06409C1 3.61637 1.44772 4.06409 2 4.06409ZM2 5.06409C3.10457 5.06409 4 4.16866 4 3.06409C4 1.95952 3.10457 1.06409 2 1.06409C0.895431 1.06409 0 1.95952 0 3.06409C0 4.16866 0.895431 5.06409 2 5.06409Z" fill="white"/>
+<rect x="12.7988" y="4.06433" width="8" height="1.6" transform="rotate(90 12.7988 4.06433)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 4.06421C12.5542 4.06421 13.002 3.61649 13.002 3.06421C13.002 2.51192 12.5542 2.06421 12.002 2.06421C11.4497 2.06421 11.002 2.51192 11.002 3.06421C11.002 3.61649 11.4497 4.06421 12.002 4.06421ZM12.002 5.06421C13.1065 5.06421 14.002 4.16878 14.002 3.06421C14.002 1.95964 13.1065 1.06421 12.002 1.06421C10.8974 1.06421 10.002 1.95964 10.002 3.06421C10.002 4.16878 10.8974 5.06421 12.002 5.06421Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 14.0643C12.5542 14.0643 13.002 13.6166 13.002 13.0643C13.002 12.512 12.5542 12.0643 12.002 12.0643C11.4497 12.0643 11.002 12.512 11.002 13.0643C11.002 13.6166 11.4497 14.0643 12.002 14.0643ZM12.002 15.0643C13.1065 15.0643 14.002 14.1688 14.002 13.0643C14.002 11.9597 13.1065 11.0643 12.002 11.0643C10.8974 11.0643 10.002 11.9597 10.002 13.0643C10.002 14.1688 10.8974 15.0643 12.002 15.0643Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 14.0644C2.55228 14.0644 3 13.6167 3 13.0644C3 12.5121 2.55228 12.0644 2 12.0644C1.44772 12.0644 1 12.5121 1 13.0644C1 13.6167 1.44772 14.0644 2 14.0644ZM2 15.0644C3.10457 15.0644 4 14.169 4 13.0644C4 11.9598 3.10457 11.0644 2 11.0644C0.895431 11.0644 0 11.9598 0 13.0644C0 14.169 0.895431 15.0644 2 15.0644Z" fill="white"/>
+</svg>

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -157,46 +157,6 @@ describe('ButtonIcon.vue', () => {
     }
   })
 
-  it('replaces the icon with a spinner while loading', async () => {
-    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
-      false
-    )
-    expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(true)
-
-    await wrapper.setProps({ isLoading: true })
-    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
-      true
-    )
-    expect(wrapper.findComponent({ name: 'Icon' }).exists()).toBe(false)
-
-    await wrapper.setProps({ isLoading: false })
-    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(
-      false
-    )
-    expect(wrapper.findComponent({ name: 'Icon' }).props('name')).toBe(
-      'settings'
-    )
-  })
-
-  it('keeps rendering the text while loading', async () => {
-    await wrapper.setProps({ isLoading: true })
-    expect(wrapper.find('[data-test-id="button-icon-text"]').text()).toBe(
-      'Click Me'
-    )
-  })
-
-  it('renders a white spinner on types with white button text', async () => {
-    await wrapper.setProps({ isLoading: true, type: 'primary' })
-    expect(wrapper.findComponent({ name: 'NewSpinner' }).props('isWhite')).toBe(
-      true
-    )
-
-    await wrapper.setProps({ type: 'secondary' })
-    expect(wrapper.findComponent({ name: 'NewSpinner' }).props('isWhite')).toBe(
-      false
-    )
-  })
-
   it('renders caret based on showCaret prop', async () => {
     await wrapper.setProps({ showCaret: true })
     let caret = wrapper.find('[data-test-id="button-icon-caret"]')

package/src/components/buttons/buttonIcon/index.vue

@@ -28,9 +28,7 @@
         :type="type"
         :variant="variant"
       >
-        <RCSpinner v-if="isLoading" :is-white="isSpinnerWhite" size="tiny" />
         <Icon
-          v-else
           :color="getIconColor"
           :disable-hover="disableIconHover"
           :fill-type="fillType"
@@ -85,11 +83,9 @@
   //   iconName="external_icon"
   //   fontColor="white"
   //   fontSize="12px"
-  //   :isLoading="false" // swaps the icon for a spinner
   // />
 
   import Icon from '../../icon'
-  import RCSpinner from '../../spinner'
   import styled from 'vue3-styled-components'
   import theme from '../../../assets/theme'
 
@@ -423,7 +419,6 @@
       ButtonWrapper,
       IconContainer,
       Icon,
-      RCSpinner,
       NumberContainer,
       NumberText,
       CountBadge,
@@ -546,24 +541,11 @@
         default: false,
         type: Boolean,
       },
-      isLoading: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     computed: {
       theme() {
         return theme
       },
-      // The spinner only offers white/purple, so pick whichever contrasts with
-      // the button background the same way the label already does.
-      isSpinnerWhite() {
-        return (
-          this.theme.mainButton[this.appTheme][this.type][this.variant].default
-            .textColor === this.theme.colors.white
-        )
-      },
       getIconColor() {
         if (this.iconColor) return this.iconColor
         if (this.isDisabled) {

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

@@ -484,7 +484,6 @@
     display: flex;
     gap: 10px;
     align-items: center;
-    padding: ${(props) => (props.isInteractive ? '0 4px' : '0')};
     cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
     border: ${(props) =>
       props.alignItems == 'vertical'
@@ -730,11 +729,6 @@
         required: false,
         default: true,
       },
-      undefinedState: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
       allowNegative: {
         type: Boolean,
         required: false,
@@ -850,7 +844,6 @@
     },
     computed: {
       displayedPlaceholder() {
-        if (this.undefinedState) return '-'
         if (this.placeholder) return this.placeholder
         if (this.defaultNumber)
           return `${this.defaultNumber}${this.hasSpaceBetweenUnit ? ' ' : ''}${
@@ -1128,9 +1121,6 @@
         }
       },
       formatWithCurrency(value) {
-        if (this.undefinedState && !this.isFocused) {
-          return '-'
-        }
         let adjustedMinValue =
           value || value === 0
             ? value

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

@@ -31,16 +31,15 @@
           :border-color="borderColor"
           :color-mode="colorMode"
           :data-id="item.hasOwnProperty('dataId') ? item.dataId : ''"
-          :disabled="!!item.disabled"
           :height="height"
           :inactive-border-color="inactiveBorderColor"
           :inactive-color="inactiveColor"
-          :is-active="!undefinedState && value == item.value"
+          :is-active="value == item.value"
           :primary-color="primaryColor"
           :secondary-color="secondaryColor"
           :size="size"
           :width="item.width || 'auto'"
-          @click="selectItem(item)"
+          @click="selectItem(item.value)"
         >
           <OptionIconContainer v-if="item.icon">
             <RCIcon
@@ -146,7 +145,6 @@
     height: String,
     borderColor: String,
     inactiveBorderColor: String,
-    disabled: Boolean,
   }
   const SwitchOption = styled('div', optionAttrs)`
     color: ${(props) =>
@@ -169,19 +167,17 @@
       props.height
         ? props.height
         : props.size === 'medium'
-          ? '24px'
-          : props.size === 'small'
-            ? '16px'
-            : '24px'};
+        ? '24px'
+        : props.size === 'small'
+        ? '16px'
+        : '24px'};
     padding: 0 10px;
     margin-right: -1px;
     transition: all 0.1s ease-in-out;
     overflow: hidden;
     gap: 5px;
-    opacity: ${(props) => (props.disabled ? 0.4 : 1)};
-    pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
     & :hover {
-      cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+      cursor: pointer;
     }
     &:first-child {
       border-radius: 4px 0 0 4px;
@@ -268,11 +264,6 @@
         default: false,
         type: Boolean,
       },
-      undefinedState: {
-        required: false,
-        default: false,
-        type: Boolean,
-      },
     },
     data() {
       return {
@@ -291,19 +282,19 @@
         this.borderColor = this.secondaryColor
         this.inactiveBorderColor = theme.semanticColors.teal[600]
       } else {
-        this.primaryColor = theme.semanticColors.teal[100]
-        this.secondaryColor = theme.semanticColors.purple[500]
-        this.inactiveColor = theme.semanticColors.purple[500]
+        this.primaryColor = theme.semanticColors.teal[50]
+        this.secondaryColor = theme.semanticColors.teal[800]
+        this.inactiveColor = theme.semanticColors.teal[50]
         this.borderColor = this.secondaryColor
-        this.inactiveBorderColor = theme.semanticColors.teal[200]
+        this.inactiveBorderColor = theme.semanticColors.teal[50]
       }
     },
     methods: {
-      selectItem(item) {
-        if (this.disabled || item.disabled) {
+      selectItem(value) {
+        if (this.disabled) {
           return
         }
-        this.$emit('on-switch-change', item.value)
+        this.$emit('on-switch-change', value)
       },
     },
   }

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

@@ -65,9 +65,9 @@ describe('SwitchField', () => {
   })
 
   it('renders the info text only when a message is provided', () => {
-    expect(
-      mountSwitch({ label: 'Mode' }).findComponent(InfoText).exists()
-    ).toBe(false)
+    expect(mountSwitch({ label: 'Mode' }).findComponent(InfoText).exists()).toBe(
+      false
+    )
     expect(
       mountSwitch({ label: 'Mode', infoTextMessage: 'Helpful hint' })
         .findComponent(InfoText)

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

@@ -32,7 +32,6 @@
         role="checkbox"
         :size="size"
         tabindex="0"
-        :undefined-state="undefinedState"
         @keydown.space.prevent="onToggleChange"
       >
         <ToggleBackground
@@ -42,7 +41,6 @@
           data-test-id="toggle_background"
           :disabled="disabled"
           :is-checked="isChecked"
-          :undefined-state="undefinedState"
         />
         <ToggleDot
           data-test-id="toggle_dot"
@@ -51,7 +49,6 @@
           :size="size"
           :toggle-color="toggleColor"
           :toggle-margin="toggleMargin"
-          :undefined-state="undefinedState"
         />
       </ToggleWrapper>
       <LabelContainer
@@ -128,7 +125,6 @@
     disabled: Boolean,
     backgroundColor: String,
     isChecked: Boolean,
-    undefinedState: Boolean,
   }
   const LabelText = styled('div', toggleAttrs)`
     color: ${(props) =>
@@ -144,8 +140,6 @@
   border: ${(props) =>
     props.disabled
       ? '1px solid ' + props.theme.colors.disabled
-      : props.undefinedState
-      ? '1px solid ' + props.theme.colors.grey3
       : props.isChecked
       ? props.backgroundColor
         ? '1px solid ' + props.backgroundColor
@@ -181,7 +175,6 @@
     backgroundColor: String,
     isChecked: Boolean,
     disabled: Boolean,
-    undefinedState: Boolean,
   }
   const ToggleBackground = styled('span', backgroundAttrs)`
     display: block;
@@ -191,8 +184,6 @@
     background-color: ${(props) =>
       props.disabled
         ? props.theme.colors.grey5
-        : props.undefinedState
-        ? props.theme.colors.grey3
         : props.isChecked
         ? props.backgroundColor
           ? props.backgroundColor
@@ -207,7 +198,6 @@
     size: String,
     disabled: Boolean,
     toggleMargin: String,
-    undefinedState: Boolean,
   }
   const ToggleDot = styled('span', toggleProps)`
     position: absolute;
@@ -243,13 +233,7 @@
     border-radius: 100%;
     transition: transform 0.4s ease;
     transform: ${(props) =>
-      props.undefinedState
-        ? props.size === 'medium'
-          ? 'translateX(15px)'
-          : props.size === 'small'
-          ? 'translateX(6px)'
-          : 'translateX(15px)'
-        : props.isChecked
+      props.isChecked
         ? props.size === 'medium'
           ? 'translateX(25px)'
           : props.size === 'small'
@@ -352,11 +336,6 @@
         default: null,
         required: false,
       },
-      undefinedState: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
     },
     methods: {
       onToggleChange() {

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

@@ -77,16 +77,16 @@ describe('RCToggle', () => {
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       false
     )
-    expect(
-      wrapper.find('[data-test-id="label_right_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_right_container"]').exists()).toBe(
+      true
+    )
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       false
     )
@@ -98,9 +98,9 @@ describe('RCToggle', () => {
     expect(wrapper.find('[data-test-id="label_left_container"]').exists()).toBe(
       true
     )
-    expect(
-      wrapper.find('[data-test-id="label_right_container"]').exists()
-    ).toBe(false)
+    expect(wrapper.find('[data-test-id="label_right_container"]').exists()).toBe(
+      false
+    )
   })
 
   it('renders the info text only when infoTextMessage is provided', () => {

package/src/components/navigationSideMenu/index.spec.js

@@ -0,0 +1,145 @@
+import { mount } from '@vue/test-utils'
+import NavigationSideMenu from '@/components/navigationSideMenu'
+
+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')),
+}))
+
+const menuData = [
+  {
+    groupName: 'Project',
+    children: [
+      { id: 'technologies', name: 'Technologies', dataId: 'nav_technologies' },
+      { id: 'finance', name: 'Finance', dataId: 'nav_finance' },
+    ],
+  },
+  {
+    groupName: 'Workflow',
+    children: [
+      {
+        id: 'workflow_template',
+        name: 'Workflow template',
+        dataId: 'nav_workflow_template',
+      },
+    ],
+  },
+]
+
+const mountMenu = (props = {}) =>
+  mount(NavigationSideMenu, { props: { menuData, ...props } })
+
+const item = (wrapper, dataId) => wrapper.find(`[data-id="${dataId}"]`)
+const section = (wrapper, key) => wrapper.find(`[data-id="nav_section_${key}"]`)
+
+describe('navigationSideMenu/index.vue', () => {
+  describe('default state', () => {
+    it('renders a header for each non-empty group', () => {
+      const wrapper = mountMenu()
+
+      expect(section(wrapper, 'Project').exists()).toBe(true)
+      expect(section(wrapper, 'Workflow').exists()).toBe(true)
+    })
+
+    it('shows every group item when nothing is collapsed', () => {
+      const wrapper = mountMenu()
+
+      expect(item(wrapper, 'nav_technologies').exists()).toBe(true)
+      expect(item(wrapper, 'nav_finance').exists()).toBe(true)
+      expect(item(wrapper, 'nav_workflow_template').exists()).toBe(true)
+    })
+
+    it('reports no group as collapsed initially', () => {
+      const wrapper = mountMenu()
+
+      expect(wrapper.vm.isGroupCollapsed('Project')).toBe(false)
+      expect(wrapper.vm.isGroupCollapsed('Workflow')).toBe(false)
+    })
+  })
+
+  describe('toggling a section', () => {
+    it("hides that section's items when its header is clicked, and shows them again on a second click", async () => {
+      const wrapper = mountMenu()
+
+      await section(wrapper, 'Project').trigger('click')
+      expect(item(wrapper, 'nav_technologies').exists()).toBe(false)
+      expect(item(wrapper, 'nav_finance').exists()).toBe(false)
+
+      await section(wrapper, 'Project').trigger('click')
+      expect(item(wrapper, 'nav_technologies').exists()).toBe(true)
+      expect(item(wrapper, 'nav_finance').exists()).toBe(true)
+    })
+
+    it('collapses sections independently — collapsing one leaves the others expanded', async () => {
+      const wrapper = mountMenu()
+
+      await section(wrapper, 'Project').trigger('click')
+
+      expect(item(wrapper, 'nav_technologies').exists()).toBe(false)
+      expect(item(wrapper, 'nav_workflow_template').exists()).toBe(true)
+      expect(wrapper.vm.isGroupCollapsed('Project')).toBe(true)
+      expect(wrapper.vm.isGroupCollapsed('Workflow')).toBe(false)
+    })
+
+    it('emits section-collapse-toggle with the key and post-toggle collapsed state', async () => {
+      const wrapper = mountMenu()
+
+      await section(wrapper, 'Project').trigger('click')
+      await section(wrapper, 'Project').trigger('click')
+
+      const events = wrapper.emitted('section-collapse-toggle')
+      expect(events).toHaveLength(2)
+      expect(events[0]).toEqual([{ key: 'Project', collapsed: true }])
+      expect(events[1]).toEqual([{ key: 'Project', collapsed: false }])
+    })
+  })
+
+  describe('groupKey', () => {
+    it('prefers an explicit id over the group name', () => {
+      const wrapper = mountMenu()
+
+      expect(wrapper.vm.groupKey({ id: 'a', groupName: 'B' }, 0)).toBe('a')
+    })
+
+    it('falls back to the group name when there is no id', () => {
+      const wrapper = mountMenu()
+
+      expect(wrapper.vm.groupKey({ groupName: 'B' }, 0)).toBe('B')
+    })
+
+    it('falls back to the index (as a string) when neither id nor name is present', () => {
+      const wrapper = mountMenu()
+
+      expect(wrapper.vm.groupKey({}, 3)).toBe('3')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('mounts without error and renders no sections when menuData is empty', () => {
+      const wrapper = mount(NavigationSideMenu, { props: { menuData: [] } })
+
+      expect(wrapper.find('[data-id^="nav_section_"]').exists()).toBe(false)
+    })
+
+    it('treats groups that share a groupName as one section (name is the key)', async () => {
+      const dupData = [
+        {
+          groupName: 'Other',
+          children: [{ id: 'a', name: 'A', dataId: 'nav_a' }],
+        },
+        {
+          groupName: 'Other',
+          children: [{ id: 'b', name: 'B', dataId: 'nav_b' }],
+        },
+      ]
+      const wrapper = mount(NavigationSideMenu, {
+        props: { menuData: dupData },
+      })
+
+      await wrapper.findAll('[data-id="nav_section_Other"]')[0].trigger('click')
+
+      expect(item(wrapper, 'nav_a').exists()).toBe(false)
+      expect(item(wrapper, 'nav_b').exists()).toBe(false)
+    })
+  })
+})

package/src/components/navigationSideMenu/index.vue

@@ -120,8 +120,31 @@
                 v-if="group.children?.length"
                 :is-collapsed="isCollapsed"
               >
-                <GroupName v-if="!isCollapsed">{{ group.groupName }}</GroupName>
-                <ItemList>
+                <GroupHeader
+                  v-if="!isCollapsed"
+                  :data-id="`nav_section_${groupKey(group, groupIdx)}`"
+                  :data-qa-id="`nav_section_${groupKey(group, groupIdx)}`"
+                  @click="toggleGroup(groupKey(group, groupIdx))"
+                >
+                  <GroupName>{{ group.groupName }}</GroupName>
+                  <GroupChevron>
+                    <IconComponent
+                      :color="theme.semanticColors.grey[700]"
+                      :hovered-color="theme.semanticColors.purple[500]"
+                      :name="
+                        isGroupCollapsed(groupKey(group, groupIdx))
+                          ? 'chevron_down'
+                          : 'chevron_up'
+                      "
+                      size="10px"
+                    />
+                  </GroupChevron>
+                </GroupHeader>
+                <ItemList
+                  v-if="
+                    isCollapsed || !isGroupCollapsed(groupKey(group, groupIdx))
+                  "
+                >
                   <template
                     v-for="(item, itemIdx) in group.children"
                     :key="item.id ?? itemIdx"
@@ -137,7 +160,7 @@
                         :is-disabled="item.isDisabled"
                         @click="
                           !item.isDisabled &&
-                          $emit('on-menu-item-click', { item })
+                            $emit('on-menu-item-click', { item })
                         "
                       >
                         <IconCell :is-collapsed="isCollapsed">
@@ -174,7 +197,7 @@
                         type="tertiary"
                         @click="
                           !item.isDisabled &&
-                          $emit('on-menu-item-click', { item })
+                            $emit('on-menu-item-click', { item })
                         "
                       />
                     </template>
@@ -244,7 +267,7 @@
                           :is-disabled="sub.isDisabled"
                           @click="
                             !sub.isDisabled &&
-                            $emit('on-menu-item-click', { item: sub })
+                              $emit('on-menu-item-click', { item: sub })
                           "
                         >
                           <span>{{ sub.name }}</span>
@@ -307,8 +330,8 @@
       p.isCollapsed
         ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px`
         : p.expandedWidth
-          ? `${p.expandedWidth}px`
-          : 'max-content'};
+        ? `${p.expandedWidth}px`
+        : 'max-content'};
     min-width: ${(p) =>
       p.isCollapsed ? `${NAV_SIDEBAR_COLLAPSED_OUTER_WIDTH_PX}px` : '0'};
     border-right: 1px solid ${(p) => p.theme.semanticColors.grey[300]};
@@ -418,6 +441,18 @@
     padding: ${(p) => (p.isCollapsed ? '10px 8px' : '10px 16px')};
   `
 
+  const GroupHeader = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    cursor: pointer;
+
+    &:hover > div:first-child {
+      color: ${(p) => p.theme.semanticColors.purple[500]};
+    }
+  `
+
   const GroupName = styled.div`
     font-size: 10px;
     font-weight: 400;
@@ -426,6 +461,12 @@
     line-height: 150%;
   `
 
+  const GroupChevron = styled.div`
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  `
+
   const ItemList = styled.div`
     display: flex;
     flex-direction: column;
@@ -758,7 +799,9 @@
       ScrollbarThumb,
       GroupsList,
       GroupSection,
+      GroupHeader,
       GroupName,
+      GroupChevron,
       ItemList,
       MenuItem,
       IconCell,
@@ -837,6 +880,7 @@
       'on-menu-item-click',
       'on-footer-button-click',
       'sidebar-dimensions',
+      'section-collapse-toggle',
     ],
     data() {
       return {
@@ -844,6 +888,7 @@
         isCollapsed: false,
         responsibleSelectSurfaceOpen: false,
         openDropdownId: null,
+        collapsedGroups: {},
         isWrapperHovered: false,
         expandedWidth: null,
         scrollThumbStyle: {},
@@ -1120,6 +1165,27 @@
           this.openDropdownId = this.openDropdownId === id ? null : id
         }
       },
+      groupKey(group, idx) {
+        return group.id ?? group.groupName ?? String(idx)
+      },
+      isGroupCollapsed(key) {
+        return !!this.collapsedGroups[key]
+      },
+      toggleGroup(key) {
+        if (this.collapsedGroups[key]) {
+          delete this.collapsedGroups[key]
+        } else {
+          this.collapsedGroups[key] = true
+        }
+        this.$emit('section-collapse-toggle', {
+          key,
+          collapsed: this.isGroupCollapsed(key),
+        })
+        this.$nextTick(() => {
+          this.updateScrollThumb()
+          this.updateExpandedWidth()
+        })
+      },
     },
   }
 </script>

package/src/components/navigationSideMenu/navigationSideMenu.stories.js

@@ -0,0 +1,133 @@
+import { action } from '@storybook/addon-actions'
+import NavigationSideMenu from './index.vue'
+import theme from '@/assets/theme'
+
+// Grouped menu mirroring the beta settings navigation: each top-level entry is a
+// section ({ groupName, children }). Click a section header (e.g. "OFFER") to
+// collapse/expand its items — sections collapse independently.
+const settingsMenu = [
+  {
+    groupName: 'Project',
+    children: [
+      {
+        id: 'technologies',
+        name: 'Technologies',
+        dataId: 'nav_technologies',
+        icon: 'settings',
+      },
+      {
+        id: 'finance',
+        name: 'Finance',
+        dataId: 'nav_finance',
+        icon: 'documents',
+      },
+    ],
+  },
+  {
+    groupName: 'Workflow',
+    children: [
+      {
+        id: 'workflow_template',
+        name: 'Workflow template',
+        dataId: 'nav_workflow_template',
+        icon: 'settings',
+      },
+      {
+        id: 'activity_type',
+        name: 'Activity type definition',
+        dataId: 'nav_activity_type',
+        icon: 'documents',
+      },
+    ],
+  },
+  {
+    groupName: 'Offer',
+    children: [
+      {
+        id: 'branding',
+        name: 'Branding',
+        dataId: 'nav_branding',
+        icon: 'settings',
+      },
+      {
+        id: 'document_templates',
+        name: 'Document templates',
+        dataId: 'nav_document_templates',
+        icon: 'documents',
+        // An item-level dropdown (its own children) — orthogonal to section collapse.
+        children: [
+          { id: 'quotation', name: 'Quotation', dataId: 'nav_quotation' },
+          { id: 'invoice', name: 'Invoice', dataId: 'nav_invoice' },
+        ],
+      },
+    ],
+  },
+]
+
+const projectManagerOptions = [
+  { id: 1, full_name: 'Firstname Lastname' },
+  { id: 2, full_name: 'Alex Meyer' },
+]
+
+export default {
+  title: 'Components/Navigation/NavigationSideMenu',
+  component: NavigationSideMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const Template = (args) => ({
+  components: { NavigationSideMenu },
+  setup() {
+    const onSectionToggle = (payload) =>
+      action('section-collapse-toggle')(payload)
+    const onItemClick = (payload) => action('on-menu-item-click')(payload)
+    return { args, onSectionToggle, onItemClick }
+  },
+  template: `
+    <div data-test-id="navigation-side-menu-story" style="display: flex; min-height: 100vh; background: #f5f5f5;">
+      <NavigationSideMenu
+        v-bind="args"
+        @section-collapse-toggle="onSectionToggle"
+        @on-menu-item-click="onItemClick"
+      />
+      <main style="flex: 1; padding: 24px;">Main content area</main>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+// Default: all sections expanded. Click a section header to collapse/expand it;
+// multiple sections can be collapsed at once (independent, not accordion).
+export const CollapsibleSections = Template.bind({})
+CollapsibleSections.args = {
+  menuData: settingsMenu,
+  headerTitle: 'Settings',
+  activeItemId: 'technologies',
+}
+
+// An item that has its own children ("Document templates") renders an item-level
+// dropdown, which behaves independently of section collapse.
+export const WithNestedDropdown = Template.bind({})
+WithNestedDropdown.args = {
+  menuData: settingsMenu,
+  headerTitle: 'Settings',
+  activeItemId: 'quotation',
+  activeParentId: 'document_templates',
+}
+
+// The project-view placement of the same component: project-manager select in the
+// header plus a footer button. Section collapse works identically here.
+export const ProjectPlacement = Template.bind({})
+ProjectPlacement.args = {
+  menuData: settingsMenu,
+  showProjectManagerSelect: true,
+  projectManagerOptions,
+  projectManagerId: 1,
+  footerButtonText: 'Documents',
+  activeItemId: 'finance',
+}

package/src/components/spinner/index.vue

@@ -113,8 +113,7 @@
       size: {
         type: String,
         default: 'medium',
-        validator: (value) =>
-          ['tiny', 'small', 'medium', 'large'].includes(value),
+        validator: (value) => ['small', 'medium', 'large'].includes(value),
       },
       isWhite: {
         required: false,

package/src/assets/svgIcons/broom.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Uploaded to svgrepo.com" width="800px" height="800px" viewBox="0 0 32 32" xml:space="preserve">
-<style type="text/css">
-	.linesandangles_een{fill:#000000;}
-</style>
-<path class="linesandangles_een" d="M26.281,30l-2-8H25v-5h-8V2h-2v15H7v5h0.719l-2,8H26.281z M23.719,28H21v-4h-2v4h-2v-4h-2v4h-2  v-4h-2v4H8.281l1.5-6h12.438L23.719,28z M9,19h14v1H9V19z"/>
-</svg>

package/src/assets/svgIcons/length_2d_vertical.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="14" viewBox="0 0 10 14" fill="none">
-  <g transform="translate(10,0) rotate(90)">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.199219 9.85718V0.142822H1.75351L1.75352 9.85718H0.199219ZM5.38021 8.20572L2.14209 4.99999L5.38021 1.79425V4.19855L8.61833 4.19855V1.79425L11.8564 4.99999L8.61832 8.20572L8.61833 5.80142L5.38021 5.80142V8.20572ZM12.2449 0.142822V9.85718H13.7992V0.142822H12.2449Z" fill="white"/>
-  </g>
-</svg>

package/src/assets/svgIcons/obstacle_flat_top.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 4H12V8L2 10V4Z" fill="white" />
-</svg>

package/src/assets/svgIcons/obstacle_sloped_top.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3 10L6 4H13L10 10H3Z" fill="white" />
-</svg>

package/src/assets/tests/__mocks__/fileMock.js

@@ -1 +0,0 @@
-module.exports = 'test-file-stub'