@eturnity/eturnity_reusable_components 9.22.2 → 9.25.1

package/src/components/modals/modal/modal.spec.js

@@ -0,0 +1,168 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Modal from '@/components/modals/modal'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+const mountModal = (options = {}) =>
+  mount(Modal, {
+    global: {
+      provide: {
+        theme,
+      },
+    },
+    attachTo: document.body,
+    ...options,
+  })
+
+describe('Modal.vue', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.body.style.overflow = ''
+  })
+
+  it('does not render overlay when isOpen is false', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: false },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.rc-modal-wrapper').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('renders overlay and default slot when open and not loading', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true },
+      slots: {
+        default: '<p data-test-id="modal-slot">Modal body</p>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.rc-modal-wrapper').exists()).toBe(true)
+    expect(wrapper.find('[data-test-id="modal-slot"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test-id="modal-slot"]').text()).toBe('Modal body')
+    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('shows spinner and hides slot and close button when isLoading is true', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true, isLoading: true },
+      slots: {
+        default: '<p data-test-id="modal-slot">Should not show</p>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('[data-test-id="spinner_container"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test-id="modal-slot"]').exists()).toBe(false)
+    expect(wrapper.find('.close').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('hides close button when hideClose is true', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true, hideClose: true },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('[data-test-id="modal-slot-content"]').exists()).toBe(true)
+    expect(wrapper.find('.close').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('emits on-close when close button is clicked', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    await wrapper.find('.close').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('on-close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+
+  it('emits on-close when Escape is pressed and closeOnEscape is true', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true, closeOnEscape: true },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('on-close')).toHaveLength(1)
+    wrapper.unmount()
+  })
+
+  it('does not emit on-close on Escape when closeOnEscape is false', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true, closeOnEscape: false },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.emitted('on-close')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('sets body overflow hidden while open and restores when closed', async () => {
+    const wrapper = mountModal({
+      props: { isOpen: true },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(document.body.style.overflow).toBe('hidden')
+
+    await wrapper.setProps({ isOpen: false })
+    await wrapper.vm.$nextTick()
+    expect(document.body.style.overflow).toBe('')
+
+    wrapper.unmount()
+  })
+
+  it('removes key listener and resets body overflow on unmount while open', async () => {
+    const removeSpy = jest.spyOn(window, 'removeEventListener')
+
+    const wrapper = mountModal({
+      props: { isOpen: true },
+      slots: {
+        default: '<span data-test-id="modal-slot-content">Content</span>',
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+    expect(document.body.style.overflow).toBe('hidden')
+
+    wrapper.unmount()
+
+    expect(removeSpy).toHaveBeenCalledWith('keydown', expect.any(Function))
+    expect(document.body.style.overflow).toBe('')
+
+    removeSpy.mockRestore()
+  })
+})

package/src/components/modals/modal/modal.stories.js

@@ -1,31 +1,292 @@
+import { ref } from 'vue'
 import Modal from './index.vue'
 
 export default {
-  title: 'Components/Modal',
+  title: 'Components/Modals/Modal',
   component: Modal,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { Modal },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<modal v-bind="$props" />',
-
-  // import Modal from "@eturnity/eturnity_reusable_components/src/components/modals/modal"
-  // This is a more flexible modal box, where the parent can decide how the body of the modal looks
-  // To use:
-  // <modal :isOpen="isOpen" @on-close="$emit('on-close-summary')" :preventOutsideClose="true" :isLoading="true" :hideClose="true">
-  //   <div>Data....</div>
-  // </modal>
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  isOpen: true,
-  preventOutsideClose: true,
-  isLoading: false,
-  hideClose: false,
-  backdrop: 'dark',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Low-level modal shell: backdrop, centered container, optional close control, loading state, and a default slot for any body content. Parent handles layout and actions inside the slot. Emits `on-close` when the close button is used or Escape is pressed (if `closeOnEscape` is true).',
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Renders the modal overlay and panel when true',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Shows a large spinner and hides slot content and close button',
+    },
+    hideClose: {
+      control: 'boolean',
+      description: 'Hides the corner close button (e.g. forced flows)',
+    },
+    backdrop: {
+      control: 'select',
+      options: ['white', 'dark'],
+      description: 'Backdrop tint when `fullScreen` is true',
+    },
+    fullScreen: {
+      control: 'boolean',
+      description: 'Full-viewport overlay vs inset layout',
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Close when Escape is pressed',
+    },
+    stopPropagation: {
+      control: 'boolean',
+      description: 'Stop click propagation on the modal container',
+    },
+    overflowRule: {
+      control: 'select',
+      options: ['auto', 'hidden', 'scroll', 'visible'],
+      description: 'CSS overflow on the modal panel',
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Max width of the modal panel (CSS value)',
+    },
+    addPaddingTop: {
+      control: 'boolean',
+      description: 'Adds top padding to the overlay (e.g. clear a fixed header)',
+    },
+    disableDefaultMediaQuery: {
+      control: 'boolean',
+      description: 'Disables built-in mobile full-width behaviour',
+    },
+    position: {
+      control: 'text',
+      description: 'CSS position of the overlay wrapper',
+    },
+    modalContainerAlignment: {
+      control: 'object',
+      description: 'Grid alignment `{ alignSelf, justifySelf }` for the panel',
+    },
+  },
+}
+
+const sampleBody = `
+  <div style="padding: 24px 56px 32px 24px; max-width: 520px;">
+    <h2 style="margin: 0 0 12px; font-size: 1.25rem; font-weight: 600;">Edit settings</h2>
+    <p style="margin: 0; color: #444; line-height: 1.6;">
+      This slot is fully controlled by the parent. Use it for forms, confirmations, or rich content.
+      The shell provides backdrop, focus trap basics via overlay, and optional loading UI.
+    </p>
+  </div>
+`
+
+export const Default = {
+  args: {
+    isOpen: true,
+    isLoading: false,
+    hideClose: false,
+    backdrop: 'dark',
+    fullScreen: true,
+    closeOnEscape: true,
+    stopPropagation: true,
+    overflowRule: 'auto',
+    maxWidth: '95%',
+    addPaddingTop: false,
+    disableDefaultMediaQuery: false,
+    position: 'fixed',
+    modalContainerAlignment: {
+      alignSelf: 'center',
+      justifySelf: 'center',
+    },
+  },
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Modal v-bind="args" @on-close="() => {}">
+        ${sampleBody}
+      </Modal>
+    `,
+  }),
+}
+
+export const Loading = {
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+  render: Default.render,
+}
+
+export const WithoutCloseButton = {
+  args: {
+    ...Default.args,
+    hideClose: true,
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use when the user must complete an action in the slot (e.g. explicit Save/Cancel inside the body).',
+      },
+    },
+  },
+}
+
+export const LightBackdrop = {
+  args: {
+    ...Default.args,
+    backdrop: 'white',
+  },
+  render: Default.render,
+}
+
+export const InsetNotFullScreen = {
+  args: {
+    ...Default.args,
+    fullScreen: false,
+    backdrop: 'dark',
+    maxWidth: '560px',
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Overlay does not cover the full viewport; useful when embedding preview areas need visible context.',
+      },
+    },
+  },
+}
+
+export const NarrowPanel = {
+  args: {
+    ...Default.args,
+    maxWidth: '380px',
+  },
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Modal v-bind="args" @on-close="() => {}">
+        <div style="padding: 24px 56px 28px 24px;">
+          <h2 style="margin: 0 0 8px; font-size: 1.1rem;">Confirm</h2>
+          <p style="margin: 0; color: #444; font-size: 0.95rem;">
+            Delete this item? This cannot be undone.
+          </p>
+        </div>
+      </Modal>
+    `,
+  }),
+}
+
+export const ScrollableContent = {
+  args: {
+    ...Default.args,
+    maxWidth: '420px',
+    overflowRule: 'auto',
+  },
+  render: (args) => ({
+    components: { Modal },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Modal v-bind="args" @on-close="() => {}">
+        <div style="padding: 24px 56px 24px 24px; max-height: 280px;">
+          <h2 style="margin: 0 0 12px; font-size: 1.15rem;">Terms</h2>
+          <p v-for="n in 8" :key="n" style="margin: 0 0 12px; color: #444; line-height: 1.5;">
+            Paragraph {{ n }} — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+            Praesent libero. Sed cursus ante dapibus diam.
+          </p>
+        </div>
+      </Modal>
+    `,
+  }),
+}
+
+export const WithTopPadding = {
+  args: {
+    ...Default.args,
+    addPaddingTop: true,
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Extra top padding on the overlay when a fixed app bar occupies the top of the screen.',
+      },
+    },
+  },
+}
+
+export const InteractiveOpenAndClose = {
+  render: () => ({
+    components: { Modal },
+    setup() {
+      const isOpen = ref(false)
+      const openModal = () => {
+        isOpen.value = true
+      }
+      const closeModal = () => {
+        isOpen.value = false
+      }
+      return { isOpen, openModal, closeModal }
+    },
+    template: `
+      <div
+        style="
+          min-height: 100vh;
+          padding: 24px;
+          background: linear-gradient(160deg, #e8ecf1 0%, #dce3ea 100%);
+          font-family: system-ui, sans-serif;
+        "
+      >
+        <p style="margin: 0 0 16px; color: #333;">
+          Open the modal, then use the close button or Escape to dismiss.
+        </p>
+        <button
+          type="button"
+          style="
+            padding: 10px 18px;
+            border-radius: 6px;
+            border: 1px solid #2563eb;
+            background: #2563eb;
+            color: white;
+            font-weight: 600;
+            cursor: pointer;
+          "
+          @click="openModal"
+        >
+          Open modal
+        </button>
+        <Modal
+          :is-open="isOpen"
+          backdrop="dark"
+          :full-screen="true"
+          max-width="480px"
+          @on-close="closeModal"
+        >
+          <div style="padding: 24px 56px 28px 24px;">
+            <h2 style="margin: 0 0 10px; font-size: 1.2rem;">Dismiss me</h2>
+            <p style="margin: 0; color: #444; line-height: 1.55;">
+              Closing updates local state in the story so you can open again from the button.
+            </p>
+          </div>
+        </Modal>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Minimal host page with local `isOpen` state to demonstrate open/close behaviour.',
+      },
+    },
+  },
 }

