@eturnity/eturnity_reusable_components 9.28.3 → 9.31.0

package/package.json

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

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',
+}