package/src/components/modals/modalBody/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <BodyElement>
+    <slot></slot>
+  </BodyElement>
+</template>
+
+<script>
+  // To use:
+  // import ModalBody from "@eturnity/eturnity_reusable_components/src/components/modals/modalBody"
+  // <modal-body>{{ $gettext('body text') }}</modal-Body>
+
+  import styled from 'vue3-styled-components'
+
+  const BodyElement = styled.div`
+    color: ${(props) => props.theme.semanticColors.teal[800]};
+    font-family: inherit;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+    letter-spacing: 0;
+  `
+
+  export default {
+    name: 'ModalBody',
+    components: {
+      BodyElement,
+    },
+  }
+</script>

package/src/components/modals/modalButtonContainer/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <ButtonsContainer :stretch="stretch">
+    <slot></slot>
+  </ButtonsContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+
+  const buttonsContainerAttrs = {
+    stretch: Boolean,
+  }
+
+  const ButtonsContainer = styled('div', buttonsContainerAttrs)`
+    display: flex;
+    justify-content: ${(props) => (props.stretch ? 'flex-start' : 'flex-end')};
+    gap: 8px;
+
+    ${(props) =>
+      props.stretch &&
+      `
+        width: 100%;
+        > * {
+          flex: 1 1 0;
+          min-width: 0;
+        }
+      `}
+  `
+
+  export default {
+    name: 'ModalButtonContainer',
+    components: {
+      ButtonsContainer,
+    },
+    props: {
+      stretch: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  }
+</script>

package/src/components/modals/modalButtonContainer/modalButtonContainer.stories.js

@@ -0,0 +1,59 @@
+import ModalButtonContainer from './index.vue'
+
+export default {
+  title: 'Components/Modals/ModalButtonContainer',
+  component: ModalButtonContainer,
+  tags: ['autodocs'],
+  argTypes: {
+    stretch: {
+      control: 'boolean',
+      description:
+        'When true, children buttons stretch to fill the container width.',
+    },
+    buttons: {
+      control: { type: 'range', min: 1, max: 3, step: 1 },
+      description: 'Number of buttons rendered in the slot (1 to 3).',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { ModalButtonContainer },
+  setup() {
+    const labels = ['Cancel', 'Save', 'Confirm']
+    return { args, labels }
+  },
+  template: `
+    <div style="width: 420px; border: 1px dashed #cbd5e1; padding: 12px;">
+      <ModalButtonContainer :stretch="args.stretch">
+        <button
+          v-for="(label, idx) in labels.slice(0, args.buttons)"
+          :key="idx"
+          style="padding: 8px 12px; border: 1px solid #94a3b8; border-radius: 6px; background: #fff;"
+          type="button"
+        >
+          {{ label }}
+        </button>
+      </ModalButtonContainer>
+    </div>
+  `,
+})
+
+export const Minimal1Button = Template.bind({})
+Minimal1Button.args = { stretch: false, buttons: 1 }
+
+export const Minimal2Buttons = Template.bind({})
+Minimal2Buttons.args = { stretch: false, buttons: 2 }
+
+export const Minimal3Buttons = Template.bind({})
+Minimal3Buttons.args = { stretch: false, buttons: 3 }
+
+export const Stretch1Button = Template.bind({})
+Stretch1Button.args = { stretch: true, buttons: 1 }
+
+export const Stretch2Buttons = Template.bind({})
+Stretch2Buttons.args = { stretch: true, buttons: 2 }
+
+export const Stretch3Buttons = Template.bind({})
+Stretch3Buttons.args = { stretch: true, buttons: 3 }
+